全栈业务开发入门——登录业务接口

news2025/2/24 0:18:19

业务已上传则资源

实现登录业务的前后端联调，前端点击登录按钮向后端发送一个请求，后端调用接口向前端响应结果

效果如下：

设计环境：springboot+mybatis+vue3+axios

一.前端设计

1.基于vue3脚手架创建项目，搭建项目结构

2.配置代理（处理跨域问题）

由于发起ajax请求的域为http://localhost:5173, 而后台服务器的域为 http://localhost:8080, 所以浏览器会限制该请求的发送, 这种问题称为跨域问题, 跨域问题可以在服务器端解决,也可以在浏览器端解决, 这可以通过配置代理的方式解决

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  //配置代理
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 后端服务器地址
        changeOrigin: true, // 是否改变请求域名
        rewrite: (path) => path.replace(/^\/api/, '')//将原有请求路径中的api替换为''
      }
    }
  }
})

3.搭建登录页面组件

首先搭建页面组件，将进行数据双向绑定

import { ref } from 'vue'
const LogData = ref({
    username: '',
    password: ''
})

当点击登录按钮时，就会调用login函数向后端发送请求

<div class="box">
        <form action="" :model="LogData">
            用户名：<input type="text" v-model="LogData.username"><br><br>
            密码：<input type="text" v-model="LogData.password"><br><br>
            <button type="button" @click="login">登录</button>
        </form>
    </div>

.box{
    width: 400px;
    height: 200px;
    background-image: url('@/assets/login_bg.jpg');
    text-align: center;
    margin: 50px auto;
    padding: 40px;
}

4.提供调用登录接口的函数

首先根据axios提供共用的响应拦截器

//导入axios
import axios from 'axios';
const baseURL = '/api';
const instance = axios.create({baseURL})

//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

然后提供调用登录接口的函数

//导入request.js请求工具
import request from '@/utils/request.js'

//提供调用登录接口的函数
export const userLoginService = (loginData)=>{
    const params = new URLSearchParams();
    for(let key in loginData){
        params.append(key,loginData[key])
    }
    return request.post('/user/login',params)
}

最后写出点击登录后的调用函数并完成响应

//调用后台接口,完成登录
import { userLoginService} from '@/api/user.js'
const login = async () => {
    let result = await userLoginService(LogData.value);
    if (result.code === 0) {
        //成功了
        alert(result.msg ? result.msg : '登录成功');
    }else{
        //失败了
        alert('登录失败')
    } 
}

二.后端设计

1.基于springboot创建项目，引入web，mybatis，lombok依赖，并进行数据库连接信息和mybatis配置

2.创建数据库表并写出对应的实体类

数据库tb_user表中只含有username和password两列

3.搭建登录接口

请求路径为：https://localhost:8080/user/login

请求方式：POST

请求参数格式：x-www-form-urlencoded

请求数据样例：

username=zhangsan&password=123456

首先controller层接受请求并响应

@Slf4j
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;
    @PostMapping("/login")
    public Result<String> login(@RequestParam String username, @RequestParam String password){
        log.info("用户登录：{},{}",username,password);
        User user=new User(username,password);
        User u=userService.login(user);
        return u==null?Result.error("登录失败"):Result.success("登录成功");
    }
}

然后service层进行业务处理

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

    @Override
    public User login(User user) {
        return userMapper.login(user);
    }
}

最后mapper层调用数据库并返回结果

@Mapper
public interface UserMapper {
    @Select("select * from db01_ms.tb_user where username=#{username} and password=#{password}")
    public User login(User user);
}