vue3使用json-server 模拟数据

dae bal

已于 2024-01-16 12:41:44 修改

阅读量565

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue 前端文章标签： json javascript servlet

于 2023-05-25 16:10:51 首次发布

本文链接：https://blog.youkuaiyun.com/baidu_39043816/article/details/130869239

前端同时被 2 个专栏收录

168 篇文章

订阅专栏

vue

19 篇文章

订阅专栏

本文介绍了如何在Node环境中安装和使用json-server创建模拟数据库，以及利用axios进行HTTP请求，包括设置请求和响应拦截器。同时展示了如何封装公共接口以及启动和查看模拟数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

node 环境安装

npm install @types/node --save-dev

安装 json-server（建议全局安装）

npm install -g json-server

创建数据库（其实就是一个 json 文件）

在这里插入图片描述

db.json:

{
  "posts": [
    {
      "id": 1,
      "body": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "params": 1
    },
    {
      "id": 2,
      "body": "some comment2",
      "params": 2
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

安装axios

npm install axios --save

utils/request.ts:

import axios from 'axios'

const request = axios.create({
  baseURL: ' http://localhost:3003'
})
// 请求拦截器
request.interceptors.request.use(function (config) {
  // 统一设置用户身份 token

  return config
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})

// 响应拦截器
request.interceptors.response.use(function (response) {
  // 统一处理接口响应错误，比如token过期，服务端异常等
  return response
}, function (error) {
  // Do something with request error
  return Promise.reject(error)
})

export default request

api/common.ts:

/**
 * 公共基础接口封装
 */
import request from '@/utils/request'
export const test = () => {
  return request({
    method: 'GET',
    url: '/comments'
  })
}
/* export function getPage(){
  return request.get('/comments')
}
export function getDetail(obj){
  return request({
    url:"/comments",
    method:"get",
    params:obj
  })
} */

启动服务

进入放db.json文件的目录，打开终端输入以下命令
json-server db.json --port 3003
可以把上面命令放在package.json里面，下次启动直接输入npm run mock就可以了
在这里插入图片描述
如果是放在src目录，前面加cd src

"mock": "cd src&json-server db.json --port 3003"

查看数据

views/home/index.vue:

<template>
  <h1>控制台查看数据</h1>
</template>
<script lang="ts" setup>
import { test } from '@/api/common'
import { onMounted } from '@vue/runtime-core'
onMounted(() => {
  test().then(res => {
    console.log(res)
  })
})
</script>