一. 后台代码

直接上web层代码，省略了其他部分：

package cn.chang.web;import java.util.HashMap;
import java.util.List;
import java.util.Map;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;import cn.chang.entity.Vehicle;
import cn.chang.service.VehicleService;@RestController
@RequestMapping("/api")
public class VehicleController { @Autowired VehicleService vehicleService;/*** 分页查询* @param vehicle* @return*/@PostMapping("/vehicleDemo")public PageInfo<Vehicle> list(@RequestBody Vehicle vehicle) {PageHelper.startPage(vehicle.getPageNum(), vehicle.getPageSize(), "id desc");List<Vehicle> list = vehicleService.list(vehicle.getName(),vehicle.getCompanyName());PageInfo<Vehicle> pageInfo = new PageInfo<>(list);System.out.println(pageInfo.toString());return pageInfo;}/*** 删除* @param id* @return*/@DeleteMapping("/deleteDemo/{id}")public Map<String, String> deleteDemo(@PathVariable("id") int id) {Map<String, String>map=new HashMap<String, String>();try {int code = vehicleService.delete(id);map.put("status",String.valueOf(code));map.put("msg", "删除成功！");} catch (Exception e) {map.put("status","0");map.put("msg", "删除失败！");}return map;}/*** 编辑&删除* @param vehicle* @return*/@PostMapping("/saveOrUpdateDemo")public Map<String, String> saveOrUpdateDemo(@RequestBody Vehicle vehicle) {Map<String, String>map=new HashMap<String, String>();int code;try {if(vehicle.getId()>0) {code = vehicleService.update(vehicle);}else {code = vehicleService.add(vehicle);}map.put("status",String.valueOf(code));map.put("msg", "保存成功！");} catch (Exception e) {map.put("status","0");map.put("msg", "保存失败！");}return map;}}

二.前端工具是webstorm,直接上测试相应js接口

import axios from '@/libs/api.request'
import { PERMISSION } from '@/api/server'/*** 模拟接口请求* @param {*} params*/
export const getDataPage = (params) => {return axios.request({url: 'api/vehicleDemo',method: 'post',data: params})
}export const deleteDataById = (id) => {return axios.request({url: '/api/deleteDemo/' + id,method: 'delete'})
}export const saveOrUpdateDemo = (params) => {return axios.request({url: 'api/saveOrUpdateDemo',method: 'post',data: params})
}

三.相应的页面

此页面看着多，下面主要看看相应的分页和增删改查功能；

<template><div><Form ref="vehicle" :model="vehicle"  :label-width="80" inline ><FormItem label="车牌号：" prop="name"><Input placeholder="请输入车牌号" v-model="vehicle.name"></Input></FormItem><FormItem label="企业名称：" prop="companyName"><Input placeholder="请输入企业名称" v-model="vehicle.companyName"></Input></FormItem><FormItem label="号牌种类：" prop="hpzl"><Select style="width:200px" v-model="vehicle.hpzl" placeholder="全部号牌种类"><Option value="001">大型汽车</Option><Option value="002">小型汽车</Option><Option value="003">微型汽车</Option></Select></FormItem><FormItem label="使用性质：" prop="syxz"><Select style="width:200px" v-model="vehicle.syxz" placeholder="请选择"><Option value="001">渣土车</Option><Option value="002">危化品车</Option><Option value="003">货车</Option></Select></FormItem><FormItem><Button type="primary" @click="searchDataPage">查询</Button><Button @click="handleReset('vehicle')" style="margin-left: 8px">重置</Button></FormItem></Form><div><Button type="primary" icon="md-add" style="margin-bottom: 8px" @click="addData('formData')">新增</Button></div><!--添加和编辑模态框--><Modalv-model="demo":title="titleValue[modalTitle]"width="600"class-name="vertical-center-modal"><div slot="footer"><Button type="primary" size="large" @click="doSomething">确定</Button><Button type="text" size="large" @click="cancel">取消</Button></div><Form ref="formData" :model="formData" :rules="ruleInline" :label-width="100"><FormItem label="车牌号：" prop="name"><Input placeholder="请输入车牌号" v-model="formData.name"></Input></FormItem><FormItem label="企业名称：" prop="companyName"><Input placeholder="请输入企业名称" v-model="formData.companyName"></Input></FormItem><FormItem label="号牌种类：" prop="hpzl"><Select style="width:200px" v-model="formData.hpzl" placeholder="全部号牌种类"><Option value="001">大型汽车</Option><Option value="002">小型汽车</Option><Option value="003">微型汽车</Option></Select></FormItem><FormItem label="使用性质：" prop="syxz"><Select style="width:200px" v-model="formData.syxz" placeholder="请选择"><Option value="001">渣土车</Option><Option value="002">危化品车</Option><Option value="003">货车</Option></Select></FormItem><FormItem label="机动车所有人：" prop="jdcsyr"><Input placeholder="请输入机动车所有人" v-model="formData.jdcsyr"></Input></FormItem><FormItem label="机动车序号：" prop="jdcxh"><Input placeholder="请输入机动车序号" v-model="formData.jdcxh"></Input></FormItem></Form></Modal><Table :loading="table.loading" :columns="table.columnsTable" :data="table.dataTable" width="100%" border height="550" ><template slot-scope="{row}" slot="action"><Button type="info" size="small" @click="handleDetial(row)">详情</Button>&nbsp;<Button type="success" size="small" @click="handleUpdate(row)">编辑</Button>&nbsp;<Button type="error" size="small" @click="handleDelete(row)">删除</Button></template></Table><Page class="paging" :total="pagination.dataTotal" :current.sync="pagination.current" :page-size="pagination.pageSize" show-total show-sizer  @on-change="changePage" @on-page-size-change="pages"/><!--详情模态框--><Modalv-model="demo_detial":title="titleValue[modalTitle]"width="600"class-name="vertical-center-modal"><div slot="footer"><Button type="text" size="large" @click="cancel_detial">取消</Button></div><Form ref="formData_detial" :model="formData_detial" :rules="ruleInline" :label-width="100"><FormItem label="车牌号：" prop="name"><Input placeholder="请输入车牌号" v-model="formData_detial.name" disabled></Input></FormItem><FormItem label="企业名称：" prop="companyName"><Input placeholder="请输入企业名称" v-model="formData_detial.companyName" disabled></Input></FormItem><FormItem label="号牌种类：" prop="hpzl"><Select style="width:200px" v-model="formData_detial.hpzl" placeholder="全部号牌种类"><Option value="001">大型汽车</Option><Option value="002">小型汽车</Option><Option value="003">微型汽车</Option></Select></FormItem><FormItem label="使用性质：" prop="syxz"><Select style="width:200px" v-model="formData_detial.syxz" placeholder="请选择"><Option value="001">渣土车</Option><Option value="002">危化品车</Option><Option value="003">货车</Option></Select></FormItem><FormItem label="机动车所有人：" prop="jdcsyr"><Input placeholder="请输入机动车所有人" v-model="formData_detial.jdcsyr" disabled></Input></FormItem><FormItem label="机动车序号：" prop="jdcxh"><Input placeholder="请输入机动车序号" v-model="formData_detial.jdcxh" disabled></Input></FormItem></Form></Modal></div>
</template><script>import { getDataPage, deleteDataById, saveOrUpdateDemo } from '@/api/illegalAlarmManager/vehicleInfoSearchIndex'export default {name: 'vehicleInfoSearchIndex',data () {return {vehicle: {name: '',companyName: '',hpzl: '',syxz: ''},demo: false,modalTitle: '',titleValue: {create: '新增',detial: '详情',update: '编辑'},table: {loading: false,dataTable: [],columnsTable: [{title: '号牌号码',key: 'name'},{title: '所属企业',key: 'companyName'},{title: '号牌类型',key: 'hpzl'},{title: '使用性质',key: 'syxz'},{title: '机动车所有人',key: 'jdcsyr'},{title: '机动车序号',key: 'jdcxh'},{title: '是否申办通行证',key: 'isOrnot'},{title: '操作',align: 'center',slot: 'action'}]},pagination: {dataTotal: 0,current: 1,pageSize: 10},formData: {id: '',name: '',companyName: '',hpzl: '',syxz: '',jdcsyr: '',jdcxh: ''},demo_detial: false,formData_detial: {name: '',companyName: '',hpzl: '',syxz: '',jdcsyr: '',jdcxh: ''},ruleInline: {name: [{ required: true, message: '车牌号不能为空！', trigger: 'blur' }],companyName: [{ required: true, message: '企业名称不能为空！', trigger: 'blur' }],hpzl: [{ required: true, message: '号牌种类不能为空！', trigger: 'blur' }],syxz: [{ required: true, message: '使用性质不能为空！', trigger: 'blur' }]}}},created() {this.loadData()},methods: {loadData() {this.table.loading = trueconst params = Object.assign({},this.vehicle,{pageSize: this.pagination.pageSize,pageNum: this.pagination.current})setTimeout(async () => {const r = await getDataPage(params)if (r.data) {this.table.dataTable = r.data.listthis.pagination.dataTotal = r.data.totalthis.$nextTick(() => { this.table.loading = false })} else {this.table.loading = false}})},changePage(index) {this.pagination.current = indexthis.loadData()},pages(num) {this.pagination.pageSize = numthis.loadData()},searchDataPage() {this.pagination.current = 1this.loadData()},handleReset(name) {this.$refs[name].resetFields()this.loadData()},addData(name) {this.demo = truethis.modalTitle = 'create'this.$refs[name].resetFields()this.formData.id = 0},handleUpdate (item) {this.demo = truethis.modalTitle = 'update'this.formData = Object.assign({}, item)},doSomething () {const params = Object.assign({}, this.formData)this.$refs.formData.validate(valid => {if (valid) {saveOrUpdateDemo(params).then(response => {if (response.data.status == 1) {this.$Notice.success({title: '成功',desc: response.data.msg,duration: 2})this.demo = falsethis.loadData()} else {this.$Notice.error({title: '失败',desc: response.data.msg,duration: 2})}}).catch(err => {this.fetchSuccess = falseconsole.log(err)})}})},cancel() {this.demo = false},handleDetial(item) {this.demo_detial = truethis.modalTitle = 'detial'this.formData_detial = Object.assign({}, item)},cancel_detial() {this.demo_detial = false},handleDelete(item) {this.$Modal.confirm({title: '删除',content: '<p>删除数据无法恢复，确认要删除吗？</p>',onOk: () => {let id = item.iddeleteDataById(id).then(result => {if (result.data.status == 1) {this.$Notice.success({title: '成功',desc: result.data.msg,duration: 2})this.loadData()} else {this.$Notice.error({title: '失败',desc: result.data.msg,duration: 2})}}).catch(err => {console.log(err)})}})}}}
</script><style lang="less" scoped>.paging{margin-top:10px;text-align: center;}.vertical-center-modal{display: flex;align-items: center;justify-content: center;.ivu-modal{top: 0;}}
</style>