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.效果图:

相关资料:

作者:smile.轉角

QQ:493177502

【vue】vue +element 搭建项目,mock模拟数据(纯干货)的更多相关文章

  1. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

    前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...

  2. 深入浅出的webpack4构建工具---比mock模拟数据更简单的方式(二十一)

    如果想要了解mock模拟数据的话,请看这篇文章(https://www.cnblogs.com/tugenhua0707/p/9813122.html) 在实际应用场景中,总感觉mock数据比较麻烦, ...

  3. vue-cli实现异步请求返回mock模拟数据

    在前后端分离开发的过程中,前端开发过程中,页面的数据显示一般都是写死的静态数据,也就是没有经过接口,直接写死在代码中的,在后端给出接口后,再替换为接口数据,为了减少对接成本,mock就出现了.通过预先 ...

  4. Mock模拟数据,前后端分离

    安装 使用npm安装: npm install mockjs; 或直接<script src="http://mockjs.com/dist/mock.js">< ...

  5. vue+iview+mock模拟数据遍历

    下载安装iview, 进入根目录,用命令行启动 npm install npm run build npm run dev 安装mock.js和axios npm install mock.js -s ...

  6. 使用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 ...

  7. vue项目的webpack设置请求模拟数据的接口方法

    最近在跟着视频写饿了吗vue项目,其中模拟数据由于webpack版本变化,跟视频中不一致,下方博客有解决方案,其实视频里面的还能看懂,现在webpack的服务都在插件包里了,好难找. 请参考:http ...

  8. vue.js + element 搭建后台管理系统 笔记(一)

    此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...

  9. vue教程3-webpack搭建项目

    vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...

随机推荐

  1. 带着新人学springboot的应用03(springboot+mybatis+缓存 下)

    springboot+mybatis+缓存,基本的用法想必是会了,现在说一说内部大概的原理. 稍微提一下mybatis,只要导入了mybatis的依赖,那么有个自动配置类就会生效,你可以去mybati ...

  2. Kafka性能测试实例

    1.概述 在分布式实时数据流场景下,随着数据量的增长,对Kafka集群的性能和稳定性的要求也很高.本篇博客将从生产者和消费者两方面来做性能测试,针对具体的业务和数据量,来调优Kafka集群. 2.内容 ...

  3. StackExchange.Redis .net core Timeout performing 超时问题

    最近在做的一个项目,用的.net core 2.1,然后缓存用的Redis,缓存相关封装是同事写的,用的驱动是StackExchange.Redis version 2.0.571 ,一直听说这个驱动 ...

  4. 【ASP.NET Core快速入门】(九) RoutingMiddleware介绍以及MVC引入

    前言 前面我们介绍了使用app.Map来配置路由,但是对于一般不是特别大的项目来说,我们不使用Map来进行路由配置. 配置路由 我们首先需要在Startup.cs文件中的ConfigureServic ...

  5. 【WCF学习大全】

    我的WCF之旅(1):创建一个简单的WCF程序 我的WCF之旅(2):Endpoint Overview 我的WCF之旅(3):在WCF中实现双向通信(Bi-directional Communica ...

  6. C语言实现链栈的初始化&进栈&出栈&读取栈顶元素

    /*链表实现栈的一系列操作*/ #include<stdio.h> #include<stdlib.h> #define OK 1 #define ERROR 0 typede ...

  7. .Net语言 APP开发平台——Smobiler学习日志:如何在手机中调用邮件发送接口

    最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 二.发送邮件代码 VB: Pr ...

  8. DSAPI多功能组件编程应用-网络相关(下)

    [DSAPI.DLL下载地址] 在本篇,我将重点介绍DSAPI.DLL中Socket编程的使用.众所周知,Socket用起来不难,但是写起来麻烦.我对Socket进行了封装,进行了高度简化.下面我将通 ...

  9. [PHP] pow指数运算函数与二进制

    1.a的-2次方=(a分之一)的2次方2.-a的2次方 3次方 按照这个规则,负负得正,负正得负,正正得正,指数是偶数最终结果是正的,是奇数就是负的3.二进制转换十进制,0b开头是二进制 <?p ...

  10. 2018.12/17 function 的闭包

    1.闭包:函数在调用的时候会形成一个私有的作用域,对内部变量起到保护的作用,这就是闭包. 2.变量销毁: 1.人为销毁  var a=12; a=null 2.自然销毁  函数调用完成之后 浏览器会自 ...