代码地址
https://github.com/SAGE-likeWu/student_manage_fe.git
1.前端整体代码
2.先跑起来再说
右键json文件,点击show npm scripts,然后选择下方的start,双击start
成功启动,访问http://localhost:8080/login,出现登录界面,输入你设计的数据库表admin中的一条用户名和密码(后端保持启动)
登录成功表示基本前后端成功启动
3.整体介绍
大概介绍一下,具体功能以及如何使用建议初学者跟着网上的教学视频走,先建立整体概念
1:主要是页面样式与逻辑代码
2:前端路由
3:前端存储,该项目主要用到的就是存储用户token
4.代码结构
以登录界面为例,Login.Vue,主要分为三部分,template为界面样式,script是与后台进行交互的脚本,style是字体,颜色,背景等的参数控制
template
很多组件可直接拷贝element网页中的代码,然后根据自己的需求进行修改https://element.eleme.cn/#/zh-CN/component/form
script
核心部分就是这一部分了,如何将后台的数据显示在该界面,又如何将数据传回后台都是通过这一部分实现。简单介绍一下这里的逻辑。
用户在登录界面点击登录按钮后便会触发script中的login()方法
调用login()方法,逻辑见注释,
这就是一个界面的完整逻辑,其他界面可类比学习,复杂的页面会涉及更多更复杂的逻辑,自己根据代码多琢磨,博主也是自己挠了三四天脑袋,只有自己消化了才整体掌握。