django简单项目搭建

django基础

安装python环境

安装虚拟环境

使用power shell

通过命令让当前shell无限制运行脚本(一些linux命令等也可以使用)

Set-ExecutionPolicy Unrestricted

使用cls清屏,使用clear也可以操作

使用pip安装对应模块,查看当前模块

pip freeze

没有任何反应是空的

 pip install virtualenv     # 安装虚拟环境

image-20211025140432372

虚拟环境的作用——实现跨平台使用,每个虚拟环境都是一个独立的空间

桌面新建:django-progect
cd ~
cd .\Desktop\django-project\
ls      # 空文件
virtualenv .    #在该文件加里下载对应的虚拟环境

image-20211025140848830

ls      #查看文件

image-20211025140917716

./Scripts\activate      # 切换虚拟空间
deactivate              # 取消虚拟空间

image-20211025141007690

 

在mac下
source bin/activite     # 出现虚拟空间

image-20211025141200144

在虚拟机里安装的任何不会影响到主机里

在项目里安装django模块

./Scripts/activate
pip install django

image-20211025142909260

问题:pip无法安装

(aa) PS D:\aa> pip install django
WARNING: Retrying (Retry(total=4, connect=None, read=None, redirect=None, status=None)) after connection broken by 'ProxyError('Cannot connect to proxy.', OSError(0, 'Error'))': /simple/django/
WARNING: Retrying (Retry(total=3, connect=None, read=None, redirect=None, status=None)) after connection broken by 'ProxyError('Cannot connect to proxy.', OSError(0, 'Error'))': /simple/django/
ERROR: Operation cancelled by user

原因:开了代理的原因,因为pip源是国内的

pip freeze

image-20211025143411607

创建django项目

django-admin startproject mysite
ls
cd ./mysite/
code . 启动当前项目

问题:code无法打开项目

原因:没有添加vscode的环境变量

image-20211025144804027

init		运行对应的项目文件
settings	配置信息,主机等等,打包上线,改成fasle
	databases{}的使用
	静态文件夹的使用
urls		路由的跳转,自己路由的写入
wsgi		没有操作,里边是一些关联

运行django项目

python manage.py runserver

image-20211025145813311

image-20211025145832549

解决在linux上的报错信息

image-20211025145937601

python manage.py migrate
python manage.py runserver

image-20211025150312738

在没有报错

image-20211025150350423

django后台管理系统

端口后加admin,进入后台界面

路由配置

使用命令创建子项目,mysite是主项目

image-20211025150704738

每当创建一个新项目,想让其如主项目进行关联,要在setting里配置关联项目

image-20211025150922433

来到urls.py,让其展示自己设置的内容

image-20211025151530662

复制到子项目

image-20211025151554147

在子项目写入要跳转的url

image-20211025154028483

写入路由跳转的文件函数

image-20211025154147326

在myapp子项目里创建templates模板,写入静态文件

image-20211025154255767

保存,查看

image-20211025154318338

构建bootstrap

打开官网,使用初学者模板,装饰home文件

https://getbootstrap.com/docs/5.1/getting-started/introduction/

将模板文件拷贝到basic文件中

image-20211025160234359

更改home文件

image-20211025160138498

点击浏览器刷新查看

image-20211025160303781

展示导航信息

使用bootstrap样式,将导航栏样式复制进basic文件中

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

image-20211025161021675

接下来开始修改样式

image-20211025161223725

image-20211025161144873

发现导航栏背景已经改变

 

image-20211025161705910

查看效果

image-20211025161755808

使用api接口

api.github.com

接口请求和解析

请求数据,来到views文件

https://api.github.com/users?since=0

为了json能够正常解析到html中们需要安装requests库

image-20211025163108793

安装完成后重新启动项目

然后写路由跳转文件

image-20211025171845740

在home文件中添加接口

image-20211025171916036

访问结果

image-20211025171933255

展示数据信息

在home文件中循环遍历列表取值

image-20211025181849050

结果

image-20211025182107655

要想拿到具体的值,x.login取得是login key的值

image-20211025182202133

去到了login的值

image-20211025182224221

使用卡片模板

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

image-20211025193933421

查看效果

image-20211025193954489

posted @ 2021-11-02 16:38  EpheSeren  阅读(105)  评论(0编辑  收藏  举报