JavaEE 笔记03：基于Vue，SpringBoot的前后端分离的简单作业管理系统

基于Vue，SpringBoot的前后端分离的简单作业管理系统

前言

本文主要是对我编写的一个基于Vue和SpringBoot的前后端分离的作业管理系统进行功能展示，以及把系统部署到服务器的步骤的介绍。代码仓库地址见文末。

环境

开发环境

• macOS Catalina 10.15.5
• Java SE 11.0.5 LTS
• MySQL Ver 8.0.19 for osx10.15 on x86_64 (Homebrew)
• SpringBoot 2.3.1
• npm 6.14.4
• Vue @vue/cli 4.3.1

部署环境

• Linux内核 4.15.0-88-generic
• Ubuntu 18.04.4 LTS
• Java SE 11.0.6 LTS
• Nginx 1.14.0 (Ubuntu)
• MySQL Ver 14.14 Distrib 5.7.30, for Linux (x86_64) using EditLine wrapper

功能展示

登录与注册

学生

学生首页

学生查看作业列表

学生提交作业

学生查看已提交的作业

学生编辑已提交的作业

学生查看老师已点评的作业

老师

老师查看作业列表

老师发布作业

老师编辑已发布的作业

老师查看已提交的学生作业

老师点评已提交的学生作业

值得思考的几点

如何保证密码的安全性

由于我使用的是HTTP，前后端通信所有的内容都是可以被抓包抓到的，为了不让密码看起来那么“直接”，我在前端登录时先进行了一次MD5($pass.MD5($salt))形式的加密：

this.$refs.form.validate(valid => {
                    if (valid) {
                        login(this.formData.userId, md5(this.formData.password + md5(this.formData.userId)), this.formData.userType).then(res => {
                            this.$message.success("登录成功：" + res.username);
                            this.$store.commit("login", res);
                            this.$router.push({name: "container"});
                        });
                    }
                });

在传输到后端后，又进行了一次的MD5($pass.$reversed_pass)形式的加密：

public String passwordMd5(String password) {
    String reversedPassword = new StringBuffer(password).reverse().toString();
    return md5Encrypt.getHexString(password + reversedPassword);
}

最后再与数据库中存好的密码进行比较。注册同理。

当然，HTTP已经逐渐要被HTTPS所取代了，此处只不过是在使用HTTP的情况下耍的一点点“障眼法”，要确实保证数据传输安全请使用HTTPS。

前后端的数据格式

为了使传输过程尽可能清晰，前后端可以通过RESTful风格的形式进行数据传输，即通过URL定位资源，用HTTP动词（GET, POST, DELETE, PUT）描述操作。数据格式为统一形式的JSON。
后端通过RestController，无论是简单的反馈信息，还是数据库的查询结果，最终都装进ResultVO中以JSON的形式发送给前端：

/**
 * Project Name: homework-management-system-back-end
 * File Name: ResultVO
 * Package Name: com.yi.homework.model.vo.response
 *
 * @author yipple
 * @date 2020/6/17
 * @since 0.0.1
 */
@Data
public class ResultVO implements Serializable {

    public static final int NOT_LOGGED_IN = -1;

    public static final int SUCCESS = 0;

    public static final int FAIL = 1;

    public static final int ROLE_ERROR = 2;

    public static final int PERMISSION_DENIED = 3;

    public static final int INVALID_PARAMETER = 4;

    public static final int INTERNAL_SERVER_ERROR = 5;

    public static final long serialVersionUID = 1L;

    private Integer code;	// 状态

    private String message;		// 信息

    private Object data;		// 数据

    public ResultVO(Integer code, String message, Object data) {
        this.code = code;
        this.message = message;
        this.data = data;
    }

}

而对于来自前端的数据，则通过诸如此类的值对象进行接收：

/**
 * Project Name: homework-management-system-back-end
 * File Name: AddHomeworkItemVO
 * Package Name: com.yi.homework.model.vo.request
 *
 * @author yipple
 * @date 2020/6/18
 * @since 0.0.1
 */
@Data
public class AddHomeworkItemVO {

    private Long teacherId;

    @NotBlank
    private String homeworkTitle;

    @NotBlank
    private String homeworkContent;

}

前后端分离的跨域问题

我是通过在后端引入一个配置类解决的：

/**
 * Project Name: homework-management-system-back-end
 * File Name: WebConfig
 * Package Name: com.yi.homework.config
 *
 * @author yipple
 * @date 2020/6/17
 * @since 0.0.1
 */
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true);
    }

}

通过Nginx部署到服务器

1. 在前端项目的根目录下，运行npm run build命令：
   
   然后就会在根目录下得到dist文件夹。需要注意的是，尽管此处我将前后端部署到了同一台服务器上，但前端在指定后端IP地址时，仍应该是http://公网IP:端口号的形式，而不能是127.0.0.1:端口号。
2. 在后端项目的目录下，运行mvn clean package命令：
   
   执行完后，就会在target目录下得到一个.jar和一个.jar.original。
3. 在服务器上安装Nginx，安装完成后，可执行nginx -t找到nginx的配置文件地址：
   
   找到之后，我们可以切换到/etc/nginx/conf.d/目录下，编写针对于本项目前端的配置文件homework-management-system.conf：

server {
    listen       23334;
    server_name  127.0.0.1;
    location / {
        root   /home/yibuntu/Public/homework-management-system/dist;
        index  index.html index.htm;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /home/yibuntu/Public/homework-management-system/dist;
    }
}

其中，listen是前端项目监听的端口号；server_name是被代理的主机地址，此处我将前后端放置在了同一台服务器上，所以这里是127.0.0.1；root则是第1步将前端项目打包成dist文件夹后上传到服务器上的位置。
创建好配置文件后，我们可以运行nginx，nginx默认使用80端口，如果80端口被占用，则可以通过sudo fuser -k 80/tcp命令终止当前使用80端口的进程，然后启动nginx即可。
4. 第3步我们已经完成了对前端项目的部署，这里我们只需要再将第2步得到的jar（不是.jar.original）上传到服务器上，然后运行即可：

5. 最后，打开浏览器，输入http://服务器IP:前端监听的端口号即可使用部署后的系统。

代码仓库

前端：homework-management-system-front-end
后端：homework-management-system-back-end