Vue前端整合后端的CRUD

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.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'),

        },
      ]
    }

   
  ]
})

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

//开启跨域
    proxyTable: {
      '/api':{
        target: 'http://localhost:8888/',
        changeOrigin: true,     //  开启跨域
        pathRewrite: {
          '^/api': "/"
        }
      }
    },

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;
            })
        },

后端参数的传递

@PostMapping("/saveCategory")

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

实现效果

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: '删除成功!'
                });

后台传参

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

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;
            })
        },

后台参数的传递

@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));
    }

实现效果

3.5分页的实现

element分页模板

修改表格头的数据源

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

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

方法

 //分页
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
  this.pagesize = size;
  console.log(this.pagesize); //每页下拉显示数据
},
handleCurrentChange: function (currentPage) {
  this.currentPage = currentPage;
  console.log(this.currentPage); //点击第几页
},

分页效果