（一）框架搭建，前端路由设置，自定义寻找指定路径（Django+Vue+Mysql，数据库管理数据分析网站）

从零开始，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.org

（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中有一行代码十分重要

这是什么意思呢，就是说，这一部分，会把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: ''
  // 也就是说:template: '' 表示用替换index.html里面的
})

new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

new Vue({
  el: '#Query_Result',
  router,
  components: { QueryResult },
  template: ''
})

 这两个配置好了，还差一步，就可以讲清楚了，app.vue有这么一行代码，这个是vue独有的，表示链接跳转显示内容，我们在index.js里面配置好路由，就可以把componts里的组件显示在这一行代码所在的位置了

 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，数据库管理数据分析网站）