ajax登陆页面

这个小的案例是基于Mybatis,Springboot+html，前端页面由于时间原因，没有渲染，大家可以自行查看并添加渲染。

代码部分：

sql语句

DROP TABLE IF EXISTS `userinfo`;
CREATE TABLE `userinfo` (
  `username` varchar(255) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

INSERT INTO `userinfo` VALUES ('azmat', '1111');
INSERT INTO `userinfo` VALUES ('sali', '2323');
INSERT INTO `userinfo` VALUES ('aaa', '2323');

Controller:

@RestController
public class loginController {
    /**
     * 注册接口
     * @return
     */
    @Autowired
    private loginServices loginServices;
    @RequestMapping(value = "/reg",method = RequestMethod.POST, headers = "Accept=application/json")
    public int reg(@RequestBody loginUser userEntity){

        int result = 1;

        List<loginUser> u = loginServices.findAllUserName();  //获取所有用户名

        for (int i=0; i < u.size() ; i++){ //遍历用户名跟获取到的用户名比较
            if (u.get(i).getUsername().equals(userEntity.getUsername())){
                result = 0;   //用户名已经被注册
            }
        }
        if (userEntity.getPassword().equals("")) {
            result = 2;    //密码不能为空
        }else if (userEntity.getUsername().equals("")) {
            result = 3;    //账号不能为空
        }
        if (result == 1){
            loginServices.insertUserPwd(userEntity);
        }
        return result;
    }



    @RequestMapping(value = "/login", method = RequestMethod.POST, headers = "Accept=application/json")
    public int login(@RequestBody loginUser loginUser){
        int result;

        //前端输入的用户名以及密码
/*
        System.out.println(loginUser.getUsername());
        System.out.println(loginUser.getPassword());
*/
        //从数据库获取用户名的密码
        String password=loginServices.getPasswordByname(loginUser.getUsername());

        System.out.println(password);
        if(loginUser.getUsername().equals("") || loginUser.getPassword().equals("")){
            result = 2; //用户名和密码不能为空
            //将从数据库获取的数据和我们自己输入的密码进行对比
        }else if (loginUser.getPassword().equals(password)){
            result = 1;//都正确
        }else if(password==null) {
            result = 3;//找不到所对应的用户名
        }else {
            result=0;
        }


        return result;
    }

}

service：

public interface userServise {
    public User findById(Integer id);

    public User findByMessage(String Message); // 获取Message

    public List<User> findTMsgAll();
}

serviceimpl:

@Service
public class userServiceImpl implements userServise {

    @Autowired
    private userMapper tMsgMapper;

    @Override
    public User findById(Integer id) {
        return tMsgMapper.findById(id);
    }

    @Override // 获取Message
    public User findByMessage(String Message) {

        return tMsgMapper.findByMessage(Message);
    }

    @Override // 获取所有
    public List findTMsgAll() {

        return tMsgMapper.findTMsgAll();
    }

Mapper:

@Mapper
public interface loginmapper {

    public List<loginUser> findAllUserName();

    public loginUser FindU(String username);

    public int insertUserPwd(loginUser userEntity);

    @Select(" select * from userinfo")
    List<loginUser> FindAllUser(loginUser userEntity);

    @Select("select password from userinfo where username=#{username} ")
    String findpaawordByname(@Param("username") String username);
}

entity:

@Data
public class loginUser {
    private String username;
    private String password;


    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;
    }

mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.login_ajax.mapper.loginmapper">

    <!--查询全部信息-->
    <select id="FindU" resultType="com.example.login_ajax.entity.loginUser">
        select * from userinfo
    </select>

    <!--查询所有用户名-->
    <select id="findAllUserName" resultType="com.example.login_ajax.entity.loginUser">
        select username from userinfo
    </select>

    <!--插入用户名密码-->
    <insert id="insertUserPwd" parameterType="com.example.login_ajax.entity.loginUser">
        insert into userinfo (username, password )
        values (#{username,jdbcType=VARCHAR},#{password,jdbcType=VARCHAR})
    </insert>

</mapper>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
.form-wrapper {
background-color: #222;
padding: 40px;
border-radius: 10px;
text-align: center;
}

label {
font-size: 18px;
color: #fff;
font-weight: bold;
margin-right: 10px;
display: block;
margin-bottom: 20px;
}

input[type="text"],
input[type="password"] {
width: 300px;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
background-color: #444;
color: #fff;
margin-bottom: 20px;
}

.btn {
padding: 10px 20px;
border-radius: 5px;
border: none;
cursor: pointer;
font-size: 16px;
text-align: center;
margin-bottom: 10px;
}

.btn-login {
background-color: #007bff;
color: #fff;
transition: background-color 0.3s;
}

.btn-login:hover {
background-color: #0056b3;
}

.btn-register {
background-color: #28a745;
color: #fff;
transition: background-color 0.3s;
}

.btn-register:hover {
background-color: #1e7f37;
}
</style>

<div class="form-wrapper">

        <label for="form-username">用户名：</label>
        <input type="text" placeholder="请输入用户名" id="form-username">

        <label for="form-password">密码：</label>
        <input type="password" placeholder="请输入密码" id="form-password">

        <div class="btn-group">
            <button onclick="jump()" class="btn btn-login">登录</button>
            <button onclick="reg()" class="btn btn-register">注册</button>
        </div>
    
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  //  注册
  function reg() {
    var username = document.getElementById("form-username").value;   //获取到前端输入的用户名
    var password = document.getElementById("form-password").value;	//获取到前端输入的密码
    var obj = {
      username:username,
      password:password,
    }

    $.ajax({
      "url": "/reg",    //reg是注册接口
      type:'POST',
      dataType:'json',
      contentType:'application/json',
      data:JSON.stringify(obj),
      success: function (result) {
        if (result === 1) {
          alert("注册成功");
        }else if(result === 2){
          alert("密码不能为空");
        }else if(result === 3){
          alert("账号不能为空");
        } else {
          alert("用户名已被注册");
        }
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert("'XMLHttpRequest:'")
        console.log(XMLHttpRequest);
        alert('网络异常！尝试刷新网页解决问题')
      }


    });
  }


  //登录
  function jump() {
     /* alert("dianjil ")*/
    var username = document.getElementById("form-username").value;
    var password = document.getElementById("form-password").value;
    var obj = {
      username:username,
      password:password,
    }

  /*  alert("user:"+username+password);*/
    $.ajax({
      "url": "/login",        //login是登录接口
      type: 'POST',
      dataType: 'json',
      contentType: 'application/json',
      data: JSON.stringify(obj),
      success: function (result) {
         /* alert(result)*/
        if (result === 1) {
          alert("登录成功");
        } else if (result===2){
          alert("账号或密码不能为空")
        } else if (result===3){
            alert("改用户名不存在")
        }else {
            alert("账号或密码不正确");
        }
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
        console.log('XMLHttpRequest:');
        console.log(XMLHttpRequest);
        alert('网络异常！尝试刷新网页解决问题')
      }
    });
  }


</script>
</html>

整体的截图：

application.yml

​
//这里强调一点我在连数据库的时候数据库总是连接不上，说没有权限，自从我加了双引号之后可以正常访问
server:
  port: 8080
spring:
  datasource:
    url: "jdbc:mysql://127.0.0.1:3306/数据库名?characterEncoding=utf-8&useSSL=false"
    username: root  //用户名
    password: '密码'
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  mapper-locations: classpath*:mapper/*.xml
  type-aliases-package: com.example.login_ajax.entity

​

有什么问题，可以私信，我也可以把源码发给大家。