20230417若依添加功能菜单,将查询接口渲染到页面,后端实现删除接口 2023年4月17日 admin
java项目组

创建目录

创建菜单

上图的组件路径要和项目目录下views里的路径一致

elementui官网  https://element.eleme.cn/#/zh-CN/component/table

我们可以从官网里表格组件的代码粘贴到我们项目里进行修改

所有代码

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="名字"
      width="180">
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄"
      width="180">
    </el-table-column>
  </el-table>
</template>

<script>
import { listNotice } from "@/api/student/student";

export default {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询公告列表 */
    getList() {
      listNotice().then(response => {
        this.tableData = response.data;
      });
    },
  }
}
</script>
<style>

</style>

新建js文件

将我们后端写的接口地址放入到student.js统一管理

import request from '@/utils/request'

// 查询公告列表
export function listNotice(query) {
  return request({
    url: '/student/student/list',
    method: 'get',
    params: query
  })
}

退出若依账号,再登录,重新获取所有菜单,我们会看到数据会从接口中拿到数据库里的数据

后端实现删除功能

controller

/**
 * 删除接口
 */
// delete from student where id = 4
@GetMapping("delete")
public Map<String,Object> delete(Integer id){
    Integer ss = studentService.delete(id);
    System.out.println(ss);
    Map<String,Object> res = new HashMap<>();
    res.put("msg","删除成功!");
    return res;
}

mapper.xml

<delete id="delete" parameterType="int">
    delete from student where id = #{id}
</delete>

postman测试