axios-注册

最新推荐文章于 2023-09-23 20:27:02 发布

新子-存在了

最新推荐文章于 2023-09-23 20:27:02 发布

阅读量338

点赞数

分类专栏： java异步文章标签： servlet java 前端

本文链接：https://blog.csdn.net/m0_69712602/article/details/126789049

版权

java异步专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.新建首页index.html

在 resources 目录下 static 中新建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>axios异步请求测试</h1>
    <div>        
        <a href="/reg.html">注册页面</a>
    </div>

2.新建 reg.html

在 resources 目录下 static 中新建

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <h1>注册页面</h1>
    <!--@blur代表失去焦点事件-->
    <input type="text" v-model="user.username" placeholder="请输入用户名" @blur="f()">{{info}}<br>
    <input type="text" v-model="user.password" placeholder="请输入密码"><br>
    <input type="text" v-model="user.nick" placeholder="请输入昵称"><br>
    <!--v-bind:disabled="true" 不能点-->
    <input type="button" value="注册" @click="reg()" v-bind:disabled="info == '用户名已存在'">
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script>
        let v = new Vue({
            el:"body>div",
            data:{
                user:{
                    username:"",
                    password:"",
                    nick:""
                },
                info:""
            },
            methods:{
                reg(){
                    axios.post("/reg",v.user).then(function (response) {
                        if (response.data==1) {
                            alert("注册成功!")
                            //修改浏览器地址
                            location.href="/";//显示到首页
                        }else{
                            alert("用户名已存在!")
                        }
                    })
                },
                f(){
                    console.log("编辑完成!");
                    axios.get("/check?username="+v.user.username).then(function (response) {
                        v.info = response.data==1?"用户名可用!":"用户名已存在";
                    })
                }
            }
        })
    </script>
</body>
</html>

3.新建User实体类

新建entity包下创建User类

也可使用lombok注解生成get,set,toString,这里懒得改了,

package cn.detu.boot07.entity;

public class User {
    private Integer id;
    private String username;
    private String password;
    private String nick;

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                ", nick='" + nick + '\'' +
                '}';
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getNick() {
        return nick;
    }

    public void setNick(String nick) {
        this.nick = nick;
    }
}

4.新建UserController

controller 包下新建 控制层

package cn.detu.boot07.controller;

import cn.detu.boot07.entity.User;
import cn.detu.boot07.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class UserController {
    @Autowired(required = false)
    UserMapper mapper;

    @RequestMapping("/check")
    public int check(String username){
        User u= mapper.selectByUsername(username);
        if(u != null){
            return 2;//代表用户已存在
        }
        return 1;
    }

    @RequestMapping("reg")
    public int reg(@RequestBody User user){
        System.out.println("user = " + user);
        User u = mapper.selectByUsername(user.getUsername());
        if (u!=null){
            return 2;//代表用户名已存在
        }
        mapper.insert(user);
        return 1;
    }
}

5..新建UserMapper

mapper包下新建

package cn.detu.boot07.mapper;

import cn.detu.boot07.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

@Mapper
public interface UserMapper {
    @Select("select password from user where username = #{username}")
    User selectByUsername(String username);
    @Insert("insert into user values(null,#{username},#{password},#{nick})")
    void insert(User user);
}