往期
从0到1完成一个Vue后台管理项目（二、使用element-ui）
从0到1完成一个Vue后台管理项目（三、使用SCSS/LESS，安装图标库）
从0到1完成一个Vue后台管理项目（四、引入axios、配置路由）
从0到1完成一个Vue后台管理项目（五、登录页（表单校验的使用和封装））
从0到1完成一个Vue后台管理项目（五、登录页，mock，token，axios封装）
从0到1完成一个Vue后台管理项目（七、Header、Footer、页面布局）
从0到1完成一个Vue后台管理项目（八、Menu改造完善、子组件创建、配置路由）
从0到1完成一个Vue后台管理项目（九、引入Breadcrumb面包屑，更改bug）
从0到1完成一个Vue后台管理项目（十、列表API封装、Table列表渲染、表格数据转换）
从0到1完成一个Vue后台管理项目（十二、学生table列表删除、查询、重置）
从0到1完成一个Vue后台管理项目（十三、信息列表页面实现：对话框新增、DateTimePicker 日期时间选择器）
加上校验规则
新增接口
封装新增api
这里我们安装一下qs模块
这里是因为后端的数据问题需要处理，如果不需要处理的话是不需要下的
cnpm i qs -D
引入qs
封装接口
使用
封装查询api
使用
修改
我们怎么确定是新增还是修改
给一个状态：state
然后我们判断一下
修改接口
使用
bug修复
此页代码
<template>
<div class="infoList">
<el-form :inline="true" class="demo-form-inline" size="small">
<el-form-item>
<el-button type="primary" @click="addStudent">新增</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="sex" label="性别" align="center">
</el-table-column>
<el-table-column prop="age" label="年龄" align="center">
</el-table-column>
<el-table-column prop="father" label="父亲" align="center">
</el-table-column>
<el-table-column prop="mather" label="母亲" align="center">
</el-table-column>
<el-table-column prop="address" label="家庭住址" align="center">
</el-table-column>
<el-table-column prop="time" label="入校时间" align="center">
</el-table-column>
<el-table-column prop="phone" label="联系方式" align="center">
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="danger" size="mini" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
<el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :title="state?'添加学生信息':'修改学生信息'" :visible.sync="dialogFormVisible" width="500px">
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
<el-radio v-model="form.sex" label="1">男</el-radio>
<el-radio v-model="form.sex" label="2">女</el-radio>
</el-form-item>
<el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
<el-input v-model="form.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="父亲姓名" :label-width="formLabelWidth" prop="father">
<el-input v-model="form.father" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="母亲姓名" :label-width="formLabelWidth" prop="mather">
<el-input v-model="form.mather" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="家庭住址" :label-width="formLabelWidth" prop="address">
<el-input v-model="form.address" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="入校时间" :label-width="formLabelWidth" prop="time">
<el-date-picker v-model="form.time" type="datetime" placeholder="选择日期时间" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
<el-input v-model="form.phone" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeInfo('form')">取 消</el-button>
<el-button type="primary" @click="sure('form') ">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { info, getInfo, updateInfo } from '@/api/api.js'
export default {
data() {
return {
tableData: [],
dialogFormVisible: false,
form: {
name: '',
sex: '1',
age: '',
father: '',
mather: '',
address: '',
time: '',
phone: ''
},
rules: {
name: [{ required: true, message: '请输入姓名' }],
sex: [{ required: true }],
age: [{ required: true, message: '请输入年龄' }],
address: [{ required: true, message: '请输入地址' }],
time: [{ required: true, message: '请输入入学时间' }],
phone: [{ required: true, message: '请输入联系方式' }]
},
formLabelWidth: '80px',
state: true,
total: 0
}
},
created() {
this.getData()
},
methods: {
edit(row) {
this.form = { ...row }
this.state = false
this.dialogFormVisible = true
},
closeInfo(form) {
this.$refs[form].resetFields()
this.dialogFormVisible = false
},
del() {},
addStudent() {
this.form = {
name: '',
sex: '1',
age: '',
father: '',
mather: '',
address: '',
time: '',
phone: ''
}
// this.$$nextTick(() => {
// this.$refs['form'].resetFields()
// })
this.state = true
this.dialogFormVisible = true
},
getData() {
getInfo().then(res => {
if (res.data.status === 200) {
this.tableData = res.data.data
this.total = res.data.total
}
})
},
sure(form) {
console.log(form, this.form)
this.$refs[form].validate(valid => {
if (valid) {
if (this.state) {
info(this.form).then(res => {
if (res.data.status === 200) {
this.getData()
this.dialogFormVisible = false
this.$message({ type: 'success', message: res.data.message })
}
})
} else {
updateInfo(this.form).then(res => {
if (res.data.status === 200) {
this.getData()
this.dialogFormVisible = false
this.$message({ type: 'success', message: res.data.message })
}
})
}
}
})
}
}
}
</script>
<style lang="scss" scoped>
.infoList {
.demo-form-inline,
.el-form-item {
text-align: left;
}
.el-pagination {
text-align: left;
margin-top: 20px;
}
}
</style>
删除
接口
使用
api优化
我们发现新增和修改接口差不多，那么我们是不是可以优化一下
增删改查封装复用
utils下建立table.js
table.js下封装
简化
table.js代码
// 获取表格数据
export function getData(root, url, params) {
root.service.get(url, { params: params || {} }).then(res => {
if (res.data.status) {
root.tableData = res.data.data
root.total = res.data.total
}
})
.catch(err => {
throw err
})
}
// 新增和修改方法的封装
import qs from 'qs'
export function changeInfo(root, method, url, form, callback) {
let data = qs.stringify(form)
root.service[method](url, data)
.then(res => {
if (res.data.status === 200) {
callback(root, url)
root.dialogFormVisible = false
root.$refs['form'].resetFields()
root.$message({ type: 'success', message: res.data.message })
}
})
.catch(err => {
throw err
})
}
// 删除方法
export function delData(root, url, id, callFun) {
root.$alert('你确定要删除吗？', '提示', {
confirmButtonText: '确定',
callback: () => {
root.service.delete(`${url}/${id}`).then(res => {
if (res.data.status === 200) {
callFun(root, url)
root.$message({ message: res.data.message, type: 'success' })
}
})
.catch(err => {
throw err
})
}
})
}
infoLists.vue
我们把优化后的代码用在infoLists.vue里
<template>
<div class="infoMent">
<el-form :inline="true" class="demo-form-inline" size="small">
<el-form-item>
<el-button type="primary" @click="addStudent">新增</el-button>
</el-form-item>
</el-form>
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="name" label="姓名" align="center">
</el-table-column>
<el-table-column prop="sex" label="性别" align="center">
</el-table-column>
<el-table-column prop="age" label="年龄" align="center">
</el-table-column>
<el-table-column prop="father" label="父亲" align="center">
</el-table-column>
<el-table-column prop="mather" label="母亲" align="center">
</el-table-column>
<el-table-column prop="address" label="家庭住址" align="center">
</el-table-column>
<el-table-column prop="time" label="入校时间" align="center">
</el-table-column>
<el-table-column prop="phone" label="联系方式" align="center">
</el-table-column>
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="danger" size="mini" icon="el-icon-edit" @click="edit(scope.row)"></el-button>
<el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :title="state?'添加学生信息':'修改学生信息'" :visible.sync="dialogFormVisible" width="500px">
<el-form :model="form" :rules="rules" ref="form">
<el-form-item label="姓名" :label-width="formLabelWidth" prop="name">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
<el-radio v-model="form.sex" label="1">男</el-radio>
<el-radio v-model="form.sex" label="2">女</el-radio>
</el-form-item>
<el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
<el-input v-model="form.age" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="父亲姓名" :label-width="formLabelWidth" prop="father">
<el-input v-model="form.father" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="母亲姓名" :label-width="formLabelWidth" prop="mather">
<el-input v-model="form.mather" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="家庭住址" :label-width="formLabelWidth" prop="address">
<el-input v-model="form.address" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="入校时间" :label-width="formLabelWidth" prop="time">
<el-date-picker v-model="form.time" type="datetime" placeholder="选择日期时间" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="联系方式" :label-width="formLabelWidth" prop="phone">
<el-input v-model="form.phone" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeInfo('form')">取 消</el-button>
<el-button type="primary" @click="sure('form') ">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { getData, changeInfo, delData } from '@/utils/table.js'
export default {
data() {
return {
tableData: [],
dialogFormVisible: false,
form: {
name: '',
sex: '1',
age: '',
father: '',
mather: '',
address: '',
time: '',
phone: ''
},
rules: {
name: [{ required: true, message: '请输入姓名' }],
sex: [{ required: true }],
age: [{ required: true, message: '请输入年龄' }],
address: [{ required: true, message: '请输入地址' }],
time: [{ required: true, message: '请输入入学时间' }],
phone: [{ required: true, message: '请输入联系方式' }]
},
formLabelWidth: '80px',
state: true,
total: 0
}
},
created() {
getData(this, '/info')
},
methods: {
edit(row) {
this.form = { ...row }
this.state = false
this.dialogFormVisible = true
},
closeInfo(form) {
this.$refs[form].resetFields()
this.dialogFormVisible = false
},
del(row) {
// console.log(row)
// 弹窗提示
delData(this, '/info', row.id, getData)
},
addStudent() {
this.form = {
name: '',
sex: '1',
age: '',
father: '',
mather: '',
address: '',
time: '',
phone: ''
}
// this.$$nextTick(() => {
// this.$refs['form'].resetFields()
// })
this.state = true
this.dialogFormVisible = true
},
sure(form) {
console.log(form, this.form)
this.$refs[form].validate(valid => {
if (valid) {
// if (this.state) {
// changeInfo(this, 'post', '/info', this.form, getData)
// } else {
// changeInfo(this, 'put', '/info', this.form, getData)
// }
let methods = ''
this.state ? (methods = 'post') : (methods = 'put')
changeInfo(this, methods, '/info', this.form, getData)
}
})
}
}
}
</script>
<style lang="scss" scoped>
.infoMent {
.demo-form-inline,
.el-form-item {
text-align: left;
}
}
</style>
封装完毕，很重要，建议反复观看
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
