Vue前端整合后端的CRUD

在这里插入图片描述

用vue安装vue-router Element axios模块

Vue 快速入门https://blog.csdn.net/smilejiasmile/article/details/110819074

1.套用Element的侧边栏模板

1.1Layout.vue

1.2侧边栏内容点击内容跳转右侧显示

在el-menu标签中添加router（一定要添加否则路由嵌套跳转没效果）
在侧边栏的子标签index=“跳转路径” 添加跳转函数

跳转函数

methods: {
        clickMenu(item) {
            this.$router.push(//页面跳转
                {
                    name: item.name
                }
            )
        }
1
2
3
4
5
6
7
8

1.3在router.index页面配置路由

点击侧边栏内容跳转则需要使用嵌套路由

import Vue from 'vue'
import Router from 'vue-router'



Vue.use(Router)

export default new Router({
  routes: [

    {
      path: '/',
      name: 'Layout',
      component: () => import('@/page/layout'),
      // 嵌套路由
      children: [{
        // 这里不设置值，是把main作为默认页面  当加载页面时右侧默认显示页面
        path: '/',
        name: 'Main',
        component: () => import('@/page/main'),
  
      }, 
      // 分类管理
        {
          path: '/categorys',
          name: 'categorys',
          component: () => import('@/page/category/categorys'),

        },
      ]
    }

   
  ]
})

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
27
28
29
30
31
32
33
34
35
36

2.在config的index页面开启跨域

//开启跨域
    proxyTable: {
      '/api':{
        target: 'http://localhost:8888/',
        changeOrigin: true,     //  开启跨域
        pathRewrite: {
          '^/api': "/"
        }
      }
    },
1
2
3
4
5
6
7
8
9
10

3.进行添加编辑删除操作

3.1新增categorys.vue插件

3.2新增分类

使用Element的弹出对话框模块dialogFormVisible = true代表对话框弹出dialogFormVisible = false对话框消失

点击确认调用save（）函数

//添加函数
        //点击保存确定按钮，异步修改信息
        save: function () {
            // alert(123);
            var abc = this;

            console.log(abc.form);

            axios.post("api/category/saveCategory", abc.form).then(res => {
                // 调用getAll函数刷新页面
                this.getAllUsers();
                this.dialogFormVisible=false;
            })
        },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

后端参数的传递

@PostMapping("/saveCategory")

public @ResponseBody ResponseEntity<Category> add(@RequestBody Category category) {
    return ResponseEntity.ok(this.categoryService.insert(category));
}
1
2
3
4
5

实现效果

在这里插入图片描述

3.3删除操作

使用Element的messageBox弹框组件

删除


//函数
//确定删除函数
        open(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //通过id进行删除
                // alert(row.cateId);
                console.log(row);
                axios.post("api/category/deleteById/" + row.cateId).then(res => {
                    // 刷新页面数据
                    this.getAllUsers();
                });

                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

后台传参

@PostMapping("/deleteById/{cateId}")
public ResponseEntity<Boolean> deleteById(@PathVariable("cateId") Integer id) {
    return ResponseEntity.ok(this.categoryService.deleteById(id));
}
1
2
3
4

3.4编辑操作

编辑操作也使用 Dialog 对话框组件

编辑

        

    
        
            
        
        
            
        
        
            
        
    
    
        取 消
        修改
    


  
  编辑


  
  //点击编辑继续修改操作
        handleEdit(row) {
            console.log(row);
            //row是该行tableData对应的一行
            this.form = row;
            //通过id获取对象
            axios.get("api/category/queryById/" + row.cateId).then(res => {
                            alert(res.data);
                          this.form = res.data;
                        });
        },
  
//异步进行修改
        //点击修改按钮，异步修改信息
        update: function () {
            // alert(123);
            var abc = this;

            // console.log(abc.form);

            axios.post("api/category/updateCategory", abc.form).then(res => {
                // alert(res.data);
                this.getAllUsers();
                this.dialogFormVisible2 = false;
            })
        },

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

后台参数的传递

@GetMapping("/queryById/{id}")
public ResponseEntity<Category> queryById(@PathVariable("id") Integer id) {
    return ResponseEntity.ok(this.categoryService.queryById(id));
}

 @PostMapping("/updateCategory")
    public ResponseEntity<Category> edit(@RequestBody Category category) {
        return ResponseEntity.ok(this.categoryService.update(category));
    }
1
2
3
4
5
6
7
8
9

实现效果

在这里插入图片描述

3.5分页的实现

element分页模板

修改表格头的数据源

data="category.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
1

data() {
    return {
      currentPage: 1, //初始页
      pagesize: 5, //    每页的数据
      total: 0,
      }
    }
1
2
3
4
5
6
7

方法

 //分页
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
  this.pagesize = size;
  console.log(this.pagesize); //每页下拉显示数据
},
handleCurrentChange: function (currentPage) {
  this.currentPage = currentPage;
  console.log(this.currentPage); //点击第几页
},
1
2
3
4
5
6
7
8
9
10

分页效果

在这里插入图片描述

相关阅读:
springboot xml 数据库访问联表查询
 SpringCloud-Feign
vue3+ts做echarts做一个简单的折线渐变图
 免费IP代理-如何更改自己的IP做到匿名浏览
 FPGA HLS 卷积神经网络软硬件映射
 火狐浏览器页面翻译
 java中权限修饰符的区别
 10 【异步组件组合式函数(hooks)】
js中的类型转换
 基于深度学习的位置隐私攻击
原文地址：https://blog.csdn.net/qq_48578877/article/details/127518688