ToB企服应用市场:ToB评测及商务社交产业平台

标题: json-server(利用数据主动天生后端接口)的安装和利用、Vue3中axios的安装、 [打印本页]

作者: 宝塔山 时间: 2024-8-6 12:29
标题: json-server(利用数据主动天生后端接口)的安装和利用、Vue3中axios的安装、
json-server的安装

在项目终端大概在项目文件夹按shift+右键打开Powershell窗口执行下载指令，-g是全局安装
npm install -g json-server
官网链接： https://www.npmjs.com/package/json-server
（直接利用官网的下载指令可能会发生依靠冲突的错误导致下载失败）

(安装完成后可以利用json-server -v查看版本，这里不知道为什么我不执行不了这个命令但是能正常利用)

json-server的利用

json-server可以在我们还没有后端接口时，本身模拟一个后端接口出来，便于前端代码的编写和测试。
安装完成后，在项目根目录新建一个文件夹，在文件夹下新建一个.json文件(文件夹名字和文件名可以自定义)

在index.json中用json格式写入数据

{
"user": [
{
"id": 1,
"username": "张三",
"password": "123456"
},
{
"id": 2,
"username": "李四",
"password": "123456"
}
],
"posts": [
{
"id": "1",
"title": "a title",
"views": 100
},
{
"id": "2",
"title": "another title",
"views": 200
}
],
"comments": [
{
"id": "1",
"text": "a comment about post 1",
"postId": "1"
},
{
"id": "2",
"text": "another comment about post 1",
"postId": "1"
}
]
}

复制代码

写入数据之后进入到.json文件地点的文件夹，执行以下命令启动服务
json-server 你的json文件名.json
json-server index.json

Index下会有一些接口信息，进入网址我们可以看到

进入后我们会发现能获取对应的数据，到此就模拟出了后端提供的数据接口，此中主动封装了增删改查，详细的可以查看官网，以下是对官网的截图，针对posts封装的增删改查

详细的测试我们在反面演示

axios的安装

执行以下命令，-g代表全局安装，会主动下载在你的nodejs文件夹下的node_global文件夹下(详细的看你的node.js安装在哪里)我安装在D盘路径是在D:\node\node_global\node_modules
反面的--legacy-peer-deps是告诉npm忽略版本兼容问题(npm版本过高时识别不了低版本的指令)
npm install axios - g --legacy-peer-deps

假如你不想下载也可以利用CDN,在需要的地方导入就行
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
官网链接：https://www.axios-http.cn/docs/intro

axios的利用

直接在需要用的页面导入安装的axios

<template>
<div>
<button @click="geta">获取数据</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
methods: {
geta () {
axios({
method: 'get',
url: 'http://localhost:3000/user'
// data: {
// id: 1
// }
}).then((result) => {
// result不是直接的返回结果
console.log('数据：', result)
// result.data才是真正的返回结果
console.log('真正的数据：', result.data)
})
.catch((err) => {
console.log(err)
})
}
}
}
</script>
<style>
</style>

复制代码

点击按钮查看控制台的打印信息发现获取数据成功

全局挂载axios

当我们有很多页面都需要利用axios哀求数据时，频繁的导入太贫苦了，我们可以在全局导入，一劳永逸

在main.js中我们添加修改一些内容，这里我们创建了一个实例来挂载全局对象，

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
const app = createApp(App)
/* 挂载全局对象 */
app.config.globalProperties.$axios = axios
app.use(store).use(router).mount('#app')

复制代码

此时渲染页面将之前的axios导入注释掉后测试

<template>
<div>
<button @click="geta">获取数据</button>
</div>
</template>
<script>
// import axios from 'axios'
export default {
methods: {
geta () {
this.$axios({
method: 'get',
url: 'http://localhost:3000/user'
// data: {
// id: 1
// }
}).then((result) => {
// result不是直接的返回结果
console.log('数据：', result)
// result.data才是真正的返回结果
console.log('真正的数据：', result.data)
})
.catch((err) => {
console.log(err)
})
}
}
}
</script>
<style>
</style>

复制代码

运行结果：

能够正常获取数据

axios的封装

我们发现每次利用axios哀求数据都需要输入一段较长的url,并且其前面有一个公共的地址
http://localhost:3030/
那么我们将axios封装一起，将这个地址作为基地址就可以省略这个步骤，直接填写/user就可以拿到数据了

在src文件夹下新建一个utils文件夹用来存放通用工具，在其下新建一个request.js文件

在其内编写内容(我是将官网上的Axios实例和拦截器的代码修改了一下直接利用的，响应拦截器那边返回的是response.data所以我们得到数据就不需要往里查找了)

import axios from 'axios'
// 创建axios实例，并对其自定义配置,避免污染原本的axios
const instance = axios.create({
// 基地址
baseURL: 'http://localhost:3000/',
// 超时时间
timeout: 5000
})
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response.data
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error)
})
export default instance

复制代码

axios封装后利用

<template>
<div>
<button @click="geta">获取数据</button>
</div>
</template>
<script>
import request from '@/utils/request'
export default {
methods: {
geta () {
request({
method: 'get',
url: 'user'
// data: {
// id: 1
// }
}).then((result) => {
// result不是直接的返回结果
console.log('数据：', result)
// // result.data才是真正的返回结果
// console.log('真正的数据：', result.data)
})
.catch((err) => {
console.log(err)
})
}
}
}
</script>
<style>
</style>

复制代码

运行结果：能正常拿到数据

最后

很轻易想到，有时候多个页面需要用到同一个哀求地址，仍旧有很多重复的代码，并且在渲染页面写哀求数据占据了很多空间，倒霉于维护。为了解决这种问题，我们可以将差别的哀求地址封装为一个方法，这样我们只有时只需要调用方法传参就可以得到哀求数据了，这里仅提供一个想法，不做详细的先容。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)