步驟1.搭建測試項目

步驟1.1創(chuàng)建項目

命令：
vue create mock-demo

步驟1.2安裝依賴

命令：

#使用axios發(fā)送ajax cnpm install axios--save #使用mockjs產(chǎn)生隨機數(shù)據(jù) cnpm install mockjs--save-dev #使用json5解決ison文件，無法添加注釋問題 cnpm install json5--save-dev

步驟2.學習mockjs

新建mock文件夾，新建testMockis.js
mockjs語法定義:http://mockjs.com/examples.html

const Mock = require('mockjs')let id = Mock.mock('@id') // console.log(id)let obj = Mock.mock({id: '@id' }) // console.log(obj)var userInfo = Mock.mock({id: "@id()", //得到隨機的idusername: "@cname()", //隨機生成中文名字date: "@date()", //隨機生成日期avator: "@image('200x200','#50B347','#fff','avatar')", //生成圖片，參數(shù)：size,background,foreground,textdescription: "@paragraph()", //描述ip: "@ip()", //IP地址email: "@email()" //email }) console.log(userInfo)

步驟3 學習JSON5

步驟3.1 在mock文件夾下創(chuàng)建userInfo.json5文件

userInfo.json5:

{id: "@id()", //得到隨機的idusername: "@cname()", //隨機生成中文名字date: "@date()", //隨機生成日期avator: "@image('200x200','#50B347','#fff','avatar')", //生成圖片，參數(shù)：size,background,foreground,textdescription: "@paragraph()", //描述ip: "@ip()", //IP地址email: "@email()" //email }

步驟3.2 引入json5庫來解析json5格式

在mock文件夾下，新建testJSON5.js

const fs = require('fs') const path = require('path') const JSON5 = require('json5')var json = fs.readFileSync(path.join(__dirname, './userInfo.json5'),'utf-8') console.log(json)var obj = JSON5.parse(json) //parse 將字符串轉換成對象 console.log(obj)

步驟4.mock和vue-cli結合

步驟4.1新建index.js

在mock文件夾下，新建index.is

const fs = require('fs') const path = require('path') const Mock = require('mockjs') const JSON5 = require('json5')// 讀取json文件 function getJsonFile(filepath) {// 讀取指定json文件var json = fs.readFileSync(path.resolve(__dirname,filepath),'utf-8')return JSON5.parse(json);}// 返回一個函數(shù) module.exports = function(app) {// 監(jiān)聽http請求app.get('/user/userInfo', function(req,res) {// 每次響應請求時讀取mock data的json文件// getJsonFile方法定義了如何讀取json文件并解析成數(shù)據(jù)對象var json = getJsonFile('./userInfo.json5')// 將json傳入Mock.mock方法中，生成數(shù)據(jù)返回給瀏覽器res.json(Mock.mock(json))}) }

步驟4.2 了解在vue-cli中如何利用webpack的devServer啟動一個后端服務器

我們下面借助vue-cli 里面的 webpack的devServer來啟動一個后端服務器

參考vue-cli文檔:https://cli.vuejs.org/zh/config/#devserver



webpack官方文檔：https://webpack.js.org/configuration/dev-server/#devserverbefore

步驟4.3 在項目根路徑下創(chuàng)建vue.config.js文件

步驟4.4 運行我們的項目

命令： npm run server

步驟4.5 在HelloWorld中編寫發(fā)送請求的代碼

<script>import axios from 'axios'export default {name: 'HelloWorld',props: {msg: String},mounted: function() {axios.get('/user/userInfo').then(res => {console.log(res);}).catch(err => {console.log(err);})}} </script>

訪問網(wǎng)址，查看控制臺是否有數(shù)據(jù)打印：

步驟5 移除mock.js

采用環(huán)境變量！
參考官方文檔：https://cli.vuejs.org/zh/guide/mode-and-env.html#%E7%8E%AF%E5%A2%83%E5%8F%98%E9%87%8F

修改index.js文件，添加判斷：

步驟5.1 在項目根目錄下新建.env.development文件，然后重新執(zhí)行命令 npm run serve

步驟5.2 刷新網(wǎng)頁，發(fā)現(xiàn)可以正常發(fā)送請求，獲取到響應數(shù)據(jù)

步驟5.3 當后端開發(fā)人員已經(jīng)把服務器開發(fā)好了之后，我們想要把mockjs移除，只需要把.env.development文件中的代碼改為MOCK=false即可！！！

改完代碼后，重新執(zhí)行npm run serve，再次打開網(wǎng)頁驗證是否還能獲取到mock給我們響應的數(shù)據(jù)：

404 Not Found 說明沒有前端并沒有請求到mockjs提供的數(shù)據(jù)，即mockjs移除成功！

總結：

總結

以上是生活随笔為你收集整理的一、在vue项目中使用mock.js（详解）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。