20260121

开始写寒假作业了

目前是只写了登录和注册的简单功能

数据库用的mysql，使用可视化数据库工具mysqlworkbench加以辅助；

后端使用springboot+mybatisPlus

前端使用vue3+axios+router4,日后应该会加上pinia和element-ui

(话说博客园代码怎么弄成文件夹那样的格式..)

后端目录如下：

因为只写了登录和注册，所以只写了User相关

entity和mapper就不介绍了

UserService

package com.backtest.service;

import com.backtest.entity.User;
import com.backtest.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public String getPasswordById(String id) {
        User user = userMapper.selectById(id);
        if (user != null) {
            return user.getPassword();
        }else
            return null;
    }

    public void addUser(String id, String password) {
        User user = new User();
        user.setId(id);
        user.setPassword(password);
        userMapper.insert(user);
    }
}

UserController

package com.backtest.controller;

import com.backtest.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin
public class UserController {
    @Autowired
    UserService userService;

    @PostMapping("/user/login")
    public String login(@RequestParam String id,@RequestParam String password) {
        String pw = userService.getPasswordById(id);
        if(pw!=null&&pw.equals(password)){
            return "0";
        }else if(pw!=null&&!pw.equals(password)){
            return "2";
        }else if(pw == null) {
            return "1";
        }else
            return "-1";
    }

    @PostMapping("/user/register")
    public String register(@RequestParam String id,@RequestParam String password) {
        String pw = userService.getPasswordById(id);
        if(pw!=null){
            return "1";
        }else{
            userService.addUser(id,password);
            return "0";
        }
    }
}

接下来是前端

目录如下

App.vue,main.js和index.js就不过多展示了，展示一下关键点的login和register

login.vue

<template>
<div>
  <table>
    <tbody>
    <tr>
      <td>账号</td>
      <td><input type="text" v-model="id"></td>
    </tr>
    <tr>
      <td>密码</td>
      <td><input type="password" v-model="password"></td>
    </tr>
    </tbody>
  </table>
  <button @click="login">登录</button><router-link to="/register">注册</router-link>
</div>
</template>
<script>
import router from '../router';
import axios from 'axios';

export default {
  data(){
    return {
      id:'',
      password:'',
    }
  },
  methods: {
    login(){
      axios.post('http://localhost:8080/user/login',{},{
        params:{
          id:this.id,
          password:this.password
        }
    }).then(res=>{
        switch(String(res.data)){
          case '0':
            alert('登录成功');
            break;
          case '1':
            alert('用户不存在');
            break;
          case '2':
            alert('密码错误');
            break;
          default:
            alert('未知错误:'+res.data);
            break;
        }
      })
    },
  }
}
</script>
<style scoped>

</style>

register.vue

<template>
<div>
  <table>
    <tbody>
    <tr>
      <td>账号</td>
      <td><input type="text" v-model="id"></td>
    </tr>
    <tr>
      <td>密码</td>
      <td><input type="password" v-model="password"></td>
    </tr>
    <tr>
      <td>确认密码</td>
      <td><input type="password" v-model="configPassword"></td>
    </tr>
    </tbody>
  </table>
  <button @click="register">注册</button><router-link to="/login">返回登录</router-link>
</div>
</template>
<script>
import router from '../router';
import axios from 'axios';
export default {
  data(){
    return {
      id:'',
      password:'',
      configPassword:'',
    }
  },
  methods: {
    register(){
      if(this.password!==this.configPassword){
        alert('两次密码输入不一致');
        return;
      }
      axios.post('http://localhost:8080/user/register',{},{
        params:{
          id:this.id,
          password:this.password
        }
    }).then(res=>{
        switch(String(res.data)){
          case '0':
            alert('注册成功');
            router.push('/login');
            break;
          case '1':
            alert('用户已存在');
            break;
        }
      })
    },
  }
}
</script>

样式美化等心情好了以后再弄吧...