Django+Vue.js搭建前后端分离项目的示例

在写这篇文章的时候，顺带学习了一下关于Markdown的使用方法。

笔者是个渣渣，一切都是自己在摸索的学着，所以也谈不上什么体系、系统学习。在这里主要是为了实现把项目前后端分离开。

这里假设你的电脑上所需的django、vue.js已经有了，如果没有，往下拉就是vue.js的安装流程。django前面写过了，就不赘述了。

一，正常搭建前后端分离项目流程

1.创建django项目

命令：

结构：

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

命令：

结构比上面最基本的，多了一块backend

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

命令：

界面：

Project name:（默认回车键）

Project description：（默认回车键）

Auther：（输入自己的名字，随意）

...：（默认yes和回车键，暂时不太懂，刚开始接触，网上也没查到这一块东西，就全部选择默认或者Yes了）

结构多了一块frontend

结构总结：

项目根目录有两个新文件夹，一个叫backend，一个叫frontend，分别是：backend Django的一个app、frontend Vue.js项目

4.使用webpack打包Vue.js项目

命令：

5.使用Django的通用视图TemplateView

在项目根目录下urls.py（即ulb_manager/urls.py）使用通用视图创建最简单的模板控制器。

代码：

6.配置Django项目的模板搜索路径

打开settings.py(即ulb_manager/settings.py)找到TEMPLATES配置项，修改如下：

PS：之前学习django，是要在settings.py下的INSTALLED_APPS配置项下添加app的，所以我自己添加了'backend'。

7.配置静态文件搜索路径

打开settings.py(ulb_manager/settings.py)，找到STATICFILES_DIRS配置项，配置如下：

如果没有，自己添加。

到这里，运行django项目已经可以正常运行了。正常运行的界面如下：

二，安装vue.js

如果电脑上，没有vue.js，以下是安装vue.js的过程：

1.node.js

vue.js的推荐安装环境是node.js，因此，我是先安装的node.js。

登陆node.js官网，下载最新的v6.11.1版本。

2.npm

集成于Node.js中，不需要装。

3.cnpm

在命令行中输入命令：

等待安装完成。

4.安装vue-cli脚手架构建工具

在命令行中输入命令：

等待安装结束。

到此，vue-cli已经安装完成。

PS:暂时摸不清楚如何把文件的目录树结构在Markdown里写出来。

有所修改，因为完全按照原版搬上来根本无法运行。写了一个最基本的框架。像个无头苍蝇一样……（而且也买不起云主机……新手也没必要买）

Markdown用起来觉得很自由，而且还能调用一些html的指令，还是蛮有意思的，虽然还没摸清楚，到底能调用多少、哪些指令……

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!