一套后台管理系统的入门级的增删改查（vue3组合式api+elemment-plus）

一、页面示意：

图一

图二

二、组件结构

• 列表组件 ：index.vue,对应图一
• 添加组件：add.vue，对应图二，用抽屉效果
• 编辑组件：edit.vue，和添加组件的效果一个。

三、代码

1、列表组件: index.vue

2、添加组件：add.vue

3、编辑组件：edit.vue

4、补充【api和axios封装】：api/crud.js；utils/serviceMock.js

api/crud.js

import service from "@/utils/serviceMock.js";


// 获取所有书籍
export const getBooksApi = ()=>service.get('/books');

// 根据编号获取书籍详情
export const getBookDetailApi = (id)=>service.get('/books/'+id);

// 查询书籍
export const getBooksByCondationApi = (params)=>service.get('/books',{params});

// 删除书籍
export const deleteBookApi = (id)=>service.delete('/books/'+id);


// 添加书籍
export const addBookApi = (data)=>service.post('/books',data);


// 修改书籍
export const editBookApi = (id,data)=>service.put('/books/'+id,data);


// 获取书籍类型
export const getBookTypeApi = ()=>service.get('/bookType');

utils/serviceMock.js

import axios from 'axios';
import store from '@/store';


const service = axios.create({
    baseURL:"http://localhost:3000"
})

// 请求拦截器：所有请求的公共业务
service.interceptors.request.use(config=>{
    store.commit("showLoading");
    return config;
})


// 响应拦截器
service.interceptors.response.use((res)=>{
    store.commit("hideLoading");
    // loading.close();
    return res;
})



export default service;

5、mock数据，用json-server

{
      "books": [
    {
      "id": "878912",
      "name": "水浒1",
      "author": "施耐庵",
      "price": 51.5,
      "img": "/src/assets/imgs/01.jpg",
      "type": "hot"
    },
    {
      "id": "878913",
      "name": "红楼梦",
      "author": "曹雪芹2",
      "price": 51.8,
      "img": "/src/assets/imgs/01.jpg",
      "type": "hot"
    },
    {
      "id": "878917",
      "name": "论语1",
      "author": "王锐1",
      "price": "5.38",
      "img": "/imgs/img3.jpg",
      "type": "new"
    },
    {
      "id": "878918",
      "name": "老子",
      "author": "李家恒",
      "price": 54.8,
      "img": "/imgs/img4.jpg",
      "type": "new"
    },
    {
      "id": "878919",
      "name": "孟子2",
      "author": "李家恒",
      "price": 54.8,
      "img": "/images/img4.jpg",
      "type": "new"
    },
    {
      "id": "878920",
      "name": "孟子3",
      "author": "李家恒",
      "price": 54.8,
      "img": "/images/img4.jpg",
      "type": "new"
    },
    {
      "id": "878921",
      "name": "孟子4",
      "author": "李家恒",
      "price": 54.8,
      "img": "/images/img4.jpg",
      "type": "new"
    },
    {
      "id": "878922",
      "name": "孟子5",
      "author": "李家恒",
      "price": 54.8,
      "img": "/images/img4.jpg",
      "type": "new"
    },
    {
      "id": "878923",
      "name": "孟子6",
      "author": "李家恒",
      "price": 54.8,
      "img": "/images/img4.jpg",
      "type": "new"
    },
    {
      "id": "01008",
      "name": "霸道总裁爱上我",
      "author": "曹宇",
      "price": "9.9",
      "img": "/src/imgs/01.jpg",
      "type": "hot"
    },
    {
      "id": "01009",
      "name": "西厢记",
      "author": "赵蕊",
      "price": "10.9",
      "img": "/src/assets/imgs/01.jpg",
      "type": "hot"
    },
    {
      "id": "01010",
      "name": "钢铁是怎样炼成的",
      "author": "奥斯特洛夫斯基",
      "price": "11.9",
      "img": "/src/assets/imgs/02.jpg",
      "type": "hot"
    },
    {
      "id": "01011",
      "name": "12",
      "author": "22",
      "price": 0,
      "img": "1",
      "type": "hot"
    },
    {
      "id": "01012",
      "name": "假如我是亿万富翁",
      "author": "金莉",
      "price": "1000",
      "img": "/src/assets/imgs/01.jpg",
      "type": "new"
    }
  ],
}