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

鸡鸭扣2023-10-06 14:01

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')" //随机生成固定格式的图片
        // 从左到右的属性分别是宽高、背景颜色、图内文字颜色、图片类型、图内文字
    }
});