springboot和vue:十三、VueX简介与安装与推荐视频+前端数据模拟MockJS

VueX简介与安装与推荐视频

  • VueX用于管理分散在vue各个组件中的数据。
  • 每一个VueX的核心都是一个store,当store中的状态发生变化时,与之绑定的视图也将重新渲染。
  • store中的状态不允许被直接修改,只能显示提交mutation
  • VueX中有五个重要的概念:State、Getter、Mutation、Action、Module。
  • 安装:npm install vuex@next
  • b站上讲的较好的视频有《1小时学会Vue之VueRouter&Vuex》,关于VueX的部分只占了7分钟左右的篇幅。个人认为后端看完,了解概念即可。

前端数据模拟MockJS

简介与安装

  • Mock.js是前端用于拦截Ajax请求再生成随机数据响应的工具,可以用来模拟服务器相应。
  • 优点:简单方便、无侵入性,基本覆盖常用接口类型
  • 安装:npm install mockjs

拦截请求的方法

mock方法

复制代码
Mock.mock(url?,type?,template|function(options))

?表示可选项。

url,可以是url字符串,也可以是url正则表达式。

type,表示需要拦截的请求类型,如GET、POST等。

template,表示数据模板,可以是对象或者字符串。

function,表示用于生成响应数据的函数。

延时请求

复制代码
Mock.setup({
	timeout: 400
})

写在Mock.mock方法前,表示延时400ms请求到数据。

使用示例

首先在main.js导入:

复制代码
import './mock'

在src下新建路径mock,后新建index.js

复制代码
import Mock from 'mockjs'

Mock.mock('/product/search', {
    "ret": 0, // 键值对
    "data":
    {
        "mtime": "@datetime", //随机生成日期时间
        "score|1-800": 1,//随机生成1-800的数字。值可以填任意数,起到的作用只是为了告诉Mock我想生成一个整数
        "rank|1-100": 1,
        "stars|1-5": 1,
        "nickname": "@cname",//随机生成中文名字
        "img": "@image('200x100','#ffcc33','#FFF','png','Fast Mock')" //随机生成固定格式的图片
        // 从左到右的属性分别是宽高、背景颜色、图内文字颜色、图片类型、图内文字
    }
});
相关推荐
2501_915918415 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
凉白开<--6 小时前
mardown-it 有序列表ios序号溢出解决办法
ios·vue
程序员的世界你不懂6 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技6 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip6 小时前
JavaScript二叉树相关概念
前端
attitude.x7 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java7 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)7 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术8 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体