使用ElementUI结合Mock完成主页的搭建

目录

一、Mock

( 1 )  讲述

( 2 )  作用

二、引用

三、主页搭建

学习后带来的收获

---

一、Mock

( 1 )  讲述

Mock.js是一个用于前端开发中模拟数据的库。它可以帮助开发人员在前端开发过程中模拟接口返回的数据，从而实现前后端分离开发。Mock.js提供了一套简单易用的语法，可以生成随机数据，拦截Ajax请求，模拟接口返回数据等功能。

• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

• 拦截Ajax请求：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

更多内容，可查看Mockjs官方

 

Mock.js的主要特点包括：

1. 生成随机数据：Mock.js提供了丰富的数据模板，可以根据模板生成符合规则的随机数据。例如，可以生成随机的姓名、地址、手机号码等。

2. 拦截Ajax请求：Mock.js可以拦截Ajax请求，并根据预先定义好的数据模板返回模拟数据。这样开发人员可以在前端开发过程中独立于后端进行开发和调试。

3. 模拟接口返回数据：Mock.js可以模拟接口返回数据，开发人员可以根据接口文档定义接口返回的数据结构和类型，然后使用Mock.js生成符合要求的模拟数据。

4. 支持插件扩展：Mock.js提供了插件机制，可以方便地扩展其功能。开发人员可以根据自己的需求编写插件，实现更复杂的数据模拟和拦截功能。

使用Mock.js可以帮助开发人员在前端开发过程中快速搭建模拟数据，提高开发效率，减少对后端接口的依赖。同时，Mock.js还可以帮助开发人员进行接口联调和单元测试，提高代码质量。

( 2 )  作用

Mock的主要作用是在前端开发过程中模拟数据，从而实现前后端分离开发。

具体来说，Mock的作用包括：

1. 独立开发：Mock可以帮助前端开发人员在后端接口未完成或不可用的情况下，独立进行前端开发。通过使用Mock.js生成模拟数据，前端开发人员可以在没有后端接口的情况下完成页面的开发和调试。

2. 接口联调：Mock可以用于前后端接口联调。在后端接口未完成或不可用的情况下，前端开发人员可以使用Mock.js模拟后端接口返回的数据，进行接口联调和测试。

3. 单元测试：Mock可以用于前端代码的单元测试。通过使用Mock.js生成模拟数据，可以模拟不同的测试场景，对前端代码进行单元测试，提高代码质量和稳定性。

4. 数据展示：Mock可以用于前端页面的数据展示。在开发过程中，可以使用Mock.js生成模拟数据，填充页面，以便进行样式和布局的调试。

总的来说，Mock的作用是帮助前端开发人员在前后端分离的开发模式下，独立开发、接口联调、单元测试和数据展示，提高开发效率和代码质量。

二、引用

以下的操作及代码都是基于博客中 : 使用ElementUI完成登入注册的跨域请求 

使用CMD命令窗口，并跳转到指定工作目录下创建项目

输入以下命令来安装Mock:

npm i mockjs -D

如图 : 

在项目的 package.json 文件中找到如图说明安装下载完成

 

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在config目录中的dev.env.js和prod.env.js做一个配置，如下：

dev.env.js ： 

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: 'true'
})

prod.env.js:

module.exports = {
  NODE_ENV: '"production"',
  MOCK: 'false'
}

并且在项目中的 main.js 中配置

//开发环境下才会引入mockjs
process.env.MOCK && require('@/mock') 

创建src/mock/json目录，定义登录测试数据文件login-mock.js：

// const loginInfo = {
// 	code: -1,
// 	message: '密码错误'
// }

//使用mockjs的模板生成随机数据
const loginInfo = {
	'code|-1-0': 0,
	'message|3-10': 'msg'
}
export default loginInfo;

在src/mock目录下创建index.js，定义拦截路由配置：

import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入请求地址

//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
	// timeout: 400  //延时400s请求到数据
	timeout: 200 - 400 //延时200-400s请求到数据
})

//引登陆的测试数据，并添加至mockjs
import loginInfo from '@/mock/json/login-mock.js'
let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
Mock.mock(s1, "post", loginInfo)
// Mock.mock(s1, /post|get/i, loginInfo)

编辑我们已有的 Login.vue 的组件

然后在项目路径下面，输入以下命令开启项目。

开启命令 :  npm run pev

效果如图 ： 

你可以使用Mock.js来生成随机id值。Mock.js是一个用于生成随机数据的库，可以模拟接口返回的数据。以下是使用Mock.js生成随机id值的示例代码：

const Mock = require('mockjs');

const data = Mock.mock({
  id: '@guid'
});

console.log(data.id);

在上述示例中，我们使用`@guid`来生成一个随机的id值。你可以根据需要将其应用到你的代码中。

你可以参考以下资源来了解更多关于Mock.js的使用：

1. [mockjs 基本使用-按指定规则生成随机测试数据]
2. [初识MockJS生成随机数据 - 稀土掘金]
3. [mockjs-生成随机数据_mock.js配置随机车牌]

希望对你有帮助！

字符串String

let obj1 = Mock.mock({
  'star|1-5':"★",//生成指定范围长度的字符串
  info:'静态的字符串',//静态字符串
  name:'@cname'//使用规定占位符@cname，随机生成中国人的名字
})

obj1对象包含了三个属性：star、info和name。

• star属性使用'star|1-5':"★"规则生成一个长度为1到5的字符串，内容为★。
• info属性是一个静态的字符串，值为'静态的字符串'。
• name属性使用'@cname'规则，随机生成一个中国人的名字。

 使用ES6的对象字面量语法

const obj1 = {
  star: '★'.repeat(Math.floor(Math.random() * 5) + 1),
  info: '静态的字符串',
  name: Mock.mock('@cname')
};

console.log(obj1);

使用普通的对象赋值语法

const obj1 = {};
obj1.star = '★'.repeat(Math.floor(Math.random() * 5) + 1);
obj1.info = '静态的字符串';
obj1.name = Mock.mock('@cname');

console.log(obj1);

正则表达式规则

let obj7 = Mock.mock({
    user:{
    	name:'@cname',
    },
    tel:/1[0-9]{10}/,
    //正则表达式可以使用插件
    email:/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
    //函数表达式
    info:function(){
        //注意：这里的this指向是数据模板对象，所以可以在函数表达式里使用this来获取已有值；
        return `我的手机号码是:${this.tel},我的邮箱是:${this.email},我的身份证号码是:${this.cardId}`
    },
    // (8)路径规则中： @表示启动关键字(注意：@前面不能有除了空格的任何其他字符)
    //          ==>   / 表示在模板数据中的层级关系，上下级
    message:"我的名字是: @/user/name ,我的手机号码是: @/tel,我的邮箱是: @/email,我的身份证号码是: @/cardId"
})
console.log(obj7);

1. Mock.mock()函数接受一个对象作为参数，该对象定义了模拟数据的结构和规则。

2. user属性是一个对象，其中的name属性使用@cname作为占位符，表示生成一个中文名字。

3. tel属性是一个正则表达式，用于生成符合规则的手机号码。

4. email属性也是一个正则表达式，用于生成符合规则的邮箱地址。

5. info属性是一个函数，用于返回一个字符串，其中包含了tel、email和cardId的值。注意，函数中的this指向的是数据模板对象，所以可以使用this来获取已有的属性值。

6. message属性是一个字符串，其中包含了占位符@/user/name、@/tel、@/email和@/cardId，分别表示引用user对象的name属性、tel属性、email属性和cardId属性的值。

7. 最后，通过console.log()打印出生成的模拟数据对象obj7。

总结：这段代码使用Mock.js库生成了一个包含模拟数据的对象obj7，其中的属性使用了不同的规则来生成对应的值。info函数和message字符串中使用了占位符来引用其他属性的值。

三、主页搭建

在项目的 components 文件中创建以下三个组件

AppMain.vue

LeftNav.vue

TopNav.vue

在下面中的src文件中的router文件的index.js文件进行配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import AppMain from '@/components/AppMain'
import TopNav from '@/components/TopNav'
import LeftNav from '@/components/LeftNav'
import Home from '@/views/Home'
import About from '@/views/About'
import AboutMe from '@/views/AboutMe'
import AboutMeaning from '@/views/AboutMeaning'
import Login from '@/views/Login'
import Register from '@/views/Register'
Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'Login',
      component: Login
    },
    {
      path: '/Register',
      name: 'Register',
      component: Register
    },
    {
      path: '/AppMain',
      name: 'AppMain',
      component: AppMain,
      children: [{
        path: '/TopNav',
        name: 'TopNav',
        component: TopNav
      }, {
        path: '/LeftNav',
        name: 'LeftNav',
        component: LeftNav
      }]
    }
    // {
    //   path: '/',
    //   name: 'Home',
    //   component: Home
    // },
    // {
    //   path: '/Home',
    //   name: 'Home',
    //   component: Home
    // },
    // {
    //   path: '/About',
    //   name: 'About',
    //   component: About,
    //   children:[{
    //   path: '/',
    //   name: 'AboutMe',
    //   component: AboutMe
    //   },{
    //   path: '/AboutMe',
    //   name: 'AboutMe',
    //   component: AboutMe
    //   },{
    //   path: '/AboutMeaning',
    //   name: 'AboutMeaning',
    //   component: AboutMeaning
    //   }]
    // }
  ]
})

效果展示 : 

学习后带来的收获

学会使用ElementUI结合Mock.js进行项目开发可以带来以下收获：

1. 快速构建UI界面：ElementUI是一个基于Vue.js的UI组件库，提供了丰富的组件和样式，可以帮助我们快速构建美观的UI界面，减少开发时间和工作量
。

2. 模拟数据：Mock.js是一个用于生成模拟数据的库，可以帮助我们在开发过程中模拟接口返回的数据，从而不依赖于后端接口的开发进展，提高开发效率。

3. 前后端分离开发：使用Mock.js可以模拟后端接口返回的数据，使前端开发人员可以独立进行开发，不需要等待后端接口的实现和联调，加快项目开发进度。

4. 接口调试和测试：使用Mock.js可以方便地模拟各种场景下的数据返回，用于接口的调试和测试，从而提高项目的稳定性和质量。

5. 提高代码质量：使用ElementUI可以规范化和统一前端开发的样式和组件使用，提高代码的可读性和可维护性；而使用Mock.js可以减少对真实接口的依赖，降低代码的耦合度，使代码更加可测试和可扩展。

总之，学会使用ElementUI结合Mock.js进行项目开发可以提高开发效率、加快项目进度、提高代码质量，并且使前后端开发更加独立和高效。[连接了解]