2024年Java最全Mockjs模拟接口实现增删改查、分页、多条件查询(1)，阿里程序员的Java之路

读者福利

分享一份自己整理好的Java面试手册，还有一些面试题pdf

不要停下自己学习的脚步

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

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

                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**

<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>