新建Springboot项目完成简单登录增删改查

都知道Springboot无配置，简单开发框架，我们使用IDE工具来编译。
提供了：登录、注册、查询、删除、修改
注意：文章只提供入门小白

源码下载 SpringBoot项目

1、新建项目

方法一、File–Project

方法二、或者重新建一个




web

模版引擎

数据库

下一步

新建完成

2、连接数据库

数据库名 test
一张表

spring.datasource.url=jdbc:mysql://127.0.0.1:3306/test?characterEncoding=UTF-8&serverTimezone=GMT
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver

jpa.database=MYSQL
jpa.show-sql=true

jpa.hibernate.ddl-auto=update
jpa.hibernate.naming-strategy=org.hibernate.cfg.ImprovedNamingStrategy

jpa.properties.hibernate=
jpa.properties.dialect=org.hibernate.dialect.MySQL5Dialect

3、新建包和页面

4、代码

4.1、pojo

package com.zx.pojo;

public class User {
    private Integer id;
    private String username;
    private String pwd;

    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 getPwd() {
        return pwd;
    }

    public void setPwd(String pwd) {
        this.pwd = pwd;
    }
}

4.2、dao

package com.zx.dao;

import com.zx.pojo.User;
import org.apache.ibatis.annotations.*;

import java.util.List;
import java.util.Map;

@Mapper
public interface UserMapper {

    /**
     * 查询
     * @return
     */
    @Select("select *from user")
    List<User>selectUser();

    /**
     * id查询
     * @param user
     * @return
     */
    @Select("select * from user where id=#{id}")
    Map<String,Object> IdselectUser(User user);
    /**
     * 注册
     * @param user
     */
    @Insert("insert into user (username,pwd) values(#{username},#{pwd})")
    void adduser(User user);

    /**
     * 查询是否有一致用户名
     * @param user
     * @return
     */
    @Select("select * from user where username = #{username}")
    List<User> Fituser(User user);

    /**
     * 登录
     * @param user
     * @return
     */
    @Select("select *from user where username = #{username} and pwd =#{pwd}")
    List<User> LoginUser(User user);

    /**
     * 修改
     * @param user
     */
    @Update("update user set username=#{username},pwd=#{pwd} where id=#{id}")
    void update(User user);

    /**
     * 删除
     * @param user
     */
    @Delete("delete from user where id=#{id}")
    void Delete(User user);

}

4.3、Controller

package com.zx.controller;

import com.zx.dao.UserMapper;
import com.zx.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import java.util.List;
import java.util.Map;

@Controller
public class UserController {

    @Autowired
    private UserMapper userMapper;





    @RequestMapping("/login")
    public String index(){
        return "index.html";
    }

    @RequestMapping("/red")
    public String red(){
        return "error.html";
    }

    /**
     * 登录 与查询
     * @param user
     * @param model
     * @return
     */
    @RequestMapping("loginuser")
    public String loginuser(User user ,Model model){
        List<User> loginuserto=userMapper.LoginUser(user);
        if(loginuserto.size()>0){
            //查询用户
            List<User> listuser=userMapper.selectUser();
            model.addAttribute("listuser",listuser);
            return "main.html";
        }else {
            model.addAttribute("error","登录失败");
            return "error.html";
        }

    }




    /**
     * 注册用户
     * @param req
     * @param user
     * @param regpwd
     * @param model
     * @return
     */
    @RequestMapping("/reglogin")
    public String reglogin(HttpServletRequest req,User user , String regpwd, Model model){
        if(user.getPwd()!=null&&user.getUsername()!=null&&regpwd!=null){
            if(user.getPwd().equals(regpwd)){
                List<User> fituser= this.userMapper.Fituser(user);
                if(fituser.size()>0){
                    req.setAttribute("error","以注册");
                    return "error.html";
                }
                try{
                    this.userMapper.adduser(user);
                    //model.addAttribute("error","成功");
                    req.setAttribute("error","成功");
                    return "error.html";
                }catch (Exception e){
                    e.printStackTrace();
                    //model.addAttribute("error","失败");
                    req.setAttribute("error","失败");
                    return "error.html";
                }
            }else {
               // model.addAttribute("error","两次密码一致");
                req.setAttribute("error","两次密码一致");
                return "error.html";
            }

        }else {
            //model.addAttribute("error","不能为空");
            req.setAttribute("error","不能为空");
            return "error.html";
        }
    }


    /**
     * 删除
     * @param user
     * @return
     */
    @RequestMapping("deleteuser")
    @ResponseBody
    public String DeleteUser(User user){
        try {
            String obj="1";
            this.userMapper.Delete(user);
            return obj;
        }catch (Exception e){
            e.printStackTrace();
            String obj="0";
            return obj;
        }
    }


    /**
     * id查询
     * @param user
     * @return
     */
    @RequestMapping("Iduser")
    @ResponseBody
    public Map<String,Object> Iduser(User user){
          Map<String,Object> iduser=  this.userMapper.IdselectUser(user);
          return iduser;

    }
    @RequestMapping("upuser")
    @ResponseBody
    public String upuser(User user){
        try {
            String obj="1";
            this.userMapper.update(user);
            return obj;
        }catch (Exception e){
            e.printStackTrace();
            String obj="0";
            return obj;
        }
    }


}

4.3、登录页面index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">

<head>
    <meta charset="UTF-8">
    <title>动画注册登录页面</title>
    <link rel="stylesheet" href="css/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
<div class="materialContainer">
    <div class="box">
        <form th:action="@{~/loginuser}" method="post" autocomplete="off">
            <div class="title">登录</div>
            <div class="input">
                <label for="name">用户名</label>
                <input type="text" name="username" id="name">
                <span class="spin"></span>
            </div>
            <div class="input">
                <label for="pass">密码</label>
                <input type="password" name="pwd" id="pass">
                <span class="spin"></span>
            </div>
            <div class="button login">
                <button type="submit">
                    <span>登录</span>
                    <i class="fa fa-check"></i>
                </button>
            </div>
            <a href="javascript:" class="pass-forgot">忘记密码？</a>
        </form>
    </div>

    <div class="overbox">
        <form th:action="@{~/reglogin}" method="post" autocomplete="off">
            <div class="material-button alt-2">
                <span class="shape"></span>
            </div>
            <div class="title">注册</div>
            <div class="input">
                <label for="regname">用户名</label>
                <input type="text" name="username" id="regname">
                <span class="spin"></span>
            </div>
            <div class="input">
                <label for="regpass">密码</label>
                <input type="password" name="pwd" id="regpass">
                <span class="spin"></span>
            </div>
            <div class="input">
                <label for="reregpass">确认密码</label>
                <input type="password" name="regpwd" id="reregpass">
                <span class="spin"></span>
            </div>
            <div class="button">
                <button type="submit">
                    <span>注册</span>
                </button>
            </div>
        </form>
    </div>

</div>
<script src="js/jquery.min.js"></script>
<script src="js/index.js"></script>
</body>

</html>

4.3、登录页面main.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"

>

<head>
<meta charset="UTF-8">
<title>主页面</title>
</head>
<body>
<table border="1">
	<thead>
		<tr>
			<th>序号</th>
			<th>id</th>
			<th>用户名</th>
			<th>密码</th>
			<th>操作</th>
		</tr>
	</thead>

	<tbody th:each="map,iterStat : ${listuser}">
			<tr >
				<td th:text="${iterStat.index}"></td>
				<td th:text="${map.id}"></td>
				<td th:text="${map.username}"></td>
				<td th:text="${map.pwd}"></td>
				<td>
					<button th:value="${map.id}" onclick="update(this)">修改</button>
					<button th:value="${map.id}" onclick="deletes(this)">删除</button>
				</td>
			</tr>
	</tbody>
</table>
<!--弹窗--><br><br><br><br><br><br>
<div style="display: none" id="tos">
	<form autocomplete="off">
		<input type="text" id="username" name="username"><br>
		<input type="text" id="pwd" name="pwd"><br>
		<input type="hidden" id="id" name="id"><br>
		<input type="button" id="update" value="保存修改"><br>
	</form>

</div>
<script src="js/jquery.min.js"></script>
<script>
	//修改 回填
	function update(q) {
		$("#tos").fadeIn(100);
		var id=q.value;
		$.post("/Iduser",{id:id},function (iduser) {
			$("#username").val(iduser.username);
			$("#pwd").val(iduser.pwd);
			$("#id").val(iduser.id);
		})
	}

	//保存修改
	$("#update").click(function () {
		var username=$("#username").val();
		var pwd=$("#pwd").val();
		var id=$("#id").val();
		$.post("upuser",{username:username,pwd:pwd,id:id},function (obj) {
			if(obj==1){
				alert("成功")
				location.reload();//刷新浏览器
			}else if(obj==0){
				alert("失败")
			}
		})
	})

	//删除
	function deletes(T) {
		var id=T.value;
		var t=confirm("你要删除他吗？")
        if(t==true){//@{~/loginuser}
            $.post("/deleteuser",{id:id},function (obj) {
                if(obj==1){
                    alert("成功")
                    location.reload();//刷新浏览器
                }else if(obj==0){
                    alert("失败");
                }
            })
        }

	}
</script>
</body>
</html>

4.3、登录页面error.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4
">

<head>
<meta charset="UTF-8">
<title>返回页面</title>
</head>
<body>
<h1 th:text="${error}"></h1>
</body>
</html>

5、演试效果

注册页面

登录页面

主页面