从零开始,1周内搭建出内含复杂深度学习作图分析功能的网站,很肝,但是很有收获,问了很多大佬,查了很多资料,碰了很多壁,写了很多代码,测试,学习,趁着刚做完,写文章总结复盘一下,我尽量以我喜欢的通俗的逻辑写出来。
目录
一.搭建前后端分离项目(从零开始)
二.框架搭建
三.路由的配置
四.总结
一.搭建前后端分离项目(从零开始)
前端使用技术栈: vue3 + vue-router + webpack
我使用的UI库: element-ui
后期会用到的(网络)请求:axios
前端脚手架构建工具:vue-cli
后端技术栈:Python+Django
数据库: MySQL
前端技术栈选择原因:Vue是如今最火的MVVM框架之一,它的优势是双向数据绑定、文件组件化、生态较完善等。
后端技术栈选择原因:Django是基于Python的一款轻量级的后端框架,适合个人全栈快速开发,
前后端分离模式选择原因:实现并行开发,开发结束后需要进行独立部署,前端通过ajax来调用http请求调用后端的restful api。前端只需要关注页面的样式与动态数据的解析&渲染,而后端专注于具体业务逻辑。
二.框架搭建
1.环境配置:
(1)安装Node.js和Python
(2)安装Django以及依赖包:
通过Pycharm安装 Django==4.0.2 pymysql==0.9.3djangorestframework==3.1.3
(3)安装cnpm(直接用npm可行,但需科学上网)
$ npm install -g cnpm --registry=https://registry.
(4)安装Vue-cli脚手架构建工具
$ cnpm install -g vue-cli
2.项目框架搭建
(1)创建一个文件夹存放项目(最好每完成一项进度上传一次github方便出错复盘涵衍)
(2)进入文件夹目录,打开命令行
(1)在命令行界面输入下列指令,创建Django应用——Web_Server:
$ django-admin startproject Web_Server
(2)进入创建的项目,创建应用app——APP1:
$ cd StuGrade$ python manage.py startapp APP1
(3)在appName的根目录,利用vue-cli创建vue应用——frontend:
$ vue-init webpack frontend
(4)进入vueName,安装模块并打包:
$ cd Web_Server$ cnpm install$ cnpm run dev
(5)项目目录如下
这里有必要说明了(to 小白)测试的时候,使用webstorm进入frontend目录进行vue前端的测试,使用pycharm进入Web_Server(一级不是里面的那个)进行测试
这是vue运行成功页面
这是django运行成功的页面
三.路由的配置
在说路由配置之前,我想先说明一些常见的理解误区
1.Vue是组件,而不是页面,这是什么意思呢,首先我们要知道,一个vue项目的运行,是从main.js文件为入口:项目加载的过程是index.tml->main.js->app.vue->index.js->XXX.vue。
其中,index.html中有一行代码十分重要
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>frontend</title></head><body><div id="app"></div><!-- <div id="Query"></div>--><div id="test"></div><!-- <div id="Query_Result"></div>--><!-- built files will be auto injected --></body></html>
这是什么意思呢,就是说,这一部分,会把app.vue的组件显示过来,也就是你在app里面写的html页面,同理,根据这个原理我们可以写出很多导航栏类型的网站,但是只有html有是不够的,系统读到了这一行代码,下一步是去main.js文件,我们需要在main.js文件里配置好,我们要在main.js里这么写,我把我的个人理解也放在注释里面了,欢迎参考指摘
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import Query from './views/Query'import QueryResult from './views/Query_Result'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({el: '#Query',// el才是《/》,下面的那个是本体,这个才是表面router,components: { Query },template: '<Query/>'// 也就是说:template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div>})new Vue({el: '#app',router,components: { App },template: '<App/>'})new Vue({el: '#Query_Result',router,components: { QueryResult },template: '<Query_Result/>'})
这两个配置好了,还差一步,就可以讲清楚了,app.vue有这么一行代码,这个是vue独有的,表示链接跳转显示内容,我们在index.js里面配置好路由,就可以把componts里的组件显示在这一行代码所在的位置了
<router-view/>
index.js配置:这里采用直接配置,如果看上去不美观可以创建一个route.js文件把路由写进去,export出来,导入index.js文件中:
import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'//读者注意,这里是1导入那个vue组件import Query from '@/views/Query'import QueryResult from '@/views/Query_Result'Vue.use(Router)export default new Router({routes: [{path: '/HelloWorld',//这一行写路由,也就是域名后面的地址name: 'HelloWorld',//这一行随便写,但是要和index.html里的id相同component: HelloWorld//这个就是组件,ctrl点击,如果能找到,那恭喜你成功了},{path: '/Query',name: 'Query',component: Query},{path: '/Query_Result',name: 'Query_Result',component: QueryResult}]})
四.总结
路由是用来跳转访问指定页面或者组件的,读者在写前端页面的时候需要牢记项目加载的过程是index.tml->main.js->app.vue->index.js->XXX.vue。灵活运用这个,我相信你会写vue和html一样流畅顺利,至于页面的点击跳转,之后有机会再讲吧,下一篇文章是:django读取数据库增添删改以及显示在前端(Django+Vue+Mysql,数据库管理数据分析网站)
(一)框架搭建 前端路由设置 自定义寻找指定路径(Django+Vue+Mysql 数据库管理数据分析网站)