vue后台管理系统开发流程全记录_类别管理功能开发: 类别新增
Posted 前端呆头鹅
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue后台管理系统开发流程全记录_类别管理功能开发: 类别新增相关的知识，希望对你有一定的参考价值。
文章目录
类别新增
上章中我们建立了一个类别新增按钮。现在我们为该按钮填充事件。
添加新增类别按钮，点击按钮弹出空白类别信息表单对话框，填写后点击提交表单数据。
一 组件引入
绘制组件前先将组件引入，方便调试。
-
创建文件views/category/deit.vue，添加占位内容。
<template> <div>123</div> </template> -
将组件引入views/category/index.vue中。
<script> ... ... import Edit from './edit.vue' export default { ... ... components: { Edit }, ... ... } </script> -
将组件标签放置到父组件template末尾，查看效果。
<template> <div> <el-form>...</el-form> <el-table>...</el-table> <el-pagination></el-pagination> <edit></edit> </div> </template>
子组件内容 123 出现在页面下方，组件引入成功。
二 组件页面绘制
在刚刚子组件中绘制含表单的对话框。
组件参考element-ui对话框和表单文档。
2.1 绘制对话框
<template>
<el-dialog
title="新增"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<span>绘制表单</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</template>
上图来自element-ui对话框文档，经过了部分修改，其中visible为对话框是否弹出(显示)项，dialogVisible变量为一个Boolean值，后期来自父组件传入，现将其设置初始值即可。
before-close为点击关闭按钮触发的回调。
这部分代码中有一个变量dialogVisible，方法handleClose需要给出。
2.2 绘制表单
<!-- <span>绘制表单</span> -->
<el-form
status-icon
:model="formData"
style="width: 400px;"
label-width="100px"
label-position="right"
>
<el-form-item label="分类名称:" prop="name" >
<el-input v-model="formData.name" />
</el-form-item>
<el-form-item label="状态:" prop="status" >
<el-radio-group v-model="formData.status">
<el-radio :label="1" >正常</el-radio>
<el-radio :label="0" >禁用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序:" prop="sort" >
<el-input-number style="width: 300px;" v-model="formData.sort" :min="1" :max="10000"/>
</el-form-item>
<el-form-item label="备注:" prop="remart" >
<el-input
v-model="formData.remark"
type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"
placeholder="请输入备注" />
</el-form-item>
<el-form-item>
<el-button @click="handleClose" size='mini'>取 消</el-button>
<el-button type="primary" @click="submitForm('formData')" size='mini'>确 定</el-button>
</el-form-item>
</el-form>
这部分代码中有一个变量formData，方法submitForm需要给出。
三 数据引入
变量dialogVisible，formData，和对话框标题title，为减少组件耦合性，均从父组件传入。
props: {
dialogVisible: {
type: Boolean,
default: false
},
formData: {
type: Object,
default: {}
},
title: {
type: String,
default: ''
}
},
<edit
:title="edit.title"
:dialogVisible="edit.visible"
:formData="edit.formData"
>
</edit>
另在子组件中定义tomplate中用到的两个方法。
methods: {
handleClose(done){
done();
},
submitForm(formName){
}
}
四 方法定义
4.1对话框弹出事件
首先父组件中edit.visible值默认是false，当其为ture时对话框弹出，现在为增加按钮绑定对话框弹出事件。
<el-button type="primary" icon="el-icon-circle-plus-outline" @click="openAdd()">新增</el-button>
openAdd(){
this.edit.visible = true;
this.edit.title = '新增';
}
4.2 对话框关闭事件
由于此刻对话框显示标志位是由父组件传入的，而子组件无法直接改变，所以需要通过触发父组件事件改变。
在父组件中定义事件remoteClos，作为关闭对话框并触发列表刷新。
// 父组件中定义事件
remoteClose(){
this.formData = {
'name': '',
status: '',
sort: '',
remart: ''
};
this.edit.visible = false;
this.fetchData();
}
// 父组件中 为子组件绑定事件
<edit
:title="edit.title"
:dialogVisible="edit.visible"
:formData="edit.formData"
@remote="remoteClose"
>
</edit>
// 子组件中 触发事件
methods: {
handleClose(done){
this.$emit("remote");
},
submitForm(formName){
}
}
4.3 表单校验
表单验证依赖于el-form的rules属性，其值为object。
<el-form
status-icon
:model="formData"
style="width: 400px;"
label-width="100px"
label-position="right"
:rules="rules"
>
data(){
return {
rules: {
name: [{required: true, message: '请输入名称', trigger: 'blur' }],
status: [{required: true, message: '请选择状态', trigger: 'change' }],
sort: [{required: true, message: '请输入排序号', trigger: 'change' }]
}
}
}
如上，在rules中，name，status和sort为porps属性的值，对应表单项，required为是否必备，message为提示内容，trigger为触发校验事件。
4.4 表单提交
4.4.1 模拟接口设置
首先我们使用easy在线设置虚拟接口，具体方式在本系列第二章。
我们这里只给出相关参数。
url: /article/category
method: post
{
"code": 20000,
"message": "新增成功"
}
4.4.2 接口封装
在 src\\api\\category.js 添加调用新增接口的方法。
add(data) {
return request({
url: `/article/category`,
method: 'post',
data
})
}
4.4.3 接口调用
接口调用需2步，首先判断表单内容是否通过校验，通过则提交数据。
提交数据时，调用add接口，拿到返回值，根据返回值，判断返回成功与否，成功则触发handleClose方法，关闭对话框并刷新列表。
<el-button type="primary" @click="submitForm('formData')" size='mini'>确 定</el-button>
submitForm中做校验，校验通过调用submitData提交。
校验参照element-ui表单检验示例文档。
<el-form
... ...
ref="formData"
>
submitForm(formName){
this.$refs[formName].validate((valid) => {
if(valid){
this.submitData();
}else {
return false;
}
})
},
引入接口函数，调用提交。
import api from '@/api/category.js'
submitData(){
api.add(this.formData).then((res) => {
if(res.code === 20000){
this.$message({
message: '添加成功',
type: 'success'
});
this.handleClose();
}else {
this.$message({
message: '添加失败',
type: 'error'
});
}
})
}
以上是关于vue后台管理系统开发流程全记录_类别管理功能开发: 类别新增的主要内容，如果未能解决你的问题，请参考以下文章
vue后台管理系统开发流程全记录_类别管理功能开发: 表单 | 表格 | 分页
vue后台管理系统开发流程全记录_标签管理功能开发: 表单 | 表格 | 分页
vue后台管理系统开发流程全记录_标签管理功能开发: 标签新增
vue后台管理系统开发流程全记录_文章管理功能开发: 表单 | 表格 | 分页