vue mock

• 一、Json server
• 二、Mock 服務
• • 1.安裝
  • 2.創建 Mock
  • 3.main.js引入
  • 4.組件中axure請求

一、Json server

輕量級，將已有的json文件跑在服務器上供前端調用

npm install -g json-server

啟動JSON數據服務器：

json-server --watch json文件名
或
json-server --watch json文件 --port 指定端口

此時可請求此目錄下的json；每個json都要手寫，意義不大；所以使用下面的mock，不但能“監聽”，還能按要求模擬數據。

二、Mock 服務

• 支持 GET / POST / PUT
• 支持返回 json 格式
• 支持返回結果實時替換
• 支持按照特定參數動態返回指定內容

1.安裝

npm install mockjs --save-dev

在 package.json 文件里面提現出來的區別就是，使用 --save-dev 安裝的插件將被寫入到 devDependencies 里面，而使用 --save 安裝的插件則被寫入到 dependencies 對象里面。

2.創建 Mock

在src下創建mock文件夾，在文件夾下創建index.js，以及一個示例login文件夾和下面的index.js（模塊化）

//src/mock/index.js import Mock from 'mockjs' import { postLogin } from './login'// 設置全局延時 沒有延時的話有時候會檢測不到數據變化 建議保留 Mock.setup({timeout: '300-600' })Mock.mock(/\/api\/login/, 'post', postLogin) // Mock.mock('/api/login', 'post', postLogin) // src/mock/login/index.js // import Mock from 'mockjs' //由于此下無需模擬數據，故不引入mock let passwords = {admin: '1',user: '1', }let tokens = {admin: 'admin-token' }let users = {'admin-token': {roles: ['admin'],introduction: 'I am a super administrator',avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',name: 'admin'} }export const postLogin = response => {console.log(response, '開始執行mock')let res = JSON.parse(response.body)let token = tokens[res.name]let user = users[token]if (passwords[res.name] == res.password) {console.log("用戶名密碼正確")if (token) {console.log("有token",token)} else {console.log("創建新token",token)token = {}[res.name] = res.name + '-token'tokens[res.name] = tokenuser = {roles: ['admin'],introduction: 'I am a super administrator',avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',name: res.name}users[token] = user}console.log(passwords, tokens, users)return {code: 200,data: { token, user },msg: "登陸成功"}}else {console.log("用戶名密碼錯誤")return {code: 1001,msg: '用戶名密碼錯誤'}} }

3.main.js引入

具體看你的mock文件夾放在了哪

// 引入 mock 模擬數據 import './mock'

4.組件中axure請求

直接使用axure請求

axios.post(url: '/api/login',{data:{ name: "user", password: "1" }}).then(res => {console.log(res);this.$router.push("/index");}).catch((error) => {console.log(error);});

使用自己封裝后的axios請求(因為有了響應器攔截，所以支持失敗響應)：

import { postLogin } from "@/api/login";postLogin({ name: "user", password: "1" }).then((res) => {console.log(res);this.$router.push("/index");}).catch((error) => {console.log(error);});

src下創建api，api下創建login.js

import request from '@/utils/request.js' export const postLogin = (data) => {return request({url: '/login',method: 'post',data}) }

src下創建utils，utils下創建request.js

import axios from 'axios' import store from '@/store' import router from '@/router'// create an axios instance const service = axios.create({baseURL: "/api", // url = base url + request urltimeout: 5000, // request timeout })//添加請求攔截器，若token存在則在請求頭中加token，不存在也繼續請求 service.interceptors.request.use(config => {// 每次發送請求之前檢測都vuex存有token,那么都要放在請求頭發送給服務器,沒有則不帶token// Authorization是必須的// if (store.getters.getToken) {// config.headers.Authorization = store.getters.getToken;// }return config;},error => {console.log("在request攔截器顯示錯誤：", error.response)return Promise.reject(error);} );//respone攔截器 service.interceptors.response.use(response => {// 在status正確的情況下，code不正確則返回對應的錯誤信息（后臺自定義為200是正確，并且將錯誤信息寫在message），正確則返回響應// 在這里當code不是200時返回錯誤，否則axure catch不到return response.data.code == 200 ? response : Promise.reject(response.data);},error => { // 在status不正確的情況下，判別status狀態碼給出對應響應if (error.response) {console.log("在respone攔截器顯示錯誤：", error.response)switch (error.response.status) {case 401://可能是token過期，清除它store.commit("delToken");router.replace({ //跳轉到登錄頁面path: '/login',// 將跳轉的路由path作為參數，登錄成功后跳轉到該路由query: { redirect: router.currentRoute.fullPath }});}}return Promise.reject(error.response);} ); export default service

總結

以上是生活随笔為你收集整理的vue mock模拟后台接口数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。