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实例来挂载到
上，
也就是把我们的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项目的各个文件的作用和联系，
掌握了前后端分离开发的基础，后端如何处理数据提交给前端，
前端又是如何进行数据渲染的。