1、先要下载安装Django包
PIP install Django
2、利用命令行创建Django项目jswf
django-admin startproject mysite
创建成功后目录如下
.
├── manage.py
└──mysite
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
3、在jswf目录下创建后台应用项目作为项目后端
cd mysite
python manage.py startapp backend
创建成功后目录如下
.
├── backend
│ ├── __init__.py
│ ├── admin.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── manage.py
└── mysite
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
4、配置Django项目的数据库:
django中默认的数据库为sqlite3，即新建项目后配置文件（settings.py）中关于数据库的初始配置如下：
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
在django中将配置改为：
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'mall',
'USER': 'rinka',
'PASSWORD': 'rinka0414',
'HOST': 'localhost',
'PORT': '3306',
}
}
其中：
DATABASE_ENGINE即为“背景”中所提到的那些数据库服务器
DATABASE_NAME将数据库名称告知 django
DATABASE_USER告诉 django 用哪个用户连接数据库
DATABASE_PASSWORD 告诉django连接用户的密码
DATABASE_HOST告诉 django 连接哪一台主机的数据库服务器
DATABASE_PORT告诉 django 连接数据库时使用哪个端口
如果使用的是自己的数据库，比如MySQL，最重要的一步，记得在项目同名文件夹下的__init.py__中，加入：
import pymysql
pymysql.install_as_MySQLdb()
其中pymysql包同样先使用PIP下载安装。
pip install pymysql
如果没有导入pip install pymysql包会报错：
django.core.exceptions.ImproperlyConfigured: Error loading MySQLdb module: No module named'MySQLdb'
5、使用vue-cli在根目录创建一个名称叫【frontend】的Vue.js项目作为项目前端
vue-init webpack frontend
创建成功后目录如下
.
├── backend
│ ├── __init__.py
│ ├── admin.py
│ ├── migrations
│ │ └── __init__.py
│ ├── models.py
│ ├── tests.py
│ └── views.py
├── frontend
│ ├── README.md
│ ├── build
│ │ └── ....
│ ├── config
│ │ ├── dev.env.js
│ │ ├── index.js
│ │ ├── prod.env.js
│ │ └── test.env.js
│ ├── index.html
│ ├── package.json
│ ├── src
│ │ ├── App.vue
│ │ ├── assets
│ │ │ └── logo.png
│ │ ├── components
│ │ │ └── HelloWorld.vue
│ │ └── main.js
│ ├── static
│ └── test
│ └── ...
├── manage.py
└── mysite
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py
我们可以在vue中加入一些常用组件，如element-ui等，再随便添加俩个例子
frontend/src/HelloWorld.vue文件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
6，使用 webpack 打包vue项目
cd frontend
npm install
npm run build
此时直接运行npm run dev也可以直接查看前端 vue界面
构建完成会生成一个文件夹，名字叫dist，里面有一个 index.html 和一个 文件夹static。
7， 使用Django的通用视图 TemplateView修改静态指向路径（就是让Django访问目录指向我们刚才打包的dist/index.html）
找到项目根 ulb_manager/urls.py文件作出如下修改
fromdjango.contribimport adminfromdjango.urlsimport pathfromdjango.views.generic.baseimportTemplateView //注意加上这句
urlpatterns = [
# path('admin/', admin.site.urls),path('admin/', admin.site.urls),
path(r'', TemplateView.as_view(template_name="index.html")),
]
8、配置Django项目的模板搜索路径和静态文件搜索路径 找到根目录下 ulb_manager/settings.py文件并打开，找到TEMPLATES配置项，修改如下:
TEMPLATES = [
{
'BACKEND':'django.template.backends.django.DjangoTemplates',
# 'DIRS': [],'DIRS':['frontend/dist'],
'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',
],
},
},
]# Add for vue.jsSTATICFILES_DIRS = [
os.path.join(BASE_DIR, "frontend/dist/static"),
]
9、到此基本就配置完成了，运行命令就可以直接查看效果
python manage.py runserver
记录一些踩过的坑
1、django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.
如果你的Django是最新的2.2,PyMySQL也是最新的0.93的话，你会发现Django会报错：
django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.3.
这个是Django对MySQLdb版本的限制，我们使用的是PyMySQL，所以不用管它
在Python安装路径下的Python36-32\Lib\site-packages\django\db\backends\mysql\base.py文件下，注释下面语句
if version < (1,3,3):
raise ImproperlyConfigured("mysqlclient 1.3.3 or newer is required; you have %s"% Database.__version__)
这样就可以顺利运行了。
2、AttributeError: ‘str‘ object has no attribute ‘decode‘
紧接着上一个错误，出现了AttributeError: ‘str‘ object has no attribute ‘decode‘，发现是对字符串进行了decode解码操作：（一般对字符串进行编码，二进制进行解码）
其实也是python3的问题，我们用了pymysql，所以也可以不管他
在Python安装路径下的Python36-32\Lib\site-packages\django\db\backends\base\mysql\operations.py147行
query = query.decode(errors='replace')
改为
query = query.encode(errors='replace')
网友评论