准备
向数据库发送请求
- get
then表示请求成功后需要拿这个数据干什么
this.$http({
url: this.$http.adornUrl('/product/category/list/tree'),
methods: 'get',
}).then(data => {
this.menus = data.data.data;
})
- post
data,用来封装数据,一般是对象即可,后端会自动根据属性名分配
后端只需要一个@RequestBody注解即可接收数据
所有方法的共同点
每一步最后都需要 刷新页面,展开上次打开的属性结构图
- 刷新页面使用(刷新页面就是将数据重新提交)
getMenu() {
this.$http({
url: this.$http.adornUrl('/product/category/list/tree'),
methods: 'get',
}).then(data => {
this.menus = data.data.data;
})
},
- 这个属性会让extendKey中所包含的元素每次刷新是默认打开
:default-expanded-keys="extendKey"
使用: this.extendKey = [在这里填上id]
如果你也是定义成一个数据的话,可以用push添加多个值
增加
需求:增加一条字段,名字,图标,数量自定义
流程: 点击append按钮,弹出表单,确认后将表单信息封装成对象,提交数据库。
表单部分
- 表单
最后封装成的对象是 model=“对象名”,对象中的属性双向绑定,记录填写信息
<el-dialog title="收货地址" :visible.sync="dialogVisible">
<el-form :model="category">
<el-form-item label="名称">
<el-input v-model="category.name"></el-input>
</el-form-item>
<el-form-item label="图标">
<el-input v-model="category.icon"></el-input>
</el-form-item>
<el-form-item label="数量">
<el-input v-model="category.productCount"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogSubmit">确 定</el-button>
</div>
</el-dialog>
- 消息提示
element-ui 提供,执行到这会自动弹出一个消息提示,type改变样式,message是提示信息。
this.$message({
message: '保存成功',
type: "success",
})
信息封装部分
表单只能提供三条信息,其他的信息可以通过计算得到
修改
需求:修改一条字段,名字,图标字段
流程:
表单部分
这里的表单复用增加的表单,区别在于调用方法的不同,完全可以可以通过一个函数根据一个全局变量dialogType来判断调用哪个函数
请求数据库的数据
修改其实就是让表单属性覆盖数据库的数据,之后的步骤与增加相同。
删除
需求:根据id删除一条数据,需要有确认
流程:删除,弹出对话框,确定后,封装id发送到后端
对话框部分
使用elementui,调用这个方法即可弹出
this.$confirm('确认删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
剩下的步骤和上边相同
remove(node, data) {
this.$confirm('确认删除?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let ids = [data.catId];
this.$http({
url: this.$http.adornUrl('/product/category/delete'),
method: 'post',
data: this.$http.adornData(ids, false),
}).then(() => {
this.extendKey = [node.parent.data.catId]
this.getMenu();
})
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},