idea+springboot+Mybatis搭建web项目

2023-12-22 11:37:27

1、创建项目project,然后选择Spring initializr，点击下一步
idea+springboot+Mybatis搭建web项目
2、按图示进行勾选，点击下一步，给项目起个名字，点击确定。
idea+springboot+Mybatis搭建web项目
项目结构
idea+springboot+Mybatis搭建web项目

3.配置application.properties

server.port=8081
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/student?useUnicode=true&characterEncoding=utf-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
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/
spring.resources.static-locations=classpath:/static/images/
logging.level.com.uokos.silence.student.mapper=debug

pom.xml

 <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>1.3.2</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>

4.FunUserContorller

@Controller
@RequestMapping("/funUser")
public class FunUserController {

    @Autowired
    private IFunUsersService iFunUsers;

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

    @GetMapping("/all")
    public String all(Model model) {
        List<FunUsers> users = iFunUsers.getAll();
        model.addAttribute("users", users);
        return "user/allUser";
    }

    @GetMapping("/all2")
    @ResponseBody
    public JsonTools<Object> getAllUser() throws Exception{
        JsonTools<Object> jsonTools = new JsonTools<>();
        Map<String, Object> map = new HashMap<>();
        try {
            List<FunUsers> list = iFunUsers.getAll();
            map.put("all",list);
            jsonTools.setData(map);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return jsonTools;
    }


    @GetMapping("/keywords")
    public String getKeyWords(Model model,FunUsers keywords) {
        List<FunUsers> list = iFunUsers.selectKeyWords(keywords);
        model.addAttribute("users", list);
        return "user/allUser";
    }


/*    @GetMapping("/keywords")
    @ResponseBody
    public AjaxResponse<Object> getKeyWords(FunUsers keywords){
        AjaxResponse<Object> ajaxResponse = new AjaxResponse<>();
        try {
            List<FunUsers> list = iFunUsers.selectKeyWords(keywords);
            ajaxResponse.setData(list);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return ajaxResponse;
    }*/


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

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

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


    /**
     * 添加用户
     * @param funUsers
     * @return
     */
    @RequestMapping("addUser")
    public ModelAndView AddUser(FunUsers funUsers) {
        funUsers.setAddTime(new Date());
        iFunUsers.insertSelective(funUsers);
        ModelAndView mav = new ModelAndView("redirect:/funUser/all");
        return mav;
    }


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


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

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

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

5.FunUsers

public class FunUsers implements Serializable {
    private Integer id;


    private String username;


    private String usernumber;

    private String number;

    private String maogai;

    private String shuzhi;

    private String modian;

    private String yinyu;

    private String web;

    private String riyu;

    private String shuju;

    private String wuli;

    private String dashuju;

    private String java;

    private String bujige;

    private String pingjun;

    private String zongfen;

    private String zongxuefen;

    private String pjxf;

    private String pjjd;
    /**
     * 创建时间
     */
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date addTime;

    /**
     * 更新时间
     */
    @JsonFormat(pattern = "yyyy-MM-dd")
    private Date updateTime;

    /**
     * 逻辑删除
     */
    private Boolean deleted;

    private  String keywords;
}

6.User:

public  class User{

    private  String userName;


    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }
}

7.UserService:

public interface UserService {

    List<User> queryList(User user);
}

8.FunUsersMapper:

public interface FunUsersMapper {
    int deleteByPrimaryKey(Integer id);

    int insertSelective(FunUsers record);

    FunUsers selectByPrimaryKey(Integer id);

    int updateByPrimaryKey(FunUsers users);

    List<FunUsers>  getAll();

    List<FunUsers>  selectKeyWords(FunUsers keywords);
}

9.FunUsersImpl:

public class FunUsersImpl implements IFunUsersService {
    @Autowired
    private FunUsersMapper funUsersMapper;

    @Override
    public int deleteByPrimaryKey(Integer id) {
        return funUsersMapper.deleteByPrimaryKey(id);
    }

    @Override
    public int insertSelective(FunUsers record) {
        return funUsersMapper.insertSelective(record);
    }

    @Override
    public FunUsers selectByPrimaryKey(Integer id) {
        return funUsersMapper.selectByPrimaryKey(id);
    }

    @Override
    public int updateByPrimaryKey(FunUsers users) {
        return funUsersMapper.updateByPrimaryKey(users);
    }


    @Override
    public List<FunUsers> getAll() {
        return funUsersMapper.getAll();
    }

    @Override
    public List<FunUsers> selectKeyWords(FunUsers keywords) {
        return funUsersMapper.selectKeyWords(keywords);
    }


}

10.IFunUsersService:

public interface IFunUsersService {

    int deleteByPrimaryKey(Integer id);

    int insertSelective(FunUsers record);

    FunUsers selectByPrimaryKey(Integer id);

    int updateByPrimaryKey(FunUsers users);

    List<FunUsers>  getAll();

    List<FunUsers>  selectKeyWords(FunUsers keywords);
}

11.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 background="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg9.51tietu.net%2Fpic%2F2019-091009%2F4cw1seuixee4cw1seuixee.jpg&refer=http%3A%2F%2Fimg9.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643832823&t=18d18c06a98651b13bf5a56d2f73c8ad"
      style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<span class="span"  style="color: darkslategray;text-align: center; font-size: 30px" >新增用户信息</span>
<div style="margin:122px auto; width:392px">
    <form action="/funUser/addUser" method="post" class="c" th:object="${user}">
        <!-- <form action="AddUser" method="get">-->
        <tr><th class="ccc">姓名:</th> <input required="required" name="username"class="btn"  AUTOCOMPLETE="off" th:value="${username}"/><tr/> <br/>
        <tr><th class="btgn">学号:</th> <input required="required"  name="usernumber" class="btn"  AUTOCOMPLETE="off" th:value="${usernumber}"/> </tr><br/>
        <tr><th class="ccc">课程门数:</th> <input required="required" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')"  name="number"class="btn"  AUTOCOMPLETE="off" th:value="${number}"/> </tr><br/>
        <tr><th class="btgn">毛概学分:</th> <input required="required"  name="maogai" class="btn"  AUTOCOMPLETE="off" th:value="${maogai}"/> </tr><br/>
        <tr><th class="btgn">数值学分:</th> <input required="required"  name="shuzhi" class="btn"  AUTOCOMPLETE="off" th:value="${shuzhi}"/> </tr><br/>
        <tr><th class="btgn">模电学分:</th> <input required="required"  name="modian" class="btn"  AUTOCOMPLETE="off" th:value="${modian}"/> </tr><br/>
        <tr><th class="btgn">英语学分:</th> <input required="required"  name="yinyu" class="btn"  AUTOCOMPLETE="off" th:value="${yinyu}"/> </tr><br/>
        <tr><th class="btgn">WEB学分:</th> <input required="required"  name="web" class="btn"  AUTOCOMPLETE="off" th:value="${web}"/> </tr><br/>
        <tr><th class="btgn">日语学分:</th> <input required="required"  name="riyu" class="btn"  AUTOCOMPLETE="off" th:value="${riyu}"/> </tr><br/>
        <tr><th class="btgn">数据结构学分:</th> <input required="required"  name="shuju" class="btn"  AUTOCOMPLETE="off" th:value="${shuju}"/> </tr><br/>
        <tr><th class="btgn">物理学分:</th> <input required="required"  name="wuli" class="btn"  AUTOCOMPLETE="off" th:value="${wuli}"/> </tr><br/>
        <tr><th class="btgn">大数据学分:</th> <input required="required"  name="dashuju" class="btn"  AUTOCOMPLETE="off" th:value="${dashuju}"/> </tr><br/>
        <tr><th class="btgn">JAVA学分:</th> <input required="required"  name="java" class="btn"  AUTOCOMPLETE="off" th:value="${java}"/> </tr><br/>
        <tr><th class="btgn">不及格门数:</th> <input required="required"  name="bujige" class="btn"  AUTOCOMPLETE="off" th:value="${bujige}"/> </tr><br/>
        <tr><th class="btgn">平均分:</th> <input required="required"  name="pingjun" class="btn"  AUTOCOMPLETE="off" th:value="${pingjun}"/> </tr><br/>
        <tr><th class="btgn">总分:</th> <input required="required"  name="zongfen" class="btn"  AUTOCOMPLETE="off" th:value="${zongfen}"/> </tr><br/>
        <tr><th class="btgn">总学分:</th> <input required="required"  name="zongxuefen" class="btn"  AUTOCOMPLETE="off" th:value="${zongxuefen}"/> </tr><br/>
        <tr><th class="btgn">平均学分绩:</th> <input required="required"  name="pjxf" class="btn"  AUTOCOMPLETE="off" th:value="${pjxf}"/> </tr><br/>
        <tr><th class="btgn">平均绩点:</th> <input required="required"  name="pjjd" class="btn"  AUTOCOMPLETE="off" th:value="${pjjd}"/> </tr><br/>

        <button type="submit" onclick="validate()">提交</button>
    </form>
</div>
</body>

</html>

12.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 background="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F061cb9f525ce3b5a9fd1b576c97ba1139a67f94c125d02-58jsU3_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643832912&t=e00d7bc9a90b32e402eb9c7d1f5e4b8d"
      style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<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="panel-body">
   <div class="row">
    <div class="col-sm-8">
        <form class="form-inline" action="/funUser/keywords?search=search" method="GET">
            <div class="form-group m-r-10">
                <input class="form-control" type="text" value="" id="keywords" name="keywords" placeholder="模糊查询" data-parsley-required="true">
                <button type="submit" class="btn btn-sm btn-primary m-r-5 ajax-form-search"><i class="fa fa-search m-r-5"></i>搜索</button>
            </div>
        </form>
    </div>
   </div>
</div>
    <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>
            <th class="btgn">英语学分</th>
            <th class="btgn">WEB学分</th>
            <th class="btgn">日语学分</th>
            <th class="btgn">数据结构学分</th>
            <th class="btgn">物理学分</th>
            <th class="btgn">大数据学分</th>
            <th class="btgn">JAVA学分</th>
            <th class="btgn">不及格门数</th>
            <th class="btgn">平均分</th>
            <th class="btgn">总分</th>
            <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.username}"></td>
            <td th:text="${user.usernumber}"></td>
            <td th:text="${user.number}"></td>
            <td th:text="${user.maogai}"></td>
            <td th:text="${user.shuzhi}"></td>
            <td th:text="${user.modian}"></td>
            <td th:text="${user.yinyu}"></td>
            <td th:text="${user.web}"></td>
            <td th:text="${user.riyu}"></td>
            <td th:text="${user.shuju}"></td>
            <td th:text="${user.wuli}"></td>
            <td th:text="${user.dashuju}"></td>
            <td th:text="${user.java}"></td>
            <td th:text="${user.bujige}"></td>
            <td th:text="${user.pingjun}"></td>
            <td th:text="${user.zongfen}"></td>
            <td th:text="${user.zongxuefen}"></td>
            <td th:text="${user.pjxf}"></td>
            <td th:text="${user.pjjd}"></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 th:text="${#dates.format(user.birthday, 'yyyy-MM-dd')}">1980-02-30</td>-->
            <!--<td th:text="${user.phone}">1</td>-->
            <td><a th:href="@{'/funUser/edit?id='+${user.id}}"><input type="submit" value="修改用户"></a>
            <a onclick="return confirm('确定删除当前数据?')"  th:href="@{'/funUser/delete/'+${user.id}}"><input type="submit" value="删除用户"></a></td>
        </tr>
    </table>
</div>
</body>

</html>

13.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 background="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp4.itc.cn%2Fq_70%2Fimages03%2F20200622%2F5b260cd10bd745e2988e4f41df2c5432.jpeg&refer=http%3A%2F%2Fp4.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643833070&t=0512626a5e4052213a777d7dd4444968"
      style=" background-repeat:no-repeat ;
background-size:100% 100%;
background-attachment: fixed;">
<span class="span" style="color: darkslategray; font-size: 30px" >修改用户信息</span>
<body>
<div style="margin:122px auto; width:392px">


    <form action="/funUser/updateUsers" method="post" class="c" th:value="userInfo">
        <!-- <form action="AddUser" method="get">-->
        <tr hidden><th class="ccc"></th> <input required="required" hidden name="id" class="btn" AUTOCOMPLETE="off"  th:value="${userInfo.id}"/><tr/> <br/>
        <tr><th class="ccc">姓名:</th> <input required="required"  name="username"class="btn"  AUTOCOMPLETE="off"  th:value="${userInfo.username}"/><tr/> <br/>
        <tr><th class="btgn">学号:</th> <input required="required" name="usernumber" class="btn"  AUTOCOMPLETE="off"   th:value="${userInfo.usernumber}"/> </tr><br/>
        <tr><th class="ccc">课程门数:</th> <input  required="required" name="number"class="btn" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')"    AUTOCOMPLETE="off"  th:value="${userInfo.number}"/> </tr><br/>
        <tr><th class="btgn">毛概学分:</th> <input required="required"  name="maogai" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.maogai}"/> </tr><br/>
        <tr><th class="btgn">数值学分:</th> <input required="required"  name="shuzhi" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.shuzhi}"/> </tr><br/>
        <tr><th class="btgn">模电学分:</th> <input required="required"  name="modian" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.modian}"/> </tr><br/>
        <tr><th class="btgn">英语学分:</th> <input required="required"  name="yinyu" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.yinyu}"/> </tr><br/>
        <tr><th class="btgn">WEB学分:</th> <input required="required"  name="web" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.web}"/> </tr><br/>
        <tr><th class="btgn">日语学分:</th> <input required="required"  name="riyu" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.riyu}"/> </tr><br/>
        <tr><th class="btgn">数据结构学分:</th> <input required="required"  name="shuju" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.shuju}"/> </tr><br/>
        <tr><th class="btgn">物理学分:</th> <input required="required"  name="wuli" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.wuli}"/> </tr><br/>
        <tr><th class="btgn">大数据学分:</th> <input required="required"  name="dashuju" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.dashuju}"/> </tr><br/>
        <tr><th class="btgn">JAVA学分:</th> <input required="required"  name="java" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.java}"/> </tr><br/>
        <tr><th class="btgn">不及格门数:</th> <input required="required"  name="bujige" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.bujige}"/> </tr><br/>
        <tr><th class="btgn">平均分:</th> <input required="required"  name="pingjun" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.pingjun}"/> </tr><br/>
        <tr><th class="btgn">总分:</th> <input required="required"  name="zongfen" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.zongfen}"/> </tr><br/>
        <tr><th class="btgn">总学分:</th> <input required="required"  name="zongxuefen" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.zongxuefen}"/> </tr><br/>
        <tr><th class="btgn">平均学分绩:</th> <input required="required"  name="pjxf" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.pjxf}"/> </tr><br/>
        <tr><th class="btgn">平均绩点:</th> <input required="required"  name="pjjd" class="btn"  AUTOCOMPLETE="off" th:value="${userInfo.pjjd}"/> </tr><br/>
        <button type="submit">提交</button>
    </form>
</div>
</body>
</body>
</html>

数据库：
idea+springboot+Mybatis搭建web项目
运行结果：
idea+springboot+Mybatis搭建web项目
idea+springboot+Mybatis搭建web项目
idea+springboot+Mybatis搭建web项目
idea+springboot+Mybatis搭建web项目

总结：这次实验运用到了spring boot和mybatis以及MySQL数据库来搭建这个web项目，用mybatis来对数据库进行访问可以说是很方便了，mybatis的自动生成工具也生成对应数据库文件的映射，而MySQL的数据直接导入得到的表格即可，只是界面不太美观。

上一篇：第1次不依靠源代码打代码轮播图


下一篇：Android悬浮窗的一种实现，kotlin系统入门到进阶