2024年Mockjs模拟接口实现增删改查、分页、多条件查询，顺利通过阿里Java岗面试

于 2024-05-06 21:36:41 发布
阅读量429 收藏 3
点赞数 3
分类专栏： 程序员 文章标签： java 面试 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84584375/article/details/138509148
版权

总结

三个工作日收到了offer，头条面试体验还是很棒的，这次的头条面试好像每面技术都问了我算法，然后就是中间件、MySQL、Redis、Kafka、网络等等。

  • 第一个是算法

关于算法，我觉得最好的是刷题，作死的刷的，多做多练习，加上自己的理解，还是比较容易拿下的。

而且，我貌似是将《算法刷题LeetCode中文版》、《算法的乐趣》大概都过了一遍，尤其是这本

《算法刷题LeetCode中文版》总共有15个章节：编程技巧、线性表、字符串、栈和队列、树、排序、查找、暴力枚举法、广度优先搜索、深度优先搜索、分治法、贪心法、动态规划、图、细节实现题

最新出炉，头条三面技术四面HR，看我如何一步一步攻克面试官？

《算法的乐趣》共有23个章节：

最新出炉，头条三面技术四面HR，看我如何一步一步攻克面试官？

最新出炉，头条三面技术四面HR，看我如何一步一步攻克面试官？

  • 第二个是Redis、MySQL、kafka（给大家看下我都有哪些复习笔记）

基本上都是面试真题解析、笔记和学习大纲图，感觉复习也就需要这些吧（个人意见）

最新出炉，头条三面技术四面HR，看我如何一步一步攻克面试官？

  • 第三个是网络（给大家看一本我之前得到的《JAVA核心知识整理》包括30个章节分类，这本283页的JAVA核心知识整理还是很不错的，一次性总结了30个分享的大知识点）

最新出炉，头条三面技术四面HR，看我如何一步一步攻克面试官？

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

三、安装Mock

===========================================================================


//安装最新版本mockjs

npm install mockjs

四、效果图

========================================================================

在这里插入图片描述

五、使用Mock模拟接口实现增删改查、分页、多条件查询

==============================================================================================

使用mock实现英文单词的增删改查、分页、多条件查询

话不多说，上代码

Mock下 index.js




var englishArr = [];

//保存英文单词

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("截取指定元素："+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)

        //计算截取的数组长度，如果用splice会导致原数组数据丢失

        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


<template>

  <div class="english">

    <div class="container1">

      <div class="left2">

        <left/>

      </div> 

      <div class="right2">

        <div class="top3">

          <top3/>

        </div>

        <div class="main3">

          

          <!--  主体部分开始 -->



          <div class="bread4">

            <el-breadcrumb separator="&gt;">

              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

              <el-breadcrumb-item><a href="/">英文单词管理</a></el-breadcrumb-item>

            </el-breadcrumb>

          </div>

          <div class="main4">



            <div class="box-search">

              <div class="input5">

                <el-input type="text" size="mini" v-model="searchInfo.searchKey" @keydown.native.enter="getEnglishList" @clear="getEnglishList" placeholder="英文/中文"></el-input>

              </div>

              <div class="button5">

                <el-button @click="getEnglishList()" size="mini" type="primary" icon="el-icon-search">搜索</el-button>

                <el-button @click="clkBtnAdd()" size="mini" type="warning" icon="el-icon-plus">新增</el-button>

              </div>

            </div>



            <div class="box-table5">

              <el-table :border="true" :data="englishPage.list" style="width: 100%"

              :header-cell-style="{'background-color':'#999','color':'#fff'}">

                <el-table-column  type="index" label="序号" width="80">

                </el-table-column>

                <el-table-column  prop="world" label="英文单词" width="180">

                </el-table-column>

                <el-table-column  prop="chinese" label="中文解释" width="180">

                </el-table-column>

                <el-table-column label="操作" width="180">

                    <template slot-scope="scope">

                      <el-button type="warning" size="mini" @click="editInfo(scope.row)">修改</el-button>

                      <el-button type="primary" size="mini" @click="clkBtnDelete(scope.row)">删除</el-button>

                    </template>

                </el-table-column>

              </el-table>

            </div>

            <div class="box-page5">

              <el-pagination

                      layout="prev, pager, next" @current-change = "chgPageNum"

                      :page-size="englishPage.pageSize" :total="englishPage.total">

              </el-pagination>

            </div>



            <el-dialog title="保存信息" :visible.sync="showAddEnglish">

              <el-form :model="english" label-width="120px">

                <el-form-item label="英文单词">

                  <el-input v-model="english.world" size="mini" placeholder="请输入英文单词"></el-input>

                </el-form-item>

                <el-form-item label="中文解释">

                  <el-input v-model="english.chinese" size="mini" placeholder="请输入中文解释"></el-input>

                </el-form-item>

              </el-form>

              <span slot="footer">

                <el-button type="primary" size="mini" @click="clkBtnSave">保存</el-button>

                <el-button type="warning" size="mini" @click="showAddEnglish = false">取消</el-button>

              </span>

            </el-dialog>



          </div>



          <!--  主体部分结束 -->



        </div>

      </div>



    </div>

  </div>

</template>



<script>

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("您确信要删除吗？", "提示").then(() => {

        Axios.post("/deleteEnglish", {

          params:{

            english:row

          }

        }).then((res) => {

          if (res.data == 0) {


# 写在最后


还有一份JAVA核心知识点整理（PDF）：**JVM，JAVA集合，JAVA多线程并发，JAVA基础，Spring原理，微服务，Netty与RPC**，网络，日志，Zookeeper，Kafka，RabbitMQ，Hbase，**MongoDB，Cassandra，设计模式，负载均衡，数据库，一致性哈希，JAVA算法，数据结构，加密算法，分布式缓存**，Hadoop，Spark，Storm，YARN，机器学习，云计算...

![image](https://img-blog.csdnimg.cn/img_convert/bff419b766141ec42affd4e66776cd32.webp?x-oss-process=image/format,png)

> **本文已被[CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)收录**

**[需要这份系统化的资料的朋友，可以点击这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**


        }).then((res) => {

          if (res.data == 0) {


# 写在最后


还有一份JAVA核心知识点整理（PDF）：**JVM，JAVA集合，JAVA多线程并发，JAVA基础，Spring原理，微服务，Netty与RPC**，网络，日志，Zookeeper，Kafka，RabbitMQ，Hbase，**MongoDB，Cassandra，设计模式，负载均衡，数据库，一致性哈希，JAVA算法，数据结构，加密算法，分布式缓存**，Hadoop，Spark，Storm，YARN，机器学习，云计算...

[外链图片转存中...(img-BK0N5zTQ-1715002585180)]

> **本文已被[CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)收录**

**[需要这份系统化的资料的朋友，可以点击这里获取](https://bbs.csdn.net/forums/4f45ff00ff254613a03fab5e56a57acb)**
2401_84584375
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
mockjs java_使用Mock.js进行独立于后端的前端开发
weixin_42398635的博客
02-27 356
概述Mock.js实现的功能基于 数据模板 生成数据基于 HTML模板 生成数据拦截并模拟 Ajax请求用法浏览器：// 使用 Mockvar data = Mock.mock({'list|1-10': [{'id|+1': 1}]});$('').text(JSON.stringify(data, null, 4)).appendTo('body')返回值:{"list": [{"id": 1...
Java mock客户端数据_CatMock： Java 下使用 mock.js 生成虚拟数据
weixin_31054839的博客
02-24 365
CatMockCatMock 是一个mock.js的 Java 封装库。使用 JDK 自带的 js 脚本引擎直接调用 mock.js 脚本，实现对 mock.js 的统一。为什么采用这样的方案？在开发互联网应用时，前后端在开发前使用接口管理平台设计接口。市面上常见的接口管理平台大部分使用了 Mock.js 作为虚拟接口和接口测试的工具。设计接口时，接口的定义是项目的重要资产。Mock.js 能很好...
Vue+Mock.js模拟登录和表格的增删改查功能
10-18
主要介绍了Vue+Mock.js模拟登录和表格的增删改查功能,需要的朋友可以参考下
Mockjs 增、删、改、查（分页、多条件查询）
金乌的博客
12-12 887
【代码】Mockjs 增、删、改、查（分页、多条件查询）
mock简单增删改查vue2
最新发布
Miraow的博客
01-10 384
超简单js内容，小白入门
vue快速入门七（mock.js，js实现组件路由，总线）
qq_52465301的博客
07-25 927
vue快速入门七（mock.js，js实现组件路由，总线）一、什么是mock.js？1.1mock.js简介1.2mock的安装与配置1.2.1mock的安装1.2.2引入mock.js1.3mock.js的使用1.3.1在src文件夹下创建mock目录1.3.2代码以及效果展示二、使用js做组件路由2.1创建Register.vue文件2.2添加gotoRegister方法2.3添加Register路由2.4效果展示三、组件通信（总线）3.1总线概要图3.2在main.js中添加总线Bus3.3添加公共组
mockjs java_mock.js模拟前后台交互
weixin_39809540的博客
02-27 131
本文实例为大家分享了mock.js模拟前后台交互的具体代码，供大家参考，具体内容如下使用背景： vue项目 axios使用详情：1、首先安装# 在项目中安装npm install mockjs2、在项目中使用在项目中src文件夹下 新建mock文件夹 新建mock.js 和index.js文件 这里面用来生成基础的接口项目结构截图：数据mock.js 文件//-----------------mo...
MockJS文档
09-10
MockJS文档 MockJS文档 MockJS文档 MockJS文档 MockJS文档
easy-mock获取分页数据
yoolika的博客
01-23 1760
{ "result": 200, "data": { "data": function({ _req, Mock }) { let i = 0, _data = [], page = _req.query.page, //当前页数 pageSize = _req.query.pageSize...
Mockjs请求及Url取参（分页查询）
weixin_51747462的博客
08-03 1257
用Mockjs实现模拟分页数据，获取列表的接口一般是后台需要接收页码以及每页条数，接着后台会返回总条数之类的信息。学习mockjs以后觉得get请求十分麻烦，首先是需要处理接口地址由于携带参数而无法与后台匹配的问题，然后是mockjs没有内置的从url取参的方法，而是要自己通过对url不断地判断、截取、以及和参数名进行匹配才能取出参数，而post请求取参就相对很容易。get请求：组件内发送get请求获取后台返回的数据，向后台传了页码和每页条数：首先定义index为url中？...
mockjs数据模拟
11-30
里面包含mockjs的介绍，以及在初级使用的过程中出现的例子代码等
MockNeat是一个Java8库可以为您的程序生成任意数据
08-08
MockNeat是一个Java 8 库，可以为您的程序生成任意数据
Mybatis实现增删改查及分页查询的方法
09-02
MyBatis是支持普通SQL查询，存储过程和高级映射的优秀持 久层框架,通过本文给大家介绍Mybatis实现增删改查及分页查询的方法，感兴趣的朋友一起学习吧
QT连接MySQL实现增删改查分页
11-24
QT版本5.14，实现了连接MySQL进行了增删改查操作，和分页操作。解决了中文SQL提示成功但是执行失败问题。博客地址：https://blog.csdn.net/qq_37529913?spm=1001.2101.3001.5113
Java基础开发之JDBC操作数据库增删改查，分页查询实例详解
08-25
主要介绍了Java基础开发之JDBC操作数据库增删改查，分页查询实例详解,需要的朋友可以参考下
Spring+mybatis+layui实现增删改查，分页，导入导出功能源代码
04-10
本套源代码实现了Spring 和 mybatis 和 layui 集成情况下的基础操作，包括： 增删改查、分页、导入导出等功能。数据库为mysql，脚本在源代码根目录下，mybatis_crud.sql
基于SpringBoot+Vue实现增删改查和分页查询DEMO（源码+数据库)
04-17
springboot项目,基于SpringBoot+Vue实现增删改查分页DEMO（源码+数据库) 技术栈 数据库：MySQL 后端框架：SpringBoot+Spring Data JPA 前端框架：Vue-ElementUI
mockjs java_请问该如何使用mock.js中的mock.mock？
weixin_39943586的博客
02-27 86
varitems=this.searchForm.getForm().items.items;vardataParam=this.getDailyDataParam(items);vartempform=document.createElement("form");tempform.action=this.ctx+'/addata/exportAdMasterDaily....
实现增删改查和带条件的分页查询（spring后端+vue前端）
06-03
好的，我可以给您一些指导。 首先，增删改查和带条件的分页查询是后端开发的基础操作之一，而 Spring 框架提供了很多方便的工具来实现这些操作。下面是一些步骤和代码示例，希望能对您有所帮助。 1. 数据库建表 首先，您需要在数据库中创建相应的表，例如一个名为 user 的用户表，表中包含 id、name、age、gender 等字段。 2. 创建 Entity 类 接下来，您需要创建一个与数据库表对应的实体类，通常称为 Entity 类。该类的属性需要与数据库表中的字段一一对应。例如： ```java @Entity @Table(name = "user") public class User { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(name = "name") private String name; @Column(name = "age") private Integer age; @Column(name = "gender") private String gender; // getter/setter 略 } ``` 3. 创建 Repository 接口 接着，您需要创建一个 Repository 接口，用于操作数据库。Repository 接口通常继承 JpaRepository 或 JpaSpecificationExecutor 接口，以便使用 Spring Data JPA 提供的增删改查和分页查询方法。例如： ```java @Repository public interface UserRepository extends JpaRepository<User, Long>, JpaSpecificationExecutor<User> { } ``` 4. 创建 Service 类 然后，您需要创建一个 Service 类，用于封装业务逻辑。Service 类通常调用 Repository 中的方法来实现具体的操作。例如： ```java @Service public class UserService { @Autowired private UserRepository userRepository; public List<User> findAll() { return userRepository.findAll(); } public void save(User user) { userRepository.save(user); } public void delete(Long id) { userRepository.deleteById(id); } public User findById(Long id) { return userRepository.findById(id).orElse(null); } public Page<User> findByCondition(String name, Integer age, String gender, Pageable pageable) { Specification<User> specification = (root, criteriaQuery, criteriaBuilder) -> { List<Predicate> predicates = new ArrayList<>(); if (StringUtils.isNotBlank(name)) { predicates.add(criteriaBuilder.like(root.get("name"), "%" + name + "%")); } if (age != null) { predicates.add(criteriaBuilder.equal(root.get("age"), age)); } if (StringUtils.isNotBlank(gender)) { predicates.add(criteriaBuilder.equal(root.get("gender"), gender)); } return criteriaBuilder.and(predicates.toArray(new Predicate[predicates.size()])); }; return userRepository.findAll(specification, pageable); } } ``` 5. 创建 Controller 类 最后，您需要创建一个 Controller 类，用于处理前端请求。Controller 类通常调用 Service 中的方法来实现具体的操作，并将结果以 JSON 格式返回给前端。例如： ```java @RestController @RequestMapping("/api/user") public class UserController { @Autowired private UserService userService; @GetMapping("/") public List<User> findAll() { return userService.findAll(); } @PostMapping("/") public void save(@RequestBody User user) { userService.save(user); } @DeleteMapping("/{id}") public void delete(@PathVariable Long id) { userService.delete(id); } @GetMapping("/{id}") public User findById(@PathVariable Long id) { return userService.findById(id); } @GetMapping("/search") public Page<User> findByCondition(@RequestParam(required = false) String name, @RequestParam(required = false) Integer age, @RequestParam(required = false) String gender, @PageableDefault(size = 10, sort = {"id"}, direction = Sort.Direction.ASC) Pageable pageable) { return userService.findByCondition(name, age, gender, pageable); } } ``` 6. 创建前端页面 在前端页面中，您可以使用 vue 框架来实现用户界面。例如，您可以创建一个 user.vue 组件，包含增删改查和分页查询等功能。具体实现方式可以参考 vue 官方文档和相关教程。 以上是一个简单的增删改查和带条件的分页查询的实现步骤和代码示例。当然，实际项目中可能会更加复杂，需要根据具体情况进行调整。希望能对您有所帮助。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值