VUE项目总结

目录

1.项目简介

2.项目用到的知识

3.项目部分截图以及展示

4.项目遇到的各种问题总结

---

注：之前发的零碎文章内容都整理到这里了，所以之前关于这个项目的就都删掉了，还有就是CSDN这个编辑器排版真的垃圾

1.项目简介

这个项目是基于vue2.6.10使用vue-cli3.10开发前后端分离的的学员管理系统。系统分为教师学生和首页三个模块。教师教师模块中可以对教师信息进行增删改查，学生模块还嫩选择不同的授课教师。该系统还有登陆注册修改密码功能。

2.项目用到的知识

• 基础版本：vue2.x版本更加稳定，bug较少，遇到开发问题更容易在网上找到解决办法。虽然vue3加载速度更快体积更小，打包速度有很大的提升，但我个人对vue2的掌握更加牢固
• 前端开发：Vue-Router实现路由跳转，Vuex统一管理用户信息和登陆标识（token），axios实现跨域请求，webpack打包资源，Element UI进行页面展示
• 后端开发：Nodejs中的express搭建后台，bodyParser解析http请求体，md5对数据进行加密router进行路由请求，mongo数据库储存数据

3.项目部分截图以及展示

前端的public中存放的是静态资源，一般包括html页面，图标，背景图像之类的；
该应用是SPA结构，所以只有一个html页面；
src文件夹下的utils文件夹中是封装好的axios对象，供接口调用，
进行跨域请求api中封装着我们各种供后台调用的接口，
正是这些接口保证着我们能把前后台分离开发的同时还能传输数据；
App.vue是根组件，component是登陆后直接显示的组件，
views里是需要路由的各种组件；main.js是入口文件，
vue实例就是在mian.js中创建然后挂载到html上的；
permission是守卫路由，它会拦截并检测路由，若没有登陆则无法访问到系统内

后端中app.js是启动文件，router中封装着所有提供给前端的api；
student.js，user.js，teacher.js是数据库数据的校验对象

4.项目遇到的各种问题总结

（1）App.vue文件是干啥用的？render函数到底有什么用？
App.vue就是项目最初始的展示页面，它当中的内容会在你输入你都地址时直接展示

例如这里的h1标签，当访问下面终端里的地址时会直接显示

即使html页面时这么写的

但是这是为什么呢？
这就是main.js发挥作用了
main.js一般作为我们程序的入口函数，
其中的render函数，作用就是把我们创建的vue实例来挂载到<div id="app">上，
也就是把我们的App组件挂载到html页面中，替换掉html中挂载位置里原有的东西。
当我们右键选择显示页面源码时，才会看到真正的html代码

（2）数据是怎么通过前台传到后台又经过处理验证传回前台的？
我们来拿注册功能举例子。首先在注册的组件中调用register方法（46行引入的），
接下来在第90行调用，把数据传给后台，验证之后根据传回来的flag值来执行接下来的操作

下面就是封装好的register方法，方法中的method和url对应到后台台的路由请求，
当二者都匹配时进行数据验证，执行结束之后会把返回的信息存储到res中，前台通过res.获取即可
（3）在登陆时token的储存问题
首先说一下token是什么。token是在我们注册账号时后台创建的一个状态标识，
跟随我们的账号密码等信息一起存在数据库中。
当我们登录时，需要利用获取用户信息，把和用户信息token存到浏览器的localstorage中，
以此来表示用户处于登陆状态。
在存储时，要从响应回来的数据拿，也就是res。
用resp.data.token访问数据能成功，而 res.data.data.token却不行

（4）AppNavbar中index的注释，刷新问题

当我们引入ElemenUI的界面时，如果用到路由则一定要使用这两行代码，不然路由跳转不好使
（5）当我们使用ElemenUI组件时里面需要传表单的ref属性

传给下方方法时一定到带引号，声明为字符串，
如101行和102行，不然会识别为变量，报出undefined的错

（6）添加学生信息的里的选择教师和查询栏里的选择教师有冲突

因为这两个功能选择教师是都弹出的是同一个表单，所以不加特殊的标识就会全部回显到一个功能上。
因为学生需要选择教师，所以把教师组件注册成学生组件的子组件，
然后利用教师组件定义props接收值，学生组件用v-bind来传值确定那个信息需要显示哪个不需要显示，
使用教师组件时绑定一个事件，
教师组件通过$emit来触发option-teacher间接触发学生组件的optionTeacher。
为了避免再选择教师是回显错误，我们设置一个标识isEdit，当处于编辑是它是true

当点击编辑按钮时先触发editOptionTeacher把标识设为true，
然后触发optionTeacher方法，进行逻辑判断并获取数据
（7）前端后端 APIIP 一样，但是端口不一样，所以存在跨域问题
 跨域解决办法: 通过代理请求的方 式解决，
将 API 请求通过代理服务器请求到 API 服务器。开发环境中，
使用devServer.proxy选 项进行代理配置

以上就是我在写项目时遇到的众多问题的一部分。
通过此项目我了解了项目开发的基础流程和步骤，
更深刻的理解了vue项目的各个文件的作用和联系，
掌握了前后端分离开发的基础，后端如何处理数据提交给前端，
前端又是如何进行数据渲染的。