vue的视图化创建项目_Mockjs---自定义静态数据---Vue ui视图化的创建项目的笔记

--------------------------------

mock前端静态数据--资料

1.使用vue ui

视图化工具----创建vue 项目

2.点击vue 项目管理器

3.项目名称vue_mock 包管理器：建议使用npm 因为yarn适合在react中使用

4.初始化git仓库 打开-- init project

5.功能--打开babel linter 使用配置文件

6.配置--select---选择标准的语法---ESLint + Standard config

打开是检查语法---Lint on save

--------------项目创建完成--cmd命令在创建不要关闭

7.添加插件--搜索element-ui

选择第二项---按需引入--import on demand

语言模式--zh-cn

8.安装mockjs依赖--运行依赖

main.js

import Vue from 'vue'

import App from './App.vue'

import './plugins/element.js'

// 导入mock 文件---打开vue ui 安装axios依赖

import './mock/index.js'

import axios from 'axios'

Vue.config.productionTip = false

// 全局挂载

Vue.prototype.$http = axios

new Vue({

render: h => h(App)

}).$mount('#app')

App.vue

学习mockjs

---

获取商品列表

添加商品

获取商品详情

export default {

methods: {

// 模拟异步get

async getGoodsList () {

const { data: res } = await this.$http.get('/api/goodslist')

console.log(res)

},

// 模拟异步post

async addGoods () {

const { data: res } = await this.$http.post('/api/addgoods', {

name: '菠萝',

price: 8,

count: 550,

img: ''

})

console.log(res)

},

// 根据id获取商品详情---注意`/api/getgoods/${id}`z 这里不是单引号是分隔号

async getGoodsById (id) {

const { data: res } = await this.$http.get(`/api/getgoods/${id}`)

console.log(res)

}

}

}

mock---index.js

//导入模拟假数据的包

import Mock, { Random } from 'mockjs'

//自定义一个数组--随机获取这个数组里边的值--引用Random//创建自定义Mock函数

Random.extend({//自定义函数名：function 函数

fruit: function() {

const arr= ['榴莲', '菠萝蜜', '椰子', '苹果', '菠萝']return this.pick(arr)

}

})//通过Mock.mock()来模拟API接口----GET请求

Mock.mock('/api/goodslist', 'get', {

status:200,

message:'获取商品列表成功',//生成5到10条，或者直接data|5条数据

'data|5-10': [

{//mock自增函数@increment-从1开始

id: '@increment(1)',//随机返回中文文字-显示名字

name: '@cword(2, 8)',//随机返回一个自然数

price: '@natural(2, 10)',

count:'@natural(100, 999)',//建议使用 data字符串压缩64格式，你建议url地址请求

img: '@dataImage(78x78)'}

]

})//通过Mock.mock()来模拟API接口---POST请求

Mock.mock('/api/addgoods', 'post', function(option) {//这里的option是请求相关的参数

console.log(option)return{

status:200,

message:'添加商品成功'}/*外层的 mock是拦截请求的

返回参数要想引用函数,需要再次引用mock函数

return Mock.mock({

status: 200,

message: '@cword(2,5)'

})*/})//通过Mock.mock()来模拟API接口----GET请求--请求带参数--根据id返回商品详情/*Mock.mock('/api/getgoods/1', 'get', {

data: {

id: 9,

name: '苹果',

price: 2,

img: '@dataImage(78x78)'

},

status: 200,

message: '获取商品详情成功'

})*/

//动态获取id---转义字符/*Mock.mock(/\/api\/getgoods/, 'get', {

data: {

id: 9,

name: '苹果',

price: 2,

img: '@dataImage(78x78)'

},

status: 200,

message: '获取商品详情成功'

})*/

//获取传过来的参数id--使用正则拆分

Mock.mock(/\/api\/getgoods/, 'get', function(option) {

console.log(option)

const res= /\/api\/getgoods\/(\d+)/.exec(option.url)

console.log(res)returnMock.mock({

data: {//转成数字

id: res[1] - 0,

name:'@fruit()', //调用自定义数组

price: 2,

img:'@dataImage(78x78)'},

status:200,

message:'获取商品详情成功'})

})