前端使用VUE傳送AJAX請求實現前後端分離
阿新 • • 發佈：2021-08-10
1、基礎介紹
後端專案採用springboot+mybatis+shiro+redis組成，專案地址：
2、聚焦標題：前端使用VUE傳送AJAX請求實現前後端分離
3、編寫後端程式碼，URL地址：http://localhost:8088/user/reg，後端提供一個URL地址給前端即可！！！
package com.lingdang.demo.controller; /** * 用於介面測試 */ @Controller public class MyController { Result result = new Result(); @Autowired(required = false) private UserService userService; @Autowired RedisUtil redisUtil; /** * @description: 註冊提交介面 * @param: * @return: * @author * @date: */ @RequestMapping("/user/reg") @ResponseBody public Result register(HttpServletRequest request,User user){ ModelAndView mv= new ModelAndView(); if(user.getUsername() == null || user.getUsername().equals("")){//訪問註冊頁面 mv.setViewName("/register"); }else {//註冊 String name = user.getUsername(); //去資料庫查重 User daou = userService.selectUserByUserName(name);//沒有重複 if(daou == null) { String bCryptPassword = new SimpleHash("md5",user.getPassword(),null,1024).toString(); User regUser = new User(user.getUsername(),bCryptPassword); int num = userService.InsertUserByRegister(regUser); if(num == 1){ System.out.println(user.getUsername()+"註冊成功"); result.setCode("200"); result.setMsg("註冊成功"); result.setData(user); } } else { result.setCode("400"); result.setMsg("使用者名稱重複"); result.setData(user); } } return result; } }
4、前端h5頁面引入vue
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>鈴鐺教你寫最最最簡單的VUE！入門級</title> </head> <body> <div class="app"> <form role="form"> <div class="form-group" > <input placeholder="使用者名稱" type="text" v-model="username"><br/> <input placeholder="密碼" type="password" v-model="password"> <div class="text-center"> <button type="button" @click="test1">註冊</button> </div> </div> </form> </div> </body> <script src="../../../js/jquery.min.js"></script> <script src="../../../js/vue-2.5.16.min.js"></script> <script src="../../../pages/frame/registertest/registertest.js"></script> </html>
1 var vm =new Vue({ 2 el:'.app', 3 data:{ 4 username:null, 5 password:null, 6 7 8 }, 9 created:function(){ 10 alert(1) 11 12 13 }, 14 mounted:function () { 15 16 } 17 , 18 methods:{ 19 test1:function () { 20 username = this.username; 21 password = this.password; 22 23 alert(1) 24 25 $.ajax({ 26 type:"post", 27 28 data:{ 29 username:username, 30 password:password, 31 32 }, 33 url:"http://127.0.0.1:8088/user/reg", 34 success(res){ 35 alert(res); 36 }, 37 error(res){ 38 } 39 40 }) 41 } 42 }, 43 44 })registertest.js