从零开始,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.3 djangorestframework==3.1.3
(3)安装cnpm(直接用npm可行,但需科学上网)
$ npm install -g cnpm --registry=https://registry.npm.taobao
(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,数据库管理数据分析网站)
发布评论