Vue+Django+MySQL搭建指南(个人全栈快速开发)
前言:本文适合有一定Vue或Django基础的开发者阅读,文中不会特别强调技术细节,只强调搭建的流程和配置,若有技术细节不懂请自行谷歌。
一 技术栈选择
前端Vue的所有技术栈: vue2 + vuex + vue-router + webpack
UI库: element-ui
网络请求:axios
前端脚手架构建工具:vue-cli
后端技术栈:Python+Django
数据库: MySQL
前端技术栈选择原因:Vue是如今最火的MVVM框架之一,它的优势是双向数据绑定、文件组件化、生态较完善等。
后端技术栈选择原因:Django是基于Python的一款轻量级的后端框架,适合个人全栈快速开发,我青睐于它的原因是它的ORM方便高效、配置简单清晰、自带token等。
二 项目初始化
本项目的系统环境是:Windows
本项目的开发环境是:Node 8.11.2 + Vue 2.9.3 + Python 2.7.15 + Django 1.11.6
配置开发环境:
(2)安装Django:
$ pip install Django==1.11.6
(3)安装cnpm(直接用npm可行,但需科学上网)
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
(4)安装Vue-cli脚手架构建工具
$ cnpm install -g vue-cli
工具介绍:
npm: Node.js下的包管理器。
webpack: 前端模块化工具,它主要的用途是通过 CommonJS 的语法把所有PC端需要发布的静态资源做相应的准备,比如资源的合并和打包。
vue-cli: 用户生成Vue工程模板。
三 项目搭建
(1)在命令行界面输入下列指令,创建Django应用——appName:
$ django-admin startproject appName
(2)进入创建的项目,创建应用app——childName:
$ cd appName
$ python manage.py startapp childName
(3)在appName的跟目录,利用vue-cli创建vue应用——vueName:
$ vue-init webpack vueName
(4)进入vueName,安装模块并打包:
$ cd vueName
$ cnpm install
$ cnpm run build
(5) 找到Django应用——appName根目录里的urls.py(即appName/urls.py),配置url路径:
(6)在childName文件根目录里的settings.py添加python的app应用:
(7)本项目数据库为mysql,所以在childName文件根目录里的settings.py修改数据库信息:
(8)配置childName文件根目录里的settings.py,"DIRS"修改为['vueName/dist']:
(9)修改Django的模板渲染路径及中国时区:
(9) 在demo_app下views.py 中写方法,例如:
(10)修改appName的urls,然后在childName文件夹中创建新的urls,作为views方法的urls:
此时访问数据的url为一级目录加二级目录,如‘/demo/get_data/’
(11) 在安装axios依赖,引入并配置相关模块后$ npm run build打包,然后$ python manage.py runserver 测试接口:
下面是我写的简单测试实例:
四 可能会遇到的坑
(1)我开启python服务器后,在url地址栏输入地址却跳转失败了,我该怎么办?
答:你写的是单页面应用,vue-router有两种模式,一种是hash,一种是history,这两种路由模式都不是真正的改变url地址,所以前端路由的设置的路由后端是访问不到,因此你必须在后端再次添加相应的url并将渲染页面指向dist下的index.html。
方法一:在urls中编写:
url(r'^$', TemplateView.as_view(template_name="index.html"))
方法二:在views中这样写
def index(request):
return render(request, 'index.html'})
(2)我报错缺少字段是什么情况?
答:检查是否及时更新了models.py。更新的语法为:
python manage.py inspectdb > childName/models.py
五 本项目架构上的缺点及解决办法:
缺点:不得不说,随着项目的不断扩大,本项目架构上的缺点变得越来越明显。因为,django只能渲染vue应用打包后的文件,这意味着当前端非常依赖后端数据库的数据时就会产生经常需要vue应用打包的情况,这浪费了很多时间。
解决办法:增添BFF层(用户体验适配层),利用Node做接口转接,Node调用Python接口传数据到前端,Python只做服务层。不过本方案也有明显的缺点,就是不太适合个人全栈开发。说到这里,大家如果有好的建议希望可以告诉我,十分感谢!
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Java 多线程
多线程作为Java中很重要的一个知识点,在此还是有必要总结一下的。 一.线程的生命周期及五种基本状态 关于Java中线程的生命周期,首先看一下下面这张较为经典的图: 上图中基本上囊括了Java中多线程各重要知识点。掌握了上图中的各知识点,Java中的多线程也就基本上掌握了。主要包括: Java线程具有五中基本状态 新建状态(New):当线程对象对创建后,即进入了新建状态,如:Thread t = new MyThread(); 就绪状态(Runnable):当调用线程对象的start()方法(t.start();),线程即进入就绪状态。处于就绪状态的线程,只是说明此线程已经做好了准备,随时等待CPU调度执行,并不是说执行了t.start()此线程立即就会执行; 运行状态(Running):当CPU开始调度处于就绪状态的线程时,此时线程才得以真正执行,即进入到运行状态。注:就 绪状态是进入到运行状态的唯一入口,也就是说,线程要想进入运行状态执行,首先必须处于就绪状态中; 阻塞状态(Blocked):处于运行状态中的线程由于某种原因,暂时放弃对CPU的使用权,停止执行,此时进入阻塞状态...
- 下一篇
【JavaScript高级进阶】JavaScript变量/函数提升的细节总结
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81478248 // 测试1 console.log('----------test1--------------'); console.log(global); // undefined var global = 'hahaha'; console.log(global); // hahaha function fn(){ console.log(a); // undefined var a = 'aaa'; console.log(a); // aaa } // 如果一个变量没有定义的话就去输出,就会报出错误 //console.log(a); // error : undefined fn(); // 代码执行思路解析 /*var global; // 变量提升,全局作用域范围内,此时只是声明,并没有赋值 console.log(global); // undefi...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Mario游戏-低调大师作品
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Red5直播服务器,属于Java语言的直播服务器
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS6,CentOS7官方镜像安装Oracle11G
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2更换Tomcat为Jetty,小型站点的福音