Vue版增删改查

所用接口权威java项目中的接口

controller层一定要写@CrossOrigin 注解

package com.xyf.springbootredis.controller;
 
import com.xyf.springbootredis.entiy.Areainfo;
import com.xyf.springbootredis.entiy.Result;
import com.xyf.springbootredis.service.AreaInfoService;
import com.xyf.springbootredis.service.AreaInfoService2;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
 
@RestController
@CrossOrigin     //解决跨域冲突
public class AreainfoController {
 
 
    @Autowired
    private AreaInfoService areaInfoService;
 
    @GetMapping("list")
    public Result list(){
        return areaInfoService.list();
    };
 
 
    @GetMapping("selectById/{areaid}")
    public Areainfo selectById(@PathVariable Integer areaid){
        return areaInfoService.selectById(areaid);
    }
 
    @PutMapping("update")
    public String update(@RequestBody  Areainfo areainfo){
        areaInfoService.update(areainfo);
        return "修改成功";
    }
 
    @DeleteMapping("delete/{areaid}")
    public String delete(@PathVariable Integer areaid){
         areaInfoService.delete(areaid);
         return "删除成功";
    }
 
    @PostMapping("insert")
    public String insert(@RequestBody Areainfo areainfo){
        areaInfoService.insert(areainfo);
        return "添加成功";
    }

}

 1.        查询

方法：

前台表格

  添加

               方法

 

 弹出层

  修改

 弹出层的form表单

 删除

 源码

<template>
    <div>
        <el-container>
            <el-header>
                <el-button type="primary " class="el-icon-circle-plus-outline " circle  @click="add()">   </el-button>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            background-color="#545c64"
                            text-color="#fff"
                            active-text-color="#ffd04b">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item index="1-1">查询用户</el-menu-item>
                            <el-menu-item index="1-2">添加用户</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-table
                            :data="tableData"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="areaid"
                                label="编号"
                                >
                        </el-table-column>
                        <el-table-column
                                prop="areaname"
                                label="地名"
                                >
                        </el-table-column>
 
                        <el-table-column
                                label="操作">
                            <template slot-scope="scope">
<!--                               {{scope.row.areaid}}-->
                                <el-button type="primary" icon="el-icon-edit" circle @click="editUser(scope.row.areaid)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" circle @click="deleteArea(scope.row.areaid)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-main>
            </el-container>
        </el-container>
 
        <!--修改的对话框-->
 
        <el-dialog
                title="提示"
                :visible.sync="editDialogVisible"
                width="30%"
                >
            <!--model:表单数据-->
            <el-form  label-width="80px" :model="userForm">
                <el-form-item label="地名">
                    <el-input v-model="userForm.areaname"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmEditUser">确 定</el-button>
              </span>
      </el-dialog>
 
 
 
        <el-dialog
                title="提示"
                :visible.sync="insertDialogVisible"
                width="30%"
        >
            <!--model:表单数据-->
            <el-form  label-width="80px" :model="insertForm" ref="form1">
                <el-form-item label="地名">
                    <el-input v-model="insertForm.areaname" id="el"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="insertDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
              </span>
        </el-dialog>
 
    </div>
</template>
<script>
    export default {
        name: "index",
        data(){
            return {
                tableData: [],
                //控制修改对话框的显示
                editDialogVisible:false,
                insertDialogVisible:false,
                //表单对象
                userForm:{},
                insertForm:{}
            }
        },
        //页面加载完毕后执行该方法
        created() {
            this.initTable();
        },
        methods:{
            initTable(){
                var that=this;
                this.$http.get("http://localhost:8001/list").then(function(result){
                      that.tableData=result.data.data;
                })
            },
            //根据用户id查询用户信息-----id不要使用Long  ----使用String类型
            editUser(areaid){
                this.editDialogVisible=true;
                var that=this;
                this.$http.get(`http://localhost:8001/selectById/${areaid}`).then(function(result){
                     // console.log(result)
                    that.userForm=result.data;
                     // console.log(that.userForm)
 
                })
            },
            confirmEditUser(){
                var that=this;
                //JSON对象
                this.$http.put(`http://localhost:8001/update`,this.userForm).then(function(result){
                    // console.log(result.data)
                       if(result.data=="修改成功"){
                           that.editDialogVisible=false;
                           that.initTable();
                       }
                })
            },
 
            add(){
                var that=this;
                that.insertDialogVisible=true;
                this.insertForm={}
            },
 
            submit(){
                var that=this;
                this.$http.post(`http://localhost:8001/insert`,this.insertForm).then(function(result){
                    // console.log(result)
                    if(result.data=="添加成功"){
                        that.insertDialogVisible=false;
                        that.initTable();
                    }
                })
            },
            deleteArea(areaid){
                var that=this;
                this.$http.delete(`http://localhost:8001/delete/${areaid}`).then(function(result){
                    // console.log(result)
                    if (result.data=="删除成功"){
                        that.initTable();
                    }
 
                    // console.log(that.userForm)
                })
            },
 
        }
    }
</script>
<style>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }
 
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
    }
 
    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
    }
</style>