Java topic notes ~ comprehensive case

3. Comprehensive case

3.1 Function introduction

 

The above are the functions we want to achieve in the comprehensive case. In addition to the function of adding, deleting, modifying and checking data, there are also some complex functions, such as 批量删除, 分页查询, 条件查询and other functions

• 批量删除Function: There is a checkbox in front of each piece of data. When I select multiple pieces of data and click 批量删除the button, a request will be sent to the backend and multiple pieces of data specified in the database will be deleted.

• 分页查询Function: When there is a lot of data in the database, it is impossible for us to display all the data in one page. At this time, we need to display the data in pages.

• 条件查询Function: When the database is large, we need to accurately query some data we want to see. At this time, we need to query by condition.

3.2 Environment preparation

Environmental preparation We mainly complete the following two things

• Import static pages into idea

• Execute the tb_brand.sql script provided in the data

3.2.1 Project preparation

Create a SpringBoot project brand-case and copy the static pages to the resources/static directory.

3.2.2 Create table

The following is the statement to create a table in the tb_brand.sql script

-- 删除tb_brand表
drop table if exists tb_brand;
-- 创建tb_brand表
create table tb_brand (
    -- id 主键
    id           int primary key auto_increment,
    -- 品牌名称
    brand_name   varchar(20),
    -- 企业名称
    company_name varchar(20),
    -- 排序字段
    ordered      int,
    -- 描述信息
    description  varchar(100),
    -- 状态：0：禁用  1：启用
    status       int
);
-- 添加数据
insert into tb_brand (brand_name, company_name, ordered, description, status)
values 
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0),
       ('华为', '华为技术有限公司', 100, '万物互联', 1),
       ('小米', '小米科技有限公司', 50, 'are you ok', 1),
       ('格力', '格力电器股份有限公司', 30, '让世界爱上中国造', 1),
       ('阿里巴巴', '阿里巴巴集团控股有限公司', 10, '买买买', 1),
       ('腾讯', '腾讯计算机系统有限公司', 50, '玩玩玩', 0),
       ('百度', '百度在线网络技术公司', 5, '搜搜搜', 0),
       ('京东', '北京京东世纪贸易有限公司', 40, '就是快', 1);

3.3 Query all functions

 

As shown in the figure above, it is to query the effect of displaying all brand data on the page. To achieve this function, you must first understand the following issues:

• When to send an asynchronous request?

  All the branding data needs to be visible on the page once the page has loaded. So mounted()write the code to send an asynchronous request in this constructor.

• Does the request need to carry parameters?

  There is no need to carry any parameters to query all functions.

• What is the data format of the response?

  The backend needs to List<Brand>convert the object into JSON formatted data and respond back to the browser. The response data format is as follows:

 

The overall process is as follows

 

We first implement the back-end program, and then implement the front-end program.

3.3.1 Backend implementation

3.3.1.1 Dao method implementation

Define abstract methods in com.ambow.mapper.BrandMapperthe interface, add annotations to the interface at the same time @Mapper, and use @Selectannotations to write sql statements

@Mapper
public interface BrandMapper {
    /**
     * 查询所有
     * @return
     */
    @Select("select * from tb_brand")
    List<Brand> selectAll();
}

Since some field names in the table do not correspond to the attribute names in the entity class, you need to com/ambow/mapper/BrandMapper.xmldefine the result mapping in the mapping configuration file and use resultMapthe tag. The content of the mapping configuration file is as follows:

<?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.ambow.mapper.BrandMapper">

    <resultMap id="brandResultMap" type="brand">
        <result property="brandName" column="brand_name" />
        <result property="companyName" column="company_name" />
    </resultMap>
</mapper>

After defining the result mapping relationship, selectAll()reference the structure mapping on the interface method. Use @ResultMap("brandResultMap")annotations

The method of the complete interface selectAll()is as follows:

@Mapper
public interface BrandMapper {
    /**
     * 查询所有
     * @return
     */
    @Select("select * from tb_brand")
    @ResultMap("brandResultMap")
    List<Brand> selectAll();
}

3.3.1.2 service method implementation

com.ambow.serviceCreate an interface under the package , BrandServicedefine and query all abstract methods in this interface

public interface BrandService {

    /**
     * 查询所有
     * @return
     */
    List<Brand> findAll();
}

And create a package com.ambow.serviceunder impl; implit means that it is a package to put the implementation class of the service layer interface. Under this package create BrandServiceImpla class named

BrandServiceImplThe class code is as follows:

@Service
public class BrandServiceImpl implements BrandService {
    @Autowired
    private BrandMapper brandMapper;

    @Override
    public List<Brand> findAll() {
        return brandMapper.selectAll();;
    }
}

3.3.1.3 Controller implementation

com.ambow.controllerDefine a controller class named under the package BrandController. And define the method in it. findAll()The method logic is as follows:

• Call the service findAllAll()method to query all brand data

• The retrieved brand collection will be returned List<Brand>as JSONa form.

code show as below:

@RestController
@RequestMapping("/brand")
public class BrandController {

    @Autowired
    private BrandService brandService;

    @RequestMapping("/findAll")
    public List<Brand> findAll(){
        return brandService.findAll();
    }

}

3.3.1.4 Test backend program

Enter the resource path of the access controller in the browser http://localhost:8080/brand-case/findAll, if no error is reported, and the following information can be seen, indicating that there is no problem with the backend program

 

3.3.2 Front-end implementation

The front end needs to send an ajax request after the page is loaded, so the logic of sending the request should be placed in mounted()the hook function. The data returned by the response needs to be assigned to the data model bound by the table. From the figure below, we can see that the data model bound by the table istableData

 

The front-end code is as follows:

mounted(){
     //当页面加载完成后，发送异步请求，获取数据
     var _this = this;

     axios({
         method:"get",
         url:"http://localhost:8080/brand-case/findAll"
     }).then(function (resp) {
         _this.tableData = resp.data;
     })
 }

3.4 Add function

 

The above figure is the dialog box for adding data. After clicking 提交the button, the data needs to be submitted to the backend and saved in the database. The following figure is the overall process:

 

When the page sends a request, the content entered in the input box needs to be submitted to the backend program, and here it is passed in json format. The specific data format is as follows:

 

==Note: Since the data is added, the id in the above json data has no value. ==

3.4.1 Backend implementation

3.4.1.1 Dao method implementation

BrandMapperDefine the add method in the interface insertBrand(), and use @Insertthe annotation to write the sql statement

/**
     * 添加数据
     * @param brand
     */
    @Insert("insert into tb_brand (brand_name,company_name,ordered,description,status) values(#{brandName},#{companyName},#{ordered},#{description},#{status})")
    int insertBrand(Brand brand);

3.4.1.2 Implementation of service method

BrandServiceDefine addBrand()the business logic method of adding data in the interface

/**
     * 添加数据
     * @param brand
     */
boolean addBrand(Brand brand);

BrandServiceImplOverride the method in the class and addBrand()implement the business logic

@Override
public boolean addBrand(Brand brand) {
    return (brandMapper.insertBrand(brand) == 1)?true:false;
}

3.4.1.3 Controller implementation

Define a method named in com.ambow.controllerpackage in . The logic of this method is as follows:BrandControlleraddBrand

• Receive data submitted by the page. The data submitted by the page is in json format

• Convert the received data into Brandan object

• Call the method of service add()to add business logic processing

• Add a successful logo to the browser response, here directly respond to the browser to trueindicate success

The code is implemented as follows:

@PostMapping("/addBrand")
public boolean addBrand(@RequestBody Brand brand){
    return brandService.addBrand(brand);
}

​

3.4.2 Front-end implementation

 

The left side of the picture above is the page effect, and the button inside 提交can be seen from the right side of the picture above that a click event is bound, and the event is bound to addBrandthe function, so the logic code for adding data should be written in addBrand()the function. In this method, you need to send an asynchronous request and pass the data entered in the form as parameters. as follows

// 添加数据
addBrand() {
    var _this = this;

    // 发送ajax请求，添加数据
    axios({
        method:"post",
        url:"http://localhost:8080/brand-case/addBrand",
        data:_this.brand
    }).then(function (resp) {
       	//响应数据的处理逻辑
    })
}

The anonymous function in thenthe function is a callback function after success, and resp.datathe data returned by the response can be obtained. If the value is , it successmeans that the data is added successfully. After success, we need to do some logic processing:

1. Close the Add dialog window

   The dialog box code for adding data is shown in the figure below. From the code, you can see that the dialog box is bound to a dialogVisibledata model. You only need to set the value of the data model to false to close the new dialog window.

3. requery data

   Whether the data is added successfully or not, as long as the user can view the data on the page, the addition is successful. Here, it is necessary to resend the asynchronous request to obtain all brand data, and this code 查询所有has been implemented in the function, so we can extract this function code and extract it into a selectAll()function

   // 查询所有数据
   selectAll(){
       var _this = this;
   
       axios({
           method:"get",
           url:"http://localhost:8080/brand-case/findAll"
       }).then(function (resp) {
           _this.tableData = resp.data;
       })
   }

   Then you need to mounted()improve the code in the hook function to

   mounted(){
       //当页面加载完成后，发送异步请求，获取数据
       this.selectAll();
   }

   At the same time, call in the callback of the new response selectAll()to re-query the data.

4. A pop-up message reminds the user that the addition is successful

5. 

   The left side of the picture above is the success prompt code provided by the elementUI official website, while the right side of the picture above is the specific effect.

   ==Note: The this above needs to represent the this of the VUE object. ==

To sum up, the front-end code is as follows:

// 添加数据
addBrand() {
    var _this = this;

    // 发送ajax请求，添加数据
    axios({
        method:"post",
        url:"http://localhost:8080/brand-case/addServlet",
        data:_this.brand
    }).then(function (resp) {
        if(resp.data == "success"){
            //添加成功
            //关闭窗口
            _this.dialogVisible = false;
            // 重新查询数据
            _this.selectAll();
            // 弹出消息提示
            _this.$message({
                message: '恭喜你，添加成功',
                type: 'success'
            });
        }
    })
}