毕设问题汇总

如何实现登陆

login() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          // 验证通过
          this.$request.post('/login', this.form).then(res => {
            if (res.code === '200') {
              let user = res.data
              localStorage.setItem("xm-user", JSON.stringify(user))  // 存储用户数据
              if (user.role === 'USER') {
                location.href = '/front/home'
              }
              else{
                location.href = '/manager/goods'
              }
              this.$message.success('登录成功')
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    }

• 向Webcontroller中的login发起请求，返回了用户信息（JSON），然后存储到loacalstorage中（键值对），建为"xm-user"。然后按用户类型往不同的页面跳转

localStorage.setItem("user", JSON.stringify(res.data));

• 每个页面都会获取当前用户

methods: {
  logout() {
    localStorage.removeItem("user");
    this.$router.push("/login");
  }
}

• 退出登录，清除localstorage

JWT实现

@Configuration
public class WebConfig implements  WebMvcConfigurer {
    @Override
    public void configurePathMatch(PathMatchConfigurer configurer) {
        // 指定controller统一的接口前缀
        configurer.addPathPrefix("/api", clazz -> clazz.isAnnotationPresent(RestController.class));
    }
}

1. 设置路径配置器，统一前缀/api
2. clazz -> clazz.isAnnotationPresent(RestController.class)：这是一个 Lambda 表达式，用于判断控制器类是否标注了 @RestController 注解。如果标注了，就会添加前缀 /api。

文件上传实现

	<el-upload
              class="avatar-uploader"
              :action="$baseUrl + '/files/upload'"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >

• 前端
  • action：请求地址
  • on-success：成功时候的钩子函数
  • （钩子函数是指在特定事件发生时自动执行的函数，通常被称为钩子函数或回调函数。在编程中，钩子函数用于捕获和拦截特定事件，以扩展或修改程序的行为。让我详细解释一下：）
  • $set：给属性赋值

handleAvatarSuccess(response, file, fileList) {
      // 把user的头像属性换成上传的图片的链接
      this.$set(this.user, 'avatar', response.data)
    },

/**
     * 文件上传
     */
    @PostMapping("/upload")
    public Result upload(MultipartFile file) {
        String flag;
        synchronized (FileController.class) {
            flag = System.currentTimeMillis() + "";
            ThreadUtil.sleep(1L);
        }
        String fileName = file.getOriginalFilename();
        try {
            if (!FileUtil.isDirectory(filePath)) {
                FileUtil.mkdir(filePath);
            }
            // 文件存储形式：时间戳-文件名
            FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName);  // ***/manager/files/1697438073596-avatar.png
            System.out.println(fileName + "--上传成功");

        } catch (Exception e) {
            System.err.println(fileName + "--文件上传失败"); 
        }
        String http = "http://" + ip + ":" + port + "/files/";
        return Result.success(http + flag + "-" + fileName);  //  http://localhost:9090/files/1697438073596-avatar.png
    }

• synchronized ：线程同步，确保一段时间内只有一个线程访问括号中的程序段

前后端交互

public class Result {

    private static final String SUCCESS = "0";
    private static final String ERROR = "-1";

    private String code;
    private String msg;
    private Object data;

    public static Result success() {
        Result result = new Result();
        result.setCode(SUCCESS);
        return result;
    }

    public static Result success(Object data) {
        Result result = new Result();
        result.setCode(SUCCESS);
        result.setData(data);
        return result;
    }

    public static Result error(String msg) {
        Result result = new Result();
        result.setCode(ERROR);
        result.setMsg(msg);
        return result;
    }
}

• 后端往前端发数据的封装

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 8080
  },
  chainWebpack: config =>{
    config.plugin('html')
        .tap(args => {
          args[0].title = "管理系统";
          return args;
        })
  }
})

• 前端配置；端口号8080

server:
  port: 9090

# 数据库配置
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    username: root   #你本地的数据库用户名
    password: 123456 #你本地的数据库密码
    url: jdbc:mysql://localhost:3306/manager?useUnicode=true&characterEncoding=utf-8&allowMultiQueries=true&useSSL=false&serverTimezone=GMT%2b8&allowPublicKeyRetrieval=true
  servlet:
    multipart:
      max-file-size: 100MB
      max-request-size: 100MB

# 配置mybatis实体和xml映射
mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.example.entity
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true

# 分页
pagehelper:
  helper-dialect: mysql
  reasonable: true
  support-methods-arguments: true
  params: count=countSql

ip: localhost

• 后端端口号9090（请求往这发）

springboot常见注释

• @Configuration：新增配置类
• @RestController：统一
• @Component