大前端专题课：vue3+json-sever前后数据分离案例

1.vue3项目搭建

1.1 通过vue/cli脚手架搭建项目

（1）创建项目

vue create vue-jsonsever

(2) 项目文件目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1.2 通过vite搭建项目

http://www.vitejs.net/guide/#scaffolding-your-first-vite-project

npm init vite@latest my-vue-app -- --template vue

1.2 json-server依赖包安装与启动配置

https://www.npmjs.com/package/json-server

（1）安装json-server依赖

npm install json-server
或者
cnpm install json-server

（2）json-server启动项配置

在src的同级目录先创建文件夹mock，并创建mock/db.json文件,添加数据

{
    "infomation": [
        {
            "id": 1,
            "title": "json-server 的第1条数据",
            "desc": "奥特曼不想打小怪兽，明明可以做好朋友的",
            "author": "被奥特曼打了很久的怪兽"
        },
        {
            "id": 2,
            "title": "json-server 的第2条数据",
            "desc": "葫芦娃不想去救爷爷，一个一个的去送不好",
            "author": "种出七个葫芦的爷爷"
        },
        {
            "id": 1,
            "title": "json-server 的第一条数据",
            "desc": "王者荣耀其实不是很好玩，这并不是我内心的真话",
            "author": "想玩游戏的我"
        }
    ],
    "infomation2": [
        {
            "id": 11,
            "title": "json-server 的第11条数据",
            "desc": "奥特曼不想打小怪兽，明明可以做好朋友的",
            "author": "被奥特曼打了很久的怪兽"
        },
        {
            "id": 12,
            "title": "json-server 的第12条数据",
            "desc": "葫芦娃不想去救爷爷，一个一个的去送不好",
            "author": "种出七个葫芦的爷爷"
        },
        {
            "id": 12,
            "title": "json-server 的第13条数据",
            "desc": "王者荣耀其实不是很好玩，这并不是我内心的真话",
            "author": "想玩游戏的我"
        }
    ]
}

page.json配置启动项目—– “mock”: “json-server --watch mock/db.json --port 3000”

mock —–启动命令
json-server —–实际启动命令
–watch —– 侦听状态
mock/db.json —— 启动的文件
–port 3000" —— 启动的端口号

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "mock": "json-server --watch mock/db.json --port 3000"
  },

1.3 启动服务器与项目

（1）启动json-server服务器

npm run mock

（2）启动项目

cd vue-jsonsever
npm run serve

2.axios请求数据

2.1 安装axios依赖

npm install axios
或者
cnpm install axios

2.2 二次封装axios

在实际的项目中，我们一般不会直接将安装好的axios进行使用，而是进行二次封装，接下来我们来简单的封装

（1）创建 utils/http.js

在src文件在下创建utils文件夹，在utils里创建 http.js文件

（2）编写http.js

//引入安装好的axios插件
import axios from "axios";
// 查询数据
const get = (url) => {
    return axios.get(url);
};
// 添加数据
const post = (url, data) => {
    return axios.post(url, data);
};
// 修改数据
const put = (url, data) => {
    return axios.put(url, data);
};

// 删除数据
const del = (url) => {
    return axios.delete(url);
};

//将二次封装好的axios导出
export { get, post, put, del };

2.3 项目使用axios

（1）vue/cli脚手架配置代理——vue.config.js

项目的端口为8080,然后json文件的端口为3000，这样就会涉及到跨域，解决跨域的方式很多种，此处讲解一下配置proxy代理
在根目录下创建文件vue.config.js，覆盖webpack的一些内容。

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        // 此处的写法，目的是为了 将/api 替换成 http://localhost:3000
        target: "http://localhost:3000",
        //是否跨域
        changeOrigin: true,
        //路径重写 下面示例为 将 /api 替换成空
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
};

（2）vite配置代理——-vite.config.js

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

(3) 发送axios请求

App.vue

<template>
  <div class="about">
    <h1>数据测试</h1>
    <button @click="sendRequest">查询infomation的所有信息</button>
    <button @click="sendRequest2">查询infomation的id为1信息</button>
    <button @click="sendRequest3">添加infomation数据</button>
    <button @click="sendRequest4">修改infomation的id为1信息</button>
    <button @click="sendRequest5">删除infomation的id为1信息</button>
  </div>
</template>
<script>
import { get, post, put, del } from "./utils/http";
export default {
  methods: {
    // get查询infomation的所有信息
    async sendRequest() {
      let res = await get("/api/infomation");
      console.log("get查询infomation的所有信息", res);
    },
    // get查询infomation的id为1信息
    async sendRequest2() {
      let res2 = await get("/api/infomation/1");
      console.log("get查询infomation的id为1信息", res2);
    },
    // post添加infomation数据
    async sendRequest3() {
      let res3 = await post("/api/infomation", {
        title: "json-server 的第xxx条数据",
        desc: "奥特曼不想打小怪",
        author: "被奥特曼打了",
      });
      console.log(res3, "post添加infomation数据成功");
    },
    // pust修改infomation的id为1信息
    async sendRequest4() {
      let res4 = await put("/api/infomation/1", {
        title: "json-server 的第x+1条数据",
        desc: "奥特曼想打小怪111",
        author: "2222被奥特曼打了",
      });
      console.log(res4, "pust修改infomation的id为1信息成功");
    },
    // del删除infomation的id为1信息
    async sendRequest5() {
      let res4 = await del("/api/infomation/1");
      console.log(res4, "del删除infomation的id为1信息数据成功");
    },
  },
};
</script>
<style scoped>
button {
  display: block;
}
</style>

3.源码下载

https://gitee.com/zenglinapp/vue3-jsonserver-demo.git

4.在线教学录屏

https://www.bilibili.com/video/BV1cA411k7BC/?spm_id_from=333.337.search-card.all.click&vd_source=cdb9c5b55867e23347990f01803ad631