介绍
本篇文章为大家展示了怎么在Django中使用Vue.js实现前后端分离,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强>一、正常搭建前后端分离项目流程
<强> 1。创建django项目
命令:
django-admin startproject ulb_manager 结构:
├──,jobs
└──ulb_manager
,,├──,__init__ . py
,,├──,settings.py
,,├──,urls . py
└才能──,wsgi.py <强> 2。进入项目根目录,创建一个应用作为项目后端
命令:
cd ulb_manager
python manage.py startapp 后端 结构比上面最基本的,多了一块后端
<强> 3。使用vue-cli创建一个vue。js项目作为项目前端
命令:
vue-init webpack 前端 界面:
项目名称:(默认回车键)
项目描述:(默认回车键)
作者:(输入自己的名字,随意)
…(默认是的和回车键,暂时不太懂,刚开始接触,网上也没查到这一块东西,就全部选择默认或者是的了)
结构多了一块前端
结构总结:
项目根目录有两个新文件夹,一个叫后台,一个叫前端,分别是:后端Django的一个应用,前端Vue.js项目
<强> 4。使用webpack打包Vue。js项目
命令:
cd 前端
npm 安装
npm run 构建 <强> 5。使用Django的通用视图TemplateView
在项目根目录下urls . py(即ulb_manager/url。py)使用通用视图创建最简单的模板控制器。
代码:
urlpatterns =, (
url才能(" # 39;管理/^ & # 39;,,admin.site.urls),
,,url (" # 39; ^ $ & # 39;, TemplateView.as_view (template_name=癷ndex.html")),
#才能url (" # 39; api/^ & # 39;,包括(& # 39;backend.urls& # 39;,,名称空间=& # 39;api # 39;))
#才能最后一行代码我注释掉,因为运行报错:错误:No module named & # 39; backend.urls& # 39;,暂时解决不掉,但是我运行的时候,注释掉这行代码,是能正常运行的。
) <强> 6。配置Django项目的模板搜索路径
打开settings.py(即ulb_manager/settings.py)找到模板配置项,修改如下:
TEMPLATES =, (
{才能
,,,& # 39;后端# 39;:,& # 39;django.template.backends.django.DjangoTemplates& # 39;
,,,# & # 39;dirs # 39;:, [],
,,,& # 39;dirs # 39;:[& # 39;前端/dist # 39;],
,,,& # 39;APP_DIRS& # 39;:,真的,
,,,& # 39;选项# 39;:,{
,,,,,& # 39;context_processors& # 39;:,
,,,,,,,& # 39;django.template.context_processors.debug& # 39;
,,,,,,,& # 39;django.template.context_processors.request& # 39;
,,,,,,,& # 39;django.contrib.auth.context_processors.auth& # 39;
,,,,,,,& # 39;django.contrib.messages.context_processors.messages& # 39;
,,,,,,
,,,},
,,},
PS:之前学习django,是要在settings.py下的INSTALLED_APPS配置项下添加应用的,所以我自己添加了& # 39;后端# 39;。
<强> 7。配置静态文件搜索路径
打开settings.py (ulb_manager/settings.py),找到STATICFILES_DIRS配置项,配置如下:
#, Add for vue.js
STATICFILES_DIRS =, (
os.path.join才能(BASE_DIR,“前端/dist/static"),
) 如果没有,自己添加。
到这里,运行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
在命令行中输入命令:
npm install -g cnpm ——注册表=http://registry.npm.taobao.org 等待安装完成。
4。安装vue-cli脚手架构建工具
在命令行中输入命令:
npm install -g vue-cli 上述内容就是怎么在django中使用Vue.js实现前后端分离,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注行业资讯频道。
