使用Json-server模拟接口数据

json文件

依赖

模拟的数据和接口

  "user": [
    {
      "id": "4c09bb85-1FF2-c2F2-8bc4-FfbaBfFfF0FD",
      "name": "常丽",
      "place": "吉林省 吉林市 桦甸市"
    },
    {
      "id": "F95dd729-7c26-DDdD-9f6f-1eBFDf2556c4",
      "name": "傅秀英",
      "place": "内蒙古自治区 乌兰察布市 察哈尔右翼中旗"
    },
    {
      "id": "EdD3c9Bd-CB9B-9A9a-Bc8A-AbC4b1e0b23B",
      "name": "杨艳",
      "place": "天津 天津市 津南区"
    },
    {
      "id": "2B3A3D3d-383F-55D2-1dfB-B5fd4C111adB",
      "name": "许芳",
      "place": "吉林省 通化市 二道江区"
    },
    {
      "id": "AD2dFc67-ebfE-0b99-feA6-b1F7B4FeEAA8",
      "name": "徐敏",
      "place": "云南省 玉溪市 新平彝族傣族自治县"
    },
    {
      "id": "3fc78eb3-e48D-8BAE-b4B9-BcB5DB14cE84",
      "name": "姜平",
      "place": "福建省 泉州市 安溪县"
    },
    {
      "id": "Ba86BDf9-d3Be-b6E9-2ce4-1DCA4ED294d6",
      "name": "武军",
      "place": "吉林省 白山市 其它区"
    },
    {
      "id": "3D62d96D-8B7d-Be06-b0B8-71f41F290f0f",
      "name": "周军",
      "place": "浙江省 丽水市 景宁畲族自治县"
    },
    {
      "id": "f6dCAdd9-F4D8-7696-Cd97-Fea44Ae52e91",
      "name": "叶明",
      "place": "重庆 重庆市 大渡口区"
    }
  ],
  "todos": [
    {
      "id": 1,
      "content": "吃饭",
      "done": false
    },
    {
      "id": 2,
      "content": "睡觉",
      "done": true
    },
    {
      "id": 3,
      "content": "写代码",
      "done": false
    }
  ]
}js

App.vue

import axios from 'axios'
import { ElMessageBox } from 'element-plus'
import { onMounted, ref } from 'vue'

// 创建 axios 实例
const request = axios.create({
  baseURL: 'http://localhost:3001',
})

// 初始化数据
const list = ref([])

// 获取列表
const getList = async () => {
  // 获取请求
  const res = await request.get('/user')
  // 保存数据
  list.value = res.data
}

// 组件挂载完毕
onMounted(() => {
  // 调用获取列表
  getList()
})

// 删除业务
const delBtn = async (id) => {
  try {
    // 弹窗提示
    await ElMessageBox({
      type: 'warning',
      title: '温馨提示',
      message: '是否删除当前信息?',
      showCancelButton: true,
    })
    // 删除请求
    await request.delete(`/user/${id}`)
    // 调用获取列表
    getList()
  } catch (error) {}
}
</script>

Main.js

import App from './App.vue'

// 导入 element-plus ，支持 vue3的组件库，使用和 element-ui 基本一致
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
// 以插件形式使用 element-plus
app.use(ElementPlus)
app.mount('#app')

Readme

1. 新建一个终端窗口，开启后端接口服务，保持终端窗口不关闭 ！！！

   ```shell
   # 启动 db-serve 服务器
   yarn db-serve
   # or
   npm run db-serve

2. 另起一个新的终端窗口，开启前端项目。

   # 启动 项目
   yarn dev
   #or
   npm run dev
   

3. 浏览器输入查看效果

接口：

1. 接口文档，接口基地址：http://localhost:3001

2. 端口定义在json-server中,如上图依赖package.json

   接口作用	接口地址
   获取用户列表	/user
   删除用户	/user/:id