软件定制开发有哪些_关键词点击优化工具_网络营销的成功案例_如何在百度上推广业务

---

目录

一、项目展示

登录界面

登录界面灵感来源：《好看实用的六个html登录页面》

首页

班级管理界面

学生管理界面

基础设置界面

二、前置准备

注意在此项目的时候需要的技术栈为：
后端SpringBoot框架、MyBatis、前端vue框架、axios、Mysql数据库、(Interceptor)拦截器\过滤器（Fiter）

1、前端

1. 创建vue工程（具体的创建流程可以直接看这篇文章《Vue工程的创建（以及导入Element）》【这里我是是使用的vue2】）
2. 在工程文件下进行下载aoxios（npm install axios），在进行导入以及配置

2、后端

1. 创建SpringBoot项目（具体的创建流程可以直接看这篇文章《
   MyBatis（入门程序）》中的创建SpringBoot工程）
2. 导入MyBatis（具体的导入流程可以直接看这篇文章《
   MyBatis（入门程序）》

3、数据库准备

• 创建两个表用来存储数据创建代码下

学生数据库：

-- auto-generated definition
create table studentmanage
(id          int auto_increment comment 'id'primary key,username    varchar(20)                  not null comment '账户
',name        varchar(10)                  not null comment '名字
',password    varchar(15) default '123456' not null comment '密码',create_time datetime                     not null comment '创建时间',gender      tinyint                      not null comment '性别（1：男，0:女）',update_time datetime                     not null comment '修改时间',entryDate   date                         null comment '入学时间/入职时间',age         tinyint                      null comment '年龄',phone       varchar(11)                  null comment '电话',class_id    int                          not null comment '班级id',constraint UserNameunique (username),constraint idunique (id)
)comment '学生管理';

班级数据库：

create table class
(id          int auto_increment comment 'id
'primary key,class_name  varchar(10)                not null comment '班级名称',total       int         default 0      not null comment '总人数',class_boss  varchar(10) default '待定' not null comment '班主任
',monitor     varchar(10) default '待定' not null comment '班长',counsellor  varchar(10) default '待定' not null comment '辅导员',class_help  varchar(20) default '待定' null comment '班助',update_time datetime                   not null comment '修改时间',create_time datetime                   not null comment '创建时间',constraint class_nameunique (class_name),constraint idunique (id)
)comment '班级';

二、代码讲解

因为内容多的原因这里只会讲解一些代码，并不会将全部代码进行讲解。

首先在讲解代码之前，需要知道想做一个全栈的项目，最为基础的就是一个用户进行使用此项目的时候，他每一个操作所对应的流程是什么？
比如：他要进行对所有的学生进行查询某一个同学，（此时用户需要提供什么样的信息我们才可以找到此同学）
1、我们这里假设用户所提供信息是一个账号，且此账号不会重复。
2、这时前端需要给用户一个表单等可以录入数据的输入框，前端拿到数据后，就会向后端发起请求。
3、但是用vue来完成此操作会非常的麻烦，这时我们会引用我们的axios来进行对后端的访问。
（在请求与响应之间会经历过滤器\拦截器，但是这里只是一个简单的操作展示不予理会）
4、这时后端拿到数据后需要向数据库进行查询数据。
5、为了查到数据，后端（SpringBoot） 需要进行三层架构的数据处理（注意在数据访问层时需要去入MyBatis进行对数据库的访问）
6、拿到数据之后就可以进行返回了，从后端将从数据库拿到的数据进行返回给前端，前端拿到数据之后就将数据显示在浏览器中，方便用户查看。

登录代码讲解

这里的代码讲解就只会讲登录代码，其他的功能主要以增删改查这类代码，相信大家一定可以自己理解(≧∇≦)/
【其实就是懒得写了(〜￣▽￣)〜】

1、前端vue接收用户所传输的账户和密码

使用vue工程去创建一个from表单进行进行接收，用户输入的账号密码，我这里用的是：element组件中的表单，在使用的时候可以去看一下此组件，还有其他的样式可供选择
可以看到文件：（src\views\LoginVue.vue）：

2、使用axios向后端发起请求

在登录按钮中添加属性：@click 当被点击时所触发的方法：login()，再此方法上使用axios向后端的（http://localhost:8180/login）发起请求：

3、后端进行验证此数据是否正确

这里就是一个简单的条件查询判断是否由此数据，若是有那就下发JWT令牌若是没有就返回账号密码错误信息
控制层（src/main/java/com/chyb/chybspringbootproject\controller\loginCotroller）：

业务逻辑层(…/src/main/java/com/chyb/chybspringbootproject/service/impl/loginServiceImpl.java)：

数据访问层（…\src\main\java\com\chyb\chybspringbootproject\Mappers\loginMapper.java）：

4、检验完之后经历开始对数据库拿取数据

检验完之后会有两种情况，一种是：正确，一种是：密码或者账号输入有误。
第一种情况我们就直接进入到首页即可：

第二种情况就需要进行警告提示：

功能实现讲解

以上就是登录的源码并没有什么太大的难度，而接下来所需要讲的可能会有些难度（主要是因为在我写项目的时候卡我很久的BUG都是因为他(¯﹃¯ԅ)，所以就觉得会更难）

1、登录之后，如何下发JWT令牌给前端，而前端拿到令牌之后要如何操作，

首先大家可以打开源码：src/main/java/com/chyb/chybspringbootproject/filter/loginFilter.java
这里是下发jwt令牌后端的源码

这里不懂的话可以看：会话技术（会话、会话跟踪[Cookie、Session、JWT令牌技术]）
使用genderateJwt方法拿到jwt令牌之后，在前端可以使用浏览器的本地内存，去存储此令牌，我们一般将存储的key值设置为：Token。
具体存储代码为：使用axios向后端发起请求这个源码中的localStorage.setItem("token",res.data);，其中res（request）代表请求所返回的对象，而res中的data为后端传输过来的jwt令牌
大家可以自己去尝试一下，登录之后可以看本地存储：

2、如何校验JWT令牌！！！

校验JWT令牌的详细代码以及所需解释可以直接看：《会话技术（会话、会话跟踪[Cookie、Session、JWT令牌技术]）》，所以这里就只讲我在写项目到这一步时所遇到的最大问题

接收token： 这里就是我当时在做的时候最为头疼的地方之一，如果大家有写项目的话可能会遇到一个BUG，就是在你写完校验代码的逻辑之后会发现，无论怎么样都接收不到前端请求所携带的JWT令牌，后面终于在一篇博文上找到了解决办法：
大概的逻辑就是在axios遇到一些麻烦的请求时会先进行一个预请求，

而此请求，并不会携带数据，

所以在使用过滤器时我们需要将所有的预请求跳过，从而避免代码报错，具体要如何跳过可以在过滤器中使用此代码：

//        放行OPTIONS请求
//        原因：
//          原因是这样的，对于【复杂的】跨域ajax请求，请求方思路是这样的：先发送一个 OPTIONS 请求，
//          确认是可以请求的，之后才发送我们真正的 get 或者 post 等我们在 ajax 中定义的请求；第一次 OPTIONS 请求，
//          headers 是不会带过来的，所以过滤器中是要跳过这种请求的。处理方式如下if ("OPTIONS".equals(req.getMethod())) {log.info("此请求为预检可以直接跳过");Result error = Result.error("OPTIONS");String notLogin = JSONObject.toJSONString(error);res.getWriter().write(notLogin);filterChain.doFilter(req, servletResponse);return;}

具体的代码可看源码：src/main/java/com/chyb/chybspringbootproject/filter/loginFilter.java，
也可以单独看这一篇文章：Springboot实现filter拦截token验证和跨域

3、校验完令牌之后如何和前端建立连接

四、代码资料

通过百度网盘分享的文件：残花月伴学生管理系统
链接: https://pan.baidu.com/s/1qw1EfuVy2N7I72B9AZEApg?pwd=0001 提取码: 0001
因为做项目的时候时间比较仓促，在加上是第一次写这种全栈的代码有许多的地方会有所不懂，所以前端可能会有许多的样式问题，以及后端逻辑上可能有许多地方会出现代码冗余的情况，但是并不会妨碍正常的运行，当然如果BUG还请各位大佬进行指导

五、总结

1、在项目快结尾的是时候我发现一个大问题就是我没有创造管理员的数据库就导致，逻辑上有一些问题，但是当发现是已经很难进行修改了，因为如果改动的话会有很多的方法都需要进行修改，以及也非常的浪费时间，最后就没有改了，所以在大家写项目的时候还是建议先写接口文档或者将大概轮廓都梳理出来，这样就会避免这样的问题。

2、在写项目的时候最大的BUG基本都是出现在关于跨域的问题，所以在学写项目的时候可多看一些前后端连接的视频进行学习，从而可以尽量避免这类问题
3、在写全栈开发的时候还是建议有个大佬在旁边方便问一些实在解决不了的BUG，别像我硬是将一个BUG啃了一个星期o(╥﹏╥)o

---