分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

mockjs+vue使用小记

发布时间:2023-09-06 01:49责任编辑:胡小海关键词:js

使用mockjs唯一目的是快速完成前端项目,前端不需要再等后端数据,使用mock,来模拟吧~

它可以拦截ajax请求,并模拟返回你需要的数据。这才是真正的前后端分离啊

好了下面开始上实战了..

先安装

npm install mockjs --save-dev

新建data.js(模拟数据)

import Mock from ‘mockjs‘;const data = Mock.mock({ ??"data|0-3": [ ???"浙A12222", ?]});export {data}

新建mock.js引入数据并拦截请求

import Mock from ‘mockjs‘;import {data} from ‘./data/data‘;Mock.mock(‘/do‘, ‘post‘, data);

建api.js封装axios请求

import axios from ‘axios‘import vue from ‘vue‘axios.defaults.headers = {"Content-Type": "application/x-www-form-urlencoded"}function fetch(url, params) { ?return new Promise((resolve, reject) => { ?????????axios.post(url, params) ?????.then(response => { ???????resolve(response.data); ?????}) ?????.catch((error) => { ???????reject(error); ?????}) ?})} export default { ?????getplate(url, params) { ???????????return fetch(url, params); ?????},}

然后在vue组件中调用

api.getplate(‘/do‘, content) ?????????????????????.then(res => { ??????????????????????let allplate = res.data;})

注意组建中请求地址应该与mock.js中地址相同。

大家还可以看下axios-mock-adapter,讲axios和vue结合,应该更好用一点。

mockjs+vue使用小记

原文地址:https://www.cnblogs.com/locim/p/8822794.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved