Django+Vue.js搭建前后端分离项目 web前后端分离项目实践


一,正常搭建前后端分离项目流程
1.创建django项目
命令:
django-admin startproject ulb_manager结构:├── manage.py
└── ulb_manager
├── __init__.py
├── settings.py
├── urls.py
└── wsgi.py2.进入项目根目录,创建一个app作为项目后端命令:cd ulb_manager
python manage.py startapp backend结构比上面最基本的,多了一块backend3.使用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 build5.使用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项目已经可以正常运行了。正常运行的界面如下:

运行界面二,安装vue.js如果电脑上,没有vue.js,以下是安装vue.js的过程:1.node.jsvue.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已经安装完成。

作者:Royal_KinM
链接:http://www.jianshu.com/p/a463e97def9c
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。



转载于:https://juejin.im/post/59f942ea6fb9a0452341314c

你可能感兴趣的:(Django+Vue.js搭建前后端分离项目 web前后端分离项目实践)