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


Posted in Javascript onAugust 07, 2017

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

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

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

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

1.创建django项目

命令:

django-admin startproject ulb_manager

结构:

├── manage.py
└── ulb_manager
  ├── __init__.py
  ├── settings.py
  ├── urls.py
  └── wsgi.py

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

命令:

cd ulb_manager
python manage.py startapp backend

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

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

命令:

vue-init webpack frontend

界面:

Project name:(默认回车键)

Project description:(默认回车键)

Auther:(输入自己的名字,随意)

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

结构多了一块frontend

结构总结:

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

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

命令:

cd frontend
npm install
npm run build

5.使用Django的通用视图TemplateView

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

代码:

urlpatterns = [
  url(r'^admin/', admin.site.urls),
  url(r'^$',TemplateView.as_view(template_name="index.html")),
  #url(r'^api/',include('backend.urls', namespace='api'))
  #最后一行代码我注释掉,因为运行报错:Error:No module named 'backend.urls',暂时解决不掉,但是我运行的时候,注释掉这行代码,是能正常运行的。
]

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

打开settings.py(即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',
      ],
    },
  },
]

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

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

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

# Add for vue.js
STATICFILES_DIRS = [
  os.path.join(BASE_DIR, "frontend/dist/static"),
]

如果没有,自己添加。

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

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

运行界面

二,安装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

在命令行中输入命令:

npm install -g cnpm --registry=http://registry.npm.taobao.org

等待安装完成。

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

在命令行中输入命令:

npm install -g vue-cli

等待安装结束。

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ajax请求在数据量大的时候出现超时的解决方法
Feb 27 Javascript
JS实现两个大数(整数)相乘
Apr 28 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
基于jquery日历价格、库存等设置插件
Jul 05 jQuery
详谈Node.js之操作文件系统
Aug 29 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
React进阶学习之组件的解耦之道
Aug 07 #Javascript
详解前端路由实现与react-router使用姿势
Aug 07 #Javascript
React中使用collections时key的重要性详解
Aug 07 #Javascript
react路由配置方式详解
Aug 07 #Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 #Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 #Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 #Javascript
You might like
php实现简易聊天室应用代码
2015/09/23 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
Javascript实现简单的富文本编辑器附演示
2014/06/16 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
一个JavaScript用逗号分割字符串实例
2014/09/22 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
AngularJS入门教程之Scope(作用域)
2016/07/27 Javascript
jQuery简单实现列表隐藏和显示效果示例
2016/09/12 Javascript
jQuery validate插件功能与用法详解
2016/12/15 Javascript
Vue中的v-for循环key属性注意事项小结
2018/08/12 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
python中的sort方法使用详解
2014/07/25 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
python 函数的缺省参数使用注意事项分析
2019/09/17 Python
python 画函数曲线示例
2019/12/04 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
教师对学生的寄语
2014/04/03 职场文书
三万活动总结
2014/04/28 职场文书
软件项目实施计划书
2014/05/02 职场文书
乔迁之喜答谢词
2015/01/05 职场文书
金榜题名主持词
2015/07/02 职场文书
学习经验交流会总结
2015/11/02 职场文书
2016学校先进党组织事迹材料
2016/02/29 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
微信小程序APP的事件绑定以及传递参数时的冒泡和捕获
2022/04/19 Javascript