lead out

From synchronous to asynchronous & from jsp to js + axios + vue to achieve data paging display & data addition, deletion, modification and query
insert image description here

something fixed

1. Fixed response format

import com.alibaba.fastjson.JSON;
import com.tianju.entity.ResData;

resp.getWriter().write(JSON.toJSONString(
                new ResData(200, "登陆成功", newUser)));

2.name becomes v-model for two-way binding

        <%--    要把原有的书名，和简介，以及类型信息显示出来--%>
        书名：<input type="text" v-model="opus.name" ><br>
        简介：<input type="text" v-model="opus.intro" ><br>
        类型：

        <%--    用forEach把类型信息拼出来--%>
<%--     v-model="opus.typeId" 双向绑定--%>
        <select v-model="opus.typeId">
                <%--            如果根据id查询到的书籍信息，和这里拼的某一个类型信息一致，则设置成selected ，实现默认选中--%>
                <option v-for="types in bookTypeList" :value="types.id">{
    
    {
    
    types.name}}</option>
        </select><br>

3. Select the drop-down box –: value="type.id" +v-model="companyDb.typeId"

    <select v-model="companyDb.typeId">
        <option value="">请选择</option>
        <option v-for="type in typeList" :value="type.id">{
    
    {
    
    type.name}}</option>
    </select>

4. Vue guide package fixed writing

<head>
    <title>修改公司信息</title>
    <link rel="stylesheet" href="/day06/bootstrap/css/bootstrap.css">
    <script src="/day06/js/axios.min.js"></script>
    <script src="/day06/js/jquery-3.5.1.js"></script>
    <script src="/day06/bootstrap/js/bootstrap.js"></script>
    <script src="/day06/js/vue.min-v2.5.16.js"></script>

</head>

5. script fixed writing

	let app = new Vue({
    
    
        // 选择操作的div区域
        el:"#app",
        // 数据区
        data:{
    
    },
        // 方法区
        methods:{
    
    },
        // 文档加载之后就执行
        created(){
    
    },
        // 整个页面全部加载完成后再执行
        mounted(){
    
    },
    })

6. Axios get request

            axios.get("/day06/types/list/vue?name="+"柯基")
                .then(response=>{
    
    
                    let resp = response.data;
                    console.log(resp);
                },error=>{
    
    
                    console.log(error)
                })

7. Axios post request—let params = new URLSearchParams()

let params = new URLSearchParams();
params.append("username",this.username);
params.append("password",this.password);
params.append("rePassword",this.rePassword);
params.append("gender",this.gender);
params.append("birthday",this.birthday);
params.append("imgCode",this.imgCode);
console.log(params);
axios.post("/day06/comUser/register/vue",params)
      .then(response=>{
    
    
           let resp = response.data;
           console.log(resp);
          if (resp.code==200)
          {
    
    
              // 成功，跳转回到list页面
              location.href="/day06/compMess/listVue.jsp"
          }
          else
          {
    
    
              alert(resp.msg);
          }
       },error=>{
    
    
           console.log(error)
       })

8. Front-end beautification:

<table class="table-condensed table-hover table-striped table-responsive table-cell table-row-cell table-view table-bordered">

class="btn btn-primary btn-sm"

Data paging display

insert image description here

1. Change the backend to resp response

        // 4.new PageInfo对象，共享页数等，以及查询到的数据
        List<Company> list = companyService.queryByLikeNameLimit(pageNum, pageSize,name);
        PageInfo<Company> pageInfo = new PageInfo<>(pageNum, pageSize, total, pages, list);

        resp.getWriter().write(JSON.toJSONString(
                new ResData(200, "ok", pageInfo)
        ));

2. Main points of front-end modification

(1) Display all book information ----- method queryListByPageNum(pageNum)

Because the backend needs to know which page pageNum the frontend wants to display, a method queryListByPageNum(pageNum) is defined on the frontend. This method interacts with the backend, gets the pageInfo object, and then obtains pageNum, pageSize, total, pages from this object , list; so as to realize the overall function

        methods:{
    
    
            // 本质每次给后端传一个pageNum，然后后端给前端传要显示的数据
            queryListByPageNum(pageNum){
    
    
                axios.get("/day06/company/messList?pageNum="+pageNum)
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log("~~~~~~~~~queryListByPageNum")
                        console.log(resp.data)
                        this.pageInfo = resp.data;
                    	// 应该写到这里
                    	this.gotoPageNum = this.pageInfo.pageNum;
                    
                    });
                // 如果写在这里，在axios发送了请求，等待响应的期间，程序会接着执行，
                // 此时，this.pageInfo.pageNum还是响应之前的数据，因此导致这里的
                // this.gotoPageNum 被赋值成了上一次到的值
                this.gotoPageNum = this.pageInfo.pageNum;
            }
        },

[bug] A bug with no error message – it should be written in created

insert image description here

(2) First page, last page, upper and lower pages

Basic functions:
first page: call the above method, the incoming pageNum parameter is 1, when clicked: queryListByPageNum(1); previous
page: when clicked, queryListByPageNum(pageInfo.pageNum-1);
next page: when clicked, queryListByPageNum(pageInfo .pageNum+1);
Last page: when clicked, queryListByPageNum(pageInfo.pages)

Display or not:
If it is not the first page, pageInfo.pageNum!=1, the first page and the previous page are displayed;
if it is not the last page, pageInfo.pageNum!=pageInfo.pages, the next page and the last page are displayed;

<button @click="queryListByPageNum(1)" v-show="pageInfo.pageNum!=1">首页</button>
    <button @click="queryListByPageNum(pageInfo.pageNum-1)" v-show="pageInfo.pageNum!=1">上一页</button>
    <button @click="queryListByPageNum(pageInfo.pageNum+1)" v-show="pageInfo.pageNum!=pageInfo.pages">下一页</button>
    <button @click="queryListByPageNum(pageInfo.pages)" v-show="pageInfo.pageNum!=pageInfo.pages">尾页</button>

Quick beautification:

class="btn btn-primary btn-sm"

(3) [There are pits] page jump – axios request asynchronous problem

Enter the target page number of the jump, call the above method, and change the value in the original input box to the page number after the jump

Display part:

    跳转到：<input type="text" v-model="gotoPageNum">
    <button @click="queryListByPageNum(gotoPageNum)" class="btn btn-primary btn-sm">跳转</button>

There is a pit:

When the page number in the jump box is assigned a value, wait until the axios request gets a response before assigning the value, write it in axios

If it is written here, the program will continue to execute while axios sends the request and waits for the response. At this time, this.pageInfo.pageNum is still the data before the response, so this.gotoPageNum here is assigned the last time. value

insert image description here

Business logic part:

<script>
    let app = new Vue({
    
    
        el:"#app",
        data:{
    
    
            pageInfo:{
    
    },
            gotoPageNum:1, // 初始化第一页
        },
        methods:{
    
    
            // 本质每次给后端传一个pageNum，然后后端给前端传要显示的数据
            queryListByPageNum(pageNum){
    
    
                axios.get("/day06/company/messList?pageNum="+pageNum)
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log("~~~~~~~~~queryListByPageNum")
                        console.log(resp.data)
                        this.pageInfo = resp.data;
                        this.gotoPageNum = this.pageInfo.pageNum;
                    });
                // 如果写在这里，在axios发送了请求，等待响应的期间，程序会接着执行，
                // 此时，this.pageInfo.pageNum还是响应之前的数据，因此导致这里的
                // this.gotoPageNum 被赋值成了上一次到的值
                // this.gotoPageNum = this.pageInfo.pageNum;
            }
        },
        // 文档加载之后就执行
        created(){
    
    
            // 页面一启动查首页
            this.queryListByPageNum(1);
        },
        // 整个页面全部加载完成后再执行
        mounted(){
    
    },
    })
</script>

3. Complete code of front and back end

(1) Backend CompanyListServlet.java code:

package com.tianju.servlet.company;

import com.alibaba.fastjson.JSON;
import com.tianju.entity.Company;
import com.tianju.entity.PageInfo;
import com.tianju.entity.ResData;
import com.tianju.service.ICompanyService;
import com.tianju.service.impl.CompanyService;
import com.tianju.util.StringUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

/**
 * 进行公司信息列表展示的servlet类
 */
@WebServlet("/company/messList")
public class CompanyListServlet extends HttpServlet {
    
    
    private ICompanyService companyService = new CompanyService();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        // 2.0版本，支持模糊查询和分页展示信息
        // 1.从前端获取数据：要显示第几页，每页显示多少条数据，查询的关键词是啥
        String pageNumStr = req.getParameter("pageNum"); // 第几页
        String pageSizeStr = req.getParameter("pageSize"); // 每页显示数据条数
        String name = req.getParameter("name");

        // 2.进行赋值，
        // 如果没有输入第几页，默认显示首页,第一页；
        Integer pageNum = StringUtils.isBlank(pageNumStr) ? 1:Integer.parseInt(pageNumStr);
        // 如果没有输入显示多少条数据，默认每页显示3条；
        Integer pageSize = StringUtils.isBlank(pageSizeStr) ? 3:Integer.parseInt(pageSizeStr);
        // 如果没有输入查询关键词，数据条数为总数；
        Integer total = companyService.countLines(name);


        // 3.根据查询数据条数，以及前端获取的每页显示数据条数，计算总页数；
        // 思路：如果能整除，则为页数；如果不能整除，则/后再加1；
        Integer pages = total % pageSize==0 ? total/pageSize:total/pageSize+1;

        // 4.new PageInfo对象，共享页数等，以及查询到的数据
        List<Company> list = companyService.queryByLikeNameLimit(pageNum, pageSize,name);
        PageInfo<Company> pageInfo = new PageInfo<>(pageNum, pageSize, total, pages, list);

        resp.getWriter().write(JSON.toJSONString(
                new ResData(200, "ok", pageInfo)
        ));

    }
}

(2) Front-end code: added and modified, deleted part, list.jsp page code

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>公司的信息</title>
    <link rel="stylesheet" href="/day06/bootstrap/css/bootstrap.css">
    <script src="/day06/js/axios.min.js"></script>
    <script src="/day06/js/jquery-3.5.1.js"></script>
    <script src="/day06/bootstrap/js/bootstrap.js"></script>
    <script src="/day06/js/vue.min-v2.5.16.js"></script>
</head>
<body>

<div id="app">
    <table class="table-condensed table-hover table-striped table-responsive table-cell table-row-cell table-view table-bordered">
        <tr>
            <th>公司id</th>
            <th>公司名</th>
            <th>公司类型</th>
            <th>合伙人</th>
            <th>统一信用编码</th>
            <th>公司地址</th>
            <th>成立时间</th>
            <th>用户名</th>
            <th>修改时间</th>
            <th>执行操作
                <button @click="add">添加</button>
<%--                <a href="/day06/compMess/addPage">添加</a>--%>
            </th>
        </tr>


            <tr v-for="comp in pageInfo.compList">
                <td>{
    
    {
    
    comp.id}}</td>
                <td>{
    
    {
    
    comp.name}}</td>
                <td>{
    
    {
    
    comp.typename}}</td>
                <td>{
    
    {
    
    comp.corporation}}</td>
                <td>{
    
    {
    
    comp.creditCode}}</td>
                <td>{
    
    {
    
    comp.address}}</td>
                <td>{
    
    {
    
    comp.createTime}}</td>
                <td>{
    
    {
    
    comp.username}}</td>
                <td>{
    
    {
    
    comp.updateTime}}</td>
                <td>
                    <button @click="update(comp.id)">修改</button>
                    <button @click="remove(comp.id)">删除</button>
                </td>
            </tr>

    </table><br>
    <%--     分页查询相关--%>
    <%--     如果当前页是第一页，需要控制首页不显示，上一页不显示--%>

    <button @click="queryListByPageNum(1)" v-show="pageInfo.pageNum!=1" class="btn btn-primary btn-sm">首页</button>
    <button @click="queryListByPageNum(pageInfo.pageNum-1)" v-show="pageInfo.pageNum!=1" class="btn btn-primary btn-sm">上一页</button>
    <button @click="queryListByPageNum(pageInfo.pageNum+1)" v-show="pageInfo.pageNum!=pageInfo.pages" class="btn btn-primary btn-sm">下一页</button>
    <button @click="queryListByPageNum(pageInfo.pages)" v-show="pageInfo.pageNum!=pageInfo.pages" class="btn btn-primary btn-sm">尾页</button>

    <%--    提示信息，总页数为，当前第几页--%>
    总计{
    
    {
    
    pageInfo.pages}}页/当前{
    
    {
    
    pageInfo.pageNum}}<br>
    跳转到：<input type="text" v-model="gotoPageNum">
    <button @click="queryListByPageNum(gotoPageNum)" class="btn btn-primary btn-sm">跳转</button>

</div>


<script>
    let app = new Vue({
    
    
        el:"#app",
        data:{
    
    
            pageInfo:{
    
    },
            gotoPageNum:1, // 初始化第一页
        },
        methods:{
    
    
            // 本质每次给后端传一个pageNum，然后后端给前端传要显示的数据
            queryListByPageNum(pageNum){
    
    
                axios.get("/day06/company/messList?pageNum="+pageNum)
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log("~~~~~~~~~queryListByPageNum")
                        console.log(resp.data)
                        this.pageInfo = resp.data;
                        this.gotoPageNum = this.pageInfo.pageNum;
                    });
                // 如果写在这里，在axios发送了请求，等待响应的期间，程序会接着执行，
                // 此时，this.pageInfo.pageNum还是响应之前的数据，因此导致这里的
                // this.gotoPageNum 被赋值成了上一次到的值
                // this.gotoPageNum = this.pageInfo.pageNum;
            },
            // 点击添加，直接到添加的页面
            add(){
    
    
                location.href="/day06/compMess/addCompMess.jsp"
            },
            // 更新信息的事件
            update(id){
    
    
                // // 1.把id存在local storage里
                // localStorage.setItem("id",id);
                // // 跳转到修改页面
                // location.href="/day06/compMess/update.jsp"
                // 2.把id交给后端的servlet，然后通过servlet给update.jsp页面
                location.href="/day06/update/company/id?id="+id;
            },
            // 删除数据的事件
            remove(id){
    
    
                axios.get("/day06/company/remove?id="+id)
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log(resp);
                        if (resp.code==200)
                        {
    
    
                            // 删除成功，再查第一页数据
                            alert("成功");
                            this.queryListByPageNum(1);
                        }
                        else
                        {
    
    
                            alert(resp.msg)
                        }
                    })
            }

        },
        // 文档加载之后就执行
        created(){
    
    
            // 页面一启动查首页
            this.queryListByPageNum(1);
        },
        // 整个页面全部加载完成后再执行
        mounted(){
    
    },
    })
</script>

</body>
</html>

Add a piece of data

1. Change from jsp to Js+axios+vue

In the jsp mode, the business logic of adding a piece of data is as follows:
(1) Click the Add button to jump to the servlet, find out the type information from the database, then share the value of the type information, and forward it to the add page jsp; (2
) In the add page jsp, use the foreach method to spell out a drop-down box with the type information shared in the previous step. After the user fills in the information in the form form, click the Add button; (3) The data in the form form is sent to the process to
add The business servlet, in which the data in the form is stored in the database, and then jumps to the servlet that queries all the data; (4) In the servlet that queries all the data,
check the database again, and then display the Data sharing is forwarded to list.jsp to finally display the added data;

In the vue mode, the business logic of adding a piece of data becomes the following form:
(1) On the list page, click the Add button to go directly to the add page;
(2) Execute when the created(){} of the add page starts In the method, find out the type;
(3) Display the type drop-down box on the adding page, and the user performs the adding operation; (
4) Click the Add button, and the request is sent to the added servlet. After the addition is successful, resp returns a status code of 200;
( 5) The front end judges whether the status code in the response resp is 200, and if so, jumps to the list.jsp page that displays all information;

2. Front-end code modification

(1) Change the name of all input boxes to v-model for two-way binding

<input type="text" v-model="name"><br>

(2) Use a list object to store and query all types of lists

<script>
    let app = new Vue({
    
    
        // 选择操作的div区域
        el:"#app",
        // 数据区
        data:{
    
    
            typeList:[],

        },
        // 方法区
        methods:{
    
    
            // 查询到所有的类型信息
            queryTypes(){
    
    
                axios.get("/day06/type/list/vue")
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log(resp);
                        this.typeList = resp.data;
                    })
            }
        },
        // 文档加载之后就执行
        created(){
    
    
            this.queryTypes();
        },
        // 整个页面全部加载完成后再执行
        mounted(){
    
    },
    })
</script>

(3) Display the type drop-down box in the display area [bug]—:value

        <select v-model="typeId">
            <option value="">请选择</option>
            <%--        这部分拼出来--%>
            <%--        <option value="1">有限责任公司</option>--%>
                <option v-for="type in typeList" :value="type.id">{
    
    {
    
    type.name}}</option>
        </select>

insert image description here

[bug] Encountered bugs: value is written as vlaue without a colon

insert image description here Ditto, bugs that are not easy to find

insert image description here

3. Backend code modification

At this point, you need to add a servlet that queries all types of information

/**
 * 直接查询所有类型的list的servlet
 */
@WebServlet("/type/list/vue")
public class TypeListServlet extends HttpServlet {
    
    
    IComTypeService typeService = new ComTypeServiceImpl();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        // 查询得到所有的类型
        List<ComType> list = typeService.queryAll();
        System.out.println(list);
        resp.getWriter().write(JSON.toJSONString(
                new ResData(200, "ok", list)
        ));
    }
}

AddServlet.java file changed to resp mode

resp.getWriter().write(JSON.toJSONString(new ResData(200, "ok", null)));

4. Complete code of front and back end

(1) Complete backend code: AddServlet.java file:

package com.tianju.servlet.company;

import com.alibaba.fastjson.JSON;
import com.tianju.entity.Company;
import com.tianju.entity.ResData;
import com.tianju.service.IComTypeService;
import com.tianju.service.ICompanyService;
import com.tianju.service.impl.ComTypeServiceImpl;
import com.tianju.service.impl.CompanyService;
import com.tianju.util.StringUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;

/**
 * 新增公司信息的业务逻辑
 * 目的是：接收从addCompMess.jsp传过来的信息；
 * new Company 并存到数据库
 */
@WebServlet("/compMess/add")
public class AddServlet extends HttpServlet {
    
    
    private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
    private ICompanyService companyService = new CompanyService();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    

        // 新增一条数据到数据库
        // 1.读取前端的值；
        String name = req.getParameter("name");
        String corporation = req.getParameter("corporation");
        String typeId = req.getParameter("typeId");
        String creditCode = req.getParameter("creditCode");
        String createTime = req.getParameter("createTime");
        String address = req.getParameter("address");

        System.out.println(createTime);

        // 2.判断是否为空；
        if (StringUtils.isBlank(name)
        || StringUtils.isBlank(corporation)
        || StringUtils.isBlank(typeId)
        || StringUtils.isBlank(creditCode)
        || StringUtils.isBlank(createTime)
        || StringUtils.isBlank(address)){
    
    
            resp.getWriter().write(JSON.toJSONString(
                    new ResData(1001, "输入为空", null)));
            return;
        }

        // 3.new company实体类；
        Company company = new Company();
        company.setAddress(address);
        company.setName(name);
        company.setCorporation(corporation);
        System.out.println(typeId);
        company.setTypeId(Integer.parseInt(typeId));
        company.setCreditCode(creditCode);
        try {
    
    
            company.setCreateTime(sdf.parse(createTime));
        } catch (ParseException e) {
    
    
            throw new RuntimeException(e);
        }
        // TODO:记录是谁操作的这条信息
        company.setUserId(1);


        // 4.新增数据到数据库；
        Integer addFlag = companyService.add(company);
        if (addFlag<1){
    
    
            // 共享一条msg给前端，提醒一下
            resp.getWriter().write(JSON.toJSONString(
                    new ResData(1002, "系统繁忙，请稍后重试", null)));
            return;
        }

        // 5.重定向到list页面，显示更新后的公司信息
        resp.getWriter().write(JSON.toJSONString(new ResData(200, "ok", null)));


    }
}

(2) Complete front-end code: addCompMess.jsp file

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>新增公司信息</title>
    <link rel="stylesheet" href="/day06/bootstrap/css/bootstrap.css">
    <script src="/day06/js/jquery-3.5.1.js"></script>
    <script src="/day06/bootstrap/js/bootstrap.js"></script>
    <script src="/day06/js/vue.min-v2.5.16.js"></script>
    <script src="/day06/js/axios.min.js"></script>
</head>
<body>

<div id="app">
    <h1>新增公司信息</h1>

    公司名：<input type="text" v-model="name"><br>
    合伙人：<input type="text" v-model="corporation"><br>
    公司类型：
    <select v-model="typeId">
        <option value="">请选择</option>
        <%--        这部分拼出来--%>
        <%--        <option value="1">有限责任公司</option>--%>
<%--        TODO:忘记加冒号--%>
            <option v-for="type in typeList" value="type.id">{
    
    {
    
    type.name}}</option>
    </select>
    <br>
    统一信用编码：
    <input type="text" v-model="creditCode"><br>
    公司成立时间：
    <input type="date" v-model="createTime"><br>
    公司地址：<input type="text" v-model="address"><br>

    <span style="color: darkred">{
    
    {
    
    msg}}</span><br>


    <button @click="add">提交</button>
    <button @click="reset">重置</button>
    <hr>
    <a href="/day06/compMess/listVue.jsp">返回</a>

</div>

<script>
    let app = new Vue({
    
    
        el:"#app",
        data:{
    
    
            name:"",
            corporation:"",
            typeId:"",
            creditCode:"",
            createTime:"",
            address:"",
            typeList:[],
            msg:"",
        },

        // 方法区
        methods:{
    
    
            // 查询到所有的类型信息
            queryTypes(){
    
    
                axios.get("/day06/type/list/vue")
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log(resp);
                        this.typeList = resp.data;
                    })
            },
            // 添加数据
            add(){
    
    
                let params = new URLSearchParams();
                params.append("name",this.name);
                params.append("corporation",this.corporation);
                params.append("typeId",this.typeId);
                params.append("creditCode",this.creditCode);
                params.append("createTime",this.createTime);
                params.append("address",this.address);
                axios.post("/day06/compMess/add",params)
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log(resp);
                        if (resp.code==200)
                        {
    
    
                            alert(resp.msg);
                            // 再回到list页面
                            location.href = "/day06/compMess/listVue.jsp";
                        }
                        else
                        {
    
    
                            this.msg=resp.msg;
                        }
                    })
            },
            reset(){
    
    
                this.name="";
                this.corporation="";
                this.typeId="";
                this.creditCode="";
                this.createTime="";
                this.address="";
                this.msg="";
            }
        },


        // 文档加载之后就执行
        created(){
    
    
            this.queryTypes();
        },
        // 整个页面全部加载完成后再执行
        mounted(){
    
    },

    })
</script>

</body>
</html>

Modify a piece of data

1. Change from Jsp to Js+axios+vue

In jsp mode, the business process of modifying a piece of data is as follows:
(1) On all data pages, the user clicks to modify, and the id to be modified is passed to the backend, which is processed by the servlet in updatePage.java; (
2) In this In the servlet, query the type information List, and query the current data to be modified according to the id;
(3) forward the type list in step (2) and the opus shared value to be modified to the updatePage.jsp front-end page;
( 4) In the modified front-end updatePage.jsp page, echo the original information, where type is echoed with type.id==opus.typeId ? 'selected' : ''ternary expression; due to the modified The business needs to know the id number, so set a hidden box on the front end to store opus.id ; after the user completes the modification operation, submit the data to the servlet in update.java for processing;
(5) In update.java, get The id to be modified, update the modified opus related data, business logic control of permissions, obtain the logged-in user object from the session, obtain the id, and compare it with the userId in the queried data to be modified, if inconsistent , the modification is not allowed; if the modification is successful, it will be redirected to the servlet that queries all data;
(6) In the servlet that queries all data, check the database again, and then share and forward the displayed data to list.jsp, so that finally Display the added data;

In vue's asynchronous request mode, the business process for modifying a piece of data is as follows:
(1) On the list page of all data, the user clicks the modify button to jump to the modification page. Since the id to be modified needs to be known, the id must be remembered There are three ways to save it:

[1]. Save the id to the local storage space, and get the saved id in the modification page;
[2]. After a servlet, when you click to modify, pass the id to the backend of the servlet. In this servlet, share the id and forward it to the modification page jsp, and use id:${id} in the modification page update.jsp , to get the id;
[3]. The way of vue-cli routing, which will be added later [to be continued]

(2) In the modified update.jsp page, define two methods that are executed at startup, [1]. The method of querying all types of information; [2]. The method of querying the opus data to be modified; (3) The startup
page Just execute the above method, so as to echo the data in the update.jsp page, where the type echo adopts: value="types.id", here you need to pay attention [Note] the colon must not be missing; the value must not be mistyped; (4
) The user clicks the modify button, sends the id and the modified data to the backend, and waits for the response from the backend;
(5) If the response status code is 200, jump to the list.jsp page that displays all information;

[bug] Encountered bugs: value is written as vlaue without a colon

insert image description here Ditto, bugs that are not easy to find

insert image description here

2. Modification of the front-end code

(0) The problem of saving the id of the data to be modified is local storage or the backend once

[1]. Save to local storage

On the list page, when you click Modify, save the id to local storage

            update(id){
    
    
                // 1.把id存在local storage里
                localStorage.setItem("id",id);
                // 跳转到修改页面
                location.href="/day06/compMess/update.jsp"
            }

Get the id on the modification page: localStorage.getItem("id")

        // 文档加载之后就执行
        created(){
    
    
            this.queryTypes();
            this.queryMessById(localStorage.getItem("id"));
        },

[2] once servlet

A servlet that specifically forwards the id to the update.jsp page is required, UpdateCompIdServlet.java;

package com.tianju.servlet.company;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 保存要修改的id，过一次servlet
 * 点击修改，把 id 从list页面传过来
 * servlet中共享id，转发到 update.jsp
 */
@WebServlet("/update/company/id")
public class UpdateCompIdServlet extends HttpServlet {
    
    
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        String id = req.getParameter("id");
        // 共享值，转发给update.jsp页面
        req.setAttribute("id", id);
        req.getRequestDispatcher("/compMess/update.jsp").forward(req,resp);
    }
}

Change the event of clicking the modify button on the list page:

            update(id){
    
    
                // // 1.把id存在local storage里
                // localStorage.setItem("id",id);
                // // 跳转到修改页面
                // location.href="/day06/compMess/update.jsp"
                // 2.把id交给后端的servlet，然后通过servlet给update.jsp页面
                location.href="/day06/update/company/id?id="+id;
            }

Obtain the id shared by the backend in the data area of the update.jsp page, "${id}"

        data:{
    
    
            typeList:[],
            // 后端传来的查询到的company对象
            companyDb:{
    
    },
            msg:"",
            // 获取经过一次servlet的id
            id:"${id}",

        },

Query the company entity class to be modified according to this id

        // 文档加载之后就执行
        created(){
    
    
            this.queryTypes();
            this.queryMessById(this.id);
        },

(1) The problem of time display ---- @JSONField(format = "yyyy-MM-dd")

insert image description here

The front-end time display problem needs to be annotated. There is a pitfall. The month must be written in a standardized way. You cannot use lowercase mm and use uppercase MM, otherwise the date box echoed to the front end will be invalid:

import com.alibaba.fastjson.annotation.JSONField;
@JSONField(format = "yyyy-MM-dd")

insert image description here

(2) The problem of echoing in the type drop-down box—v-model="companyDb.typeId" + :value="type.id"

When writing in jsp before, the code is as follows:

    <select name="typeId">
        <option value="">请选择</option>
<%--        这部分拼出来--%>
<%--        <option value="1">有限责任公司</option>--%>
        <c:forEach items="${types}" var="type">
            <option value="${type.id}">${
    
    type.name}</option>
        </c:forEach>

    </select>

If you want to display the type drop-down box, you need to change it to the v-for method of vue, as follows:

    <select name="typeId">
        <option value="">请选择</option>
        <option v-for="type in typeList" :value="type.id">{
    
    {
    
    type.name}}</option>
    </select>

If you want to echo, the name of the select box is also bidirectionally bound, the binding is the type id from the backend query to the data to be modified, v-model="companyDb.typeId";

    <select v-model="companyDb.typeId">
        <option value="">请选择</option>
        <option v-for="type in typeList" :value="type.id">{
    
    {
    
    type.name}}</option>
    </select>

insert image description here

(3) When you click reset, which things are reset, other values except id

            reset(){
    
    
                this.companyDb.name="";
                this.companyDb.corporation="";
                this.companyDb.typeId="";
                this.companyDb.creditCode="";
                this.companyDb.createTime="";
                this.companyDb.address="";
                this.msg="";
            }

3. Modify the back-end code

(1) Since the front-end has a time frame, the back-end entity class is annotated

import com.alibaba.fastjson.annotation.JSONField;
@JSONField(format = "yyyy-MM-dd")

package com.tianju.entity;

import com.alibaba.fastjson.annotation.JSONField;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;

/**
 * 公司信息的实体类
 */

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Company {
    
    
    private Integer id;
    private String name;
    private Integer userId;
    private String username;
    private Integer typeId;
    private String typename;
    private String corporation;
    private String creditCode; // 工商号
    private String address;
    @JSONField(format = "yyyy-MM-dd")
    private Date createTime; // 公司的创建时间
    @JSONField(format = "yyyy-MM-dd")
    private Date updateTime; // 这条信息的修改时间

}

4. Complete front-end and back-end code – loacal storage version

insert image description here

(1) Relevant codes of the front-end list.jsp page:

            update(id){
    
    
                // 1.把id存在local storage里
                localStorage.setItem("id",id);
                // 跳转到修改页面
                location.href="/day06/compMess/update.jsp"
            }

(2) update.jsp code

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改公司信息</title>
    <link rel="stylesheet" href="/day06/bootstrap/css/bootstrap.css">
    <script src="/day06/js/axios.min.js"></script>
    <script src="/day06/js/jquery-3.5.1.js"></script>
    <script src="/day06/bootstrap/js/bootstrap.js"></script>
    <script src="/day06/js/vue.min-v2.5.16.js"></script>

</head>
<body>

<div id="app">
    <h1>修改公司信息</h1>
    公司名：<input type="text" v-model="companyDb.name"><br>
    合伙人：<input type="text" v-model="companyDb.corporation"><br>
    公司类型：
    <select v-model="companyDb.typeId">
        <option value="">请选择</option>
        <option v-for="type in typeList" :value="type.id">{
    
    {
    
    type.name}}</option>
    </select>

    <br>
    统一信用编码：
    <input type="text" v-model="companyDb.creditCode"><br>
    公司成立时间：
    <input type="date" v-model="companyDb.createTime"><br>
    公司地址：<input type="text" v-model="companyDb.address"><br>

    <span style="color: darkred">{
    
    {
    
    msg}}</span><br>
    <button @click="update">修改</button>
    <button @click="reset">重置</button>
    <hr>
    <a href="/day06/company/messList">返回</a>
</div>

<script>
    let app = new Vue({
    
    
        // 选择操作的div区域
        el:"#app",
        // 数据区
        data:{
    
    
            typeList:[],
            // 后端传来的查询到的company对象
            companyDb:{
    
    },
            msg:"",

        },
        // 方法区
        methods:{
    
    
            // 查询所有类型的方法
            queryTypes(){
    
    
                axios.get("/day06/type/list/vue")
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log(resp);
                        this.typeList = resp.data;
                    })
            },
            // 根据id查询出要修改的公司信息
            queryMessById(id){
    
    
                axios.get("/day06/company/updatePage?id="+id)
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log(resp);
                        if (resp.code==200)
                        {
    
    
                            this.companyDb = resp.data;
                        }
                        else
                        {
    
    
                            this.msg = resp.msg;
                        }
                    })
            },
            // 点击修改按钮，传给后端，进行修改
            update(){
    
    
                let params = new URLSearchParams();
                params.set("name",this.companyDb.name);
                params.set("corporation",this.companyDb.corporation);
                params.set("typeId",this.companyDb.typeId);
                params.set("creditCode",this.companyDb.creditCode);
                params.set("createTime",this.companyDb.createTime);
                params.set("address",this.companyDb.address);
                params.set("id",this.companyDb.id);
                axios.post("/day06/compMess/update",params)
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log(resp);
                        if (resp.code==200)
                        {
    
    
                            // 成功，跳转回到list页面
                            location.href="/day06/compMess/listVue.jsp"
                        }
                        else
                        {
    
    
                            this.msg = resp.msg;
                        }
                    })

            },
            reset(){
    
    
                this.companyDb.name="";
                this.companyDb.corporation="";
                this.companyDb.typeId="";
                this.companyDb.creditCode="";
                this.companyDb.createTime="";
                this.companyDb.address="";
                this.msg="";
            }

        },
        // 文档加载之后就执行
        created(){
    
    
            this.queryTypes();
            this.queryMessById(localStorage.getItem("id"));
        },
        // 整个页面全部加载完成后再执行
        mounted(){
    
    
        },
    })
</script>


</body>
</html>

(3) Backend updatePageServlet.java code

package com.tianju.servlet.company;

import com.alibaba.fastjson.JSON;
import com.sun.org.apache.bcel.internal.generic.NEW;
import com.tianju.entity.Company;
import com.tianju.entity.ResData;
import com.tianju.service.IComTypeService;
import com.tianju.service.ICompanyService;
import com.tianju.service.impl.ComTypeServiceImpl;
import com.tianju.service.impl.CompanyService;
import com.tianju.util.StringUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;

/**
 * 修改页面的servlet：
 * 目的是把已有的信息，查询，返回给修改页面;
 * 也要共享一下类型信息
 */
@WebServlet("/company/updatePage")
public class UpdatePagServlet extends HttpServlet {
    
    
    private ICompanyService companyService = new CompanyService();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        // 1.从前端获取修改的id
        String id = req.getParameter("id");
        System.out.println(id);

        // 2.判断不为空；
        if (StringUtils.isBlank(id)){
    
    
            resp.getWriter().write(JSON.toJSONString(new ResData(1001, "未能获取要修改的公司id", null)));
            return;
        }

        // 3.查询出一条信息；
        Company companyDb = companyService.queryById(Integer.parseInt(id));
        if (companyDb==null){
    
    
            resp.getWriter().write(JSON.toJSONString(new ResData(1001, "未能根据公司id查询到公司信息", null)));
            return;
        }

        System.out.println(companyDb);
        resp.getWriter().write(JSON.toJSONString(new ResData(200, "ok", companyDb)));

    }
}

(4) Backend updateServlet.java code

package com.tianju.servlet.company;

import com.alibaba.fastjson.JSON;
import com.tianju.entity.Company;
import com.tianju.entity.ResData;
import com.tianju.service.ICompanyService;
import com.tianju.service.impl.CompanyService;
import com.tianju.util.StringUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.text.ParseException;
import java.text.SimpleDateFormat;

/**
 * 修改公司信息的servlet
 * 目的是：从前端获取要修改的信息；
 * 执行修改操作
 */

@WebServlet("/compMess/update")
public class UpdateServlet extends HttpServlet {
    
    
    private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
    private ICompanyService companyService = new CompanyService();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        // 获取要修改的id，和其他信息，更新数据库，再重定向到list页面
        // 1.从前端获取信息；
        String name = req.getParameter("name");
        String corporation = req.getParameter("corporation");
        String typeId = req.getParameter("typeId");
        String creditCode = req.getParameter("creditCode");
        String createTime = req.getParameter("createTime");
        String address = req.getParameter("address");
        // 要修改的id；
        String id = req.getParameter("id");

        // 2.判断不为空；
        if (StringUtils.isBlank(name) || StringUtils.isBlank(corporation)
        || StringUtils.isBlank(typeId) || StringUtils.isBlank(creditCode)
        || StringUtils.isBlank(createTime) || StringUtils.isBlank(address) || StringUtils.isBlank(id)
        ){
    
    
            // 共享一条msg给前端，提醒一下
            resp.getWriter().write(JSON.toJSONString(new ResData(1001, "输入为空，请输全公司信息", null)));
            return;
        }

        // 3.new company；
        Company company = new Company();
        company.setAddress(address);
        company.setName(name);
        company.setCorporation(corporation);
        company.setTypeId(Integer.parseInt(typeId));
        company.setCreditCode(creditCode);
        try {
    
    
            company.setCreateTime(sdf.parse(createTime));
        } catch (ParseException e) {
    
    
            throw new RuntimeException(e);
        }
        // TODO:记录是谁操作的这条信息
        company.setUserId(1);
        // 公司信息的id
        company.setId(Integer.parseInt(id));

        // 4.进行修改；
        Integer updateFlag = companyService.update(company);
        if (updateFlag<1){
    
    
            // 共享一条msg给前端，提醒一下
            resp.getWriter().write(JSON.toJSONString(new ResData(1002, "修改失败，系统繁忙，请稍后重试", null)));
            return;
        }

        resp.getWriter().write(JSON.toJSONString(new ResData(200, "ok", null)));

    }
}

4. The complete code of the front and back ends - go through the servlet version

insert image description here

(1) Relevant codes of the front-end list.jsp page:

            update(id){
                // // 1.把id存在local storage里
                // localStorage.setItem("id",id);
                // // 跳转到修改页面
                // location.href="/day06/compMess/update.jsp"
                // 2.把id交给后端的servlet，然后通过servlet给update.jsp页面
                location.href="/day06/update/company/id?id="+id;
            }

A servlet dedicated to forwarding ids to update.jsp: updateCompIdServlet.java

package com.tianju.servlet.company;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 保存要修改的id，过一次servlet
 * 点击修改，把 id 从list页面传过来
 * servlet中共享id，转发到 update.jsp
 */
@WebServlet("/update/company/id")
public class UpdateCompIdServlet extends HttpServlet {
    
    
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        String id = req.getParameter("id");
        // 共享值，转发给update.jsp页面
        req.setAttribute("id", id);
        req.getRequestDispatcher("/compMess/update.jsp").forward(req,resp);
    }
}

(2) Front-end update.jsp page code

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>修改公司信息</title>
    <link rel="stylesheet" href="/day06/bootstrap/css/bootstrap.css">
    <script src="/day06/js/axios.min.js"></script>
    <script src="/day06/js/jquery-3.5.1.js"></script>
    <script src="/day06/bootstrap/js/bootstrap.js"></script>
    <script src="/day06/js/vue.min-v2.5.16.js"></script>

</head>
<body>

<div id="app">
    <h1>修改公司信息</h1>
    公司名：<input type="text" v-model="companyDb.name"><br>
    合伙人：<input type="text" v-model="companyDb.corporation"><br>
    公司类型：
    <select v-model="companyDb.typeId">
        <option value="">请选择</option>
        <option v-for="type in typeList" :value="type.id">{
    
    {
    
    type.name}}</option>
    </select>

    <br>
    统一信用编码：
    <input type="text" v-model="companyDb.creditCode"><br>
    公司成立时间：
    <input type="date" v-model="companyDb.createTime"><br>
    公司地址：<input type="text" v-model="companyDb.address"><br>

    <span style="color: darkred">{
    
    {
    
    msg}}</span><br>
    <button @click="update">修改</button>
    <button @click="reset">重置</button>
    <hr>
    <a href="/day06/company/messList">返回</a>
</div>

<script>
    let app = new Vue({
    
    
        // 选择操作的div区域
        el:"#app",
        // 数据区
        data:{
    
    
            typeList:[],
            // 后端传来的查询到的company对象
            companyDb:{
    
    },
            msg:"",
            // 获取经过一次servlet的id
            id:"${id}",

        },
        // 方法区
        methods:{
    
    
            // 查询所有类型的方法
            queryTypes(){
    
    
                axios.get("/day06/type/list/vue")
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log(resp);
                        this.typeList = resp.data;
                    })
            },
            // 根据id查询出要修改的公司信息
            queryMessById(id){
    
    
                axios.get("/day06/company/updatePage?id="+id)
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log(resp);
                        if (resp.code==200)
                        {
    
    
                            this.companyDb = resp.data;
                        }
                        else
                        {
    
    
                            this.msg = resp.msg;
                        }
                    })
            },
            // 点击修改按钮，传给后端，进行修改
            update(){
    
    
                let params = new URLSearchParams();
                params.set("name",this.companyDb.name);
                params.set("corporation",this.companyDb.corporation);
                params.set("typeId",this.companyDb.typeId);
                params.set("creditCode",this.companyDb.creditCode);
                params.set("createTime",this.companyDb.createTime);
                params.set("address",this.companyDb.address);
                params.set("id",this.companyDb.id);
                axios.post("/day06/compMess/update",params)
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log(resp);
                        if (resp.code==200)
                        {
    
    
                            // 成功，跳转回到list页面
                            location.href="/day06/compMess/listVue.jsp"
                        }
                        else
                        {
    
    
                            this.msg = resp.msg;
                        }
                    })

            },
            reset(){
    
    
                this.companyDb.name="";
                this.companyDb.corporation="";
                this.companyDb.typeId="";
                this.companyDb.creditCode="";
                this.companyDb.createTime="";
                this.companyDb.address="";
                this.msg="";
            }

        },
        // 文档加载之后就执行
        created(){
    
    
            this.queryTypes();
            this.queryMessById(this.id);
        },
        // 整个页面全部加载完成后再执行
        mounted(){
    
    
        },
    })
</script>


</body>
</html>

(3) The back-end updatePageServlet.java code and updateServlet.java code of this version are the same as the local storage version

delete a piece of data

1. Change from Jsp to Js+axios+vue

The business logic of deleting a piece of data in the jsp version
(1) Click delete on the list page, pass it to the backend to delete the id, and confirm the permissions,
(2) After the deletion is successful, check the database, share, and forward to the list page;

The process of deleting a piece of data in the vue version
(1) Click delete on the list page to trigger a click event;
(2) Perform the delete business on the backend, and the frontend waits for the response from the backend;
(3) If the response status code is 200, update the list page data;

2. Front-end code modification

Bind an event to the delete button on the list page

// 删除数据的事件
            remove(id){
    
    
                axios.get("/day06/company/remove?id="+id)
                    .then(response=>{
    
    
                        let resp = response.data;
                        console.log(resp);
                        if (resp.code==200)
                        {
    
    
                            // 删除成功，再查第一页数据
                            alert("成功");
                            this.queryListByPageNum(1);
                        }
                        else
                        {
    
    
                            alert(resp.msg)
                        }
                    })
            }

3. Backend code modification

Since there is no permission issue involved, the code is relatively simple

@WebServlet("/company/remove")
public class CompanyRemove extends HttpServlet {
    
    
    private ICompanyService companyService = new CompanyService();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        // 进行删除
        String id = req.getParameter("id");
        companyService.deleteById(Integer.parseInt(id));
        resp.getWriter().write(JSON.toJSONString(new ResData(200, "ok", null)));
    }
}

4. The complete code of the front and rear ends – an example that requires permissions

(1) Front-end deletion event code:

            remove(id){
    
    
                axios.get("/day06/opus/remove/vue?id="+id)
                    .then(response=>{
    
    
                        console.log(response.data)
                        let resp = response.data;
                        if (resp.code==200)
                        {
    
    
                            alert("成功");
                            // 继续查数据库，渲染列表部分
                            this.queryList(1);
                        }
                        else
                        {
    
    
                            alert(resp.msg)
                        }
                    })
            },

(2) Backend delete business code, permission control

package com.tianju.servlet.opus;

import com.alibaba.fastjson.JSON;
import com.tianju.entity.Opus;
import com.tianju.entity.ResData;
import com.tianju.entity.User;
import com.tianju.service.IOpusService;
import com.tianju.service.impl.OpusServiceImpl;
import com.tianju.util.StringUtils;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

/**
 * 删除一本书
 */

@WebServlet("/opus/remove/vue")
public class RemoveServletVue extends HttpServlet {
    
    
    private IOpusService opusService = new OpusServiceImpl();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
    
        
        // 获取要删除的id
        String id = req.getParameter("id");
        System.out.println(id);

        // 判断输入不为空
        if (StringUtils.isBlank(id)){
    
    
            System.out.println("id为空");
            return;
        }

        // TODO:控制权限
        HttpSession session = req.getSession();
        User user = (User) session.getAttribute("user");
        // 根据id查一条图书信息出来
        Opus find = opusService.queryById(Integer.parseInt(id));
        if (!find.getAuthorId().equals(user.getId())){
    
    
            // 如果修改的 人的id 修改的 不是自己 名下的 就不能修改
            System.out.println("没有权限");
            resp.setContentType("application/json;charset=utf-8");
            resp.getWriter().write(JSON.toJSONString(new ResData(3001, "不能删除别人", null)));
            return;
        }


        // 执行删除操作
        opusService.removeById(Integer.parseInt(id));
        resp.getWriter().write(JSON.toJSONString(new ResData(200, "删除成功", null)));
    }
}

Summarize

From synchronous to asynchronous & from jsp to js + axios + vue to achieve data paging display & data addition, deletion, modification and query

Java web development (Tomcat asynchronous paging + addition, deletion, modification and query) - from synchronous to asynchronous & from jsp to js + axios + vue to realize data paging display & data addition, deletion, modification and query

Table of contents

lead out

something fixed

1. Fixed response format

2.name becomes v-model for two-way binding

3. Select the drop-down box –: value="type.id" +v-model="companyDb.typeId"

4. Vue guide package fixed writing

5. script fixed writing

6. Axios get request

7. Axios post request—let params = new URLSearchParams()

8. Front-end beautification:

Data paging display

1. Change the backend to resp response

2. Main points of front-end modification

(1) Display all book information ----- method queryListByPageNum(pageNum)

[bug] A bug with no error message – it should be written in created

(2) First page, last page, upper and lower pages

(3) [There are pits] page jump – axios request asynchronous problem

3. Complete code of front and back end

(1) Backend CompanyListServlet.java code:

(2) Front-end code: added and modified, deleted part, list.jsp page code

Add a piece of data

1. Change from jsp to Js+axios+vue

2. Front-end code modification

(1) Change the name of all input boxes to v-model for two-way binding

(2) Use a list object to store and query all types of lists

(3) Display the type drop-down box in the display area [bug]—:value

[bug] Encountered bugs: value is written as vlaue without a colon

3. Backend code modification

4. Complete code of front and back end

(1) Complete backend code: AddServlet.java file:

(2) Complete front-end code: addCompMess.jsp file

Modify a piece of data

1. Change from Jsp to Js+axios+vue

[bug] Encountered bugs: value is written as vlaue without a colon

2. Modification of the front-end code

(0) The problem of saving the id of the data to be modified is local storage or the backend once

(1) The problem of time display ---- @JSONField(format = "yyyy-MM-dd")

(2) The problem of echoing in the type drop-down box—v-model="companyDb.typeId" + :value="type.id"

(3) When you click reset, which things are reset, other values ​​​​except id

3. Modify the back-end code

(1) Since the front-end has a time frame, the back-end entity class is annotated

4. Complete front-end and back-end code – loacal storage version

(1) Relevant codes of the front-end list.jsp page:

(2) update.jsp code

(3) Backend updatePageServlet.java code

(4) Backend updateServlet.java code

4. The complete code of the front and back ends - go through the servlet version

(1) Relevant codes of the front-end list.jsp page:

(2) Front-end update.jsp page code

(3) The back-end updatePageServlet.java code and updateServlet.java code of this version are the same as the local storage version

delete a piece of data

1. Change from Jsp to Js+axios+vue

2. Front-end code modification

3. Backend code modification

4. The complete code of the front and rear ends – an example that requires permissions

(1) Front-end deletion event code:

(2) Backend delete business code, permission control

Summarize

Guess you like

(3) When you click reset, which things are reset, other values except id