Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to use Mockjs simulation interface to add, delete, change and query, paging and multi-condition query", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "how to use Mockjs simulation interface to achieve add, delete, change and query, paging and multi-conditional query"!

What is Mock?

Mock official website

Mock testing is a test method created by a virtual object for testing some objects that are not easy to construct or obtain during the testing process.

What are the advantages of using Mock

Generate random data and intercept Ajax requests

1 ️front and rear end separation

Let the front-end siege division develop independently of the back-end.

2 ️testing increases the authenticity of unit tests

Various scenarios are simulated by random data.

3. Non-intrusive development of ️tools

You can intercept Ajax requests and return simulated response data without modifying the existing code.

4. The use of ️commands is simple.

An intuitive interface.

5 ️contacts are rich in data types

Support the generation of random text, numbers, Boolean values, dates, mailboxes, links, pictures, colors, etc.

6 ️easy to expand

Support for extension of more data types, support for custom functions and regularities.

3. Install Mock// and install the latest version of mockjsnpm install mockjs. 4. Effect picture

5. Use Mock simulation interface to realize addition, deletion, modification, paging and multi-condition query.

Using mock to realize the addition, deletion, modification, paging and multi-conditional query of English words

Don't say much, put on the code.

Index.js under Mock

Var englishArr = []; / / Save the English words Mock.mock ('/ addEnglish', / post/i, (options) = > {let english = JSON.parse (options.body) .params.English; if (english.noid = = null) {english.noid = Mock.Random.increment (); englishArr.push (english);} else {for (let I = 0; I)

< englishArr.length; i++) { if (englishArr[i].noid == english.noid) { englishArr.splice(i, 1); englishArr.push(english); } } } return 0;});//获取所有英文单词Mock.mock("/getEnglishList", /post/i, (options)=>

{let info = JSON.parse (options.body) .params.info; if (! info.pageNum) {info.pageNum = 1;} let newArr = [] / / pageNum, pageSize, searchKey / / console.log ("intercept specified elements:" + newArr.length) / / englishArr.splice ((info.pageNum-1) * info.pageSize, info.pageSize) if (englishArr.length > 0) {let pageNum = (info.pageNum-1) * info.pageSize Console.log (pageNum+ "-" + info.pageSize) / / calculates the length of the intercepted array. If splice is used, the original array data will be lost. Let num = info.pageNum * info.pageSize; for (let I = pageNum; I)

< num; i++) { //全部数据的数组长度不能为空 if (englishArr[i] != undefined) { //查询条件为单词时直接将符合的数据添加到新数组内 if (info.searchKey && !englishArr[i].world.indexOf(info.searchKey)) { console.log("查询条件："+info.searchKey) newArr.push(englishArr[i]); } //查询条件为中文时将符合的数据添加到新数组内 if (info.searchKey && !englishArr[i].chinese.indexOf(info.searchKey)) { console.log("查询条件："+info.searchKey) newArr.push(englishArr[i]); } //查询条件为空时添加所有数据到新数组 if (!info.searchKey) { newArr.push(englishArr[i]); } } } console.log(newArr) let page={ list: newArr, pageSize: 2, total: englishArr.length }; return page; } let page={ list: englishArr, pageSize: 2, total: englishArr.length }; return page;});//删除英文单词Mock.mock("/deleteEnglish", /post/i, (options)=>

{let english = JSON.parse (options.body) .params.english; for (let I = 0; I

< englishArr.length; i++) { if (englishArr[i].noid == english.noid) { englishArr.splice(i, 1); } } return 0;}) EnglishList.vue 首页 英文单词管理 搜索 新增 修改 删除 保存 取消 import Left from './include/Left.vue';import Top3 from './include/Top3.vue';import Axios from 'axios';export default { components: { Left, Top3 }, name: 'english', data(){ return { page1: {pageSize: 5, total: 0, list: [] }, showAddEnglish:false, english:{}, englishPage:{pageNum:1, pageSize: 2, total: 0, list:[]}, searchInfo:{searchKey:''} } }, // vue 生命周期 mounted(){ this.initData(); }, methods:{ initData(){ this.getEnglishList(); }, clkBtnAdd() { this.english = {noid:null}; this.showAddEnglish = true; }, clk1(){ // Axios.post('/test3').then( (d1r)=>

{/ / this.page1 = d1r.data; / /})}, chgPageNum (pageNum) {this.englishPage.pageNum = pageNum; this.getEnglishList ();}, editInfo (row) {this.showAddEnglish = true; this.english = JSON.parse (JSON.stringify (row)) }, getEnglishList () {Axios.post ("/ getEnglishList", {params: {info: {pageNum: this.englishPage.pageNum, pageSize: this.englishPage.pageSize, searchKey: this.searchInfo.searchKey}}) .then ((res) = > {this.englishPage = res.data) Console.log (res.data)}), clkBtnSave () {Axios.post ("/ addEnglish", {params: {english:this.english}}). Then ((res) = > {if (res.data = = 0) {this.getEnglishList (); this.showAddEnglish = false })}, clkBtnDelete (row) {this.$confirm ("are you sure you want to delete?" , "prompt") .then () = > {Axios.post ("/ deleteEnglish", {params: {english:row}}) .then ((res) = > {if (res.data = = 0) {this.getEnglishList () This.$message ("delete successfully ~")}}) .catch (() = > {this.$message ("cancel deletion"})} .English {height: 100%;} .container1 {height: 100%; display: flex;} .container1 .left2 {width: 210px; height: 100%; background-color: # 304156;} .container1 .right2 {flex: 1 Display: flex; flex-flow: column;}. Container1 .right2 .top3 {height: 40px; background-color: # e3e3e3;} .container1 .right2 .main3 {flex: 1;} .main4 {padding-left:20px; padding-right:20px;}. Main4. Box-search {display: flex; padding-top:10px; padding-bottom:10px;}. Box-search .input5 {padding-right:10px;} .bread4 {padding-top:10px; padding-bottom:10px Padding-left: 20px; background-color: # eceeef;} so far, I believe you have a deeper understanding of "how to use Mockjs simulation interface to add, delete, modify and query, paging and multi-conditional query". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.