【vue】vue +element 搭建项目,mock模拟数据(纯干货)
1.安装mockjs依赖
(c)npm install mockjs --save-dev
2.安装axios(Ajax)
(c)npm install --save axios
3.项目目录
4.设计到的相关文件
fetch.js(封装axios)
import Qs from 'qs';
import axios from 'axios';
// 创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 5000, // 请求超时时间
withCredentials: true, //跨域
transformRequest: [function (data) {
data = Qs.stringify(data);
return data
}],
}); // request拦截器
service.interceptors.request.use(config => {
config.headers['Accept'] = 'text/plain';
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
const defaultParams = {
version: process.env.VERSION,
platform: 'pcweb',
};
if (config.method == 'post') {
config.data = {
...defaultParams,
...config.data
}
} else if (config.method == 'get') {
config.params = {
...defaultParams,
...config.params
}
}
return config;
}, error => {
console.log(error); // for debug
Promise.reject(error);
}) // respone拦截器
service.interceptors.response.use(
response => {//其他一些(登陆过期等)请自行添加
return response;
},
error => {
return Promise.reject(error);
}); export default service;
api/skill/index.js(接口定义)
import fetch from '@/utils/fetch'; export function departmentList(params) {
return fetch({
url: '/skill/list',
method: 'get',
params: params || {}
});
}
mock/news.js(模拟数据)
import Mock from 'mockjs';
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function () {
let articles = [];
for (let i = 0; i < 100; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
} return {
articles: articles
}
}
export default {
getexamUploder: () => produceNewsData(),
};
在main.js
import '@/mock/index.js'; // 使用mockjs模拟
mock/index.js
import Mock from 'mockjs';
import treeAPI from './news'; Mock.mock(/\/skill\/list/, 'get', treeAPI.getexamUploder);
export default Mock;
view/skill/tree.vue
import { departmentList } from '@/api/skill/index';//引入接口
getList(){
let data = {
pid: 0,
}
departmentList(data).then(response => {//接口调用
console.log(response.data);
});
},
5.效果图:
相关资料:
- https://www.cnblogs.com/jasonwang2y60/p/7302449.html
- http://mockjs.com/
- http://mockjs.com/examples.html
作者:smile.轉角
QQ:493177502
【vue】vue +element 搭建项目,mock模拟数据(纯干货)的更多相关文章
- Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
- 深入浅出的webpack4构建工具---比mock模拟数据更简单的方式(二十一)
如果想要了解mock模拟数据的话,请看这篇文章(https://www.cnblogs.com/tugenhua0707/p/9813122.html) 在实际应用场景中,总感觉mock数据比较麻烦, ...
- vue-cli实现异步请求返回mock模拟数据
在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...
- Mock模拟数据,前后端分离
安装 使用npm安装: npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock.js">< ...
- vue+iview+mock模拟数据遍历
下载安装iview, 进入根目录,用命令行启动 npm install npm run build npm run dev 安装mock.js和axios npm install mock.js -s ...
- 使用VUE CLI3.0搭建项目vue2+scss+element简易版
1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...
- vue项目的webpack设置请求模拟数据的接口方法
最近在跟着视频写饿了吗vue项目,其中模拟数据由于webpack版本变化,跟视频中不一致,下方博客有解决方案,其实视频里面的还能看懂,现在webpack的服务都在插件包里了,好难找. 请参考:http ...
- vue.js + element 搭建后台管理系统 笔记(一)
此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...
- vue教程3-webpack搭建项目
vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...
随机推荐
- 带着新人学springboot的应用03(springboot+mybatis+缓存 下)
springboot+mybatis+缓存,基本的用法想必是会了,现在说一说内部大概的原理. 稍微提一下mybatis,只要导入了mybatis的依赖,那么有个自动配置类就会生效,你可以去mybati ...
- Kafka性能测试实例
1.概述 在分布式实时数据流场景下,随着数据量的增长,对Kafka集群的性能和稳定性的要求也很高.本篇博客将从生产者和消费者两方面来做性能测试,针对具体的业务和数据量,来调优Kafka集群. 2.内容 ...
- StackExchange.Redis .net core Timeout performing 超时问题
最近在做的一个项目,用的.net core 2.1,然后缓存用的Redis,缓存相关封装是同事写的,用的驱动是StackExchange.Redis version 2.0.571 ,一直听说这个驱动 ...
- 【ASP.NET Core快速入门】(九) RoutingMiddleware介绍以及MVC引入
前言 前面我们介绍了使用app.Map来配置路由,但是对于一般不是特别大的项目来说,我们不使用Map来进行路由配置. 配置路由 我们首先需要在Startup.cs文件中的ConfigureServic ...
- 【WCF学习大全】
我的WCF之旅(1):创建一个简单的WCF程序 我的WCF之旅(2):Endpoint Overview 我的WCF之旅(3):在WCF中实现双向通信(Bi-directional Communica ...
- C语言实现链栈的初始化&进栈&出栈&读取栈顶元素
/*链表实现栈的一系列操作*/ #include<stdio.h> #include<stdlib.h> #define OK 1 #define ERROR 0 typede ...
- .Net语言 APP开发平台——Smobiler学习日志:如何在手机中调用邮件发送接口
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 二.发送邮件代码 VB: Pr ...
- DSAPI多功能组件编程应用-网络相关(下)
[DSAPI.DLL下载地址] 在本篇,我将重点介绍DSAPI.DLL中Socket编程的使用.众所周知,Socket用起来不难,但是写起来麻烦.我对Socket进行了封装,进行了高度简化.下面我将通 ...
- [PHP] pow指数运算函数与二进制
1.a的-2次方=(a分之一)的2次方2.-a的2次方 3次方 按照这个规则,负负得正,负正得负,正正得正,指数是偶数最终结果是正的,是奇数就是负的3.二进制转换十进制,0b开头是二进制 <?p ...
- 2018.12/17 function 的闭包
1.闭包:函数在调用的时候会形成一个私有的作用域,对内部变量起到保护的作用,这就是闭包. 2.变量销毁: 1.人为销毁 var a=12; a=null 2.自然销毁 函数调用完成之后 浏览器会自 ...