搭建一个简单Django+vue 项目

简介：

Django是python的web开发框架，采用了MTV的框架模式，即模型Model，视图View和模版Template。

各自的职责为：

1. 模型（Model），即数据存取层：如何存取、如何验证有效性、包含哪些行为以及数据之间的关系等；
2. 模板(Template)，即表现层：如何在页面或其他类型文档中进行显示；
3. 视图（View），即业务逻辑层：存取模型及调取恰当模板的相关逻辑，模型与模板的桥梁

Vue则是一套用于构建用户界面的渐进式JavaScript框架，且非常容易与其它库或已有项目整合。

流程图解为：

主要步骤为：

1. 创建django项目：django-admin startproject appname(appname为你想要创建的项目名)

2. 进入项目根目录，创建一个app作为项目后端：

cd appname

python manage.py startapp childname(childname为app名)        

3. 使用vue-cli创建一个vuejs项目作为项目前端：

vue init webpack vuename(vuename为前端项目名称)

此时项目目录为：可以看见创建的目录

4. 配置搜索路径：

数据库配置：在settings.py文件中DATABASES，作如下更改：

app的路径配置：在settings.py文件中将childname写入INSTALLED_APPS，如图：

vue路径配置：在settings.py文件将['vueName/dist']写入TEMPLATES，如图：

以及settings.py中的STATICFILES_DIRS如下更改：

运行整个项目时，找到前端打包生成的文件，在appname下的urls.py内添加，且增加url时，要写入改文件，用来寻找对应函数

5. 书写文件：

• 在vuename/src/components新建了一个vue文件，里面写自己要实现的界面，并要引入自己使用的接口；
• 在chilename/下的models.py文件中写关于数据库建库信息，写好之后，运行：

python manage.py makemigrations childName  让 Django 知道在模型有一些变更

python manage.py migrate childName  创建表结构；

• 在chilename/下的views.py文件中写关于取值，前后端交互的函数；
• 在vuename/src/下新建一个文件夹api，下新建一个api.js，定义接口方法。

6. 若想在vue中编写的界面，展示到界面上的话，需要先打包vue文件，打包完成之后，会更新dist文件里的index.html和static文件夹内容，由于vue不是实时，所以每次更改vue文件时，都需要重新打包文件，若觉得这样麻烦的话，可以先单纯的调整界面，在与后端一起联调。

打包命令：

cd vuename

npm run build

单纯调界面的命令：开始时运行此命令，当界面有调整时，刷新界面，即成为最新

cd vuename

npm run dev

7. 运行：

前端界面打包之后，启动：

python manage.py runserver 127.0.0.1:80

ip和端口可以自己定义也可以默认，默认的话，可直接运行：

python manage.py runserver

8. 结果展示：

在这展示一下我自己写的一个简单的界面：直接访问你的ip：端口即可

数据库数据为：

这样的话，一个简单的Django+vue结合的界面搭建就完成了！

总结：

该种方式很好的实现了前后端代码分离，降低各功能模块之间的耦合性，方便变更，更容易重构代码，项目设置和语法都相对来说比较简单，可以更快的输出显示并且js库体积更小，可以在实施搭建过程中学到很多。