業務已上傳則資源
實現登錄業務的前后端聯調，前端點擊登錄按鈕向后端發送一個請求，后端調用接口向前端響應結果
效果如下：
設計環境：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);
}三.前后端聯調
首先前端發送請求
然后后端調用接口，進行數據庫訪問
最后前端接收響應并進行反映
)
