10.SPA项目开发之CRUD+表单验证
SPA项目开发之CRUD+表单验证
1.准备
1.1.在api/action.js新增内容
'BOOK_ADD': '/book/addBook', //书籍添加
'BOOK_EDIT': '/book/editBook', //书籍编辑
'BOOK_DEL': '/book/delBook', //书籍删除
1.新增书籍功能
1.1.添加新增按钮
<template>
<div style="padding: 20px">
....
//新增语句开始
<el-button type="success" @click="onAdd()">新增</el-button>
//新增语句结束
<!-- 数据表格 -->
<el-table :data="tableData" style="width: 100%">
.....
</el-table>
...
</div>
</template>
1.2.新增弹出框
<!--添加删除的弹出框-->
<el-dialog title="新增书籍" :visible.sync="dialogFormVisible">
<el-form :model="book">
<el-form-item label="书籍名称" :label-width="formLabelWidth">
<el-input v-model="book.bookname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="书籍价格" :label-width="formLabelWidth">
<el-input v-model="book.price" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="书籍类型" :label-width="formLabelWidth">
<el-select v-model="book.booktype" placeholder="请选择书籍类型">
<el-option v-for="by in booktypes" :label="by.name" :value="by.name" :key="by.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</div>
</el-dialog>
1.3.data中添加内容
book: {
id: '',
bookname: '',
price: '',
booktype: ''
},
dialogFormVisible: false,
formLabelWidth: '100px',
booktypes: [{id: 1, name: '玄幻'}, {id: 2, name: '名著'}, {id: 3, name: '计算机'}],
title: '新增书籍'
1.4.methods中添加内容
clear(){
this.dialogFormVisible = false;
this.book.booktype = '';
this.book.bookname = '';
this.book.price = '';
},
onAdd() {
this.dialogFormVisible = true;
},
handleSubmit(){
let url = this.axios.urls.BOOK_ADD;
let params = {
id: this.book.id,
bookname: this.book.bookname,
price: this.book.price,
booktype: this.book.booktype
}
this.axios.post(url,params).then(resp=>{
if(resp.data.success){
this.$message({
message: resp.data.msg,
type: 'success'
});
this.clear();
let params = {
bookname: this.bookname
}
this.query(params);
}else{
this.$message({
message: resp.data.msg,
type: 'error'
})
}
}).catch(err=>{
})
},
handleCancel(){
this.clear();
},
效果展示
2.编辑书籍功能
2.1.表格中添加编辑和删除按钮
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button size="mini" type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
2.2.methods中添加方法
handleDelete(idx, row) {
},
handleEdit(idx, row) {
this.dialogFormVisible = true;
this.book.id = row.id;
this.book.bookname = row.bookname;
this.book.booktype = row.booktype;
this.book.price = row.price;
this.title = '编辑书籍';
},
2.3.修改methods中clear方法
clear() {
this.dialogFormVisible = false;
this.book.booktype = '';
this.book.bookname = '';
this.book.price = '';
this.title = '';
},
2.4.修改methods中的handleSubmit方法
handleSubmit() {
let url = '';
let params;
if (this.title == '新增书籍') {
url = this.axios.urls.BOOK_ADD;
params = {
bookname: this.book.bookname,
price: this.book.price,
booktype: this.book.booktype
}
} else {
url = this.axios.urls.BOOK_EDIT;
params = {
id: this.book.id,
bookname: this.book.bookname,
price: this.book.price,
booktype: this.book.booktype
}
}
this.axios.post(url, params).then(resp => {
if (resp.data.success) {
this.$message({
message: resp.data.msg,
type: 'success'
});
this.clear();
let params = {
bookname: this.bookname
}
this.query(params);
} else {
this.$message({
message: resp.data.msg,
type: 'error'
})
}
}).catch(err => {
})
},
效果展示
3.删除书籍功能
3.1.往methods的handleDelete方法中添加内容
handleDelete(idx, row) {
this.$confirm('您确定删除id为' + row.id + '的书籍吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let url = this.axios.urls.BOOK_DEL;
this.axios.post(url, {id: row.id}).then(resp => {
if (resp.data.success) {
this.$message({
message: resp.data.msg,
type: 'success'
});
this.clear();
let params = {
bookname: this.bookname
}
this.query(params);
} else {
this.$message({
message: resp.data.msg,
type: 'error'
})
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
效果
4.表单验证
4.1.修改弹出层
<!--添加删除的弹出框-->
<el-dialog :title="title" :visible.sync="dialogFormVisible">
<el-form :model="book" :rules="rules" ref="book">
<el-form-item label="书籍名称" :label-width="formLabelWidth" prop="bookname">
<el-input v-model="book.bookname" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="书籍价格" :label-width="formLabelWidth" prop="price">
<el-input v-model.number="book.price" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="书籍类型" :label-width="formLabelWidth" prop="booktype">
<el-select v-model="book.booktype" placeholder="请选择书籍类型">
<el-option v-for="by in booktypes" :label="by.name" :value="by.name" :key="by.id"></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleCancel">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</div>
</el-dialog>
4.2.在data中添加变量值
rules:
{
bookname: [
{required: true, message: '请输入书本名称', trigger: 'blur'},
{min: 1, message: '长度必须在1个字符以上', trigger: 'blur'}
],
price: [
{required: true, message: '请输入书本价格', trigger: 'blur'},
{type: 'number', message: '必须为数字', trigger: 'blur'}
],
booktype: [
{required: true, message: '请选择书籍类型', trigger: 'blur'}
]
}
效果
评论
匿名评论
隐私政策
你无需删除空行，直接评论以获取最佳展示效果
