Spring boot+Vue前后端分离项目实战——学生管理系统【四】前端

代码地址

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（）方法，逻辑见注释，

这就是一个界面的完整逻辑，其他界面可类比学习，复杂的页面会涉及更多更复杂的逻辑，自己根据代码多琢磨，博主也是自己挠了三四天脑袋，只有自己消化了才整体掌握。