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格式写入数据

1. {
2.     "user": [
3.         {
4.             "id": 1,
5.             "username": "张三",
6.             "password": "123456"
7.         },
8.         {
9.             "id": 2,
10.             "username": "李四",
11.             "password": "123456"
12.         }
13.     ],
14.     "posts": [
15.         {
16.             "id": "1",
17.             "title": "a title",
18.             "views": 100
19.         },
20.         {
21.             "id": "2",
22.             "title": "another title",
23.             "views": 200
24.         }
25.     ],
26.     "comments": [
27.         {
28.             "id": "1",
29.             "text": "a comment about post 1",
30.             "postId": "1"
31.         },
32.         {
33.             "id": "2",
34.             "text": "another comment about post 1",
35.             "postId": "1"
36.         }
37.     ]
38. }

复制代码

写入数据之后进入到.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

1. <template>
2.   <div>
3.     <button @click="geta">获取数据</button>
4.   </div>
5. </template>
7. <script>
8. import axios from 'axios'
9. export default {
10.   methods: {
11.     geta () {
12.       axios({
13.         method: 'get',
14.         url: 'http://localhost:3000/user'
15.         // data: {
16.         //   id: 1
17.         // }
18.       }).then((result) => {
19.         // result不是直接的返回结果
20.         console.log('数据：', result)
21.         // result.data才是真正的返回结果
22.         console.log('真正的数据：', result.data)
23.       })
24.         .catch((err) => {
25.           console.log(err)
26.         })
27.     }
28.   }
29. }
30. </script>
32. <style>
34. </style>

复制代码

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

全局挂载axios

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

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

1. import { createApp } from 'vue'
2. import App from './App.vue'
3. import router from './router'
4. import store from './store'
5. import axios from 'axios'
7. const app = createApp(App)
9. /* 挂载全局对象 */
10. app.config.globalProperties.$axios = axios
12. app.use(store).use(router).mount('#app')

复制代码

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

1. <template>
2.   <div>
3.     <button @click="geta">获取数据</button>
4.   </div>
5. </template>
7. <script>
8. // import axios from 'axios'
9. export default {
10.   methods: {
11.     geta () {
12.       this.$axios({
13.         method: 'get',
14.         url: 'http://localhost:3000/user'
15.         // data: {
16.         //   id: 1
17.         // }
18.       }).then((result) => {
19.         // result不是直接的返回结果
20.         console.log('数据：', result)
21.         // result.data才是真正的返回结果
22.         console.log('真正的数据：', result.data)
23.       })
24.         .catch((err) => {
25.           console.log(err)
26.         })
27.     }
28.   }
29. }
30. </script>
32. <style>
34. </style>

复制代码

运行结果：

能够正常获取数据 

axios的封装

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

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

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

1. import axios from 'axios'
2. // 创建axios实例，并对其自定义配置,避免污染原本的axios
3. const instance = axios.create({
4. // 基地址
5.   baseURL: 'http://localhost:3000/',
6.   // 超时时间
7.   timeout: 5000
8. })
10. // 添加请求拦截器
11. instance.interceptors.request.use(function (config) {
12.   // 在发送请求之前做些什么
13.   return config
14. }, function (error) {
15.   // 对请求错误做些什么
16.   return Promise.reject(error)
17. })
19. // 添加响应拦截器
20. instance.interceptors.response.use(function (response) {
21.   // 2xx 范围内的状态码都会触发该函数。
22.   // 对响应数据做点什么
23.   return response.data
24. }, function (error) {
25.   // 超出 2xx 范围的状态码都会触发该函数。
26.   // 对响应错误做点什么
27.   return Promise.reject(error)
28. })
30. export default instance

复制代码

axios封装后利用

1. <template>
2.   <div>
3.     <button @click="geta">获取数据</button>
4.   </div>
5. </template>
7. <script>
8. import request from '@/utils/request'
9. export default {
10.   methods: {
11.     geta () {
12.       request({
13.         method: 'get',
14.         url: 'user'
15.         // data: {
16.         //   id: 1
17.         // }
18.       }).then((result) => {
19.         // result不是直接的返回结果
20.         console.log('数据：', result)
21.         // // result.data才是真正的返回结果
22.         // console.log('真正的数据：', result.data)
23.       })
24.         .catch((err) => {
25.           console.log(err)
26.         })
27.     }
28.   }
29. }
30. </script>
32. <style>
34. </style>

复制代码

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

最后

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

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