山东大学软件学院项目实训-创新实训-网络安全靶场实验平台（三）

目录

前言

一、项目目录结构

二、登录注册功能

2.1 前端

2.2 后端

三、跨域问题

---

前言

经过前端Vue的环境配置及学习，基本页面都已经编写好了，只是缺少美化布局的工作。

后端的环境也已经配置完成，本篇博客主要是记录后端springboot的学习以及部分配置代码的编写。

一、项目目录结构

整个项目分为Vue部分和springboot部分，Vue部分的项目目录结构在之前的博客里已经有过介绍，因此就不再赘述。

以下是springboot的目录结构：

• entity：实体类，记录数据库表结构

• mapper：负责与数据库打交道。具体到对某个表、某个实体的增删改查

• service：服务层或业务层，封装mapper层的 *** 作，使一个方法对外表现为实现一种功能

• controller：业务控制层，负责接收数据和请求，并且调用Service层实现这个业务逻辑。接受页面过来的参数，传给Service处理，接到返回值，再传给页面。

二、登录注册功能 2.1 前端

主要代码：

Login.vue

 Register.vue部分代码，  与Login.vue类似

 界面：

2.2 后端

 User.java  用户实体类

@Data
@TableName("user")
public class User implements Serializable {

    @TableId(type = IdType.AUTO)
    private Integer userid;
    private String username;
    private String password;
    private String realname;
    private String phone;
    private Integer role;

}

UserDTO.java  用户数据传输对象：

/**
 * 接受前端登录请求的参数
 */
@Data
public class UserDTO {
    private Integer userid;
    private String username;
    private String password;
    private String realname;
}

UserService.java

    @Override
    public UserDTO login(UserDTO userDTO) {
        User one = getUserInfo(userDTO);
        if (one != null) {
            BeanUtil.copyProperties(one, userDTO, true);
            //设置token
            String token= TokenUtils.genToken(one.getUserid().toString(),one.getPassword().toString());
            userDTO.setToken(token);
            return userDTO;
        } else {
            throw new ServiceException(Constants.CODE_600, "用户名或密码错误");
        }
    }

    @Override
    public User register(UserDTO userDTO) {
        User one = getUserInfo(userDTO);
        if (one == null) {
            one = new User();
            BeanUtil.copyProperties(userDTO, one, true);
            // 默认学生
            one.setRole(1);
            save(one);  // 把 copy完之后的用户对象存储到数据库
        } else {
            throw new ServiceException(Constants.CODE_600, "用户已存在");
        }
        return one;
    }

    private User getUserInfo(UserDTO userDTO) {
        QueryWrapper queryWrapper = new QueryWrapper<>();
        queryWrapper.eq("username", userDTO.getUsername());
        queryWrapper.eq("password", userDTO.getPassword());
        User one;
        try {
            one = getOne(queryWrapper); // 从数据库查询用户信息
        } catch (Exception e) {
            LOG.error(e);
            throw new ServiceException(Constants.CODE_500, "系统错误");
        }
        return one;
    }

UserController.java

    @PostMapping("/login")
    public Result login(@RequestBody UserDTO userDTO){
        String username = userDTO.getUsername();
        String password = userDTO.getPassword();
        if (StrUtil.isBlank(username) || StrUtil.isBlank(password)) {
            return Result.error(Constants.CODE_400, "参数错误");
        }
        UserDTO dto = userService.login(userDTO);
        return Result.success(dto);
    }

    @PostMapping("/register")
    public Result register(@RequestBody UserDTO userDTO) {
        String username = userDTO.getUsername();
        String password = userDTO.getPassword();
        if (StrUtil.isBlank(username) || StrUtil.isBlank(password)) {
            return Result.error(Constants.CODE_400, "参数错误");
        }
        return Result.success(userService.register(userDTO));
    }

三、跨域问题

完成上述代码后，点击运行，发现功能实现不了，原来是出现了跨域问题。报错如下：

为了解决跨域问题，可以在springboot中加入配置文件 CorsConfig.java，具体代码如下：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsConfig {

    // 当前跨域请求最大有效时长。这里默认1天
    private static final long MAX_AGE = 24 * 60 * 60;

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址
        corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头
        corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法
        corsConfiguration.setMaxAge(MAX_AGE);
        source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置
        return new CorsFilter(source);
    }
}

当然，也可以在前端加入配置文件解决跨域问题，效果是一样的 vue.config.js

// 跨域配置
module.exports = {
    devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        port: 8080,
        proxy: {                 //设置代理，必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:9090',     //代理的目标地址
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {                   //路径重写
                    '^/api': ''                     //选择忽略拦截器里面的内容
                }
            }
        }
    }
}

解决了问题之后，登录注册功能就实现了。