《云尚办公》企业级ssm项目--实操记录（二）

最新推荐文章于 2024-05-19 11:00:25 发布

东北胖墩儿

最新推荐文章于 2024-05-19 11:00:25 发布

阅读量428

点赞数

分类专栏：《云尚办公》项目文章标签： java

本文链接：https://blog.csdn.net/weixin_44175223/article/details/130030586

版权

《云尚办公》项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

角色管理前端

一.前端框架

1.vue-admin-template

vue-admin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。

GitHub地址：GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template

我们在vue-admin-template的基础上进行二次开发，把vue-element-admin当做工具箱，想要什么功能或者组件就去vue-element-admin复制。

2.安装

cd guigu-auth-ui
# 安装依赖
npm install
# 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
npm run dev

3.实现登录和退出

3.1 vue.config.js

注释掉mock接口配置
配置代理转发请求到目标接口

proxy: {
  '/dev-api': { // 匹配所有以 '/dev-api'开头的请求路径
    target: 'http://localhost:8800',
    changeOrigin: true, // 支持跨域
    pathRewrite: { // 重写路径: 去掉路径中开头的'/dev-api'
      '^/dev-api': ''
    }
  }
}

3.2 api/user.js

把login、getInfo、logout的url修改成和服务器端一致‘/admin/system/index/’

export function login(data) {
  return request({
    url: '/admin/system/index/login',
    method: 'post',
    data
  })
}

3.3 服务器端增加接口

@Api(tags = "后台登录管理")
@RestController
@RequestMapping("/admin/system/index")
public class IndexController {

    @PostMapping("login")
    public Result login() {
        Map<String, Object> map = new HashMap<>();
        map.put("token","admin");
        return Result.ok(map);
    }

    @GetMapping("info")
    public Result info() {
        Map<String, Object> map = new HashMap<>();
        map.put("roles","[admin]");
        map.put("name","admin");
        map.put("avatar","https://oss.aliyuncs.com/aliyun_id_photo_bucket/default_handsome.jpg");
        return Result.ok(map);
    }
 
    @PostMapping("logout")
    public Result logout(){
        return Result.ok();
    }

}

二.角色列表

步骤：

第一步：添加角色管理路由

第二步：在api文件夹创建js文件，定义接口信息

第三步：在views文件夹创建页面，在页面引入定义接口js文件，调用接口通过axios实现功能

跟着课件一步一步操作即可，前端代码略

1.修改路由

2.创建vue组件

3.定义api

4.初始化vue组件

5.定义data

6.定义methods

7.表格渲染

8.分页组件

9.顶部查询表单

三.角色删除

1.定义api

src/api/system/sysRole.js

removeById(id) {
  return request({
    url: `${api_name}/remove/${id}`,
    method: 'delete'
  })
}

2.定义methods

src/views/system/sysRole/list.vue

使用MessageBox 弹框组件

// 根据id删除数据
removeDataById(id) {
    // debugger
    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => { // promise
        // 点击确定，远程调用ajax
        return api.removeById(id)
    }).then((response) => {
        this.fetchData(this.page)
        this.$message.success(response.message || '删除成功')
    })
}

四.角色添加

1.定义api

src/api/system/sysRole.js

save(role) {
  return request({
    url: `${api_name}/save`,
    method: 'post',
    data: role
  })
}

2.定义data

export default {
  // 定义数据模型
  data() {
    return {
      list: [], // 讲师列表
      total: 0, // 总记录数
      page: 1, // 页码
      limit: 10, // 每页记录数
      searchObj: {}, // 查询条件
      multipleSelection: [],// 批量删除选中的记录列表

      dialogVisible: false,
      sysRole: {},
      saveBtnDisabled: false
    }
  },
  ...
}

3.定义添加按钮

src/views/system/sysRole/list.vue

表格上面添加按钮

<div class="tools-div">
  <el-button type="success" icon="el-icon-plus" size="mini" @click="add">添 加</el-button>
</div>

4.定义弹出层

src/views/system/sysRole/list.vue

表格最下面添加弹出层

<el-dialog title="添加/修改" :visible.sync="dialogVisible" width="40%" >
      <el-form ref="dataForm" :model="sysRole" label-width="150px" size="small" style="padding-right: 40px;">
        <el-form-item label="角色名称">
          <el-input v-model="sysRole.roleName"/>
        </el-form-item>
        <el-form-item label="角色编码">
          <el-input v-model="sysRole.roleCode"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small" icon="el-icon-refresh-right">取 消</el-button>
        <el-button type="primary" icon="el-icon-check" @click="saveOrUpdate()" size="small">确 定</el-button>
      </span>
    </el-dialog>

5.功能实现

add(){
  this.dialogVisible = true
},

saveOrUpdate() {
  this.saveBtnDisabled = true // 防止表单重复提交
  if (!this.sysRole.id) {
    this.saveData()
  } else {
    this.updateData()
  }
},

// 新增
saveData() {
  api.save(this.sysRole).then(response => {
    this.$message.success(response.message || '操作成功')
    this.dialogVisible = false
    this.fetchData(this.page)
  })
}

五.角色修改与数据回显

1.定义api

src/api/system/sysRole.js

getById(id) {
  return request({
    url: `${api_name}/get/${id}`,
    method: 'get'
  })
},

updateById(role) {
  return request({
    url: `${api_name}/update`,
    method: 'put',
    data: role
  })
}

2.组件中调用api

methods中定义fetchDataById

edit(id) {
  this.dialogVisible = true
  this.fetchDataById(id)
},

fetchDataById(id) {
  api.getById(id).then(response => {
    this.sysRole = response.data
  })
}

3.修改提交

updateData() {
  api.updateById(this.sysRole).then(response => {
    this.$message.success(response.message || '操作成功')
    this.dialogVisible = false
    this.fetchData(this.page)
  })
}

六.批量删除

1.定义api

src/api/system/sysRole.js

batchRemove(idList) {
  return request({
    url: `${api_name}/batchRemove`,
    method: `delete`,
    data: idList
  })
},

2.初始化组件

src/views/system/sysRole/list.vue

在table组件上添加批量删除按钮

  <el-button class="btn-add" size="mini" @click="batchRemove()" >批量删除</el-button>

在table组件上添加复选框

<el-table
  v-loading="listLoading"
  :data="list"
  stripe
  border
  style="width: 100%;margin-top: 10px;"
  @selection-change="handleSelectionChange">
  <el-table-column type="selection"/>

3.实现功能

data定义数据

selections: []// 批量删除选中的记录列表

添加方法

// 当多选选项发生变化的时候调用
handleSelectionChange(selection) {
  console.log(selection)
  this.selections = selection
},
// 批量删除
batchRemove() {
  if (this.selections.length === 0) {
    this.$message.warning('请选择要删除的记录！')
    return
  }
  this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 点击确定，远程调用ajax
    // 遍历selection，将id取出放入id列表
    var idList = []
    this.selections.forEach(item => {
      idList.push(item.id)
    })
    // 调用api
    return api.batchRemove(idList)
  }).then((response) => {
    this.fetchData()
    this.$message.success(response.message)
  })
}