前端使用VUE發送AJAX請求實現前后端分離

本文轉載自查看原文 2021-08-10 14:29 124 springboot

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端學習記錄-Ajax請求實現實時天氣預報系統- Vue（七）發送Ajax請求 vue 發送ajax請求 Vue - 前端體系、前后端分離 Vue：前端體系、前后端分離前后端分離之前端vue 不使用回調函數的ajax請求實現（async和await簡化回調函數嵌套） ajax異步請求實例 vue中ajax請求發送 Vue項目中使用axios發送ajax請求