【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 ...
随机推荐
- LocalDateTime反序列化,LocalDateTime格式化
使用mybatis-plus的时候出现了LocalDateTime类(jdk8 中新出现的类 那么我在反序列化的时候出了问题. 我在springboot 2.1.3 中使用以下类结局问题) 用到了下面 ...
- Spring Cloud Alibaba基础教程:Nacos的数据持久化
前情回顾: <Spring Cloud Alibaba基础教程:使用Nacos实现服务注册与发现> <Spring Cloud Alibaba基础教程:支持的几种服务消费方式> ...
- Docker入门(一)用hello world入门docker
初识Docker Docker是什么? Docker 是一个开源的应用容器引擎,基于 Go 语言并遵从Apache2.0协议开源. Docker 可以让开发者打包他们的应用以及依赖包到一个轻量 ...
- WebLogic及其他
如何给WebLogic指定大小的内存? 在启动WebLogic的脚本中(位于所在Domian对应服务器目录下的startServerName),增加set MEM_ARGS= -Xms32m -Xmx ...
- Java学习笔记之——多线程
多线程编程 程序: 进程:一个程序运行就会产生一个进程 线程:进程的执行流程,一个进程至少有一个线程,称为主线程 如:QQ聊着天,同时在听音乐 一个进程可以有多个线程,多个线程共享同一个进程的资源 线 ...
- 【JVM】7、深入理解Java G1垃圾收集器
本文首先简单介绍了垃圾收集的常见方式,然后再分析了G1收集器的收集原理,相比其他垃圾收集器的优势,最后给出了一些调优实践. 一,什么是垃圾回收 首先,在了解G1之前,我们需要清楚的知道,垃圾回收是什么 ...
- 零基础学Python--------入门篇 第1章 初始Python
入门篇 第1章 初始Python 1.1 Pyhton 概述 1.1.1 了解 Python Python,本义是指“蟒蛇”.1989年,荷兰人Guido van Rossum发明了一种面向对象的 ...
- js中按钮去触发定时器,那么多次点击这个定时器会越来越快,解决方法
并不是越来越快, 而是越来越多; $('button:first').click(function(){ // 记录ID var timerId = setInterval(function(){ ...
- 【代码笔记】Web-CSS-CSS 语法
一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- BIM特点及格式文件说明
BIM行业是建筑与IT结合而形成的一个新兴行业,既然能说是行业,说明它包含的内容非常丰富,懂一点和完全懂是两码事,就好像一滴水和一片大海的范围一样.现在国内有很多高校开设了BIM专业,并对口招收了学生 ...