前端使用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发送的请求实现页面跳转发送ajax请求实现上传图片显示在网页上前端学习记录-Ajax请求实现实时天气预报系统- 前端向后端发送请求，后端返回的一个值的请求的ajax.get();方法 vue使用resource发送ajax请求 django前端到后端一次完整请求实例 vue 发送ajax请求 vue发送ajax请求 Vue（七）发送Ajax请求 vue 发送ajax请求