关于springboot:15基于SpringMyBatisSpringBootVue技术实现购物券系统的增删改查操作

55次阅读

共计 18086 个字符，预计需要花费 46 分钟才能阅读完成。

业务形容

基于 Spring,MyBatis,SpringBoot,VUE 技术实现购物券的增删改查操作。

我的项目环境初始化

筹备工作

1. MySQL(5.7)
2. JDK (1.8)
3. Maven (3.6.3)
4. IDEA(2020.2)

数据库初始化

关上 mysql 控制台, 而后按如下步骤执行 dbretail.sql 文件。
第一步: 登录 mysql。

mysql –uroot –proot

第二步: 设置控制台编码方式。

set names utf8;

第三步: 执行 dbretail.sql 文件（切记不要关上文件复制到 mysql 客户端运行）。

source d:/dbretail.sql

其中 dbvoucher.sql 文件内容如下：

drop database if exists dbretail;
create database dbretail default character set utf8;
use dbretail;
CREATE TABLE tb_voucher(
     `id`  INT UNSIGNED PRIMARY KEY AUTO_INCREMENT COMMENT '主键',
     `deno` DECIMAL(10,2) UNSIGNED NOT NULL COMMENT '面值',
     `requirement` DECIMAL(10,2) UNSIGNED NOT NULL COMMENT '订单多少钱能够应用',
     `startTime`  DATETIME  COMMENT '起始日期',
     `endTime`  DATETIME  COMMENT '截至日期',
     `maxNum` INT COMMENT '代金卷发放最大数量',
     `remark` varchar(200) COMMENT '备注',
    `createdTime`  DATETIME  COMMENT '创立日期'
) COMMENT='购物券表';
insert into tb_voucher values (null,100,1000,'2020/05/07','2020/06/07',200,'Remark',now());
insert into tb_voucher values (null,80,800,'2020/05/07','2020/06/07',300,'Remark',now());
insert into tb_voucher values (null,50,500,'2020/05/07','2020/06/07',400,'Remark',now());
insert into tb_voucher values (null,30,300,'2020/05/07','2020/06/07',500,'Remark',now());
insert into tb_voucher values (null,10,100,'2020/05/07','2020/06/07',600,'Remark',now());

创立我的项目并增加依赖

基于 IDEA 创立

第一步：创立 Empty 我的项目并设置根本信息(如果 Empty 我的项目曾经存在则无需创立）

第二步：基于 start.spring.io 创立我的项目 Module，并设置根本信息。

第三步：创立我的项目 module 时指定我的项目外围依赖

第四步：持续实现 module 的创立并剖析其构造

我的项目配置文件内容初始化

#server
server.port=80
#spring datasource
spring.datasource.url=jdbc:mysql:///dbvoucher?serverTimezone=GMT%2B8&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=root

#spring mybatis
mybatis.mapper-locations=classpath:/mapper/*/*.xml

#spring logging
logging.level.com.cy.retail=debug

我的项目 API 架构设计

其 API 架构设计，如图所示：

商品查问业务实现

业务形容

从数据库查问购物卷信息，并将购物卷信息出现在页面上，如图所示：

业务时序剖析

查问所有购物券信息，其业务时序剖析，如图所示：

Pojo 类定义

定义 Voucher 对象，用于封装从数据库查问到的购物券信息。

package com.cy.retail.voucher.pojo;
import com.fasterxml.jackson.annotation.JsonFormat;
import java.io.Serializable;
import java.util.Date;
/** 购物卷 */
public class Voucher implements Serializable {
    private static final long serialVersionUID = -8863293149012534747L;
    private Integer id;
    /** 面值 */
 private Integer deno;
    /** 条件(多少钱能够应用)*/
 private Integer requirement;
    /** 起始工夫 */
 @JsonFormat(pattern = "yyyy/MM/dd HH:mm")
    private Date startTime;
    /** 完结工夫 */
 @JsonFormat(pattern = "yyyy/MM/dd HH:mm")
    private Date endTime;
    /** 代金卷发放最大数量 */
 private Integer maxNum;
    /** 备注 */
 private String remark;
    /** 创立工夫 */
 private Date createdTime;
    public Integer getId() {return id;}
    public void setId(Integer id) {this.id = id;}
    public Integer getDeno() {return deno;}
    public void setDeno(Integer deno) {this.deno = deno;}
    public Integer getRequirement() {return requirement;}
    public void setRequirement(Integer requirement) {this.requirement = requirement;}
    public Date getStartTime() {return startTime;}
    public void setStartTime(Date startTime) {this.startTime = startTime;}
    public Date getEndTime() {return endTime;}
    public void setEndTime(Date endTime) {this.endTime = endTime;}
    public Integer getMaxNum() {return maxNum;}
    public void setMaxNum(Integer maxNum) {this.maxNum = maxNum;}
    public String getRemark() {return remark;}
    public void setRemark(String remark) {this.remark = remark;}
    public Date getCreatedTime() {return createdTime;}
    public void setCreatedTime(Date createdTime) {this.createdTime = createdTime;}
    @Override
 public String toString() {
        return "Voucher{" +
                "id=" + id +
                ", deno=" + deno +
                ", requirement=" + requirement +
                ", startTime=" + startTime +
                ", endTime=" + endTime +
                ", maxNum=" + maxNum +
                ", remark='" + remark + '''+", createdTime="+ createdTime +'}';
    }
}

Dao 接口办法及映射定义

在 GoodsDao 接口中定义商品查询方法以及 SQL 映射，基于此办法及 SQL 映射获取所有商品信息。代码如下：

package com.cy.retail.voucher.dao;
import com.cy.retail.voucher.pojo.Voucher;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface VoucherDao {@Select("select count(*) from tb_voucher")
    int getRowCount();
    @Select("select * from tb_voucher order by createdTime desc limit #{startIndex},#{pageSize}")
    List<Voucher> findPageObjects(Integer startIndex, Integer pageSize);
}

编写单元测试类进行测试剖析：

package com.cy.retail.voucher.dao;
import com.cy.retail.voucher.pojo.Voucher;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import java.util.List;
@SpringBootTest
public class VoucherDaoTests {
    @Autowired
    private VoucherDao voucherDao;
    @Test
    void testGetRowCount(){int rowCount=voucherDao.getRowCount();
        System.out.println("rowCount="+rowCount);
    }
    @Test
    void testFindPageObjects(){List<Voucher> list=voucherDao.findPageObjects(0,3);
        list.forEach(item-> System.out.println(item));
    }
}

Service 接口办法定义及实现

业务逻辑层分页逻辑封装对象定义，代码如下:

package com.cy.retail.common.pojo;
import java.io.Serializable;
import java.util.List;
public class PageObject<T> implements Serializable {
    /** 总记录数 */
 private Integer rowCount;
    /** 当前页记录 */
 private List<T> records;
    /** 总页数(计算出来)*/
 private Integer pageCount;
    /** 以后页码值 */
 private Integer pageCurrent;
    /** 页面大小(每页最多显示多少条记录)*/
 private Integer pageSize;
    public PageObject(Integer rowCount, List<T> records, Integer pageCurrent, Integer pageSize) {
        this.rowCount = rowCount;
        this.records = records;
        this.pageCurrent = pageCurrent;
        this.pageSize = pageSize;
        this.pageCount=rowCount/pageSize;
        if(this.rowCount%this.pageSize!=0)this.pageCount++;
    }
    public Integer getRowCount() {return rowCount;}
    public void setRowCount(Integer rowCount) {this.rowCount = rowCount;}
    public List<T> getRecords() {return records;}
    public void setRecords(List<T> records) {this.records = records;}
    public Integer getPageCount() {return pageCount;}
    public void setPageCount(Integer pageCount) {this.pageCount = pageCount;}
    public Integer getPageCurrent() {return pageCurrent;}
    public void setPageCurrent(Integer pageCurrent) {this.pageCurrent = pageCurrent;}
    public Integer getPageSize() {return pageSize;}
    public void setPageSize(Integer pageSize) {this.pageSize = pageSize;}
    @Override
 public String toString() {
        return "PageObject{" +
                "rowCount=" + rowCount +
                ", records=" + records +
                ", pageCount=" + pageCount +
                ", pageCurrent=" + pageCurrent +
                ", pageSize=" + pageSize +
                '}';
    }
}

VoucherService 接口及查询方法定义

package com.cy.retail.voucher.service;
import com.cy.retail.common.pojo.PageObject;
import com.cy.retail.voucher.pojo.Voucher;
public interface VoucherService {
    /**
 * 分页查问 Voucher 信息
 * @param pageCurrent
 * @param pageSize
 * @return
 */ PageObject<Voucher> findPageObjects(Integer pageCurrent,Integer pageSize);
}

VoucherService 接口实现类 VoucherServiceImpl 定义及办法实现

package com.cy.retail.voucher.service.impl;
import com.cy.retail.common.pojo.PageObject;
import com.cy.retail.voucher.dao.VoucherDao;
import com.cy.retail.voucher.pojo.Voucher;
import com.cy.retail.voucher.service.VoucherService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class VoucherServiceImpl implements VoucherService {
    @Autowired
 private VoucherDao voucherDao;
    @Override
 public int deleteById(Integer id) {return voucherDao.deleteById(id);
    }
    @Override
 public PageObject<Voucher> findPageObjects(Integer pageCurrent, Integer pageSize) {int rowCount=voucherDao.getRowCount();
        int startIndex=(pageCurrent-1)*pageSize;
        List<Voucher> records=voucherDao.findPageObjects(startIndex,pageSize);
        return new PageObject<>(rowCount,records,pageCurrent,pageSize);
    }
}

编写单元测试类进行测试剖析

package com.cy.retail.voucher.service;
import com.cy.retail.common.pojo.PageObject;
import com.cy.retail.voucher.dao.VoucherDao;
import com.cy.retail.voucher.pojo.Voucher;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
@SpringBootTest
public class VoucherServiceTests {
    @Autowired
 private VoucherService voucherService;
    @Test
 void testFindPageObjects(){
        PageObject<Voucher> pageObject=
        voucherService.findPageObjects(1,3);
        System.out.println(pageObject);
    }
}

Controller 对象办法定义及实现

管制逻辑层响应数据规范对象设计及实现，代码如下：

package com.cy.retail.common.pojo;
import java.io.Serializable;
public class ResponseResult implements Serializable {
    private static final long serialVersionUID = -4971076199594828397L;
    /** 状态:1 ok,0 error*/
 private Integer state=1;
    /** 状态信息 */
 private String message="ok";
    /** 业务层返回的正确响应数据 */
 private Object data;
    public ResponseResult(){}
    public ResponseResult(String message){//new JsonResult("update ok");
 this.message=message;
    }
    public ResponseResult(Object data){this.data=data;}
    public ResponseResult(Throwable e){
        this.state=0;
        this.message=e.getMessage();}
    public Integer getState() {return state;}
    public void setState(Integer state) {this.state = state;}
    public String getMessage() {return message;}
    public void setMessage(String message) {this.message = message;}
    public Object getData() {return data;}
    public void setData(Object data) {this.data = data;}
}

定义 VoucherController 类，并增加 doFindPageObjects 办法，代码如下：

ackage com.cy.retail.voucher.controller;
import com.cy.retail.common.pojo.PageObject;
import com.cy.retail.common.pojo.ResponseResult;
import com.cy.retail.voucher.service.VoucherService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class VoucherController {
    @Autowired
 private VoucherService voucherService;
    @GetMapping("/voucher/doFindPageObjects/{pageCurrent}/{pageSize}")
    public ResponseResult doFindPageObjects(@PathVariable Integer pageCurrent,@PathVariable Integer pageSize){return new ResponseResult(voucherService.findPageObjects(pageCurrent,pageSize));
    }
}

管制层对立异样解决类设计及实现，要害代码如下：

package com.cy.retail.common.web;
import com.cy.retail.common.pojo.ResponseResult;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;
@RestControllerAdvice
public class GlobalExceptionHandler {private static final Logger log= LoggerFactory.getLogger(GlobalExceptionHandler.class);
    @ExceptionHandler(RuntimeException.class)
    public ResponseResult doHandleRuntimeException(RuntimeException e){e.printStackTrace();// 控制台输入
 log.error("exception msg {}"+e.getMessage());
        return new ResponseResult(e);
    }
}

Voucher 页面设计及实现

在 static 目录中增加 voucher.html 页面，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="app" class="container">
    <h1>The Voucher Page</h1>
       <table class="table">
         <thead>
          <tr>
            <th> 序号 </th>
            <th> 面值 </th>
            <th> 可用条件 </th>
            <th> 起始日期 </th>
            <th> 截止日期 </th>
            <th> 数量 </th>
            <th> 操作 </th>
         </tr>
        </thead>
           <tbody>
           <tr v-for="(v,i) of vouchers" :key="i">
                <td>{{i+1}}</td>
                <td>{{v.deno}}</td>
               <td>{{v.requirement}}</td>
               <td>{{v.startTime}}</td>
               <td>{{v.endTime}}</td>
               <td>{{v.maxNum}}</td>
               <td><button class="btn btn-danger btn-xs">delete</button></td>
           </tr>
        </tbody>
    </table>
    <div id="pageId" class="box-footer clearfix" dm="100">
        <ul class="pagination pagination-sm no-margin pull-right">
            <li><a class="first" @click="doJumpToPage"> 首页 </a></li>
            <li><a class="pre" @click="doJumpToPage"> 上一页 </a></li>
            <li><a class="next" @click="doJumpToPage"> 下一页 </a></li>
            <li><a class="last" @click="doJumpToPage"> 尾页 </a></li>
            <li><a class="rowCount"> 总记录数({{rowCount}})</a></li>
            <li><a class="pageCount"> 总页数({{pageCount}})</a></li>
            <li><a class="pageCurrent"> 当前页({{pageCurrent}})</a></li>
        </ul>
    </div>
</div>
<script src="/js/axios.min.js"></script>
<script src="/js/vue.js"></script>
<script> var vm=new Vue({
        el:"#app",
        data:{vouchers:{},
          pageCurrent:1,
          pageCount:0,
          rowCount:0
 },
        methods:{doFindPageObjects(){let url=`voucher/doFindPageObjects/${this.pageCurrent}/3`;
               axios.get(url).then(function(result){
                   let respData=result.data.data;
                   this.vm.vouchers=respData.records;
                   this.vm.rowCount=respData.rowCount;
                   this.vm.pageCount=respData.pageCount;
                   this.vm.pageCurrent=respData.pageCurrent;
               })
           },
           doJumpToPage(event){let cls=event.target.getAttribute("class");
               if(cls=="first"){this.pageCurrent=1;}else if(cls=="pre"&& this.pageCurrent>1){this.pageCurrent--;}else if(cls=="next"&& this.pageCurrent< this.pageCount){this.pageCurrent++;}else if(cls=="last"){this.pageCurrent= this.pageCount;}else{return;}
               //3. 基于新的页码值从新执行查问
 this.doFindPageObjects();}
        },
        mounted:function(){this.doFindPageObjects();
        }
    }); </script>
</body>
</html>

启动服务器进行拜访测试剖析

首先，启动 tomcat，而后在关上浏览器，在地址栏输出拜访地址，获取服务端数据并进行出现，如图所示：

购物券删除业务实现

业务形容

从数据库查问购物券信息后，点击页面上删除按钮，基于 id 删除以后行记录，如图所示：

业务时序剖析

在购物券出现页面，用户执行删除操作，其删除时序如图所示：

Dao 接口办法及映射定义

在 VoucherDao 接口中定义删除办法以及 SQL 映射，代码如下：

 @Delete("delete from tb_voucher where id=#{id}")

 int deleteById(Integer id);

Service 接口办法定义及实现

在 VoucherService 接口中增加删除办法，代码如下：

int deleteById(Integer id);

在 VoucherService 的实现类 VoucherServiceImpl 中增加 deleteById 办法实现。代码如下。

@Override
    public int deleteById(Integer id) {int rows=voucherDao.deleteById(id);

        return rows;
    }

Controller 对象办法定义及实现

在 VoucherController 中的增加 doDeleteById 办法，代码如下：

 @DeleteMapping("/voucher/doDeleteById/{id}")
public ResponseResult doDeleteById(@PathVariable Integer id){voucherService.deleteById(id);
    return new ResponseResult(id);
}

阐明：Restful 格调为一种软件架构编码格调, 定义了一种 url 的格局，其 url 语法为 /a/b/{c}/{d}, 在这样的语法结构中 {} 为一个变量表达式。如果咱们心愿在办法参数中获取 rest url 中变量表达式的值, 能够应用 @PathVariable 注解对参数进行形容。

Voucher 页面上删除按钮事件处理

在 voucher.html 页面中增加删除事件，代码如下：

<button @click="doDeleteById(v.id)" class="btn btn-danger btn-xs">delete</button>

在 vue 的 methods 对象中增加删除办法，代码如下:

doDeleteById(id){let url=`voucher/doDeleteById/${id}`;
    axios.delete(url).then(function(result){alert(result.data.message);
        this.vm.doFindPageObjects();})
}

启动 tomcat 服务器进行拜访测试剖析

启动 tomcat，而后在关上浏览器，在地址栏输出拜访地址，获取服务端数据并进行出现，接下来点击页面上的删除按钮进行测试。

购物券增加业务设计实现

业务形容

在购物券页面中设计增加表单，而后点击表单中的 Save 按钮时将表单数据异步提交到服务端进行保留，如图所示：

业务时序设计及剖析

在购物券页面，输出购物券信息，而后提交到服务端进行保留，其时序剖析如图所示：

DAO 接口办法设计及实现

在 VoucherDao 中增加用于保留商品信息的接口办法，代码如下：

int insertObject(Voucher entity);

在 VoucherMapper 文件中增加 insertObject 办法对应的 SQL 映射，代码如下：

<?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.cy.retail.voucher.dao.VoucherDao">
    <insert id="insertObject">
        insert into tb_voucher
        (deno,requirement,startTime,endTime,maxNum,remark,createdTime)
        values
        (#{deno},#{requirement},#{startTime},#{endTime},#{maxNum},#{remark},now())
    </insert>
</mapper>

Service 接口办法设计及实现

在 VoucherService 接口中增加业务办法，用于实现购物券信息增加，代码如下：

int saveObject(Voucher entity);

在 VoucherSerivceImpl 类中增加接口办法实现，代码如下：

@Override
public int saveObject(Voucher entity) {return voucherDao.insertObject(entity);
}

Controller 类中办法设计及实现

在 VoucherController 类中增加用于解决增加申请的办法，代码如下：

@PostMapping("/voucher/doSaveObject")
public ResponseResult doSaveObject(@RequestBody Voucher entity){System.out.println(entity);
    voucherService.saveObject(entity);
    return new ResponseResult("save ok");
}

购物券页面表单元素设计及事件处理

在 voucher.html 页面代码中设计增加表单，代码如下：

<div>
    <form>
        <input type="hidden" v-model="id">
        <div class="form-group">
            <label for="denoId"> 面值 </label>
            <input type="text" v-model="deno" class="form-control" id="denoId" placeholder="面值">
        </div>
        <div class="form-group">
            <label for="requirementId"> 利用条件 </label>
            <input type="text" v-model="requirement" class="form-control" id="requirementId" placeholder="利用条件">
        </div>
        <div class="form-group">
            <label for="startTimeId"> 起始日期 </label>
            <input type="text" v-model="startTime" class="form-control" id="startTimeId" placeholder="起始日期">
        </div>
        <div class="form-group">
            <label for="endTimeId"> 截至日期 </label>
            <input type="text" v-model="endTime" class="form-control" id="endTimeId" placeholder="截至日期">
        </div>
        <div class="form-group">
            <label for="maxNumId"> 最大数量 </label>
            <input type="text" v-model="maxNum" class="form-control" id="maxNumId" placeholder="最大数量">
        </div>
        <div class="form-group">
            <label for="maxNumId"> 备注 </label>
            <textarea v-model="remark" class="form-control" id="remarkId" placeholder="备注"></textarea>
        </div>
        <div class="form-group">
            <input type="button" @click="doSaveOrUpdate" value="Save Data" class="btn btn-primary"/>
        </div>
    </form>
</div>

在 Vue 对象的 Data 区增加属性数据，代码如下：

deno:"",
requirement:"",
startTime:"",
endTime:"",
maxNum:"",
remark:"",

在 Vue 对象中的 Methods 区，增加保留按钮事件处理函数，代码如下：
doSaveOrUpdate(){

 let url="voucher/doSaveObject";
    let params={"id":this.id,"deno":this.deno,"requirement":this.requirement,"startTime":this.startTime,"endTime":this.endTime,"maxNum":this.maxNum,"remark":this.remark};
    console.log(params);
    axios.post(url,params).then(function(result){alert(result.data.message);
        this.vm.doFindPageObjects();
        this.vm.id="";
        this.vm.deno="";
        this.vm.requirement="";
        this.vm.startTime="";
        this.vm.endTime="";
        this.vm.maxNum="";
        this.vm.remark="";
    })
}

购物券批改业务设计实现

业务形容

在购物券页面中设计批改按钮，并在点击批改按钮时候基于 id 查问购物券信息，而后出现在表单中，如图所示：

业务时序设计及剖析

基于用户更新设计其执行时序。

Dao 接口办法设计及实现

在 VoucherDao 中增加基于 id 查问和更新的办法，代码如下：

@Select("select * from tb_voucher where id=#{id}")
Voucher findById(Integer id);
int updateObject(Voucher entity);

将 updateObject 办法的 SQL 映射增加到映射文件(倡议 SQL 内容比拟多的写到映射文件)，代码如下：

<update id="updateObject">
    update tb_voucher
    set
     deno=#{deno},
     requirement=#{requirement},
     startTime=#{startTime},
     endTime=#{endTime},
     maxNum=#{maxNum},
     remark=#{remark}
    where id=#{id}
</update>

Service 接口办法设计及实现

在 VoucherService 中增加基于 id 查问和更新的办法，代码如下：

Voucher findById(Integer id);
int updateObject(Voucher entity);

在 VoucherServiceImpl 类中增加基于 id 查问和更新的办法，代码如下：

@Override
public Voucher findById(Integer id) {return voucherDao.findById(id);
}
@Override
public int updateObject(Voucher entity) {return voucherDao.updateObject(entity);
}

Controller 类中办法设计及实现

在 VoucherController 类中增加解决基于 id 的查问申请办法和更新购物券信息的办法，代码如下：

@GetMapping("/voucher/doFindById/{id}")
public ResponseResult doFindById(@PathVariable Integer id){Voucher voucher=voucherService.findById(id);
    return new ResponseResult(voucher);
}
@PostMapping("/voucher/doUpdateObject")
public ResponseResult doUpdateObject(@RequestBody Voucher entity){voucherService.updateObject(entity);
    return new ResponseResult("update ok");
}

Voucher 页面中更新设计设计及实现

在 voucher 页面设计中，在 vue 对象中的 methods 区增加基于 id 的查问申请办法，代码如下：

doFindById(id){let url=`voucher/doFindById/${id}`;
    axios.get(url).then(function(result){console.log(result.data);
        this.vm.id=result.data.data.id;
        this.vm.deno=result.data.data.deno;
        this.vm.requirement=result.data.data.requirement;
        this.vm.startTime=result.data.data.startTime;
        this.vm.endTime=result.data.data.endTime;
        this.vm.maxNum=result.data.data.maxNum;
        this.vm.remark=result.data.data.remark;
    })
}

在 voucher 页面设计中，在 vue 对象中的 methods 区批改 doSaveOrUpdate 办法，代码如下：

doSaveOrUpdate(){
    let url=this.id?"voucher/doUpdateObject":"voucher/doSaveObject";
    let params={"id":this.id,"deno":this.deno,"requirement":this.requirement,"startTime":this.startTime,"endTime":this.endTime,"maxNum":this.maxNum,"remark":this.remark};
    console.log(params);
    axios.post(url,params).then(function(result){alert(result.data.message);
        this.vm.doFindPageObjects();
        this.vm.id="";
        this.vm.deno="";
        this.vm.requirement="";
        this.vm.startTime="";
        this.vm.endTime="";
        this.vm.maxNum="";
        this.vm.remark="";
    })
}

启动服务器进行拜访测试剖析

总结(Summary)

本大节重点解说了 SpringBoot 工程下 MyBatis,SpringMVC,Vue 技术的综合利用，重点了解其业务实现过程以及问题的解决过程。

正文完
springboot
发表至： springboot
2020-10-22
 0
关于springboot:SpringBoot开发笔记1-springboot简介和helloworld
关于springboot:RestController
关于springboot:少走十年弯路39W字顶级SpringBoot笔记学废springboot
关于springboot:12ThreadLocal的那点小秘密