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

山东大学软件学院项目实训-创新实训-网络安全靶场实验平台(三),第1张

目录

前言

一、项目目录结构

二、登录注册功能

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': ''                     //选择忽略拦截器里面的内容
                }
            }
        }
    }
}

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

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/langs/719494.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-25
下一篇 2022-04-25

发表评论

登录后才能评论

评论列表(0条)

保存