环境

idea 2023
jdk 17
maven 3.9.6
springboot 3.x

一、创建项目

步骤1:
在这里插入图片描述

步骤2:
在这里插入图片描述
步骤3:
修改maven本地配置
在这里插入图片描述
在这里插入图片描述

到这里项目就创建完成。
先看一下项目整体结构如图所示:
在这里插入图片描述

二、整体页面效果

在这里插入图片描述

三、数据库

在这里插入图片描述

四、application.properties的配置

server.port=8081
spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=UTF-8&zeroDateTimeBehavior=convertToNull
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.max-active=20
spring.datasource.max-idle=8
spring.datasource.min-idle=8
spring.datasource.initial-size=10
mybatis.mapper-locations= classpath:mapper/*.xml
spring.http.encoding.force=true
spring.http.encoding.charset=UTF-8
spring.http.encoding.enabled=true
server.tomcat.uri-encoding=UTF-8
spring.thymeleaf.prefix=classpath:/templates/



五、pom.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.3.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.beixi</groupId>
    <artifactId>demo1</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>demo1</name>
    <description>demo1</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>3.0.3</version>
        </dependency>

        <!--引入thymeleaf依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.22</version>
            <scope>runtime</scope>
        </dependency>

        <dependency>
            <groupId>org.jdom</groupId>
            <artifactId>jdom</artifactId>
            <version>1.1.3</version>
        </dependency>

        <dependency>
            <groupId>org.freemarker</groupId>
            <artifactId>freemarker</artifactId>
            <version>2.3.23</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-core</artifactId>
            <version>3.1.2</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.8</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

六、实体类

@Data  //@Data注解代替get/set方法
public class Manager {
    public int id;
    public String name;
    public String tel;
    public String password;
    public Date addTime;
    public Date updateTime;

}

七、控制层

package com.beixi.controller;

import com.beixi.entity.Manager;
import com.beixi.service.ManagerService;
import com.beixi.service.impl.ManagerImpl;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.Date;
import java.util.List;

/**
 * @author jzj(贝西奇谈)
 * 博客:https://blog.csdn.net/beixishuo
 * 公众号:贝西奇谈
 * B站:贝西奇谈
 */
@Controller
@RequestMapping("/manager")
public class ManagerController {

    @Autowired
    private ManagerService managerService;

//    private final Logger logger = LoggerFactory.getLogger(managerService.class);

    @GetMapping("/keywords")
    public String selectKeywords(Model model,String keywords) {
        List<Manager> users = managerService.selectKeywords(keywords);
        model.addAttribute("users", users);
        return "allUser";
    }
    @GetMapping("/all")
    public String all(Model model) {
        List<Manager> users = managerService.getAll();
        model.addAttribute("users", users);
        return "allUser";
    }



    @GetMapping("/getOne")
    public String getOne(Integer id){
        Manager usr = managerService.selectByPrimaryKey(id);
        return usr.toString();
    }

    /**
     * @Description: 根据id 删除
     */

    @RequestMapping(value = "delete/{userId}")
    public ModelAndView delete(@PathVariable Integer userId) {
        managerService.deleteByPrimaryKey(userId);
        ModelAndView mav = new ModelAndView("redirect:/manager/all");
        return mav;
    }


    /**
     * 添加用户
     * @param
     * @return
     */
    @RequestMapping("addUser")
    public ModelAndView AddUser(Manager manager) {
        System.out.println("add "+manager.getName()+manager.getPassword());
        manager.setAddTime(new Date());
        manager.setUpdateTime(new Date());
        managerService.insertSelective(manager);
        ModelAndView mav = new ModelAndView("redirect:/manager/all");
        return mav;
    }


    @RequestMapping("add")
    public ModelAndView Add1() {
        return new ModelAndView("/add");
    }


    @RequestMapping("edit")
    public String edit(Integer id , Model model){
        Manager userInfo = managerService.selectByPrimaryKey(id);

        model.addAttribute("userInfo",userInfo);
        return "/edit";
    }

    /**
     * 更新用户
     * @param
     * @return
     */
    @RequestMapping("updateUsers")
    public ModelAndView updateUser(Manager manager) {
        manager.setUpdateTime(new Date());
        managerService.updateByPrimaryKey(manager);
        ModelAndView mav = new ModelAndView("redirect:/manager/all");
        return mav;
    }
}

八、业务层

1.接口

public interface ManagerService {
    int deleteByPrimaryKey(Integer id);

    int insertSelective(Manager record);

    Manager selectByPrimaryKey(Integer id);

    int updateByPrimaryKey(Manager users);

    List<Manager> getAll();
    List<Manager> selectKeywords(String keywords);
}

2.实现类

package com.beixi.service.impl;

import com.beixi.entity.Manager;
import com.beixi.mapper.ManagerMapper;
import com.beixi.service.ManagerService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author jzj(贝西奇谈)
 * 博客:https://blog.csdn.net/beixishuo
 * 公众号:贝西奇谈
 * B站:'贝西贝西'
 */
@Service
public class ManagerImpl implements ManagerService {
    @Autowired
    private ManagerMapper managerMapper ;
    
    @Override
    public List<Manager> selectKeywords(String keywords) {
        return managerMapper.selectKeywords(keywords);
    }
    @Override
    public int deleteByPrimaryKey(Integer id) {
        return managerMapper.deleteByPrimaryKey(id);
    }

    @Override
    public int insertSelective(Manager record) {
        return managerMapper.insertSelective(record);
    }

    @Override
    public Manager selectByPrimaryKey(Integer id) {
        return managerMapper.selectByPrimaryKey(id);
    }

    @Override
    public int updateByPrimaryKey(Manager users) {
        return managerMapper.updateByPrimaryKey(users);
    }


    @Override
    public List<Manager> getAll() {
        return managerMapper.getAll();
    }
}

九、持久层

@Mapper
public interface  ManagerMapper {
    int deleteByPrimaryKey(Integer id);

    int insertSelective(Manager record);

    Manager selectByPrimaryKey(Integer id);

    int updateByPrimaryKey(Manager users);

    List<Manager> getAll();
    List<Manager> selectKeywords(String keywords);
}

十、映射文件ManagerMapper.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.beixi.mapper.ManagerMapper">
  <resultMap id="BaseResultMap" type="com.beixi.entity.Manager">
    <id column="id" jdbcType="INTEGER" property="id" />
    <result column="name" jdbcType="VARCHAR" property="name" />
    <result column="password" jdbcType="VARCHAR" property="password" />
    <result column="tel" jdbcType="VARCHAR" property="tel" />
    <result column="addTime" jdbcType="TIMESTAMP" property="addTime" />
    <result column="updateTime" jdbcType="TIMESTAMP" property="updateTime" />
  </resultMap>
  <sql id="Base_Column_List">
    id, name, `password`, tel,  addTime, updateTime
  </sql>
  <select id="selectByPrimaryKey" parameterType="java.lang.Integer" resultMap="BaseResultMap">
    select
    <include refid="Base_Column_List" />
    from manager
    where id = #{id,jdbcType=INTEGER}
  </select>
  <delete id="deleteByPrimaryKey" parameterType="java.lang.Integer">
    delete from manager
    where id = #{id,jdbcType=INTEGER}
  </delete>

  <insert id="insertSelective" parameterType="com.beixi.entity.Manager">
    insert into manager
    <trim prefix="(" suffix=")" suffixOverrides=",">
      <if test="id != null">
        id,
      </if>
      <if test="name != null">
        name,
      </if>
      <if test="password != null">
        `password`,
      </if>
      <if test="tel != null">
        tel,
      </if>
      <if test="addTime != null">
        addTime,
      </if>
      <if test="updateTime != null">
        updateTime,
      </if>
    </trim>
    <trim prefix="values (" suffix=")" suffixOverrides=",">
      <if test="id != null">
        #{id,jdbcType=INTEGER},
      </if>
      <if test="name != null">
        #{name,jdbcType=VARCHAR},
      </if>
      <if test="password != null">
        #{password,jdbcType=VARCHAR},
      </if>
      <if test="tel != null">
        #{tel,jdbcType=VARCHAR},
      </if>
      <if test="addTime != null">
        #{addTime,jdbcType=TIMESTAMP},
      </if>
      <if test="updateTime != null">
        #{updateTime,jdbcType=TIMESTAMP},
      </if>
    </trim>
  </insert>

  <update id="updateByPrimaryKey" parameterType="com.beixi.entity.Manager">
    update manager
    <set>
      <if test="name != null">
        name = #{name,jdbcType=VARCHAR},
      </if>
      <if test="password != null">
        `password` = #{password,jdbcType=VARCHAR},
      </if>
      <if test="tel != null">
        tel = #{tel,jdbcType=VARCHAR},
      </if>
      <if test="addTime != null">
        addTime = #{addTime,jdbcType=TIMESTAMP},
      </if>
      <if test="updateTime != null">
        updateTime = #{updateTime,jdbcType=TIMESTAMP},
      </if>
    </set>
    where id = #{id,jdbcType=INTEGER}
  </update>

  <select id="getAll" resultMap="BaseResultMap">
    select * from  manager
  </select>


  <select id="selectKeywords" parameterType="com.beixi.entity.Manager" resultMap="BaseResultMap">
    select * from  manager
    <where>
      <if test="keywords!=null and keywords != '' ">
        AND (name like CONCAT('%',#{keywords},'%') OR password like CONCAT('%',#{keywords},'%') )
      </if>
    </where>


  </select>
</mapper>

十一、前端页面

0.index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <!-- 以下方式定时转到其他页面 -->
    <meta http-equiv="refresh" content="0;url=/manager/all">

</head>
<body>

</body>
</html>

1.allUser.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        table {border-collapse: collapse; font-size: 14px;
            width: 80%; margin: auto}
        table, th, td {border: 0px solid darkslategray;padding: 10px}
        .btgn{
            font-family: "Microsoft YaHei UI";
            font-size: 16px;
            color: #255e95;
            background-color: #99CCFF;
            text-align: center;
        }

        tr:nth-child(2n){
            background-color: #fffdf5;
        }
        tr:nth-child(2n+1) {
            background-color: #f2fbfb;
        }

    </style>
</head>
<body>
<div style="text-align: center">
    <span class="span" style="color: darkslategray; font-size: 30px" >用户查询</span>
    <hr/>
    <a  href="add"><input type="submit" value="新增用户"></a>
    <div class="col-md-3  col-xs-3">
        <input type="text" id="keywords" name="关键字" placeholder="输入关键字查询">
        <button onclick="fun()">查询</button>

        <table class="list">
        <tr>
            <th class="btgn">姓名</th>
            <th class="btgn">密码</th>
            <th class="btgn">手机号码</th>
            <th class="btgn">添加时间</th>
            <th class="btgn">修改时间</th>
            <th class="btgn">操作</th>
        </tr>

        <tr th:each="user : ${users}">
            <td th:text="${user.name}"></td>
            <td th:text="${user.password}"></td>
            <td th:text="${user.tel}"></td>
            <td th:text="${#dates.format(user.addTime,'yyyy-MM-dd HH:mm:ss')}"></td>
            <td th:text="${#dates.format(user.updateTime,'yyyy-MM-dd HH:mm:ss')}"></td>
            <td><a th:href="@{'/manager/edit?id='+${user.id}}"><input type="submit" value="修改用户"></a>
            <a onclick="return confirm('确定删除当前数据?')"  th:href="@{'/manager/delete/'+${user.id}}"><input type="submit" value="删除用户"></a></td>
        </tr>
    </table>
</div>
        <script>
            function fun(){
                var keywords =document.getElementById("keywords").value;
                window.location.href="/manager/keywords?keywords="+keywords
            }
        </script>
</body>
</html>

2.add.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        table {border-collapse: collapse; font-size: 14px;
            width: 80%; margin: auto}
        table, th, td {border: 0px solid darkslategray;padding: 10px}
        .btgn{
            font-family: "Microsoft YaHei UI";
            font-size: 16px;
            color: #255e95;
            background-color: #99CCFF;
            text-align: center;
        }
        .ccc{
            font-family: "Microsoft YaHei UI";
            font-size: 16px;
            color: #255e95;
            background-color: #ff7c76;
            text-align: center;
        }

        tr:nth-child(2n){
            background-color:#FFCC99;
        }
        tr:nth-child(2n+1) {
            background-color: #99CC99;
        }

        .c{
            width: 200px;
        }

    </style>
</head>
<body>
<span class="span" style="color: darkslategray; font-size: 30px" >添加页面!</span>
<body>
<div style="margin:122px auto; width:392px">


    <form action="/manager/addUser" method="post" class="c" th:object="${manager}">
        <!-- <form action="AddUser" method="get">-->
        <tr><th class="ccc">用户名:</th> <input name="name"class="btn" th:value="${name}"/><tr/> <br/>
        <tr><th class="btgn">密码:</th> <input name="password" class="btn"th:value="${password}"/> </tr><br/>
        <tr><th class="ccc">手机号:</th> <input name="tel"class="btn" th:value="${tel}"/> </tr><br/>

        <button type="submit">提交</button>
    </form>
</div>
</body>

</html>



3.edit.html

<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style type="text/css">
        table {border-collapse: collapse; font-size: 14px;
            width: 80%; margin: auto}
        table, th, td {border: 0px solid darkslategray;padding: 10px}
        .btgn{
            font-family: "Microsoft YaHei UI";
            font-size: 16px;
            color: #255e95;
            background-color: #99CCFF;
            text-align: center;
        }
        .ccc{
            font-family: "Microsoft YaHei UI";
            font-size: 16px;
            color: #255e95;
            background-color: #ff7c76;
            text-align: center;
        }

        tr:nth-child(2n){
            background-color:#FFCC99;
        }
        tr:nth-child(2n+1) {
            background-color: #99CC99;
        }

        .c{
            width: 200px;
        }

    </style>
</head>
<body>
<span class="span" style="color: darkslategray; font-size: 30px" >修改页面!!!</span>
<body>
<div style="margin:122px auto; width:392px">


    <form action="/manager/updateUsers" method="post" class="c" th:value="userInfo">
        <!-- <form action="AddUser" method="get">-->
        <tr hidden><th class="ccc"></th> <input hidden name="id"class="btn" th:value="${userInfo.id}"/><tr/> <br/>
        <tr><th class="ccc">用户名:</th> <input name="name"class="btn" th:value="${userInfo.name}"/><tr/> <br/>
        <tr><th class="btgn">密码:</th> <input name="password" class="btn"th:value="${userInfo.password}"/> </tr><br/>
        <tr><th class="ccc">手机号:</th> <input name="tel"class="btn" th:value="${userInfo.tel}"/> </tr><br/>
        <button type="submit">提交啊</button>
    </form>
</div>
</body>
</html>


Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐