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')" //随机生成固定格式的图片
        // 从左到右的属性分别是宽高、背景颜色、图内文字颜色、图片类型、图内文字
    }
});
相关推荐
疯狂动物城在逃flash4 分钟前
数据库入门:SQL学习路线图与实战技巧
前端
前端小巷子10 分钟前
跨域问题解决方案:开发代理
前端·javascript·面试
前端_逍遥生10 分钟前
Chrome 插件开发到发布完整指南:从零开始打造 TTS 朗读助手
前端·chrome
Mintopia11 分钟前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
天涯学馆12 分钟前
JavaScript 跨域、事件循环、性能优化面试题解析教程
前端·javascript·面试
掘金一周21 分钟前
别再用 100vh 了!移动端视口高度的终极解决方案| 掘金一周7.3
前端·后端
晴殇i23 分钟前
CSS 迎来重大升级:Chrome 137 支持 if () 条件函数,样式逻辑从此更灵活
前端·css·面试
源码站~24 分钟前
基于Flask+Vue的豆瓣音乐分析与推荐系统
vue.js·python·flask·毕业设计·毕设·校园·豆瓣音乐
咚咚咚ddd25 分钟前
cursor mcp实践:网站落地页性能检测报告(browser-tools)
前端
MiyueFE26 分钟前
让我害怕的 TypeScript 类型 — — 直到我学会了这 3 条规则
前端·typescript