vue3+vite+json-sever+前后数据分离案例-----axios

一.通过vite搭建项目

安装指令：npm init vite@latest  项目名字  -- --template vue

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

1.安装json-server依赖

npm install json-server
或者
cnpm install json-server-----淘宝镜像安装

2.json-server启动项配置

（1）在src的同级目录先创建文件夹mock

 （2）并创建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": "想玩游戏的我"
        }
    ]
}

 （3）page.json配置启动项目—– "mock": "json-server --watch mock/db.json --port 3000"

mock —–启动命令

json-server —–实际启动命令

--watch —– 侦听状态

mock/db.json —— 启动的文件

--port 3000" —— 启动的端口号

 3.启动服务器与项目----npm run mock

mock---是你建立的文件名

（1）启动json-server服务器

 （2）启动项目

npm run serve-----vue脚手架命令符

npm run dev ----vite命令符

我们这里用的是vue3+vite-----所以用第二种

 *三.axios请求数据

1.安装axios依赖

npm install axios
或者
cnpm install axios

查看是否安装成功可在项目中的page.json配置查看是否有axios

 2.封装axios

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

（1）创建 axios/http.js

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

 （2）在http.js进行编写

     1.导入axios配置文件

//axios配置文件
import axios from "axios";

    2.添加四个方法---查询，添加，修改，删除

//查询数据 url---地址  data---传递的数据 一般通过id传送
const get = (url) => {
  return axios.get(url);
};
//添加数据
const post = (url, data) => {
  return axios.post(url, data);
};
//修改数据
const put = (url, data) => {
  return axios.post(url, data);
};
//删除数据
const del = (url) => {
  return axios.post(url, data);
};

3.将二次封装好的axios导出 

export { get, post, put, del };

3.在项目中使用axios请求方法

附：请求跨域方法可参考官网：选项式---vue/cli  组合式----vue3简介 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/guide/introduction.html

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

项目的端口为8080,然后json文件的端口为3000，这样就会涉及到跨域，解决跨域的方式很多种，此处讲解一下配置proxy代理 在根目录下创建文件vue.config.js--------vue/cli脚手架模式

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

target ：地址为json-server运行出来的后台数据地址（同下）

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

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

// 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请求

（1）获取数据---get

<!-- 视图层 -->
<template>
    <div class="about">
    <h1>数据测试</h1>
    <button @click="sendRequest">查询infomation的所有信息</button>
  </div>
  <ul>
    <li v-for="items in infoList">{{items.title}}</li>
  </ul>
</template>

<!-- 逻辑层 -->
<script setup>
//当前页面用到哪些就引入哪些方法
import { get, post, put, del } from "./axios/http.js";
import { ref } from "vue";

const infoList = ref([]);
//查询数据
//async与await将数据进行转换
async function sendRequest() {
  let res = await get("/api/infomation");
  infoList.value = res.data;
}
</script>

<!-- 样式层 -->
<style  scoped>
</style>

axios获取数据的时候会得到Promise数据，所以我们要对它进行数据转换，常用的方法async与await

结果：点击查询数据

                     

（2）添加数据---post

<!-- 视图层 -->
<template>
    <div class="about">
    <h1>数据测试</h1>
    <button @click="sendRequest">查询infomation的所有信息</button>
  
    <button @click="sendRequest3">添加infomation数据</button>
    
  </div>
  <ul>
    <li v-for="items in infoList">{{items.title}}</li>
  </ul>
</template>

<!-- 逻辑层 -->
<script setup>
//当前页面用到哪些就引入哪些方法
import { get, post, put, del } from "./axios/http.js";
import { ref } from "vue";

const infoList = ref([]);

async function sendRequest3() {
  let res3 = await post("/api/infomation", {
    title: "json-server 的第xxx条数据",
    desc: "奥特曼不想打小怪",
    author: "被奥特曼打了",
  });
  console.log(res3, "post添加infomation数据成功");
}
</script>

<!-- 样式层 -->
<style  scoped>
</style>

结果：点击添加按钮

 （3）修改数据-----put

<!-- 视图层 -->
<template>
    <div class="about">
    <h1>数据测试</h1>
    <button @click="sendRequest4">修改infomation的id为1信息</button>
  </div>
</template>

<!-- 逻辑层 -->
<script setup>
//当前页面用到哪些就引入哪些方法
import { get, post, del, put } from "./axios/http.js";
import { ref } from "vue";


// put修改infomation的id为1信息
async function sendRequest4() {
  let res4 = await put("/api/infomation/1", {
    title: "json-server 的第x+2条数据",
    desc: "奥特曼想打小怪111333333",
    author: "2222被奥特曼打了",
  }).then((res) => {
    console.log(res);
  });
  // console.log(res4, "pust修改infomation的id为1信息成功");
}
</script>

<!-- 样式层 -->
<style  scoped>
</style>

结果：修改成功

 （4）删除数据----del

<!-- 视图层 -->
<template>
    <div class="about">
    <h1>数据测试</h1>
    <button @click="sendRequest5">删除infomation的id为1信息</button>
  </div>
</template>

<!-- 逻辑层 -->
<script setup>
//当前页面用到哪些就引入哪些方法
import { get, post, del, put } from "./axios/http.js";
import { ref } from "vue";

// del删除infomation的id为1信息
async function sendRequest5() {
  let res4 = await del("/api/infomation/1");
  console.log(res4, "del删除infomation的id为1信息数据成功");
}
</script>

<!-- 样式层 -->
<style  scoped>
</style>

结果：删除成功