Pycharm使用django框架+bootstrap前端项目教程

django的使用

1. 安装 django

pip install django

如果使用 pycharm，可以不用安装，直接创建 django 项目，后续 pycharm 会提示你是否安装 django 包，点击确定就会自动帮你下载 django 包。创建项目的方法见下文。

2. 创建项目

django 类似于 vue，支持分开实现不同的功能，这个 application 就相当于是一个模块，可以创建多个，且最后的静态文件例如 img，css，js 等都会放到单独的 app 文件夹目录

例如你可以创建 app01，实现登录和注册功能；创建 app02，实现用户管理功能；创建 app03，实现后台管理功能等等，这样可以使项目更规范，更容易维护

application name 就是应用名字，自己起一个，一般是 app

如果刚开始没有写 application name 或者想创建多个模块，则进入项目后，可以用命令行创建模块，代码如下，最后面的参数就是模块的名称

python manage.py startapp app

3. 项目结构

app

|—— migrations                #【数据库变更】目前没啥用

        |—— __init__.py      

|—— __init__.py               # 目前没啥用

|—— admin.py                  #【后台管理】目前没啥用

|—— apps.py                     #【启动类】目前没啥用

|—— models.py                  #【对数据库操作】常用

|—— tests.py                     #【单元测试】目前没啥用

|—— views.py                   #【编写函数】常用

djangoProject

|—— __init__.py                # 目前没啥用

|—— asgi.py                      # 【接收网络请求】不需要改动

|—— setting.py                  # 【项目配置】常用

|—— urls.py                       # 【URL与函数的关系】常用

|—— wsgl.py                     # 【接收网络请求】不需要改动

templates

manage.py                        # 【项目的管理，启动项目，创建app模块】不需要改动

你可能会看到其他的项目会使用 templates 文件夹，但本文不会使用。

笔者为了更规范的编写代码，会在每个 app 模块下新建 templates 文件夹，所以最外层的 templates 文件夹可以删除。

删除最外层的 templates 文件夹后，需要改写 setting.py 文件，找到下面的代码位置

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates']       
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

 把 DIRS 的属性删除，改完如下

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

这里解释一下，html 文件后续会放到每个 app 模块对应的 templates 文件夹里，如果不删除这个属性，则程序会默认到最外层的 templates 文件夹找 html 文件，从而出现找不到 html 的问题。

4. 运行项目

现在假设你有一个写好的 bootstrap 前端项目，该如何运行呢

首先在 app 模块下创建 templates 文件夹，将 bootstrap 前端的 html 文件放进去

然后在 app 模块下创建 static 文件夹，将 bootstrap 前端的所有静态文件放进去，例如 img，css， js， fonts 等等，直接复制粘贴即可

此时还需要打开 setting.py 改静态文件的路径，找到

STATIC_URL = 'static/'

改为

STATIC_URL = '/static/'

这个原因类似于上面，如果不改，会在最外层的 static 文件夹里寻找静态文件

同时打开 html 文件，在最上面添加这样一行代码

{% load static %}

然后修改每个 html 文件里的所有引用静态文件的格式，例如

<link rel="stylesheet" href="css/bootstrap.min.css">

改为

<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">

这是 django 框架自带的结构  {%  ****  %}，用来加载静态文件。

使用这样的代码很方便，后续如果需要修改 static 文件夹的名称，你不需要修改每一个引用的地址，只需要把配置文件 setting.py 的静态文件的路径名称修改即可。

接下来打开 urls.py 文件，将下面的代码删除或者注释掉

path('admin/', admin.site.urls)

然后从 app 模块导入函数，代码如下

from app import views
urlpatterns = [
    #path('admin/', admin.site.urls),
    path('index/', views.index),
]

学过前端的人都知道，这个相当于配置路由，意思是当你访问 http://localhost::8000/index/ 网站时，自动调用 views.py 文件里的 index 函数

下面我们打开 app 模块里的 views.py 文件，写一下 index 函数，这里我们期待返回一个网页，当然你也可以返回其他的东西，例如字符串等等。程序会自动把你返回的东西呈现在网页上。

返回网页代码如下：

from django.shortcuts import render
def index(request):
    return render(request, 'index.html')

返回字符串代码如下：

from django.http import HttpResponse
def index(request):
    return HttpResponse("HelloWorld！")

本文讲述如何与 bootstrap 前端项目结合，所以选择返回网页

现在点击 pycharm 项目的绿三角，就可以运行啦

此时终端会出现对应的端口，点击访问

出现下面的页面，是因为没有对应到 index 路由

访问 http://127.0.0.1:8000/index/ 即可正常访问网页啦

好了本期到这里就结束啦，后续关于数据库的操作，表单的识别等等会再更新哦！！！