一、书籍的增删改操作
1.api/action.js
/**
* 对后台请求的地址的封装,URL格式如下:
* 模块名_实体名_操作
*/
export default {
'SERVER': 'http://localhost:8080/ssm', //服务器
'SYSTEM_USER_DOLOGIN': '/user/userLogin', //用户登陆
'SYSTEM_MENU': '/module/queryRootNode', //系统菜单
'Book_ADD': '/book/addBook', //书籍新增
'Book_EDIT': '/book/editBook', //书籍编辑
'Book_DEL': '/book/delBook', //书籍删除
'getFullPath': k => { //获得请求的完整地址,用于mockjs测试时使用
return this.SERVER + this[k];
}
}
2、 BookList.vue(新增功能)
2.1添加新增按钮
<el-button type="success" icon="el-icon-search" @click="open()">新增</el-button>
2.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:隐藏显示设置,通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏 :visible.sync="dialogFormVisible" 注2:通过close或closed事件,在关闭dialog弹出框时清空form表单数据和验证信息; @close="dialogClose"
Dialog对话框基本属性
参数 | 说明 |
---|---|
visible | 是否显示 Dialog,支持 .sync 修饰符,默认:false |
title | Dialog 的标题,也可通过具名 slot (见下表)传入 |
width | Dialog 的宽度,默认:50% |
fullscreen | 是否为全屏 Dialog,默认:false |
modal | 是否需要遮罩层,默认:true |
close-on-click-modal | 是否可以通过点击 modal 关闭 Dialog,默认:true |
close-on-press-escape | 是否可以通过按下 ESC 关闭 Dialog,默认:true |
show-close | 是否显示关闭按钮,默认:true |
Dialog对话框事件
事件 | 说明 | 回调参数 |
---|---|---|
open | Dialog 打开的回调 | 无 |
opened | Dialog 打开动画结束时的回调 | 无 |
close | Dialog 关闭的回调 | 无 |
closed | Dialog 关闭动画结束时的回调 | 无 |
同时data中要添加属性
title: "新增窗体",
dialogFormVisible: false,
formLabelWidth: '100px',
booktypes: [{
id: 1,
name: "言情"
}, {
id: 2,
name: "玄幻"
}, {
id: 3,
name: "现实"
}],
book: {
id: '',
bookname: '',
price: '',
booktype: ''
}
2.3 methods
doSub() {
// 新增/编辑提交到后台的数据
let url = this.axios.urls.BOOK_ADD;
if (this.title == '编辑窗体') {
url = this.axios.urls.BOOK_EDIT;
}
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 => {
console.log(resp);
if (resp.data.success) {
this.$message({
message: resp.data.msg,
type: 'success'
});
this.clear();
this.query({});
} else {
this.$message({
message: resp.data.msg,
type: 'error'
});
}
}).catch(err => {
})
},
clear() {
this.title = '新增窗体';
this.dialogFormVisible = false;
this.book = {
id: '',
bookname: '',
price: '',
booktype: ''
};
},
open(idx, row) {
// 打开添加/编辑书籍信息的窗体
this.dialogFormVisible = true;
if (row) {
this.title = '编辑窗体';
this.book.id = row.id;
this.book.bookname = row.bookname;
this.book.price = row.price;
this.book.booktype = row.booktype;
}
}
3.编辑和删除功能
3.1添加按钮(scope)
<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>
3.2methods
del(idx, row) {
this.$confirm('你确定要删除id为' + row.id + '的书籍信息吗', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(resp => {
let url = this.axios.urls.BOOk_DEL;
this.axios.post(url, {
id: row.id
}).then(resp => {
console.log(resp);
if (resp.data.success) {
this.$message({
message: resp.data.msg,
type: 'success'
});
this.query({});
} else {
this.$message({
message: resp.data.msg,
type: 'error'
});
}
}).catch(err => {});
}).catch(err => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
doSub() {
// 新增/编辑提交到后台的数据
let url = this.axios.urls.BOOK_ADD;
if (this.title == '编辑窗体') {
url = this.axios.urls.BOOK_EDIT;
}
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 => {
console.log(resp);
if (resp.data.success) {
this.$message({
message: resp.data.msg,
type: 'success'
});
this.clear();
this.query({});
} else {
this.$message({
message: resp.data.msg,
type: 'error'
});
}
}).catch(err => {
})
}
二、表单验证
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>
Form表单组件基本属性:
属性 | 说明 |
---|---|
model | 表单数据对象 |
rules | 表单验证规则 |
inline | 行内表单模式 |
label-position | 表单域标签的位置,如果值为 left 或者 right 时,则需要设置 label-width ,可选值:right/left/top |
label-width | 表单域标签的宽度,例如 '50px'。作为 Form 直接子元素的 form-item 会继承该值。支持 auto 。 |
2.在data中添加rules
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'}
]
}