创建vue+iview项目实现分页增删改查功能
iview+vue实现分页增删改查功能
- 一. 后台代码
- 二.前端工具是webstorm,直接上测试相应js接口
- 三.相应的页面
- 四.效果展示
上一片文章总结了下如何创建一个vue项目，前端框架使用iview,那么今天用随便写得demo总结下如何实现数据分页以及对应的增删改差功能,不墨迹直接上代码；
一. 后台代码
直接上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>
<Modal
v-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>
<Button type="success" size="small" @click="handleUpdate(row)">编辑Button>
<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"/>
<Modal
v-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 = true
const 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.list
this.pagination.dataTotal = r.data.total
this.$nextTick(() => { this.table.loading = false })
} else {
this.table.loading = false
}
})
},
changePage(index) {
this.pagination.current = index
this.loadData()
},
pages(num) {
this.pagination.pageSize = num
this.loadData()
},
searchDataPage() {
this.pagination.current = 1
this.loadData()
},
handleReset(name) {
this.$refs[name].resetFields()
this.loadData()
},
addData(name) {
this.demo = true
this.modalTitle = 'create'
this.$refs[name].resetFields()
this.formData.id = 0
},
handleUpdate (item) {
this.demo = true
this.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 = false
this.loadData()
} else {
this.$Notice.error({
title: '失败',
desc: response.data.msg,
duration: 2
})
}
}).catch(err => {
this.fetchSuccess = false
console.log(err)
})
}
})
},
cancel() {
this.demo = false
},
handleDetial(item) {
this.demo_detial = true
this.modalTitle = 'detial'
this.formData_detial = Object.assign({}, item)
},
cancel_detial() {
this.demo_detial = false
},
handleDelete(item) {
this.$Modal.confirm({
title: '删除',
content: '删除数据无法恢复，确认要删除吗？
',
onOk: () => {
let id = item.id
deleteDataById(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>
方法介绍：
四.效果展示
基本完成了分页的基本常用的功能，每天进步一点点！！！！