前后端分离 element UI spring security 脚手架实现简单的增删改查小案例

最新推荐文章于 2024-04-30 20:31:58 发布

代码大帝

最新推荐文章于 2024-04-30 20:31:58 发布

阅读量648

点赞数 1

文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/qq_60614034/article/details/128927828

版权

前言：

主要技术栈 springboot springsecurity elementUI vue，需要一定的基础才能看懂，没学过的话请看我之前的博客，放上实现功能图片

后端接口代码：

package com.dmdd.javasecuritypractice.controller;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.dmdd.javasecuritypractice.entity.User;
import com.dmdd.javasecuritypractice.service.IUserService;
import com.dmdd.javasecuritypractice.service.impl.UserServiceImpl;
import com.dmdd.javasecuritypractice.util.ResponseResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.access.prepost.PreAuthorize;
import org.springframework.web.bind.annotation.*;

@RestController
public class userController {
    @Autowired
    private IUserService userService;
    @PreAuthorize("hasAuthority('仓库管理')")
    @RequestMapping("/user/page")
    public ResponseResult<IPage<User>> selectUserByPage(@RequestParam(required = false,defaultValue = "1")Long current,
                                                       @RequestParam(required = false,defaultValue = "10")Long pageSize){
        Page<User> userPage = new Page<>();
        userPage.setSize(pageSize);
        userPage.setCurrent(current);
        IPage<User> userIPage = userService.selectUserByPage(userPage);
        return ResponseResult.ok(userPage);

    }
    //删除功能
    @PreAuthorize("hasAuthority('仓库管理')")
    @DeleteMapping("/user/{id}")
    public ResponseResult<Integer> deleteUserById(@PathVariable Long id){
        int i = userService.deleteById(id);
        return ResponseResult.ok(i);
    }
    @PreAuthorize("hasAuthority('仓库管理')")
    @PostMapping("/user")
    public ResponseResult<Integer> addUser(@RequestBody User user){
        boolean b = userService.saveOrUpdate(user);
        if (b){
            return  ResponseResult.ok(1);
        }
        return ResponseResult.ok(0);
    }
    @PreAuthorize("hasAuthority('仓库管理')")
    @PutMapping("/user")
    public ResponseResult<Integer> updateUserById(@RequestBody User user){
        boolean b = userService.saveOrUpdate(user);
        if (b){
            return ResponseResult.ok(1);
        }
        return ResponseResult.ok(0);
    }
}

前后端分离，映射的命名有特定的规则，不能随便的去命名，因为前端会看不懂。

删除接口：用@DeleteMapping

修改接口：用@PutMaping

新增接口：@postMapping

查询接口：@getMapping，我没按规则来，别学我。

具体查询方法就不讲了

vue页面代码：

项目结构

main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
/*引入element-ui*/
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
/*引入axios*/
import axios from "axios";
/*引入qs*/
import qs from "qs";
//使用Element-UI组件
Vue.use(ElementUI)
// 配置axios,qs到Vue
Vue.prototype.axios = axios;
Vue.prototype.qs = qs;

//配置axios拦截请求，添加token头信息
axios.interceptors.request.use(
    config => {
      let token = localStorage.getItem("token");
      console.log("token:" + token);
      if (token) {
        //把localStorage的token放在Authorization里
        config.headers.Authorization = token;
      }
      return config;
    },
    function(err) {
      console.log("失败信息" + err);
    }
);

//错误响应拦截
axios.interceptors.response.use(res => {
  console.log('拦截响应');
  console.log(res);
  if( res.data.status === 'OK'){
    return res;
  }
  if( res.data.data === '验证错误，需要登录' ){
    console.log('验证错误，需要登录')
    // window.location.href = '/'
    MessageBox.alert('没有权限,需要登录','权限错误',{
      confirmButtonText:'跳转登录页面',
      callback: action => {
        window.location.href = '/'
      }
    })
  }else{
    Message.error(res.data.data)
  }
})

Vue.config.productionTip = false

new Vue({
  router,
  render: function (h) { return h(App) }
}).$mount('#app')

配置了拦截器，前端每次发送请求的时候会被拦截，拦截器再给请求加上请求头token。

引入了vue所需的配置，在最上面

index.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
//导入登陆页面
import LoginView from "@/views/LoginView";
import MainView from "@/views/MainView";
import PermissionView from "@/views/PermissionView";
import UserView from "@/views/UserView";
Vue.use(VueRouter)
//配置路由规则
const routes = [
  {
    path: '/',  // 首页
    name: 'login',
    component: LoginView   //自定义登陆页面
  },
  { //父页面
    path: '/main',
    name: 'main',
    component: MainView,
    children:[  //子页面
      {
        path: '/permission',
        name: 'permission',
        component: PermissionView
      },
      {
        path: '/user',
        name: 'user',
        component: UserView
      }
    ]
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: function () {
      return import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
    }
  }

]

const router = new VueRouter({
  routes
})

export default router

想要页面可以用，就得在这引入，还可以定义父页面里面的子页面，实现页面嵌套。

LoginView：

<template>
  <div id="login">
    <p>
      <input type="text" v-model="user.username">
    </p>
    <p>
      <input type="password" v-model="user.password">
    </p>
    <button v-on:click="login()">登陆</button>
    <button v-on:click="testGet()">测试接口</button>
  </div>
</template>
<script>
export default {
  name: "LoginView",
  data() {
    return {
      //登陆用户
      user: {"username": "", "password": ""},
      msg: {}//登陆错误
    }
  },
  methods: {
    login() {
      console.log(this.user);
      //使用axios向后台发送一个post请求
      this.axios.post("http://localhost:8080/login",
          this.qs.stringify(this.user))
          .then(result => {
            console.log("返回结果:" + JSON.stringify(result));
            if (result.data.status == 'OK') {
              //把token保存到本地
              localStorage.setItem("token", result.data.data.token);
              //跳转到权限管理
              // location.href = "permission.html";
              this.$router.push({path: '/main', query: {username: result.data.data.username}});
            }
          })
          .catch(err => {
            console.log("出现错误：" + JSON.stringify(err));
          });
    },
    //测试访问后台接口
    testGet() {
      //访问后台接口时，需要在请求头中携带token
      this.axios.get("http://localhost:8080/hello1", {"headers": {"Authorization": localStorage.getItem("token")}})
          .then(result => {
            console.log("返回结果：" + JSON.stringify(result));
          });
    }
  }

}
</script>

<style scoped>

</style>

脚手架比普通的vue写法有些许不同。

1.new Vue被 export Default 代替

2.el 变成了 name

3.data:{} 替换成了 data(){ return{ } }

4.axios 方法名都得加this

可以通过我的代码好好比对一下

跳转方式采用

this.$router.push({path: '/main', query: {username: result.data.data.username}});

UserView：

<template>
  <div>
    <el-button type="text" @click="dialogFormVisible= true">新增模块</el-button>
    <el-dialog title="权限操作" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="user.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="user.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="user.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="真实名字" :label-width="formLabelWidth">
          <el-input v-model="user.realname" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="电话号码" :label-width="formLabelWidth">
          <el-input v-model="user.telephone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="icon" :label-width="formLabelWidth">
          <el-input v-model="user.icon" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-input v-model="user.state" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
    <el-table
        :data="users"
        style="width: 100%">
      <el-table-column
          label="id"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="用户名"
          width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.username }}</p>
            <p>真名: {{ scope.row.realname }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.username }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          label="密码"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.password }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="真名"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.realname }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="电话号码"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="icon"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.icon }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="状态"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.state }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    //分页功能
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="loadUser"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "UserView",
  data() {
    return {
      users: [],
      user: {},
      current: 1,
      total: 0,
      pageSize: 10,
      dialogFormVisible: false,
      formLabelWidth: "120px"
    }
  },
  methods: {
    loadUser(current, pageSize) {
      this.axios.get("http://localhost:8080/user/page?current=" + this.current + "&pageSize=" + this.pageSize)
          .then(result => {
            console.log(result)
            this.users = result.data.data.records;
            this.total = result.data.data.total;

          })
    },
    //回显
    handleEdit(index,row){
      this.user=JSON.parse(JSON.stringify(row));
      this.dialogFormVisible=true
    },
    update() {
        if (this.user) {
          //执行修改方法
          this.axios.put("http://localhost:8080/user", this.user)
              .then(result => {
                if (result.data.status == "OK") {
                    console.log(result.data)
                  this.user={}
                  this.dialogFormVisible=false
                  this.loadUser(1)
                }
              })
        }
        else{
          this.axios.post("http://localhost:8080/user",this.user)
          .then(result=>{
            if (result.data.status=="OK"){
              console.log(result)
              this.user={}
              this.dialogFormVisible=false
              this.loadUser(1)
            }
          })
        }
    },
    handleDelete(index,row){
      this.axios.delete("http://localhost:8080/user/"+row.id)
      .then(result=>{
        if (result.data.status=="OK"){
          console.log(result)
          this.loadUser(1)
        }
      })
    }

  },
  mounted() {
    this.loadUser(1, 10)
  }
}
</script>

<style scoped>

</style>

有点长

我会讲解其中的重点

1.@click 就是 v-on:click 表示是一个事件

2 :visible.sync="dialogFormVisible" //用冒号表示此数据为绑定数据该数据设为true就是表单可见，false就是不可见。

3. v-model 表示绑定的参数

4.
<el-table
    :data="users"
    style="width: 100%">
elementUI引入的表格，绑定数据为一个集合

5
{{ scope.row.id }}
row指的就是该行包含的所有数据，可以理解为该行作为一个对象

6.
//分页功能
<el-pagination
    background
    layout="prev, pager, next"
    :total="total"
    :page-size="pageSize"
    @current-change="loadUser"
>
:total表示绑定的总数据数

:pageSize表示一页所含多少行数据

@current-change="loadUser" 表示点击页数将会实现的自定义方法

7.
loadUser(current, pageSize) {
  this.axios.get("http://localhost:8080/user/page?current=" + this.current + "&pageSize=" + this.pageSize)
      .then(result => {
        console.log(result)
        this.users = result.data.data.records;
        this.total = result.data.data.total;

      })
},
该方法实现分页查询数据，

7.1.发送请求给服务器，默认页数为1，数据为10

7.2服务器响应前端将查询到的数据带过来

7.3前端从result中读取查询的数据和数据总数，用
this.users = result.data.data.records;
this.total = result.data.data.total;
8.
//回显
handleEdit(index,row){
  this.user=JSON.parse(JSON.stringify(row));
  this.dialogFormVisible=true
},
点击修改按钮的时候，会将那行数据（row）的值传给user实现数据回显

直接传两个数据就会绑定，不符合开发逻辑。

this.dialogFormVisible=true 显示form

9.
update() {
    if (this.user) {
      //执行修改方法
      this.axios.put("http://localhost:8080/user", this.user)
          .then(result => {
            if (result.data.status == "OK") {
                console.log(result.data)
              this.user={}
              this.dialogFormVisible=false
              this.loadUser(1)
            }
          })
    }
    else{
      this.axios.post("http://localhost:8080/user",this.user)
      .then(result=>{
        if (result.data.status=="OK"){
          console.log(result)
          this.user={}
          this.dialogFormVisible=false
          this.loadUser(1)
        }
      })
    }
},
9.1.新增跟修改方法写一起了。点击form表单的确定按钮，将执行update（）功能

9.2点击修改按钮，会执行回显方法。这个时候user将不为undefined。执行修改操作

9,3直接点击新增按钮，不会执行回显，这个时候user为未定义。执行新增操作

10.删除很简单不讲了，大家一定看得懂

11.
mounted() {
  this.loadUser(1, 10)
}
懂java的可以理解为静态代码块进入该页面的时候就已经执行了内部的功能，不咋懂的可以理解为一进入页面就已经执行了一次方法。就像回到家，妈妈就把饭做好了

权限管理代码：

<template>
  <!--    <div>-->
  <!--      <div>-->
  <!--        <table width="500px" cellpadding="10px" border="1px" cellspacing="0px">-->
  <!--          <tr>-->
  <!--            <th>编号</th>-->
  <!--            <th>名称</th>-->
  <!--            <th>URL</th>-->
  <!--            <th>PID</th>-->
  <!--            <th>描述</th>-->
  <!--            <th>图标</th>-->
  <!--            <th>顺序</th>-->
  <!--            <th>操作</th>-->
  <!--          </tr>-->
  <!--          <tr v-for="per in permissions">-->
  <!--            <td>{{per.id}}</td>-->
  <!--            <td>{{per.name}}</td>-->
  <!--            <td>{{per.description}}</td>-->
  <!--            <td>{{per.url}}</td>-->
  <!--            <td>{{per.pid}}</td>-->
  <!--            <td>{{per.icon}}</td>-->
  <!--            <td>{{per.sort}}</td>-->
  <!--            <td>-->
  <!--              <button v-on:click="update(per.id)"></button>-->
  <!--            </td>-->
  <!--          </tr>-->
  <!--        </table>-->
  <!--        <div>-->
  <!--          id <input type="text" v-model="permission.id"><br>-->
  <!--          名字<input type="text" v-model="permission.name"><br>-->
  <!--          <input type="text" v-model="permission.description"><br>-->
  <!--          <input type="text" v-model="permission.url"><br>-->
  <!--          <input type="text" v-model="permission.pid"><br>-->
  <!--          <input type="text" v-model="permission.icon"><br>-->
  <!--          <input type="text" v-model="permission.sort"><br>-->
  <!--          <button v-on:click="update(permission.id)">修改</button>-->
  <!--        </div>-->
  <!--        <button v-for="n in pageCount" v-on:click="loadPermissionPage(n)">{{n}}</button>-->
  <!--      </div>-->
  <!--    </div>-->
  <div>
    <!--    //隐藏的修改或者新增表单-->
    <el-button type="text" @click="dialogFormVisible= true">新增模块</el-button>
    <el-dialog title="权限操作" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="编号" :label-width="formLabelWidth">
          <el-input v-model="permission.id" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="名字" :label-width="formLabelWidth">
          <el-input v-model="permission.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="介绍" :label-width="formLabelWidth">
          <el-input v-model="permission.description" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="url" :label-width="formLabelWidth">
          <el-input v-model="permission.url" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="pid" :label-width="formLabelWidth">
          <el-input v-model="permission.pid" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="icon" :label-width="formLabelWidth">
          <el-input v-model="permission.icon" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="sort" :label-width="formLabelWidth">
          <el-input v-model="permission.sort" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update(permission.id)">确 定</el-button>
      </div>
    </el-dialog>
    <el-table
        :data="permissions"
        style="width: 100%">
      <el-table-column
          label="id"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="姓名"
          width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>id: {{ scope.row.id }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          label="介绍"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="url"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.url }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="pid"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.pid }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="icon"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.icon }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="sort"
          width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.sort }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="loadPermissionPage"
    >
    </el-pagination>
  </div>


</template>
<script>
export default {
  name: "PermissionView",
  data() {
    return {
      labelPosition: 'right',
      permissions: [],
      permission: {},//单个权限
      current: 1,
      pageSize: 10,
      total: 100,
      dialogFormVisible: false,
      formLabelWidth: '30px'

    }
  },

  methods: {
    loadPermissionPage(current) {
      this.current = current;
      // axios.get("http://localhost:8080/permissions/page?current="+this.current+"&pageSize=10",{"header":{"Authorization":localStorage.getItem("token")}})
      this.axios.get("http://localhost:8080/permissions/page?current=" + this.current + "&pageSize=" + this.pageSize,
          {"headers": {"Authorization": localStorage.getItem("token")}})
          .then(result => {

            if (result.data.status == "OK") {

              this.permissions = result.data.data.records;
              this.total = result.data.data.total;
            }
          });
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.axios.delete("http://localhost:8080/permission/" + row.id)
          .then(result => {
            if (result.data.status == "OK") {
              //重新加载页面 显示更新后的数据
              this.loadPermissionPage(this.current)
            }
          })
    },
    //回显功能 点击修改 把数据传个this.permission 再把 this.permission的数据与修改表单的input中的value绑定进行显示
    handleEdit(index,row){
      console.log(index, row);
      // 如果不序列化 那么它们的值就会绑定,修改permission row 也会修改
      // this.permission=row;
      this.permission=JSON.parse(JSON.stringify(row))
      this.dialogFormVisible=true
    },
    //修改和新增的方法
    update(id) {
      let permission;
      for (let i = 0; i < this.permissions.length; i++) {
        if (id == this.permissions[i].id) {
          this.axios.put("http://localhost:8080/permission",
              this.qs.stringify(this.permission)
              , {"headers": {"Authorization": localStorage.getItem("token")}})
              .then(result => {
                if (result.data.status == "OK") {
                  console.log(permission)
                  //同时可以退出弹出层
                  this.loadPermissionPage(this.current);
                  this.dialogFormVisible = false;
                }
              });
        } else if (id > this.permissions.length) {
          this.axios.post("http://localhost:8080/permission",
              this.qs.stringify(this.permission)
              , {"headers": {"Authorization": localStorage.getItem("token")}})
              .then(result => {
                if (result.data.status == "OK") {
                  console.log(permission)
                  this.loadPermissionPage(this.current);
                  //设为不可见
                  this.dialogFormVisible = false;
                }
              });
        }
      }
      //因为前后端分离发送请求的方式是ajax 所以this.permission的数据依旧存在需要清空
      // this.permission={};
    }
  },

  mounted() {
    this.loadPermissionPage(1);
  }

}
</script>
<!--<script>-->
<!--    export default {-->
<!--        name: "PermissionView",-->
<!--      data(){-->
<!--          return {-->
<!--            // permissions: [],//权限集合-->
<!--            // permission: {},//单个权限-->
<!--            current: 1,-->
<!--            pageSize: 10,-->
<!--            pageCount: 0,-->
<!--            labelPosition: 'right',-->
<!--            formLabelAlign: {-->
<!--              name: '',-->
<!--              region: '',-->
<!--              type: ''-->
<!--          }-->
<!--      },-->
<!--      methods: {-->
<!--        loadPermissionPage(current) {-->
<!--          this.current = current;-->
<!--          // axios.get("http://localhost:8080/permissions/page?current="+this.current+"&pageSize=10",{"header":{"Authorization":localStorage.getItem("token")}})-->
<!--          this.axios.get("http://localhost:8080/permissions/page?current=" + this.current + "&pageSize=" + this.pageSize,-->
<!--              {"headers": {"Authorization": localStorage.getItem("token")}})-->
<!--              .then(result => {-->

<!--                if (result.data.status == "OK") {-->

<!--                  this.permissions = result.data.data.records;-->
<!--                  this.pageCount = result.data.data.pages;-->
<!--                }-->
<!--              });-->
<!--        },-->
<!--        update(id) {-->
<!--          let permission;-->
<!--          for (let i = 0; i < this.permissions.length; i++) {-->
<!--            if (id == this.permissions[i].id) {-->
<!--              //表示重复id 进行修改-->
<!--              // permission.id = this.permission.id;-->
<!--              // permission.name = this.permission.name;-->
<!--              // permission.description = this.permission.description;-->
<!--              // permission.url = this.permission.url;-->
<!--              // permission.pid = this.permission.pid;-->
<!--              // permission.icon = this.permission.icon;-->
<!--              // permission.sort = this.permission.sort;-->
<!--              this.axios.put("http://localhost:8080/permission",-->
<!--                  this.Qs.stringify(this.permission)-->
<!--                  , {"headers": {"Authorization": localStorage.getItem("token")}})-->
<!--                  .then(result => {-->
<!--                    if (result.data.status == "OK") {-->
<!--                      console.log(permission)-->
<!--                    }-->
<!--                  });-->
<!--            } else if (id > this.permissions.length) {-->
<!--              this.axios.post("http://localhost:8080/permission",-->
<!--                  this.Qs.stringify(this.permission)-->
<!--                  , {"headers": {"Authorization": localStorage.getItem("token")}})-->
<!--                  .then(result => {-->
<!--                    if (result.data.status == "OK") {-->
<!--                      console.log(permission)-->
<!--                    }-->
<!--                  });-->
<!--            }-->
<!--          }-->
<!--        }-->
<!--      },-->
<!--      mounted() {  //生命周期函数 界面挂载完成-->
<!--        this.loadPermissionPage(1);-->
<!--      }-->
<!--    }-->
<!--</script>-->

<style scoped>

</style>

这个就不讲了。差不多

代码大帝

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
前后端分离 element UI spring security 脚手架实现简单的增删改查小案例

主要技术栈 springboot springsecurity elementUI vue，需要一定的基础才能看懂，没学过的话请看我之前的博客，放上实现功能图片。
复制链接

扫一扫