使用springboot进行web项目开发2（含CRUD，404页面，整合mybatis）

太过爱你忘了你带给我的痛 2023-01-08 05:21 48阅读 0赞

##### 5.实现数据的CRUD #####

登录成功以后会进入到main.html（对应dashboard.html页面），因为在自定义的mvcconfig中进行了对应的匹配

@Override
        public void addViewControllers(ViewControllerRegistry registry) { 
            registry.addViewController("/").setViewName("index");
            registry.addViewController("/index.html").setViewName("index");
            registry.addViewController("/main.html").setViewName("dashboard");
        }

1.  对dashboard页面的公共部分进行抽离，新建commons目录，存放commons.html
2.  使用thymeleaf对dashboard页面进行替换
3.  编写dashboard页面中的员工管理页面
    
    1.  创建employee和department实体类
        
        1.  employee
            
                package com.cai.pojo;
                
                import lombok.AllArgsConstructor;
                import lombok.Data;
                import lombok.NoArgsConstructor;
                import org.springframework.format.annotation.DateTimeFormat;
                
                import java.util.Date;
                
                /** * @BelongsProject:IntelliJ IDEA * @Package:com.cai.pojo * @Author:superman * @CreateTime:2021--01--13 12:41 * @Description:员工类 */
                @Data
                @NoArgsConstructor
                public class Employee { 
                    private Integer id;
                    private String lastName;
                    private String email;
                    private Integer gender;//性别 0 代表女 1 代表男
                    private Department department;
                    private Date birth;
                
                    public Employee(Integer id, String lastName, String email, Integer gender, Department department) { 
                        this.id = id;
                        this.lastName = lastName;
                        this.email = email;
                        this.gender = gender;
                        this.department = department;
                        //默认的创建日期
                        this.birth = new Date();
                    }
                }
        2.  department
            
                package com.cai.pojo;
                
                import lombok.AllArgsConstructor;
                import lombok.Data;
                import lombok.NoArgsConstructor;
                
                /** * @BelongsProject:IntelliJ IDEA * @Package:com.cai.pojo * @Author:superman * @CreateTime:2021--01--13 12:36 * @Description:部门类 */
                @Data
                @AllArgsConstructor
                @NoArgsConstructor
                public class Department { 
                    private Integer id;
                    private String departmentName;
                
                }
    2.  创建dao并模拟虚拟数据以及操作语句
        
        1.  employeedao
            
                package com.cai.dao;
                
                import com.cai.pojo.Department;
                import com.cai.pojo.Employee;
                import org.springframework.beans.factory.annotation.Autowired;
                import org.springframework.stereotype.Repository;
                
                import java.util.Collection;
                import java.util.HashMap;
                import java.util.Map;
                
                /** * @BelongsProject:IntelliJ IDEA * @Package:com.cai.dao * @Author:superman * @CreateTime:2021--01--13 12:59 * @Description: */
                @Repository
                public class EmpolyeeDao { 
                    //模拟数据库中的数据
                    private static Map<Integer, Employee> employees=null;
                    @Autowired
                    private DepartmentDao departmentDao;
                    static { 
                        employees=new HashMap<Integer,Employee>();//创建一个部门表
                        employees.put(1001,new Employee(1001,"测试姓名1","测试邮箱1@qq.com",1,new Department(101,"教学部")));
                        employees.put(1002,new Employee(1002,"测试姓名2","测试邮箱2@qq.com",0,new Department(102,"市场部")));
                        employees.put(1003,new Employee(1003,"测试姓名3","测试邮箱3@qq.com",1,new Department(103,"教研部")));
                        employees.put(1004,new Employee(1004,"测试姓名4","测试邮箱4@qq.com",0,new Department(104,"运营部")));
                        employees.put(1005,new Employee(1005,"测试姓名5","测试邮箱5@qq.com",1,new Department(105,"后勤部")));
                    }
                
                    //主键自增
                    private static Integer initId=1006;
                    //增加一个员工
                    public void save(Employee employee){ 
                        if (employee.getId()==null){ 
                            employee.setId(initId++);
                        }
                            employee.setDepartment(departmentDao.getDepartmentById(employee.getDepartment().getId()));
                            employees.put(employee.getId(),employee);
                    }
                
                    //查询全部员工信息
                    public Collection<Employee> getAll(){ 
                        return employees.values();
                    }
                
                    //通过id查询员工
                    public Employee getById(Integer id){ 
                        return employees.get(id);
                    }
                
                    //通过id删除员工
                    public void delete(Integer id){ 
                        employees.remove(id);
                    }
                }
        2.  departmentdao
            
                package com.cai.dao;
                
                import com.cai.pojo.Department;
                import org.springframework.stereotype.Repository;
                
                import java.util.Collection;
                import java.util.HashMap;
                import java.util.Map;
                
                /** * @BelongsProject:IntelliJ IDEA * @Package:com.cai.dao * @Author:superman * @CreateTime:2021--01--13 12:44 * @Description: */
                @Repository
                public class DepartmentDao { 
                    //模拟数据库中的数据
                    private static Map<Integer,Department> departments = null;
                    static { 
                        departments = new HashMap<>();//创建一个部门表
                        departments.put(101,new Department(101,"教学部"));
                        departments.put(102,new Department(102,"市场部"));
                        departments.put(103,new Department(103,"教研部"));
                        departments.put(104,new Department(104,"运营部"));
                        departments.put(105,new Department(105,"后勤部"));
                
                    }
                
                    //获得所有部门的信息
                    public Collection<Department> getDepartments(){ 
                        return departments.values();
                    }
                
                    //通过id得到部门
                    public Department getDepartmentById(Integer id){ 
                        return departments.get(id);
                    }
                }
    3.  数据操作的各个页面add.html list.html update.html
        
        1.  add.html
            
                <!DOCTYPE html>
                
                <html lang="en" xmlns:th="http://www.thymeleaf.org">
                
                <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                    <meta name="description" content="">
                    <meta name="author" content="">
                
                    <title>Dashboard Template for Bootstrap</title>
                    
                    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
                
                    
                    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
                    <style type="text/css"> /* Chart.js */ @-webkit-keyframes chartjs-render-animation { from { opacity: 0.99 } to { opacity: 1 } } @keyframes chartjs-render-animation { from { opacity: 0.99 } to { opacity: 1 } } .chartjs-render-monitor { -webkit-animation: chartjs-render-animation 0.001s; animation: chartjs-render-animation 0.001s; } </style>
                </head>
                
                <body>
                <div th:replace="~{commons/commons::topbar}"></div>
                
                <div class="container-fluid">
                    <div class="row">
                        <div th:replace="~{commons/commons::sidebar(active='list.html')}"></div>
                
                        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                
                
                            <form th:action="@{/emp}" method="post">
                                <div class="form-group">
                                    <label>LastName</label>
                                    <input type="text" name="lastName" class="form-control" placeholder="测试用户x">
                                </div>
                                <div class="form-group">
                                    <label>Email</label>
                                    <input type="email" name="email" class="form-control" placeholder="测试邮箱x@qq.com">
                                </div>
                                <div class="form-group">
                                    <label>Gender</label><br>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="gender" value="1">
                                        <label class="form-check-label">男</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="gender" value="0">
                                        <label class="form-check-label">女</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>department</label>
                                    
                                    <select class="form-control" name="department.id">
                                        <option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
                
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Birth</label>
                                    <input type="text" name="birth" class="form-control" placeholder="yyyy/MM/dd">
                                </div>
                                <button type="submit" class="btn btn-primary">添加</button>
                            </form>
                
                
                        </main>
                    </div>
                </div>
                
                
                
                <script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
                <script type="text/javascript" src="asserts/js/popper.min.js"></script>
                <script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
                
                
                <script type="text/javascript" src="asserts/js/feather.min.js"></script>
                <script> feather.replace() </script>
                
                
                <script type="text/javascript" src="asserts/js/Chart.min.js"></script>
                <script> var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: 'line', data: { labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], datasets: [{ data: [15339, 21345, 18483, 24003, 23489, 24092, 12034], lineTension: 0, backgroundColor: 'transparent', borderColor: '#007bff', borderWidth: 4, pointBackgroundColor: '#007bff' }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: false } }] }, legend: { display: false, } } }); </script>
                
                </body>
                
                </html>
        2.  list.html
            
                <!DOCTYPE html>
                
                <html lang="en" xmlns:th="http://www.thymeleaf.org">
                
                <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                    <meta name="description" content="">
                    <meta name="author" content="">
                
                    <title>Dashboard Template for Bootstrap</title>
                    
                    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
                
                    
                    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
                    <style type="text/css">
                        /* Chart.js */
                
                        @-webkit-keyframes chartjs-render-animation { 
                            from { 
                                opacity: 0.99
                            }
                            to { 
                                opacity: 1
                            }
                        }
                
                        @keyframes chartjs-render-animation { 
                            from { 
                                opacity: 0.99
                            }
                            to { 
                                opacity: 1
                            }
                        }
                
                        .chartjs-render-monitor { 
                            -webkit-animation: chartjs-render-animation 0.001s;
                            animation: chartjs-render-animation 0.001s;
                        }
                    </style>
                </head>
                
                <body>
                <div th:replace="~{commons/commons::topbar}"></div>
                
                <div class="container-fluid">
                    <div class="row">
                        <div th:replace="~{commons/commons::sidebar(active='list.html')}"></div>
                
                        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                            <h2>Section title</h2>
                            <h2><a class="btn-sm btn-success" th:href="@{/emp}">添加员工</a></h2>
                
                
                            <div class="table-responsive">
                                <table class="table table-striped table-sm">
                                    <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>lastName</th>
                                        <th>email</th>
                                        <th>gender</th>
                                        <th>department</th>
                                        <th>birth</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="emp:${emps}">
                                        <td th:text="${emp.getId()}"></td>
                                        <td th:text="${emp.getLastName()}"></td>
                                        <td th:text="${emp.getEmail()}"></td>
                                        <td th:text="${emp.getGender()==0?'女':'男'}"></td>
                                        <td th:text="${emp.department.getDepartmentName()}"></td>
                                        <td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm:ss')}"></td>
                                        <td>
                                            
                                            <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">编辑</a>
                                            <a class="btn btn-sm btn-danger" th:href="@{/delemp/}+${emp.getId()}">删除</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </main>
                    </div>
                </div>
                
                
                
                <script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
                <script type="text/javascript" src="asserts/js/popper.min.js"></script>
                <script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
                
                
                <script type="text/javascript" src="asserts/js/feather.min.js"></script>
                <script>
                    feather.replace()
                </script>
                
                
                <script type="text/javascript" src="asserts/js/Chart.min.js"></script>
                <script>
                    var ctx = document.getElementById("myChart");
                    var myChart = new Chart(ctx, { 
                        type: 'line',
                        data: { 
                            labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
                            datasets: [{ 
                                data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
                                lineTension: 0,
                                backgroundColor: 'transparent',
                                borderColor: '#007bff',
                                borderWidth: 4,
                                pointBackgroundColor: '#007bff'
                            }]
                        },
                        options: { 
                            scales: { 
                                yAxes: [{ 
                                    ticks: { 
                                        beginAtZero: false
                                    }
                                }]
                            },
                            legend: { 
                                display: false,
                            }
                        }
                    });
                </script>
                
                </body>
                
                </html>
        3.  update.html
            
                <!DOCTYPE html>
                
                <html lang="en" xmlns:th="http://www.thymeleaf.org">
                
                <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                    <meta name="description" content="">
                    <meta name="author" content="">
                
                    <title>Dashboard Template for Bootstrap</title>
                    
                    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
                
                    
                    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
                    <style type="text/css">
                        /* Chart.js */
                
                        @-webkit-keyframes chartjs-render-animation { 
                            from { 
                                opacity: 0.99
                            }
                            to { 
                                opacity: 1
                            }
                        }
                
                        @keyframes chartjs-render-animation { 
                            from { 
                                opacity: 0.99
                            }
                            to { 
                                opacity: 1
                            }
                        }
                
                        .chartjs-render-monitor { 
                            -webkit-animation: chartjs-render-animation 0.001s;
                            animation: chartjs-render-animation 0.001s;
                        }
                    </style>
                </head>
                
                <body>
                <div th:replace="~{commons/commons::topbar}"></div>
                
                <div class="container-fluid">
                    <div class="row">
                        <div th:replace="~{commons/commons::sidebar(active='list.html')}"></div>
                
                        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                
                
                            <form th:action="@{/updateEmp}" method="post">
                                <input type="hidden" name="id" th:value="${emp.getId()}">
                                <div class="form-group">
                                    <label>LastName</label>
                                    <input th:value="${emp.getLastName()}" type="text" name="lastName" class="form-control" placeholder="测试用户x">
                                </div>
                                <div class="form-group">
                                    <label>Email</label>
                                    <input th:value="${emp.getEmail()}" type="email" name="email" class="form-control" placeholder="测试邮箱x@qq.com">
                                </div>
                                <div class="form-group">
                                    <label>Gender</label><br>
                                    <div class="form-check form-check-inline">
                                        <input th:checked="${emp.getGender()==1}" class="form-check-input" type="radio" name="gender" value="1">
                                        <label class="form-check-label">男</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input th:checked="${emp.getGender()==0}" class="form-check-input" type="radio" name="gender" value="0">
                                        <label class="form-check-label">女</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>department</label>
                                    
                                    <select class="form-control" name="department.id">
                                        <option th:selected="${dept.getId()==emp.getDepartment().getId()}" th:each="dept:${departments}" th:text="${dept.getDepartmentName()}"
                                                th:value="${dept.getId()}"></option>
                
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Birth</label>
                                    <input th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm')}" type="text" name="birth" class="form-control" placeholder="yyyy/MM/dd">
                                </div>
                                <button type="submit" class="btn btn-primary">修改</button>
                            </form>
                
                
                        </main>
                    </div>
                </div>
                
                
                
                <script type="text/javascript" src="asserts/js/jquery-3.2.1.slim.min.js"></script>
                <script type="text/javascript" src="asserts/js/popper.min.js"></script>
                <script type="text/javascript" src="asserts/js/bootstrap.min.js"></script>
                
                
                <script type="text/javascript" src="asserts/js/feather.min.js"></script>
                <script>
                    feather.replace()
                </script>
                
                
                <script type="text/javascript" src="asserts/js/Chart.min.js"></script>
                <script>
                    var ctx = document.getElementById("myChart");
                    var myChart = new Chart(ctx, { 
                        type: 'line',
                        data: { 
                            labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
                            datasets: [{ 
                                data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
                                lineTension: 0,
                                backgroundColor: 'transparent',
                                borderColor: '#007bff',
                                borderWidth: 4,
                                pointBackgroundColor: '#007bff'
                            }]
                        },
                        options: { 
                            scales: { 
                                yAxes: [{ 
                                    ticks: { 
                                        beginAtZero: false
                                    }
                                }]
                            },
                            legend: { 
                                display: false,
                            }
                        }
                    });
                </script>
                
                </body>
                
                </html>

##### 6.实现404页面 #####

只需要在templates目录下创建error文件夹，然后将404.html页面放入即可

##### 7.spring-boot 整合mybatis #####

1.  创建user实体类
    
        @Data
        @NoArgsConstructor
        @AllArgsConstructor
        public class User { 
            private int id;
            private String name;
            private String pwd;
        }
2.  引入mybatis的依赖
    
        <dependency>
                    <groupId>org.mybatis.spring.boot</groupId>
                    <artifactId>mybatis-spring-boot-starter</artifactId>
                    <version>2.1.1</version>
                </dependency>
3.  在ressources目录下创建mybatis.mapper文件夹，创建usermapper.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.cai.mapper.UserMapper">
        
            <select id="queryUserList" resultType="User">
                select *
                from user;
            </select>
        
            <select id="queryUserById" resultType="User">
                select *
                from user
                where id = #{id};
            </select>
        
            <insert id="addUser" parameterType="User">
                insert into user (id, name, pwd)
                values (#{id}, #{name}, #{pwd});
            </insert>
        
            <update id="updateUser" parameterType="User">
                update user
                set name = #{name},
                    pwd = #{pwd}
                where id = #{id};
            </update>
        
            <delete id="deleteUser" parameterType="int">
                delete
                from user
                where id = #{id};
            </delete>
        
        </mapper>
4.  创建usermapp.interface
    
        @Mapper
        @Repository
        public interface UserMapper { 
        
            //public static final int age =18;
        
            List<User> queryUserList();
        
            User queryUserById(int id);
        
            int addUser(User user);
        
            int updateUser(User user);
        
            int deleteUser(int id);
        }
5.  创建usercontroller
    
        @RestController
        public class UserController { 
        
            @Autowired
            private UserMapper userMapper;
        
            @GetMapping("/queryUserList")
            public List<User> queryUserList(){ 
                List<User> users = userMapper.queryUserList();
                for (User user : users) { 
                    System.out.println(user);
                }
                return users;
            }
        
            @GetMapping("/addUser")
            public String addUser(){ 
                userMapper.addUser(new User(5,"xiaoming","11245678"));
                return "ok";
            }
        
            @GetMapping("/updateUser")
            public String updateUser(){ 
                userMapper.updateUser(new User(5,"xiaohong","45678"));
                return "ok";
            }
        
            @GetMapping("/deleteUser")
            public String deleteUser(){ 
                userMapper.deleteUser(5);
                return "ok";
            }
        
            @GetMapping("/queryUserById")
            public User queryUserById(){ 
                User user = userMapper.queryUserById(5);
                return user;
            }
        }