Mockjs---自定义静态数据---Vue ui视图化的创建项目的笔记
2023-09-11 14:18:36 时间
--------------------------------
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
<template> <div id="app"> <h1>学习mockjs</h1> <hr/> <!-- 模拟get 请求 --> <button @click="getGoodsList">获取商品列表</button> <!-- 模拟post请求 --> <button @click="addGoods">添加商品</button> <!-- 根据id获取商品详情 --> <button @click="getGoodsById(2)">获取商品详情</button> </div> </template> <script> 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) } } } </script> <style> </style>
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) return Mock.mock({ data: { // 转成数字 id: res[1] - 0, name: '@fruit()', // 调用自定义数组 price: 2, img: '@dataImage(78x78)' }, status: 200, message: '获取商品详情成功' }) })
相关文章
- Vue.js 渲染简写样式存在的问题
- Vue_(组件)实例属性
- vue之cli脚手架安装和webpack-simple模板项目生成
- [Vue-rx] Share RxJS Streams to Avoid Multiple Requests in Vue.js
- vue.js3: 用pdf-lib给pdf文件添加中文字体水印(pdf-lib@1.17.1 / vue@3.2.37)
- vue项目目录结构
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue项目中sass全局引用变量 sass-resources-loader webpack配置
- Vue项目中单独使用Sass、Less或全局使用Sass、Less详细操作方法
- Vue 多个路由文件的合并
- 怎样给vue项目重命名
- 仓库管理系统-前后端分离项目(SpringBoot+Vue)
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
- Vue中vue-i18n结合element-ui实现国际化
- Vue组件库新增的prop属性类型是Object或者Array时默认值的设置
- 164:vue+openlayers在3857坐标系项目下导出KML文件
- 006: vue+openlayers加载baidu地图的示例
- 046:vue+openlayers 点击某点播放视频(示例代码)
- 手把手使用 Webpack 4 建立 VUE 项目
- 五分钟学会用 Vue 脚手架搭建一个完整项目
- vue项目实现轮询定时器-关闭定时器(整理)
- Vue.js 模板语法
- 【Web开发】Vue+Springboot项目服务器部署(环境搭建+部署流程)