谷粒商城 基础增删改（前端）_谷粒商城前端源码

准备

向数据库发送请求

• get
  then表示请求成功后需要拿这个数据干什么

 this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        methods: 'get',
      }).then(data => {
        this.menus = data.data.data;
      })
1
2
3
4
5
6

• post
  data，用来封装数据，一般是对象即可，后端会自动根据属性名分配
  
  后端只需要一个@RequestBody注解即可接收数据
  

所有方法的共同点

每一步最后都需要 刷新页面，展开上次打开的属性结构图

• 刷新页面使用(刷新页面就是将数据重新提交)

    getMenu() {
      this.$http({
        url: this.$http.adornUrl('/product/category/list/tree'),
        methods: 'get',
      }).then(data => {
        this.menus = data.data.data;
      })
    },
1
2
3
4
5
6
7
8

• 这个属性会让extendKey中所包含的元素每次刷新是默认打开

:default-expanded-keys="extendKey"  
1

使用： 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• 消息提示
  element-ui 提供，执行到这会自动弹出一个消息提示，type改变样式，message是提示信息。

 this.$message({
          message: '保存成功',
          type: "success",
        })
1
2
3
4

信息封装部分

表单只能提供三条信息，其他的信息可以通过计算得到

修改

需求：修改一条字段，名字，图标字段
流程：

表单部分

这里的表单复用增加的表单，区别在于调用方法的不同，完全可以可以通过一个函数根据一个全局变量dialogType来判断调用哪个函数

请求数据库的数据

修改其实就是让表单属性覆盖数据库的数据，之后的步骤与增加相同。

删除

需求：根据id删除一条数据，需要有确认
流程：删除，弹出对话框，确定后，封装id发送到后端

对话框部分

使用elementui，调用这个方法即可弹出

 this.$confirm('确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
1
2
3
4
5

剩下的步骤和上边相同

 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: '已取消删除'
        });
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26