web前端|js教程
javascript,Vue.js,Django
web前端-js教程
本篇文章主要介绍了Django+Vue.js搭建前后端分离项目的示例，具有一定参考价值，有兴趣的可以了解一下
仿京东网站源码,vscode选中高亮区域块,ubuntu切换boot,tomcat最大并行数,php接口爬虫,打开php错误日志,家装行业seo优化案例分类lzw
在写这篇文章的时候，顺带学习了一下关于Markdown的使用方法。
授权平台php源码,vscode更改字颜色,ubuntu 源 国内,tomcat本地目录配置,sycm爬虫,php导入excel日期,浦城seo联系方式,php网站商城源码,模板下载源码站lzw
笔者是个渣渣，一切都是自己在摸索的学着，所以也谈不上什么体系、系统学习。在这里主要是为了实现把项目前后端分离开。
asp小学教务源码,ubuntu 应用软件,中间件tomcat使用方法,爬虫用法电商,php最新系统学习交流,seo职业计划lzw
这里假设你的电脑上所需的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_managerpython 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 frontendnpm installnpm 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(ackend.urls, namespace=api)) #最后一行代码我注释掉，因为运行报错：Error:No module named ackend.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.jsSTATICFILES_DIRS = [ os.path.join(BASE_DIR, "frontend/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中，不需要装。
pm
在命令行中输入命令：
npm install -g cnpm --registry=http://registry.
等待安装完成。
4.安装vue-cli脚手架构建工具
在命令行中输入命令：
npm install -g vue-cli
等待安装结束。
到此，vue-cli已经安装完成。
PS:暂时摸不清楚如何把文件的目录树结构在Markdown里写出来。
有所修改，因为完全按照原版搬上来根本无法运行。写了一个最基本的框架。像个无头苍蝇一样……（而且也买不起云主机……新手也没必要买）
Markdown用起来觉得很自由，而且还能调用一些html的指令，还是蛮有意思的，虽然还没摸清楚，到底能调用多少、哪些指令……
