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

业务已上传则资源

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

效果如下：

设计环境：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 {@Autowiredprivate 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 {@Autowiredprivate UserMapper userMapper;@Overridepublic 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);
}