【无标题】

效果展示

1.查询所有

2.根据电话号查询

3，添加


4.更新


5.删除

数据库建表

DROP TABLE IF EXISTS `phone_type`;
CREATE TABLE `phone_type` (
  `type_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '类型id',
  `number_part` varchar(50) DEFAULT NULL COMMENT '号码段',
  `type_name` varchar(50) DEFAULT NULL COMMENT '类型名称',
  `type_remark` varchar(255) DEFAULT NULL COMMENT '类型备注',
  PRIMARY KEY (`type_id`),
  KEY `type_id` (`type_id`,`type_name`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
INSERT INTO `phone_type` VALUES ('1', '131', '中国联通', '老号码');

导入依赖并修改配置文件

pom.xml文件：

 <!-- mybatis -->
   <dependency>
       <groupId>org.mybatis.spring.boot</groupId>
       <artifactId>mybatis-spring-boot-starter</artifactId>
       <version>2.1.3</version>
   </dependency>
   
 <!-- thymeleaf -->
   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-thymeleaf</artifactId>
   </dependency>
   
   <!-- mysql -->
   <dependency>
       <groupId>mysql</groupId>
       <artifactId>mysql-connector-java</artifactId>
       <scope>runtime</scope>
   </dependency>
   
   <!-- web -->
   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
   </dependency>

application. properties：
需要修改数据库信息和dao包路径

spring.datasource.url=jdbc:mysql://localhost:3306/yk?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
spring.datasource.username=root
spring.datasource.password=root
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

# thymeleaf
spring.thymeleaf.mode=HTML5
spring.thymeleaf.encoding=UTF-8
spring.thymeleaf.cache=false
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

# mybatis

mybatis.type-aliases-package=com.example.pojo

3、实体类

public class PhoneType {
    private String type_id;
    private String number_part;
    private String type_name;
    private String type_remark;

    public String getType_id() {
        return type_id;
    }

    public void setType_id(String type_id) {
        this.type_id = type_id;
    }

    public String getNumber_part() {
        return number_part;
    }

    public void setNumber_part(String number_part) {
        this.number_part = number_part;
    }

    public String getType_name() {
        return type_name;
    }

    public void setType_name(String type_name) {
        this.type_name = type_name;
    }

    public String getType_remark() {
        return type_remark;
    }

    public void setType_remark(String type_remark) {
        this.type_remark = type_remark;
    }
}

4、PhoneTypeMapper

package com.example.dao;

import com.example.pojo.PhoneType;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;

import java.util.List;

@Mapper
public interface PhoneTypeMapper {
    PhoneType findByNumber(@Param("number_part") String number_part);
    void addPhone(PhoneType phoneType);
    void updatePhone(PhoneType phoneType);
    void deletePhone(@Param("type_id") String type_id);
    List<PhoneType> findAll();
    PhoneType findById(@Param("type_id") String type_id);

}

5、PhoneTypeMapper.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.dao.PhoneTypeMapper" >

    <resultMap id="phoneTypeMap" type="com.example.pojo.PhoneType" >
        <id column="type_id" property="type_id" jdbcType="INTEGER" />
        <result column="number_part" property="number_part" jdbcType="VARCHAR" />
        <result column="type_name" property="type_name" jdbcType="VARCHAR" />
        <result column="type_remark" property="type_remark" jdbcType="VARCHAR" />
    </resultMap>

    <select id="findByNumber" resultMap="phoneTypeMap" parameterType="String">
        select * from phone_type
        <where>
            number_part = #{number_part}
        </where>
    </select>

    <!--添加-->
    <insert id="addPhone" parameterType="com.example.pojo.PhoneType">
        insert into phone_type value (#{type_id},#{number_part},#{type_name},#{type_remark})
    </insert>

    <!--修改-->
    <update id="updatePhone" parameterType="com.example.pojo.PhoneType">
        update phone_type
        set type_id = #{type_id}, number_part= #{number_part},type_name = #{type_name},type_remark = #{type_remark}
        where type_id = #{type_id}
    </update>

    <!--删除-->
    <delete id="deletePhone" parameterType="String">
        delete from phone_type where type_id = #{type_id}
    </delete>

    <!--查询所有-->
    <select id="findAll"  resultMap="phoneTypeMap">
        select * from phone_type
    </select>

    <!--根据id查找-->
    <select id="findById" resultMap="phoneTypeMap" parameterType="com.example.pojo.PhoneType">
        select * from phone_type
        where type_id = #{type_id}
    </select>

</mapper>

６、PhoneTypeService

package com.example.service;
import com.example.pojo.PhoneType;

import java.util.List;
public interface PhoneTypeService {
    PhoneType findById(String id);
    List<PhoneType> findAll();
    void addPhone(PhoneType phoneType);
    void updatePhone(PhoneType phoneType);
    void deletePhone(String id);

    PhoneType findByNumber(String number_part);
}

７、PhoneTypeServiceImpl

package com.example.service.Impl;

import com.example.dao.PhoneTypeMapper;
import com.example.pojo.PhoneType;
import com.example.service.PhoneTypeService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class PhoneTypeServiceImpl implements PhoneTypeService {
    @Autowired
    private PhoneTypeMapper phoneTypeDao;

    @Override
    public PhoneType findById(String id) {
        return phoneTypeDao.findById(id);
    }

    @Override
    public List<PhoneType> findAll() {
        return phoneTypeDao.findAll();
    }

    @Override
    public void addPhone(PhoneType phoneType) {
        phoneTypeDao.addPhone(phoneType);
    }

    @Override
    public void updatePhone(PhoneType phoneType) {
        phoneTypeDao.updatePhone(phoneType);
    }

    @Override
    public void deletePhone(String id) {
        phoneTypeDao.deletePhone(id);
    }


    @Override
    public PhoneType findByNumber(String number_part) {
        return phoneTypeDao.findByNumber(number_part);
    }

}

８、PhoneTypeController

package com.example.controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import com.example.pojo.PhoneType;
import com.example.service.PhoneTypeService;
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.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import java.util.List;
@Controller
@Slf4j
public class PhoneTypeController {
    @Autowired
    PhoneTypeService phoneTypeService;

    //查看所有
    @RequestMapping("/")
    public String phone_type1(Model model){
        List<PhoneType> phoneTypes = phoneTypeService.findAll();
        model.addAttribute("phones",phoneTypes);
        log.info("---------------"+phoneTypes);
        return "/phone_type";
    }

    //查看所有
    @RequestMapping("/phone")
    public String phone_type(Model model){
        List<PhoneType> phoneTypes = phoneTypeService.findAll();
        model.addAttribute("phones",phoneTypes);
        return "/phone_type";
    }

    //跳转去添加页面
    @GetMapping("/add")
    public String toAdd(Model model){
        return "/add";
    }

    //添加操作
    @PostMapping("/add")
    public String addPT(PhoneType phoneType){
        //保存信息
        phoneTypeService.addPhone(phoneType);
        //重定向到列表页面
        return "redirect:/phone";
    }

    //跳转到更新页面
    @GetMapping("/toUpdate/{id}")
    public String toUpdate(@PathVariable("id") String id, Model model){
        //根据id查出来的信息
        PhoneType phoneType =  phoneTypeService.findById(id);
        //将信息返回给页面
        model.addAttribute("phones",phoneType);
        return "/update";
    }

    //更新操作
    @PostMapping("/update")
    public String updatePT(PhoneType phoneType){
        phoneTypeService.updatePhone(phoneType);
        return "redirect:/phone";
    }

    //通过号码查询
    @RequestMapping("/searchByNumber")
    public String findByNumber(HttpServletRequest request, Model model){
        //获取搜索框的值
        String search_input = request.getParameter("search_number");
        //根据号码查询的信息
        PhoneType phones2 = phoneTypeService.findByNumber(search_input);
        System.out.println(phones2);
        //将信息返回给页面
        model.addAttribute("phones",phones2);
        return "/phone_type";
    }


    //删除操作
    @GetMapping("/delPhone/{id}")
    public String delPhone(@PathVariable("id") String id){
        phoneTypeService.deletePhone(id);
        return "redirect:/phone";
    }
}

９、phone_type.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>手机号类型</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
    button{
        padding: 5px 20px 5px 20px;
        background-color: #8488f0;
        color: white;
    }
</style>
<body>
<form action="/searchByNumber">
    <input type="text" name="search_number" placeholder="请输入号码搜索">
    <input type="submit" value="搜索"  class="btn btn-success">
</form>

<div>
    <a th:href="@{/add}"><button type="button" class="btn btn-primary">添加</button></a>
    <a th:href="@{/phone}"><button type="button" class="btn btn-primary">查看全部</button></a>
</div>
<table class="table table-hover" style="width: 70%;">
    <thead>
    <tr>
        <th>编号</th>
        <th>手机号码</th>
        <th>运营商类型</th>
        <th>备注</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="phone:${phones}">
        <td th:text="${phone.type_id}"></td>
        <td th:text="${phone.number_part}"></td>
        <td th:text="${phone.type_name}"></td>
        <td th:text="${phone.type_remark}"></td>
        <td >
            <a class="btn btn-sm btn-primary" th:href="@{/toUpdate/}+${phone.type_id}">编辑</a>
            <a class="btn btn-sm btn-danger" th:href="@{/delPhone/}+${phone.type_id}">删除</a>
        </td>
    </tr>
    </tbody>
</table>


</body>
</html>

１０、add.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加</title>
</head>
<body>
<h2>添加信息</h2>
<form th:action="@{/add}" method="post">
    <table>
        <tr>
            <td><label for="InputNum">手机号</label></td>
            <td><input name="number_part" type="text" required id="InputNum" placeholder="手机号"></td>
        </tr>
        <tr>
            <td><label for="InputName">运营商</label></td>
            <td> <input name="type_name" type="text" required id="InputName" placeholder="运营商类型" ></td>
        </tr>
        <tr>
            <td><label for="InputText">备注</label></td>
            <td> <input name="type_remark" type="text" required id="InputText" placeholder="备注" ></td>
        </tr>
        <tr>
            <td> <button type="submit" >提交</button></td>
        </tr>
    </table>
</form>
</body>
</html>

１１、update.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>更新</title>
</head>
<body>
<h2>更新操作</h2>
<form th:action="@{/update}" th:method="post">
    <table>
        <tr>
            <td><label>手机号</label></td>
            <td><input name="number_part" type="text" th:value="${phones.number_part}"></td>
        </tr>
        <tr>
            <td><label>运营商</label></td>
            <td><input name="type_name" type="text"  th:value="${phones.type_name}"></td>
        </tr>
        <tr>
            <td><label>备注</label></td>
            <td><input name="type_remark" type="text" th:value="${phones.type_remark}"></td>
        </tr>
        <!--id也要传过去，不过这里把id隐藏不显示在页面-->
        <input name="type_id" type="hidden" th:value="${phones.type_id}"/>
        <tr>
            <td> <button type="submit" >提交</button></td>
        </tr>

    </table>
</form>
</body>
</html>

１２、各个文件的位置