• 本地数据库IndexedDB - 学员管理系统之列表管理（二）

     IndexedDB是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB允许存储大量数据，提供查找接口，还能建立索引。这些都是LocalStorage或Cookie不具备的。就数据库类型而言，IndexedDB不属于关系型数据库（不支持SQL查询语句），更接近NoSQL数据库。

            通过上一篇“本地数据库IndexedDB - 学员管理系统之登录（一）”，我们已完成了系统的登录功能，这一章节则完成相关列表管理功能，实现管理员列表、年级管理、班级管理、教师列表、学员列表等栏目的增删改查。

            由于这中间工作较忙，离下篇发布时间相隔较长，并且结合后期开发过程，对前期部分定义内容进行了修改，有些地方差异，大家可以重新翻看上一篇。

    上篇地址：本地数据库IndexedDB - 学员管理系统之登录（一）_觉醒法师的博客-CSDN博客

            

    一、管理员列表

            在开始前，我们将上一章节的用户登录信息再修复一下；当用户登录成功后，会将信息缓存到localStorage中，本地状态管理器中也会只在一份；用户列表管理时，遇到登录用户信息，需要判断是否可以修改或删除等，需要从store中获取用户信息，但是页面刷新后，store状态中的用户信息会丢失，这时我们在校验Token有效情况下，需要重新将缓存中的用户信息，保存到store状态中。打开store/actions.js文件，添加以下代码：

    1. import Vue from 'vue'
    2. import { USERINFO, TOKEN } from './mutationsType'
    3. import { tokenIsFailure } from '@/api'
    4.  
    5. const actions = {
    6.   /**
    7.    * 重新加载缓存中用户信息
    8.    */
    9.   reloadUserInfo({commit}){
    10.     let token = Vue.ls.get(TOKEN),
    11.         userInfo = Vue.ls.get(USERINFO);
    12.     if(token) {
    13.       commit(TOKEN, token);
    14.     }
    15.     if(userInfo) {
    16.       commit(USERINFO, userInfo);
    17.     }
    18.   },
    19.    
    20.   //...
    21. }

    1.1 获取用户列表

            首先我们在db/model/user.js中，定义loadUserAllList用户加载所有用户信息；筛选用户功能可通过传入name进行筛选，获取所有数据时通过filter进行过滤下即可；另外这里我们先使用getAll()方法来获取所有数据，在后期中我们会讲解如何进行分页查询。代码如下：

    1. /**
    2.  * 获取用户列表
    3.  */
    4. export const loadUserAllList = name => {
    5.   return new Promise((resolve, reject) => {
    6.     //打开游标
    7.     let {store} = openTransactionIndex(storeName);
    8.     //获取所有数据
    9.     let alls = store.getAll();
    10.  
    11.     alls.onerror = function(e){
    12.       reject(
    13.         rJson(0, e, '查询出错了~')
    14.       );
    15.     }
    16.  
    17.     alls.onsuccess = function(e){
    18.       let result = e.target.result;
    19.       if(result){
    20.         let data = result.map(item => {
    21.               delete item['password'];
    22.               delete item['accesstoken'];
    23.               return item;
    24.             });
    25.         //如果name值存在，则进行过滤
    26.         if(name){
    27.           data = data.filter(item => item.name.includes(name));
    28.         }
    29.         resolve(
    30.           rJson(1, data, '获取成功~')
    31.         )
    32.       }else{
    33.         reject(
    34.           rJson(0, null, '未查询到数据~')
    35.         )
    36.       }
    37.       // console.log('store', result);
    38.     }
    39.  
    40.   });
    41. }

            第二步，在api/index.js中定义userAllList接口函数，代码如下：

    1. import { loadUserAllList } from '@/db/model/user'
    2.  
    3.  
    4. /**
    5.  * 获取用户列表
    6.  */
    7. export const userAllList = keyword => {
    8.   return loadUserAllList(keyword);
    9. }

            html代码：

            样式部分：

    1. .index-wrap{
    2.   padding: 20px;
    3. }
    4.  
    5. .filter-wrap{
    6.   display: table;
    7.   width: 100%;
    8.  
    9.   .item{
    10.     display: table-cell;
    11.     vertical-align: middle;
    12.  
    13.     &.left{
    14.       text-align: left;
    15.     }
    16.     //left end
    17.     &.right{
    18.       text-align: right;
    19.     }
    20.     //right end
    21.   }
    22. }

            JS代码部分：

            以上准备工作做完后，我们页面就有用户数据了，如下图：

           大家可以观察到admin的多选项 和 删除 按钮都是禁用的，这里因为当前登录用户是无法删除自己的。如何实现的呢，删除按钮是通过store中取到的用户ID和列表渲染用户ID进行对比，判断为当前登录用户则禁用；多选功能则是通过selectable功能，与store中的用户ID进行对比来判断的。

            当然，现在列表数据是显示了，但是只有一条数据，无法通过条件进行筛选，这块等我们将新增功能完成后，再来操作。

    1.2 新增数据

            首先，我们在db/model/user.js中定义toggleUser函数，用于新增 或 编辑用户信息；当数据为新增时，先判断用户名是否已存在，如已存在返回错误信息，不存在直接新增为新用户；当数据为编辑时，先获取该用户原始数据，用原始数据和新数据进行合并，如果使用put保存，会覆盖掉之前未修改数据。

            当编辑时候，先通过get()方法获取该用户所有信息，再合并数据。

            当新增时候，先通过name索引判断该用户是否存在，存在则返回提示信息；不存在则直接添加。

    代码如下：

    1. /**
    2.  * 增加 或 编辑用户信息
    3.  */
    4. export const toggleUser = data => {
    5.   return new Promise((resolve, reject) => {
    6.     //打开游标
    7.     let {store, index} = openTransactionIndex(storeName, 'name', CONST_READ.READWRITE);
    8.  
    9.     let res;
    10.     //md5处理密码
    11.     if(data['password']){
    12.       data.password = hex_md5(data.password);
    13.     }
    14.  
    15.     //用户ID存在，则为编辑
    16.     if(data['id']&&data.id!=0){
    17.       data['updatetime'] = new Date().getTime();
    18.  
    19.       //获取原数据
    20.       res = store.get(data.id);
    21.  
    22.       res.onerror = function(e){
    23.         reject(
    24.           rJson(0, e, '查询出错了~')
    25.         );
    26.       }
    27.  
    28.       res.onsuccess = function(e){
    29.         let result = e.target.result;
    30.         if(result){
    31.           //合并数据，并保存
    32.           res = store.put(Object.assign(result, data));
    33.  
    34.           res.onerror = function(e){
    35.             reject(
    36.               rJson(0, e, '查询出错了~')
    37.             );
    38.           }
    39.  
    40.           res.onsuccess = function(){
    41.             resolve(
    42.               rJson(1, null, '保存成功~')
    43.             )
    44.           }
    45.         }else{
    46.           reject(
    47.             rJson(0, e, '用户数据不存在~')
    48.           );
    49.         }
    50.       }
    51.  
    52.     }
    53.     //新增（需要判断用户名是否已存在）
    54.     else{
    55.       //通过索引 获取用户名，判断用户名是否已存在
    56.       res = index.getKey(data.name);
    57.  
    58.       res.onerror = function(e){
    59.         reject(
    60.           rJson(0, e, '查询出错了~')
    61.         );
    62.       }
    63.  
    64.       res.onsuccess = function(e){
    65.         let result = e.target.result;
    66.         //如果用户名已存在，返回错误信息
    67.         if(result){
    68.           reject(
    69.             rJson(0, e, '该用户名已存在~')
    70.           );
    71.         }
    72.         //用户名不存在，则直接添加
    73.         else{
    74.  
    75.           data['createtime'] = new Date().getTime();
    76.           data['updatetime'] = new Date().getTime();
    77.           res = store.add(data);
    78.  
    79.           res.onerror = function(e){
    80.             reject(
    81.               rJson(0, e, '查询出错了~')
    82.             );
    83.           }
    84.  
    85.           res.onsuccess = function(){
    86.             resolve(
    87.               rJson(1, null, '保存成功~')
    88.             )
    89.           }
    90.         }
    91.         //if 2 end
    92.       }
    93.  
    94.       //索引 End
    95.     }
    96.  
    97.     //if end
    98.  
    99.   });
    100. }

           api/index.js添加addUserInfo()方法，代码如下：

    1. import { toggleUser } from '@/db/model/user'
    2.  
    3. /**
    4.  * 添加用户信息
    5.  */
    6. export const addUserInfo = param => {
    7.   return toggleUser(param);
    8. }

            接下来，我们来创建新增弹框组件，在components目录中创建UserDailog目录，再新增index.vue。

            弹框页面html代码部分：

            JS代码部分：

            新增弹框组件创建完成后，我们在列表页（pages/mange/index.vue）中引入该组件，在打开新增用户弹框前，将selectId 置为0表示为新增。代码如下：

    1. import UserDailog from '@/components/UserDailog'
    2.  
    3. export default {
    4.   data () {
    5.     return {
    6.       //选择ID
    7.       selectId: 0,
    8.       //查询关键字
    9.       keyword: "",
    10.       /**
    11.        * 是否显示弹框
    12.        */
    13.       isShowDialog: false,
    14.       /**
    15.        * 列表数据
    16.        */
    17.       tableList: [],
    18.       /**
    19.        * 选的项
    20.        */
    21.       multipleSelection: []
    22.     }
    23.   },
    24.   components: {
    25.     UserDailog
    26.   },
    27.  
    28.   //...
    29.  
    30.   methods: {
    31.      /**
    32.      * 关闭弹框
    33.      */
    34.     closeChange(){
    35.       this.isShowDialog = false;
    36.     },
    37.  
    38.     /**
    39.      * 新增用户信息
    40.      */
    41.     addUserEvent(){
    42.       this.selectId = 0;
    43.       this.isShowDialog = true;
    44.     },
    45.  
    46.     //...
    47.   }
    48. }

            列表html部分引入组件，代码如下：

    1. <UserDailog :visible="isShowDialog" 
    2.     :uid="selectId" 
    3.     @closeChange="closeChange" 
    4.     @saveSuccessChange="updateUserList"
    5. >UserDailog>

            并在新增按钮添加打开弹框事件，代码如下：

    "small" type="primary" @click="addUserEvent">新增

            此时，我们可以看到新增弹框界面了，如下图：

             现在可以添加多条数据，进行筛选操作了。如添加test1、test2、test3、tom1、tom2，创建完后列表如下图：

             当我们在账号输入框中输入test，点击查询则只会显示包含test的账号，如下图：

            在账号输入框中输入tom，点击查询则只会显示包含tom的账号，如下图：

     

             这里列表查询、条件筛选和新增用户功能则完成了，接下来我们需要来完成修改数据功能。

    1.3 修改数据

            在“1.2 新增数据”中，我们已经完成了db/model/user.js中的编辑部分的代码功能，这里我们只需要在pages/mange/index.vue中添加打开编辑弹框，并传入选中数据ID。代码如下：

    1. methods: {
    2.     /**
    3.      * 编辑用户信息
    4.      * @param {Object} id
    5.      */
    6.     editUserEvent(id){
    7.       this.selectId = id;
    8.       this.isShowDialog = true;
    9.     },
    10. }

            当弹框为编辑状态时，需要获取当前用户的信息，所在在db/model/user.js中需要添加通过ID获取用户信息的功能函数，直接通过get()函数获取指定用户信息即可。代码如下：

    1. /**
    2.  * 通过ID获取用户信息
    3.  */
    4. export const getUserInfoById = id => {
    5.   return new Promise((resolve, reject) => {
    6.     //打开游标
    7.     let {store} = openTransactionIndex(storeName);
    8.     //通过ID获取数据
    9.     let data = store.get(id);
    10.  
    11.     data.onerror = function(e){
    12.       reject(
    13.         rJson(0, e, '查询出错了~')
    14.       );
    15.     }
    16.  
    17.     data.onsuccess = function(e){
    18.       let result = e.target.result;
    19.       if(result){
    20.         delete result['accesstoken'];
    21.  
    22.         resolve(
    23.           rJson(1, result, '获取成功~')
    24.         )
    25.       }else{
    26.         reject(
    27.           rJson(0, e, '数据不存在~')
    28.         );
    29.       }
    30.     }
    31.   });
    32. }

            api/index.js中添加编辑和获取用户信息接口，代码如下：

    1. import { toggleUser, getUserInfoById } from '@/db/model/user'
    2.  
    3. /**
    4.  * 获取用户信息
    5.  */
    6. export const getUserById = id => {
    7.   return getUserInfoById(id);
    8. }
    9.  
    10. /**
    11.  * 编辑用户信息
    12.  */
    13. export const editUserInfo = param => {
    14.   return toggleUser(param);
    15. }

            编辑的时候，不是所有信息都是必填的，其实在“1.2 新增数据”的JS部分代码中，已经完成此部分功能。用户的密码在修改时，是非必填的，只有填入新密码时才会交验；另外修改用户信息，需要输入原密码 进行校验，校验错误进无法进行保存。

            此时UserDialog/index.vue中的JS部分修改如下：

    1. import { getUserById, addUserInfo, editUserInfo } from '@/api'
    2. import { hex_md5 } from '@/utils/md5'
    3.   export default {
    4.     props: {
    5.       //用户ID
    6.       uid: {
    7.         type: Number,
    8.         default: () => 0
    9.       },
    10.       visible: {
    11.         type: Boolean,
    12.         default: () => false
    13.       }
    14.     },
    15.     data(){
    16.         var validateUsername = (rule, value, callback) => {
    17.           if (value === '') {
    18.             callback(new Error('请输入用户名'));
    19.           } else {
    20.             callback();
    21.           }
    22.         };
    23.         var validatePhone = (rule, value, callback) => {
    24.           if (value === '') {
    25.             callback(new Error('请输入手机号'));
    26.           } else if(!/^1[0-9]{10}$/.test(value)){
    27.             callback(new Error('请输入正确的手机号'));
    28.           } else {
    29.             callback();
    30.           }
    31.         };
    32.         var validatePass = (rule, value, callback) => {
    33.           if(this.uid == 0){
    34.             if (value === '') {
    35.               callback(new Error('请输入密码'));
    36.             } else if(value.length < 6){
    37.               callback(new Error('密码不能小于6位'));
    38.             } else {
    39.               if (this.form.checkPass !== '') {
    40.                 this.$refs.ruleForm.validateField('checkPass');
    41.               }
    42.               callback();
    43.             }
    44.           }else if(this.form.password){
    45.             if (value === '') {
    46.               callback(new Error('请输入密码'));
    47.             } else if(value.length < 6){
    48.               callback(new Error('密码不能小于6位'));
    49.             } else {
    50.               if (this.form.checkPass !== '') {
    51.                 this.$refs.ruleForm.validateField('checkPass');
    52.               }
    53.               callback();
    54.             }
    55.           }else{
    56.              callback();
    57.           }
    58.         };
    59.         var validatePass2 = (rule, value, callback) => {
    60.           if (value === '') {
    61.             callback(new Error('请再次输入密码'));
    62.           } else if (value !== this.form.password) {
    63.             callback(new Error('两次输入密码不一致!'));
    64.           } else {
    65.             callback();
    66.           }
    67.         };
    68.  
    69.         var validateOldPwd = (rule, value, callback) => {
    70.           if (value === '') {
    71.             callback(new Error('请输入原密码'));
    72.           } else if (hex_md5(value) !== this.oldPassword) {
    73.             callback(new Error('密码错误!'));
    74.           } else {
    75.             callback();
    76.           }
    77.         };
    78.  
    79.       return {
    80.         oldPassword: "",  //编辑时，记录旧密码
    81.         form: {
    82.           name: "",
    83.           password: "",
    84.           checkPass: "",
    85.           phone: "",
    86.           opwd: ""
    87.         },
    88.         formLabelWidth: '80px',
    89.         rules: {
    90.           name: [
    91.             { validator: validateUsername, trigger: 'blur' }
    92.           ],
    93.           phone: [
    94.             { validator: validatePhone, trigger: 'blur' }
    95.           ],
    96.           password: [
    97.             { validator: validatePass, trigger: 'blur' }
    98.           ],
    99.           checkPass: [
    100.             { validator: validatePass2, trigger: 'blur' }
    101.           ],
    102.           opwd: [
    103.             { validator: validateOldPwd, trigger: 'blur' }
    104.           ]
    105.         }
    106.       }
    107.     },
    108.     watch: {
    109.       uid(){
    110.         if(this.uid!=0){
    111.           this.updateUserInfo();
    112.         }
    113.       }
    114.     },
    115.     methods: {
    116.       /**
    117.        * 获取用户信息
    118.        */
    119.       updateUserInfo(){
    120.         getUserById(this.uid).then(res => {
    121.           if(res.code==1&&res['data']){
    122.             this.form['name'] = res.data.name;
    123.             this.form['phone'] = res.data.phone;
    124.             this.oldPassword = res.data.password;
    125.           }
    126.         }).catch(e => {
    127.           this.$message.error(e.msg);
    128.           this.closeEvent();
    129.           // console.error(e);
    130.         })
    131.       },
    132.       /**
    133.        * 获取提交的数据
    134.        */
    135.       getParam(){
    136.         let data = {};
    137.         if(this.form['name']){
    138.           data['name'] = this.form.name;
    139.         }
    140.         if(this.form['password']){
    141.           data['password'] = this.form.password;
    142.         }
    143.         if(this.form['phone']){
    144.           data['phone'] = this.form.phone;
    145.         }
    146.         return data;
    147.       },
    148.       /**
    149.        * 添加用户信息
    150.        */
    151.       addUserInfo(){
    152.         addUserInfo(this.getParam()).then(() => {
    153.           this.$emit('saveSuccessChange', {});
    154.           this.closeEvent();
    155.         }).catch(e => {
    156.           this.$message.error(e.msg);
    157.         });
    158.       },
    159.       /**
    160.        * 编辑用户信息
    161.        */
    162.       editUserInfo(){
    163.         editUserInfo({
    164.           id: this.uid,
    165.           ...this.getParam()
    166.         }).then(() => {
    167.           this.$emit('saveSuccessChange', {});
    168.           this.closeEvent();
    169.         }).catch(e => {
    170.           this.$message.error(e.msg);
    171.         });
    172.       },
    173.       /**
    174.        * 提交表单
    175.        */
    176.       submitForm(){
    177.         this.$refs['ruleForm'].validate((valid) => {
    178.           if(valid){
    179.             //新增用户
    180.             if(this.uid==0){
    181.               this.addUserInfo();
    182.             }
    183.             //编辑用户
    184.             else{
    185.               this.editUserInfo();
    186.             }
    187.           }else{
    188.             return false;
    189.           }
    190.         });
    191.       },
    192.       /**
    193.        * 关闭事件
    194.        */
    195.       closeEvent(){
    196.         this.$refs['ruleForm'].resetFields();
    197.         this.$emit('closeChange', {});
    198.       },
    199.     }
    200.   }

            编辑界面如下图：

            当我们需要修改用户名或手机号是，是必须输入原密码才能校验成功并进行保存。当密码框输入新密码后，则会显示再次确认密码框，不输入则非必填项。如将tom2修改为Peter，则列表则会更新为最新数据，如下图：

    1.4 删除某条数据

            删除单表数据，直接通过delete(’id‘)即可，在db/model/user.js中添加deleteUserById函数，代码如下：

    1. /**
    2.  * 通过ID删除用户信息
    3.  */
    4. export const deleteUserById = id => {
    5.   return new Promise((resolve, reject) => {
    6.     //打开游标
    7.     let {store} = openTransactionIndex(storeName, undefined, CONST_READ.READWRITE);
    8.     //删除指定用户信息
    9.     let res = store.delete(id);
    10.     res.onerror = function(e){
    11.       reject(
    12.         rJson(0, e, '操作出错了~')
    13.       );
    14.     }
    15.  
    16.     res.onsuccess = function(){
    17.       resolve(
    18.         rJson(1, null, '删除成功~')
    19.       )
    20.     }
    21.   });
    22. }

            api/index.js添加deleteUserInfo函数，代码如下：

    1. import { deleteUserById } from '@/db/model/user'
    2.  
    3. /**
    4.  * 删除用户信息
    5.  */
    6. export const deleteUserInfo = id => {
    7.   return deleteUserById(id);
    8. }

            pages/mange/index.vue中添加删除方法，代码如下：

    1. methods: {
    2.      /**
    3.      * 删除用户信息
    4.      * @param {Object} id
    5.      */
    6.     deleteEvent(id){
    7.       this.$confirm('确认要删除该用户吗？', '提示', {
    8.         confirmButtonText: '删除',
    9.         cancelButtonText: '取消',
    10.         type: 'warning'
    11.       }).then(res => {
    12.         deleteUserInfo(id).then(() => {
    13.           this.$message.success('删除成功!');
    14.           this.updateUserList();
    15.         }).catch(e => {
    16.           this.$message.error(e.msg);
    17.         })
    18.       }).catch(() => {
    19.         this.$message({
    20.           type: 'info',
    21.           message: '已取消删除'
    22.         });
    23.       });
    24.     }
    25. }

            给表格中的删除按钮绑定删除事件，代码如下：

    1. "danger" 
    2.     size="mini" 
    3.     :disabled="userInfo.id==scope.row.id" 
    4.     icon="el-icon-delete" 
    5.     circle 
    6.     @click="deleteEvent(scope.row.id)"
    7.     >

            删除成功后，调用updateUserList()函数刷新数据列表即可。

    1.5 删除选中多条数据

            删除多项则需要使用到游标相关知识点了，在db/model/user.js中添加deleteUserByIds函数，用来删除多条数据记录。通过openCursor()函数，对用户表进行遍历，通过includes判断遍历数据ID是否在删除数组中，在则直接调用delete()函数（注：这里不需要指定唯一ID，当前游标指向当前遍历数据实例对象）。

    1. /**
    2.  * 通过ID删除多条用户信息
    3.  */
    4. export const deleteUserByIds = ids => {
    5.   return new Promise((resolve, reject) => {
    6.     if(Array.isArray(ids)){
    7.       //打开游标
    8.       let {store} = openTransactionIndex(storeName, undefined, CONST_READ.READWRITE);
    9.       //打开游标
    10.       let cursor = store.openCursor();
    11.  
    12.       cursor.onerror = function(e){
    13.         reject(
    14.           rJson(0, e, '操作出错了~')
    15.         );
    16.       }
    17.  
    18.       cursor.onsuccess = function(e){
    19.         let result = e.target.result;
    20.         if(result){
    21.           if(ids.includes(result.key)){
    22.             result.delete();
    23.           }
    24.           result.continue();
    25.         }else{
    26.           resolve(
    27.              rJson(1, null, '删除成功~')
    28.           )
    29.         }
    30.       }
    31.     }else{
    32.       reject(
    33.         rJson(0, e, '请传入数组形式ID数据~')
    34.       );
    35.     }
    36.     //end
    37.   });
    38. }

            api/index.js中添加删除多项数据功能函数，代码如下：

    1. import { deleteUserByIds } from '@/db/model/user'
    2.  
    3. /**
    4.  * 删除选择中项的用户信息
    5.  */
    6. export const deleteUserChecked = ids => {
    7.   return deleteUserByIds(ids);
    8. }

            pages/mange/index.vue中添加删除多项数据的方法，代码如下：

    1. methods: {
    2.     /**
    3.      * 删除选中的ID项
    4.      */
    5.     deleteSelectedUser(){
    6.       if(this.multipleSelection.length==0){
    7.         this.$message({
    8.           type: 'info',
    9.           message: '请选择删除项'
    10.         });
    11.         return;
    12.       }
    13.  
    14.       this.$confirm('确认要删除选中的用户吗？', '提示', {
    15.         confirmButtonText: '删除',
    16.         cancelButtonText: '取消',
    17.         type: 'warning'
    18.       }).then(res => {
    19.         deleteUserChecked(this.multipleSelection.map(item => item.id)).then(() => {
    20.           this.$message.success('删除成功!');
    21.           this.updateUserList();
    22.         }).catch(e => {
    23.           this.$message.error(e.msg);
    24.         })
    25.       }).catch(() => {
    26.         this.$message({
    27.           type: 'info',
    28.           message: '已取消删除'
    29.         });
    30.       });
    31.     }
    32.  
    33. }

            再给多项删除按钮添加绑定事件，代码如下：

    "small" type="danger" @click="deleteSelectedUser">删除

            到此为止，用户管理的增删除改查功能就全部完成了；这里讲解比较碎片化，如果不清楚地方，可以留言询问；如有不足之处，欢迎指出。

    二、年级管理

            年级管理的增删改查就不细讲了，增删改查也不复杂，可以按照“一、管理员列表” 中的功能进行复制，修改相应参数数据即可，都是大同小异。

           2.1 数据库操作文件

            创建db/model/grade.js，代码如下：

    1. import { DBIsLoadSuccess, openTransactionIndex, CONST_READ } from '@/db'
    2. import { rJson } from '@/utils/utils'
    3.  
    4. let storeName = 'grade';
    5.  
    6. /**
    7.  * 获取年级列表
    8.  */
    9. export const loadGradeAllList = name => {
    10.   return new Promise((resolve, reject) => {
    11.     //打开游标
    12.     let {store} = openTransactionIndex(storeName);
    13.     //获取所有数据
    14.     let alls = store.getAll();
    15.  
    16.     alls.onerror = function(e){
    17.       reject(
    18.         rJson(0, e, '查询出错了~')
    19.       );
    20.     }
    21.  
    22.     alls.onsuccess = function(e){
    23.       let result = e.target.result;
    24.       if(result){
    25.         let rData = result;
    26.         if(name){
    27.           rData = result.filter(item => item.name.includes(name));
    28.         }
    29.         resolve(
    30.           rJson(1, rData, '获取成功~')
    31.         )
    32.       }else{
    33.         reject(
    34.           rJson(0, null, '未查询到数据~')
    35.         )
    36.       }
    37.       // console.log('store', result);
    38.     }
    39.  
    40.   });
    41. }
    42.  
    43.  
    44. /**
    45.  * 增加 或 编辑 年级信息
    46.  */
    47. export const toggleGrade = data => {
    48.   return new Promise((resolve, reject) => {
    49.     //打开游标
    50.     let {store, index} = openTransactionIndex(storeName, 'name', CONST_READ.READWRITE);
    51.  
    52.     let res;
    53.  
    54.     //用户ID存在，则为编辑
    55.     if(data['id']&&data.id!=0){
    56.       data['updatetime'] = new Date().getTime();
    57.  
    58.       //获取原数据
    59.       res = store.get(data.id);
    60.  
    61.       res.onerror = function(e){
    62.         reject(
    63.           rJson(0, e, '查询出错了~')
    64.         );
    65.       }
    66.  
    67.       res.onsuccess = function(e){
    68.         let result = e.target.result;
    69.         if(result){
    70.           //合并数据，并保存
    71.           res = store.put(Object.assign(result, data));
    72.  
    73.           res.onerror = function(e){
    74.             reject(
    75.               rJson(0, e, '查询出错了~')
    76.             );
    77.           }
    78.  
    79.           res.onsuccess = function(){
    80.             resolve(
    81.               rJson(1, null, '保存成功~')
    82.             )
    83.           }
    84.         }else{
    85.           reject(
    86.             rJson(0, e, '年级不存在~')
    87.           );
    88.         }
    89.       }
    90.  
    91.     }
    92.     //新增（需要判断用户名是否已存在）
    93.     else{
    94.       //通过索引 获取用户名，判断用户名是否已存在
    95.       res = index.getKey(data.name);
    96.  
    97.       res.onerror = function(e){
    98.         reject(
    99.           rJson(0, e, '查询出错了~')
    100.         );
    101.       }
    102.  
    103.       res.onsuccess = function(e){
    104.         let result = e.target.result;
    105.         //如果用户名已存在，返回错误信息
    106.         if(result){
    107.           reject(
    108.             rJson(0, e, '该年级已存在~')
    109.           );
    110.         }
    111.         //用户名不存在，则直接添加
    112.         else{
    113.  
    114.           data['createtime'] = new Date().getTime();
    115.           data['updatetime'] = new Date().getTime();
    116.           res = store.add(data);
    117.  
    118.           res.onerror = function(e){
    119.             reject(
    120.               rJson(0, e, '查询出错了~')
    121.             );
    122.           }
    123.  
    124.           res.onsuccess = function(){
    125.             resolve(
    126.               rJson(1, null, '保存成功~')
    127.             )
    128.           }
    129.         }
    130.  
    131.       }
    132.  
    133.     }
    134.  
    135.   });
    136. }
    137.  
    138. /**
    139.  * 通过ID删除 年级信息
    140.  */
    141. export const deleteGradeById = id => {
    142.   return new Promise((resolve, reject) => {
    143.     //打开游标
    144.     let {store} = openTransactionIndex(storeName, undefined, CONST_READ.READWRITE);
    145.     //删除指定用户信息
    146.     let res = store.delete(id);
    147.     res.onerror = function(e){
    148.       reject(
    149.         rJson(0, e, '操作出错了~')
    150.       );
    151.     }
    152.  
    153.     res.onsuccess = function(){
    154.       resolve(
    155.         rJson(1, null, '删除成功~')
    156.       )
    157.     }
    158.   });
    159. }
    160.  
    161. /**
    162.  * 通过ID删除多条 年级信息
    163.  */
    164. export const deleteGradeByIds = ids => {
    165.   return new Promise((resolve, reject) => {
    166.     if(Array.isArray(ids)){
    167.       //打开游标
    168.       let {store} = openTransactionIndex(storeName, undefined, CONST_READ.READWRITE);
    169.       //打开游标
    170.       let cursor = store.openCursor();
    171.  
    172.       cursor.onerror = function(e){
    173.         reject(
    174.           rJson(0, e, '操作出错了~')
    175.         );
    176.       }
    177.  
    178.       cursor.onsuccess = function(e){
    179.         let result = e.target.result;
    180.         if(result){
    181.           if(ids.includes(result.key)){
    182.             result.delete();
    183.           }
    184.           result.continue();
    185.         }else{
    186.           resolve(
    187.              rJson(1, null, '删除成功~')
    188.           )
    189.         }
    190.       }
    191.     }else{
    192.       reject(
    193.         rJson(0, e, '请传入数组形式ID数据~')
    194.       );
    195.     }
    196.   });
    197. }

           2.2 api接口

            api/index.js中添加年级部分接口函数，代码如下：

    1. import {
    2.   loadGradeAllList,
    3.   toggleGrade,
    4.   deleteGradeById,
    5.   deleteGradeByIds
    6. } from '@/db/model/grade'
    7.  
    8. /**
    9.  * 获取年级列表
    10.  */
    11. export const gradeAllList = keyword => {
    12.   return loadGradeAllList(keyword);
    13. }
    14.  
    15. /**
    16.  * 添加 或 修改指定年级信息
    17.  */
    18. export const toggleGradeInfo = name => {
    19.   return toggleGrade(name);
    20. }
    21.  
    22. /**
    23.  * 删除指定年级
    24.  */
    25. export const deleteGradeInfo = id => {
    26.   return deleteGradeById(id);
    27. }
    28.  
    29. /**
    30.  * 删除指定多项年级信息
    31.  */
    32. export const deleteGradeChecked  = ids => {
    33.   return deleteGradeByIds(ids);
    34. }

           2.3 列表页面

            打开年级列表页面pages/grade/index.vue，添加html、样式和JS部分功能。

            html代码部分：

            样式部分：

    1. .index-wrap{
    2.   padding: 20px;
    3. }
    4.  
    5. .filter-wrap{
    6.   display: table;
    7.   width: 100%;
    8.  
    9.   .item{
    10.     display: table-cell;
    11.     vertical-align: middle;
    12.  
    13.     &.left{
    14.       text-align: left;
    15.     }
    16.     &.right{
    17.       text-align: right;
    18.     }
    19.   }
    20. }

            JS部分：

    1. import { gradeAllList, toggleGradeInfo, deleteGradeInfo, deleteGradeChecked } from '@/api'
    2. import { formatDate } from '@/utils/utils'
    3.  
    4. export default {
    5.   data () {
    6.     return {
    7.       /**
    8.        * 搜索关键词
    9.        */
    10.       keyword: "",
    11.       /**
    12.        * 列表数据
    13.        */
    14.       tableList: [],
    15.       /**
    16.        * 选中项
    17.        */
    18.       multipleSelection: []
    19.     }
    20.   },
    21.   created() {
    22.     this.updateList();
    23.   },
    24.   methods: {
    25.     /**
    26.      * 获取列表数据
    27.      */
    28.     updateList(){
    29.       gradeAllList(this.keyword).then(res => {
    30.         if(res.code==1&&Array.isArray(res.data)){
    31.           this.tableList = res.data.map(item => {
    32.             item['createtime'] = formatDate(item.createtime);
    33.             item['updatetime'] = formatDate(item.updatetime);
    34.             return item;
    35.           });
    36.         }
    37.       }).catch(msg => {
    38.         console.log('msg', msg);
    39.       });
    40.       //end
    41.     },
    42.     /**
    43.      * 添加事件
    44.      */
    45.     addEvent(){
    46.       this.$prompt('请输入年级名称', '提示', {
    47.         confirmButtonText: '保存',
    48.         cancelButtonText: '取消',
    49.         inputValidator: function(value){
    50.           if(value&&value.toString().length>0){
    51.             return true;
    52.           }else{
    53.             return "请输入年级名称";
    54.           }
    55.         },
    56.         inputErrorMessage: "请输入年级名称"
    57.       }).then(({ value }) => {
    58.         toggleGradeInfo({
    59.           name: value
    60.         }).then(res => {
    61.           this.$message.success('添加成功');
    62.           this.updateList();
    63.         }).catch(e => {
    64.           this.$message({
    65.             type: 'info',
    66.             message: e.msg
    67.           });
    68.         });
    69.       }).catch(() => {
    70.         this.$message({
    71.           type: 'info',
    72.           message: '已取消'
    73.         });
    74.       });
    75.     },
    76.     /**
    77.      * 编辑事件
    78.      */
    79.     editEvent(id, name){
    80.       this.$prompt('请输入年级名称', '提示', {
    81.         confirmButtonText: '保存',
    82.         cancelButtonText: '取消',
    83.         inputValidator: function(value){
    84.           if(value&&value.toString().length>0){
    85.             return true;
    86.           }else{
    87.             return "请输入年级名称";
    88.           }
    89.         },
    90.         inputValue: name,
    91.         inputErrorMessage: "请输入年级名称"
    92.       }).then(({ value }) => {
    93.         toggleGradeInfo({
    94.           id: id,
    95.           name: value
    96.         }).then(res => {
    97.           this.$message.success('保存成功');
    98.           this.updateList();
    99.         }).catch(e => {
    100.           this.$message({
    101.             type: 'info',
    102.             message: e.msg
    103.           });
    104.         });
    105.       }).catch(() => {
    106.         this.$message({
    107.           type: 'info',
    108.           message: '已取消'
    109.         });
    110.       });
    111.     },
    112.     /**
    113.      * 删除事件
    114.      * @param {Object} id
    115.      */
    116.     deleteEvent(id){
    117.       this.$confirm('确认要删除该年级吗？', '提示', {
    118.         confirmButtonText: '删除',
    119.         cancelButtonText: '取消',
    120.         type: 'warning'
    121.       }).then(res => {
    122.         deleteGradeInfo(id).then(() => {
    123.           this.$message.success('删除成功!');
    124.           this.updateList();
    125.         }).catch(e => {
    126.           this.$message.error(e.msg);
    127.         })
    128.       }).catch(() => {
    129.         this.$message({
    130.           type: 'info',
    131.           message: '已取消删除'
    132.         });
    133.       });
    134.     },
    135.     /**
    136.      * check 选中项项值
    137.      * @param {Object} val
    138.      */
    139.     selectionChange(val){
    140.       this.multipleSelection = val;
    141.     },
    142.     /**
    143.      * 删除多项指定年级信息
    144.      */
    145.     deleteCheckedEvent(){
    146.       if(this.multipleSelection.length==0){
    147.         this.$message({
    148.           type: 'info',
    149.           message: '请选择删除项'
    150.         });
    151.         return;
    152.       }
    153.  
    154.       this.$confirm('确认要删除选中的年级吗？', '提示', {
    155.         confirmButtonText: '删除',
    156.         cancelButtonText: '取消',
    157.         type: 'warning'
    158.       }).then(res => {
    159.         deleteGradeChecked(this.multipleSelection.map(item => item.id)).then(() => {
    160.           this.$message.success('删除成功!');
    161.           this.updateList();
    162.         }).catch(e => {
    163.           this.$message.error(e.msg);
    164.         })
    165.       }).catch(() => {
    166.         this.$message({
    167.           type: 'info',
    168.           message: '已取消删除'
    169.         });
    170.       });
    171.     }
    172.     //end
    173.   }
    174. }

            到此为止，年级部分功能就完成了；由于这里添加信息只有年级名称，所以使用了Element的this.$prompt弹框进行添加和编辑。界面效果如下：

    列表页面：

    新增页面：

    三、教师列表

            这里先讲教师列表的功能实现，因为班级管理中需要关联对应班主任，这项为必填项；而教师对应的班级是非必填项。

            这部分和前面并无太大差异，还是常规的新删改查部分功能，所以也不作功能分解，直接按代码操作即可。

            3.1 数据库操作文件

            db/model/teacher.js代码如下：

    1. import { DBIsLoadSuccess, openTransactionIndex, CONST_READ } from '@/db'
    2. import { rJson } from '@/utils/utils'
    3.  
    4. let storeName = 'teacher';
    5.  
    6. /**
    7.  * 获取 教师列表
    8.  */
    9. export const loadTeacherAllList = name => {
    10.   return new Promise((resolve, reject) => {
    11.     //打开游标
    12.     let {store} = openTransactionIndex(storeName);
    13.     //获取所有数据
    14.     let alls = store.getAll();
    15.  
    16.     alls.onerror = function(e){
    17.       reject(
    18.         rJson(0, e, '查询出错了~')
    19.       );
    20.     }
    21.  
    22.     alls.onsuccess = function(e){
    23.       let result = e.target.result;
    24.       if(result){
    25.         let rData = result;
    26.         if(name){
    27.           rData = result.filter(item => item.name.includes(name));
    28.         }
    29.         resolve(
    30.           rJson(1, rData, '获取成功~')
    31.         )
    32.       }else{
    33.         reject(
    34.           rJson(0, null, '未查询到数据~')
    35.         )
    36.       }
    37.       // console.log('store', result);
    38.     }
    39.  
    40.   });
    41. }
    42.  
    43.  
    44. /**
    45.  * 获取教师信息
    46.  */
    47. export const getTecharInfoById = id => {
    48.   return new Promise((resolve, reject) => {
    49.     //打开游标
    50.     let {store} = openTransactionIndex(storeName);
    51.     //通过ID获取数据
    52.     let data = store.get(id);
    53.  
    54.     data.onerror = function(e){
    55.       reject(
    56.         rJson(0, e, '查询出错了~')
    57.       );
    58.     }
    59.  
    60.     data.onsuccess = function(e){
    61.       let result = e.target.result;
    62.       if(result){
    63.         resolve(
    64.           rJson(1, result, '获取成功~')
    65.         )
    66.       }else{
    67.         reject(
    68.           rJson(0, e, '数据不存在~')
    69.         );
    70.       }
    71.     }
    72.   });
    73. }
    74.  
    75. /**
    76.  * 增加 或 编辑 教师信息
    77.  */
    78. export const toggleTeacher = data => {
    79.   return new Promise((resolve, reject) => {
    80.     //打开游标
    81.     let {store, index} = openTransactionIndex(storeName, 'name', CONST_READ.READWRITE);
    82.  
    83.     let res;
    84.     //ID存在，则为编辑
    85.     if(data['id']&&data.id!=0){
    86.       data['updatetime'] = new Date().getTime();
    87.  
    88.       //获取原数据
    89.       res = store.get(data.id);
    90.  
    91.       res.onerror = function(e){
    92.         reject(
    93.           rJson(0, e, '查询出错了~')
    94.         );
    95.       }
    96.  
    97.       res.onsuccess = function(e){
    98.         let result = e.target.result;
    99.         if(result){
    100.           //合并数据，并保存
    101.           res = store.put(Object.assign(result, data));
    102.  
    103.           res.onerror = function(e){
    104.             reject(
    105.               rJson(0, e, '查询出错了~')
    106.             );
    107.           }
    108.  
    109.           res.onsuccess = function(){
    110.             resolve(
    111.               rJson(1, null, '保存成功~')
    112.             )
    113.           }
    114.         }else{
    115.           reject(
    116.             rJson(0, e, '年级不存在~')
    117.           );
    118.         }
    119.       }
    120.  
    121.     }
    122.     //新增（需要判断是否已存在）
    123.     else{
    124.       //通过索引获取，判断是否已存在
    125.       res = index.getKey(data.name);
    126.  
    127.       res.onerror = function(){
    128.         reject(
    129.           rJson(0, e, '查询出错了~')
    130.         );
    131.       }
    132.  
    133.       res.onsuccess = function(e){
    134.         let result = e.target.result;
    135.         //如果已存在，返回错误信息
    136.         if(result){
    137.           reject(
    138.             rJson(0, e, '该教师已存在~')
    139.           );
    140.         }
    141.         //不存在，则直接添加
    142.         else{
    143.  
    144.           data['createtime'] = new Date().getTime();
    145.           data['updatetime'] = new Date().getTime();
    146.           res = store.add(data);
    147.  
    148.           res.onerror = function(e){
    149.             reject(
    150.               rJson(0, e, '查询出错了~')
    151.             );
    152.           }
    153.  
    154.           res.onsuccess = function(){
    155.             resolve(
    156.               rJson(1, null, '保存成功~')
    157.             )
    158.           }
    159.         }
    160.         //if 2 end
    161.       }
    162.  
    163.       //索引 End
    164.     }
    165.  
    166.     //if end
    167.  
    168.   });
    169. }
    170.  
    171. /**
    172.  * 通过ID删除教师信息
    173.  */
    174. export const deleteTeacherById = id => {
    175.   return new Promise((resolve, reject) => {
    176.     //打开游标
    177.     let {store} = openTransactionIndex(storeName, undefined, CONST_READ.READWRITE);
    178.     //删除指定信息
    179.     let res = store.delete(id);
    180.     res.onerror = function(e){
    181.       reject(
    182.         rJson(0, e, '操作出错了~')
    183.       );
    184.     }
    185.  
    186.     res.onsuccess = function(){
    187.       resolve(
    188.         rJson(1, null, '删除成功~')
    189.       )
    190.     }
    191.   });
    192. }
    193.  
    194. /**
    195.  * 通过ID删除多条教师信息
    196.  */
    197. export const deleteTeacherByIds = ids => {
    198.   return new Promise((resolve, reject) => {
    199.     if(Array.isArray(ids)){
    200.       //打开游标
    201.       let {store} = openTransactionIndex(storeName, undefined, CONST_READ.READWRITE);
    202.       //打开游标
    203.       let cursor = store.openCursor();
    204.  
    205.       cursor.onerror = function(e){
    206.         reject(
    207.           rJson(0, e, '操作出错了~')
    208.         );
    209.       }
    210.  
    211.       cursor.onsuccess = function(e){
    212.         let result = e.target.result;
    213.         if(result){
    214.           if(ids.includes(result.key)){
    215.             result.delete();
    216.           }
    217.           result.continue();
    218.         }else{
    219.           resolve(
    220.              rJson(1, null, '删除成功~')
    221.           )
    222.         }
    223.       }
    224.     }else{
    225.       reject(
    226.         rJson(0, e, '请传入数组形式ID数据~')
    227.       );
    228.     }
    229.  
    230.   });
    231. }

            3.2 api接口

            api/index.js文件添加以下代码：

    1. import {
    2.   loadTeacherAllList,
    3.   toggleTeacher,
    4.   deleteTeacherById,
    5.   deleteTeacherByIds,
    6.   getTecharInfoById
    7. } from '@/db/model/teacher'
    8.  
    9. /**
    10.  * 获取教师列表
    11.  */
    12. export const getTeachersList = name => {
    13.   return loadTeacherAllList(name);
    14. }
    15.  
    16. /**
    17.  * 新增或修改教师信息
    18.  */
    19. export const toggerTeacherInfo = params => {
    20.   return toggleTeacher(params);
    21. }
    22.  
    23. /**
    24.  * 通过ID获取教师信息
    25.  */
    26. export const loadTeacherById = id => {
    27.   return getTecharInfoById(id);
    28. }
    29.  
    30. /**
    31.  * 单个教师信息删除
    32.  */
    33. export const deleteTeacherInfo = id => {
    34.   return deleteTeacherById(id);
    35. }
    36.  
    37. /**
    38.  * 删除指定多个教师信息
    39.  */
    40. export const deleteSelectedTeacherInfo = ids => {
    41.   return deleteTeacherByIds(ids);
    42. }

            3.3 新增页面

            在components中添加TeacherDialog/index.vue新增页面组件，html部分代码：

    js部分代码：

    添加界面如下：

            3.4 列表页面

            在pages目录中teacher/index.vue添加列表页面，html部分代码如下：

    js部分代码：

    列表界面如下：

    四、班级管理

            班级这部分由于关联了教师ID和年级ID，所以在做查询时，会稍微复杂点，同时需要之前的grade.js和teacher.js中增加单独查询功能，下面会一一阐述。

    4.1 数据库操作文件

            db/model/classify.js代码：

    1. import { DBIsLoadSuccess, openTransactionIndex, CONST_READ } from '@/db'
    2. import { rJson } from '@/utils/utils'
    3. import { getTeacherByIdsCursor } from './teacher.js'
    4. import { getGradeByIdsCursor } from './grade.js'
    5.  
    6. let storeName = 'classify';
    7.  
    8. /**
    9.  * 获取 班级信息
    10.  */
    11. export const loadClassAllList = async (name) => {
    12.   return new Promise((resolve, reject) => {
    13.     //打开游标
    14.     let {store} = openTransactionIndex(storeName);
    15.     //获取所有数据
    16.     let alls = store.getAll();
    17.  
    18.     alls.onerror = function(e){
    19.       console.log('error', e)
    20.       reject(
    21.         rJson(0, e, '查询出错了~')
    22.       );
    23.     }
    24.  
    25.     alls.onsuccess = function(e){
    26.       let result = e.target.result;
    27.       if(result){
    28.         let rData = result;
    29.         if(name){
    30.           rData = result.filter(item => item.name.includes(name));
    31.         }
    32.  
    33.         resolve(
    34.           rJson(1, rData, '获取成功~')
    35.         )
    36.       }else{
    37.         reject(
    38.           rJson(0, null, '未查询到数据~')
    39.         )
    40.       }
    41.       // console.log('store', result);
    42.     }
    43.  
    44.   });
    45. }
    46.  
    47. /**
    48.  * 通过ID获取 班级信息
    49.  */
    50. export const getClassInfoById = id => {
    51.   return new Promise((resolve, reject) => {
    52.     //打开游标
    53.     let {store} = openTransactionIndex(storeName);
    54.     //通过ID获取数据
    55.     let data = store.get(id);
    56.  
    57.     data.onerror = function(e){
    58.       reject(
    59.         rJson(0, e, '查询出错了~')
    60.       );
    61.     }
    62.  
    63.     data.onsuccess = function(e){
    64.       let result = e.target.result;
    65.       if(result){
    66.         resolve(
    67.           rJson(1, result, '获取成功~')
    68.         )
    69.       }else{
    70.         reject(
    71.           rJson(0, e, '数据不存在~')
    72.         );
    73.       }
    74.     }
    75.   });
    76. }
    77.  
    78.  
    79. /**
    80.  * 通过年级ID获取对应班级信息
    81.  */
    82. export const getClassInfoByKey = key => {
    83.   return new Promise((resolve, reject) => {
    84.     //打开游标
    85.     let {store, cursor} = openTransactionIndex(storeName, 'gid'),
    86.         reData = [];
    87.  
    88.     cursor.onerror = function(e){
    89.       reject(
    90.         rJson(0, e, '查询出错了~')
    91.       );
    92.     }
    93.  
    94.     cursor.onsuccess = function(e){
    95.       let result = e.target.result;
    96.       if(result){
    97.         if(result.key==key){
    98.           reData.push({
    99.             id: result.value.id,
    100.             name: result.value.name
    101.           });
    102.         }
    103.         result.continue();
    104.       }else{
    105.         resolve(
    106.           rJson(1, reData, '获取成功~')
    107.         )
    108.         // console.log('end')
    109.       }
    110.     }
    111.   });
    112. }
    113.  
    114. /**
    115.  * 增加 或 编辑 班级信息
    116.  */
    117. export const toggleClass = data => {
    118.   return new Promise((resolve, reject) => {
    119.     //打开游标
    120.     let {store, index} = openTransactionIndex(storeName, 'name', CONST_READ.READWRITE);
    121.  
    122.     let res;
    123.  
    124.     //ID存在，则为编辑
    125.     if(data['id']&&data.id!=0){
    126.       data['updatetime'] = new Date().getTime();
    127.  
    128.       //获取原数据
    129.       res = store.get(data.id);
    130.  
    131.       res.onerror = function(e){
    132.         reject(
    133.           rJson(0, e, '查询出错了~')
    134.         );
    135.       }
    136.  
    137.       res.onsuccess = function(e){
    138.         let result = e.target.result;
    139.         if(result){
    140.           //合并数据，并保存
    141.           res = store.put(Object.assign(result, data));
    142.  
    143.           res.onerror = function(e){
    144.             reject(
    145.               rJson(0, e, '查询出错了~')
    146.             );
    147.           }
    148.  
    149.           res.onsuccess = function(){
    150.             resolve(
    151.               rJson(1, null, '保存成功~')
    152.             )
    153.           }
    154.         }else{
    155.           reject(
    156.             rJson(0, e, '年级不存在~')
    157.           );
    158.         }
    159.       }
    160.  
    161.     }
    162.     //新增（需要判断是否已存在）
    163.     else{
    164.       //通过索引获取，判断是否已存在
    165.       res = index.getKey(data.name);
    166.  
    167.       res.onerror = function(e){
    168.         reject(
    169.           rJson(0, e, '查询出错了~')
    170.         );
    171.       }
    172.  
    173.       res.onsuccess = function(e){
    174.         let result = e.target.result;
    175.         //如果已存在，返回错误信息
    176.         if(result){
    177.           reject(
    178.             rJson(0, e, '该年级已存在~')
    179.           );
    180.         }
    181.         //不存在，则直接添加
    182.         else{
    183.  
    184.           data['createtime'] = new Date().getTime();
    185.           data['updatetime'] = new Date().getTime();
    186.           res = store.add(data);
    187.  
    188.           res.onerror = function(e){
    189.             reject(
    190.               rJson(0, e, '查询出错了~')
    191.             );
    192.           }
    193.  
    194.           res.onsuccess = function(){
    195.             resolve(
    196.               rJson(1, null, '保存成功~')
    197.             )
    198.           }
    199.         }
    200.         //if 2 end
    201.       }
    202.  
    203.       //索引 End
    204.     }
    205.  
    206.     //if end
    207.  
    208.   });
    209. }
    210.  
    211. /**
    212.  * 通过ID删除班级
    213.  */
    214. export const deleteClassById = id => {
    215.   return new Promise((resolve, reject) => {
    216.     //打开游标
    217.     let {store} = openTransactionIndex(storeName, undefined, CONST_READ.READWRITE);
    218.     //删除指定信息
    219.     let res = store.delete(id);
    220.     res.onerror = function(e){
    221.       reject(
    222.         rJson(0, e, '操作出错了~')
    223.       );
    224.     }
    225.  
    226.     res.onsuccess = function(){
    227.       resolve(
    228.         rJson(1, null, '删除成功~')
    229.       )
    230.     }
    231.   });
    232. }
    233.  
    234. /**
    235.  * 通过ID删除多条班级
    236.  */
    237. export const deleteClassByIds = ids => {
    238.   return new Promise((resolve, reject) => {
    239.     if(Array.isArray(ids)){
    240.       //打开游标
    241.       let {store} = openTransactionIndex(storeName, undefined, CONST_READ.READWRITE);
    242.       //打开游标
    243.       let cursor = store.openCursor();
    244.  
    245.       cursor.onerror = function(e){
    246.         reject(
    247.           rJson(0, e, '操作出错了~')
    248.         );
    249.       }
    250.  
    251.       cursor.onsuccess = function(e){
    252.         let result = e.target.result;
    253.         if(result){
    254.           if(ids.includes(result.key)){
    255.             result.delete();
    256.           }
    257.           result.continue();
    258.         }else{
    259.           resolve(
    260.              rJson(1, null, '删除成功~')
    261.           )
    262.         }
    263.       }
    264.     }else{
    265.       reject(
    266.         rJson(0, e, '请传入数组形式ID数据~')
    267.       );
    268.     }
    269.     //end
    270.   });
    271. }

    4.2 api接口

            api/index.js中添加班级接口，代码如下：

    1. import {
    2.   loadClassAllList,
    3.   toggleClass,
    4.   getClassInfoById,
    5.   deleteClassById,
    6.   deleteClassByIds,
    7.   getClassInfoByKey
    8. } from '@/db/model/classify'
    9.  
    10. /**
    11.  * 获取班级列表
    12.  */
    13. export const getClassList = name => {
    14.   return loadClassAllList(name);
    15. }
    16.  
    17. /**
    18.  * 新增或保存 班级信息
    19.  */
    20. export const toggleClassInfo = param => {
    21.   return toggleClass(param);
    22. }
    23.  
    24. /**
    25.  * 通过索引获取对应班级信息
    26.  */
    27. export const getClassByKey = key => {
    28.   return getClassInfoByKey(key);
    29. }
    30.  
    31. /**
    32.  * 获取班级信息 通过ID
    33.  */
    34. export const getClassifyById = id => {
    35.   return getClassInfoById(id);
    36. }
    37.  
    38. /**
    39.  * 通过ID删除指定班级信息
    40.  */
    41. export const deleteClassInfoById = id => {
    42.   return deleteClassById(id);
    43. }
    44.  
    45. /**
    46.  * 通过选择中的ID删除 班级信息
    47.  */
    48. export const deleteClassSelectedInfoByIds = ids => {
    49.   return deleteClassByIds(ids);
    50. }

    4.3 新增班级页面

            在components目录中添加ClassDialog/index.vue新增页面组件，html部分代码：

            这里与其他新增页面不同之处在于加载时，同时需要获取年级和教师数据列表，用于下拉选项，这两个接口已在api/index.js定义过，直接调用即可。

            这里也作了些偷懒操作，每个班级所对应课程并未作动态添加功能，而是写死在新增页面。保存的时候是以数组形式存库的，所以在编辑的时候，通过班级ID获取到班级信息，需将拿到ts字段对应信息，重新赋值给courseList。

            js代码部分：

    新增界面如下：

            

    4.4 班级列表页

            在pages/classify/index.vue中添加列表页面，html代码如下：

    js部分代码：

    列表界面如下：

    4.5 查询关联数据 

            如上图所示，现在班主任和年级信息无法显示，因为这里我们保存的是教师ID和年级ID，所以现在需要在列表查询功能中，增加master和grade两个字段，将查询到对应的数据赋值即可。

            并且想要拿到对应id的name值，则需要去对应teacher表和grade表中进行查询，所以还要在对应表的操作文件中添加相应查询功能函数。通过传入的ID集进行匹配相应数据，并以ID为键名保存到新的变量值中，以便与教师列表中的ID相关联。

    第一步：打开db/model/teacher.js，添加getTeacherByIdsCursor()函数，代码如下：

    1. /**
    2.  * 通过游标获取对应数据集
    3.  */
    4. export const getTeacherByIdsCursor = ids => {
    5.   return new Promise((resolve, reject) => {
    6.     //打开游标
    7.     let {store} = openTransactionIndex(storeName);
    8.     //通过ID获取数据
    9.     let cursor = store.openCursor(),
    10.         reData = {};
    11.  
    12.     cursor.onerror = function(e){
    13.       reject();
    14.     }
    15.  
    16.     cursor.onsuccess = function(e){
    17.         let result = e.target.result;
    18.         if(result){
    19.           if(ids.includes(result.value.id)){
    20.             reData[result.value.id] = result.value;
    21.           }
    22.           result.continue();
    23.         }else{
    24.           resolve(reData);
    25.         }
    26.     }
    27.     //end
    28.   });
    29. }

    第二步：打开db/model/grade.js，添加getGradeByIdsCursor()函数，代码如下：

    1. /**
    2.  * 通过游标获取对应数据集
    3.  */
    4. export const getGradeByIdsCursor = ids => {
    5.   return new Promise((resolve, reject) => {
    6.     //打开游标
    7.     let {store} = openTransactionIndex(storeName);
    8.     //通过ID获取数据
    9.     let cursor = store.openCursor(),
    10.         reData = {};
    11.  
    12.     cursor.onerror = function(e){
    13.       reject();
    14.     }
    15.  
    16.     cursor.onsuccess = function(e){
    17.         let result = e.target.result;
    18.         if(result){
    19.           if(ids.includes(result.value.id)){
    20.             reData[result.value.id] = result.value;
    21.           }
    22.           result.continue();
    23.         }else{
    24.           resolve(reData);
    25.         }
    26.     }
    27.     //end
    28.   });
    29. }

    第三步：打开db/model/classify.js文件，修改loadClassAllList()函数，代码如下：

    1. /**
    2.  * 获取 班级信息
    3.  */
    4. export const loadClassAllList = async (name) => {
    5.   return new Promise((resolve, reject) => {
    6.     //打开游标
    7.     let {store} = openTransactionIndex(storeName);
    8.     //获取所有数据
    9.     let alls = store.getAll();
    10.  
    11.     alls.onerror = function(e){
    12.       reject(
    13.         rJson(0, e, '查询出错了~')
    14.       );
    15.     }
    16.  
    17.     alls.onsuccess = function(e){
    18.       let result = e.target.result;
    19.       if(result){
    20.         let rData = result;
    21.         if(name){
    22.           rData = result.filter(item => item.name.includes(name));
    23.         }
    24.  
    25.         let teacherIds = [];
    26.         //拿到不重复的教师ID
    27.         rData.forEach(item => {
    28.           if(!teacherIds.includes(item.mid)){
    29.             teacherIds.push(item.mid);
    30.           }
    31.  
    32.           if(Array.isArray(item['ts'])&&item.ts.length>0){
    33.             item.ts.forEach(sub => {
    34.               if(!teacherIds.includes(sub.tid)){
    35.                 teacherIds.push(sub.tid);
    36.               }
    37.             });
    38.           }
    39.         })
    40.  
    41.         //查询关联数据
    42.         Promise.all([
    43.             getTeacherByIdsCursor(teacherIds), 
    44.             getGradeByIdsCursor(rData.map(item => item.gid))
    45.         ]).then(res => {
    46.           let teacher = res[0],
    47.               grade = res[1];
    48.  
    49.           //重组数据
    50.           rData = rData.map(item => {
    51.             if('undefined'!==typeof teacher[item.mid]){
    52.               item['master'] = teacher[item.mid]['name'];
    53.             }
    54.             if('undefined'!==typeof grade[item.gid]){
    55.               item['grade'] = grade[item.gid]['name'];
    56.             }
    57.             //查询到授课教师信息
    58.             if(Array.isArray(item['ts'])&&item.ts.length>0){
    59.               item.ts = item.ts.map(sub => {
    60.                 if('undefined'!==typeof teacher[sub.tid]){
    61.                   sub['teacher'] = teacher[sub.tid]['name'];
    62.                 }
    63.                 return sub;
    64.               })
    65.             }
    66.             return item;
    67.           });
    68.  
    69.           resolve(
    70.             rJson(1, rData, '获取成功~')
    71.           )
    72.         }).catch(e => {
    73.           reject(
    74.             rJson(0, null, '关联数据查询错误~')
    75.           )
    76.         });
    77.  
    78.  
    79.       }else{
    80.         reject(
    81.           rJson(0, null, '未查询到数据~')
    82.         )
    83.       }
    84.     }
    85.  
    86.   });
    87. }

    此时再查看列表页，班主任和年级信息则显示出来了，如下图：

    五、学员列表

    5.1 数据库操作文件

            db/model/student.js代码如下：

    1. import { DBIsLoadSuccess, openTransactionIndex, CONST_READ } from '@/db'
    2. import { rJson } from '@/utils/utils'
    3. import { getClassByIdsCursor } from './classify.js'
    4.  
    5. let storeName = 'student';
    6.  
    7. /**
    8.  * 获取 学员列表
    9.  */
    10. export const loadStudentAllList = name => {
    11.   return new Promise((resolve, reject) => {
    12.     //打开游标
    13.     let {store} = openTransactionIndex(storeName);
    14.     //获取所有数据
    15.     let alls = store.getAll();
    16.  
    17.     alls.onerror = function(e){
    18.       reject(
    19.         rJson(0, e, '查询出错了~')
    20.       );
    21.     }
    22.  
    23.     alls.onsuccess = function(e){
    24.       let result = e.target.result;
    25.       if(result){
    26.         let rData = result;
    27.         if(name){
    28.           rData = result.filter(item => item.name.includes(name));
    29.         }
    30.  
    31.         resolve(
    32.           rJson(1, rData, '获取成功~')
    33.         )
    34.  
    35.       }else{
    36.         reject(
    37.           rJson(0, null, '未查询到数据~')
    38.         )
    39.       }
    40.       // console.log('store', result);
    41.     }
    42.  
    43.   });
    44. }
    45.  
    46. /**
    47.  * 获取学员信息
    48.  */
    49. export const getStudentInfoById = id => {
    50.   return new Promise((resolve, reject) => {
    51.     //打开游标
    52.     let {store} = openTransactionIndex(storeName);
    53.     //通过ID获取数据
    54.     let data = store.get(id);
    55.  
    56.     data.onerror = function(e){
    57.       reject(
    58.         rJson(0, e, '查询出错了~')
    59.       );
    60.     }
    61.  
    62.     data.onsuccess = function(e){
    63.       let result = e.target.result;
    64.       if(result){
    65.         resolve(
    66.           rJson(1, result, '获取成功~')
    67.         )
    68.       }else{
    69.         reject(
    70.           rJson(0, e, '数据不存在~')
    71.         );
    72.       }
    73.     }
    74.   });
    75. }
    76.  
    77. /**
    78.  * 增加 或 编辑 员学信息
    79.  */
    80. export const toggleStudent = data => {
    81.   return new Promise((resolve, reject) => {
    82.     //打开游标
    83.     let {store, index} = openTransactionIndex(storeName, 'name', CONST_READ.READWRITE);
    84.  
    85.     let res;
    86.     //ID存在，则为编辑
    87.     if(data['id']&&data.id!=0){
    88.       data['updatetime'] = new Date().getTime();
    89.  
    90.       //获取原数据
    91.       res = store.get(data.id);
    92.  
    93.       res.onerror = function(e){
    94.         reject(
    95.           rJson(0, e, '查询出错了~')
    96.         );
    97.       }
    98.  
    99.       res.onsuccess = function(e){
    100.         let result = e.target.result;
    101.         if(result){
    102.           //合并数据，并保存
    103.           res = store.put(Object.assign(result, data));
    104.  
    105.           res.onerror = function(){
    106.             reject(
    107.               rJson(0, e, '查询出错了~')
    108.             );
    109.           }
    110.  
    111.           res.onsuccess = function(){
    112.             resolve(
    113.               rJson(1, null, '保存成功~')
    114.             )
    115.           }
    116.         }else{
    117.           reject(
    118.             rJson(0, e, '年级不存在~')
    119.           );
    120.         }
    121.       }
    122.  
    123.     }
    124.     //新增（需要判断是否已存在）
    125.     else{
    126.       //通过索引获取，判断是否已存在
    127.       res = index.getKey(data.name);
    128.  
    129.       res.onerror = function(e){
    130.         reject(
    131.           rJson(0, e, '查询出错了~')
    132.         );
    133.       }
    134.  
    135.       res.onsuccess = function(e){
    136.         let result = e.target.result;
    137.         //如果用已存在，返回错误信息
    138.         if(result){
    139.           reject(
    140.             rJson(0, e, '该学员已存在~')
    141.           );
    142.         }
    143.         //不存在，则直接添加
    144.         else{
    145.  
    146.           data['createtime'] = new Date().getTime();
    147.           data['updatetime'] = new Date().getTime();
    148.           res = store.add(data);
    149.  
    150.           res.onerror = function(){
    151.             reject(
    152.               rJson(0, e, '查询出错了~')
    153.             );
    154.           }
    155.  
    156.           res.onsuccess = function(){
    157.             resolve(
    158.               rJson(1, null, '保存成功~')
    159.             )
    160.           }
    161.         }
    162.         //if 2 end
    163.       }
    164.  
    165.       //索引 End
    166.     }
    167.  
    168.     //if end
    169.  
    170.   });
    171. }
    172.  
    173. /**
    174.  * 通过ID删除学员信息
    175.  */
    176. export const deleteStudentById = id => {
    177.   return new Promise((resolve, reject) => {
    178.     //打开游标
    179.     let {store} = openTransactionIndex(storeName, undefined, CONST_READ.READWRITE);
    180.     //删除指定信息
    181.     let res = store.delete(id);
    182.     res.onerror = function(e){
    183.       reject(
    184.         rJson(0, e, '操作出错了~')
    185.       );
    186.     }
    187.  
    188.     res.onsuccess = function(){
    189.       resolve(
    190.         rJson(1, null, '删除成功~')
    191.       )
    192.     }
    193.   });
    194. }
    195.  
    196. /**
    197.  * 通过ID删除多条学员信息
    198.  */
    199. export const deleteStudentByIds = ids => {
    200.   return new Promise((resolve, reject) => {
    201.     if(Array.isArray(ids)){
    202.       //打开游标
    203.       let {store} = openTransactionIndex(storeName, undefined, CONST_READ.READWRITE);
    204.       //打开游标
    205.       let cursor = store.openCursor();
    206.  
    207.       cursor.onerror = function(e){
    208.         reject(
    209.           rJson(0, e, '操作出错了~')
    210.         );
    211.       }
    212.  
    213.       cursor.onsuccess = function(e){
    214.         let result = e.target.result;
    215.         if(result){
    216.           if(ids.includes(result.key)){
    217.             result.delete();
    218.           }
    219.           result.continue();
    220.         }else{
    221.           resolve(
    222.              rJson(1, null, '删除成功~')
    223.           )
    224.         }
    225.       }
    226.     }else{
    227.       reject(
    228.         rJson(0, e, '请传入数组形式ID数据~')
    229.       );
    230.     }
    231.     //end
    232.   });
    233. }

    5.2 api接口

            api/index.js文件中新增学员相关接口，代码如下：

    1. import {
    2.   loadStudentAllList,
    3.   toggleStudent,
    4.   getStudentInfoById,
    5.   deleteStudentById,
    6.   deleteStudentByIds
    7. } from '@/db/model/student'
    8.  
    9. /**
    10.  * 获取学员列表数据
    11.  */
    12. export const getStudentList = name => {
    13.   return loadStudentAllList(name);
    14. }
    15.  
    16. /**
    17.  * 通过ID获取学员信息
    18.  */
    19. export const loadStudentById = id => {
    20.   return getStudentInfoById(id);
    21. }
    22.  
    23. /**
    24.  * 添加 或 修改学员数据
    25.  */
    26. export const toggleStudentInfo = params => {
    27.   return toggleStudent(params);
    28. }
    29.  
    30. /**
    31.  * 通过ID删除指定学员信息
    32.  */
    33. export const deleteStudentInfoById = id => {
    34.   return deleteStudentById(id);
    35. }
    36.  
    37. /**
    38.  * 删除选中的学员信息
    39.  */
    40. export const deleteStudentInfoByIds = ids => {
    41.   return deleteStudentByIds(ids);
    42. }

    5.3 新增页面

            在components/StudentDialog/index.vue中添加新增页面，html代码如下：

    1. <template>
    2.   <el-dialog :title="uid!=0?'编辑':'新增'" :visible="visible" @close="closeEvent" width="420px" class="dialog-wrap">
    3.  
    4.     <el-form :model="form" :rules="rules"  status-icon ref="ruleForm">
    5.       <el-form-item label="学员姓名" :label-width="formLabelWidth" required prop="name">
    6.         <el-input v-model="form.name" autocomplete="off" size="small">el-input>
    7.       el-form-item>
    8.       <el-form-item label="户籍" :label-width="formLabelWidth" required prop="registration">
    9.         <el-input v-model="form.registration" autocomplete="off" size="small">el-input>
    10.       el-form-item>
    11.       <el-form-item label="手机号" :label-width="formLabelWidth" required prop="phone">
    12.         <el-input v-model="form.phone" autocomplete="off" size="small">el-input>
    13.       el-form-item>
    14.      <el-form-item label="年级" :label-width="formLabelWidth" prop="gid">
    15.         <el-select v-model="form.gid" placeholder="请选择" @change="gradeChange">
    16.             <el-option
    17.               v-for="item in gradeOptions"
    18.               :key="item.value"
    19.               :label="item.label"
    20.               :value="item.value">
    21.             el-option>
    22.           el-select>
    23.       el-form-item>
    24.       <el-form-item label="班级" :label-width="formLabelWidth" prop="cid">
    25.         <el-select v-model="form.cid" placeholder="请选择">
    26.             <el-option
    27.               v-for="item in classOptions"
    28.               :key="item.value"
    29.               :label="item.label"
    30.               :value="item.value">
    31.             el-option>
    32.           el-select>
    33.       el-form-item>
    34.       <el-form-item label="居住地址" :label-width="formLabelWidth" required prop="address">
    35.         <el-input v-model="form.address" autocomplete="off" size="small">el-input>
    36.       el-form-item>
    37.       <el-form-item label="出生日期" :label-width="formLabelWidth" required prop="birthday">
    38.         <el-date-picker v-model="form.birthday" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">el-date-picker>
    39.       el-form-item>
    40.     el-form>
    41.  
    42.     <div slot="footer" class="dialog-footer">
    43.       <el-button size="small" @click="closeEvent">取 消el-button>
    44.       <el-button size="small" type="primary" @click="submitForm">保 存el-button>
    45.     div>
    46.  
    47.   el-dialog>
    48. template>

    js代码如下：

    界面如下：

             这里需要注意的是，为新增功能时，先加载年级数据列表，这部分接口是在之前年级功能实现就已经定义了，直接调用即可；当年级数据变化选中即，通过年级ID查询到对应的班级列表数据即可，这块接口也是在api/index.js中定义过的。

            当为编辑功能时，获取到详情数据需判断年级ID是否存在，如果存在则需要通过年级ID查询 出对应班级数据列表。

    5.4 列表页面

            在pages/student/index.vue中添加列表页面，html代码如下：

    js代码部分：

    界面效果如下：

    5.5 关联数据查询

            这里出现同样的问题，关键班级的信息未显示出来，和班级中查询关联数据一样，以同样方式即可。

    第一步：打开db\model\classify.js文件，添加getClassByIdsCursor()函数，代码如下：

    1. /**
    2.  * 通过游标获取对应数据集
    3.  */
    4. export const getClassByIdsCursor = ids => {
    5.   return new Promise((resolve, reject) => {
    6.     //打开游标
    7.     let {store} = openTransactionIndex(storeName);
    8.     //通过ID获取数据
    9.     let cursor = store.openCursor(),
    10.         reData = {};
    11.  
    12.     cursor.onerror = function(e){
    13.       reject();
    14.     }
    15.  
    16.     cursor.onsuccess = function(e){
    17.         let result = e.target.result;
    18.         if(result){
    19.           if(ids.includes(result.value.id)){
    20.             reData[result.value.id] = result.value;
    21.           }
    22.           result.continue();
    23.         }else{
    24.           resolve(reData);
    25.         }
    26.     }
    27.     //end
    28.   });
    29. }

     第二步：打开db\model\student.js文件，修改loadStudentAllList()函数，代码如下：

    1. /**
    2.  * 获取 学员列表
    3.  */
    4. export const loadStudentAllList = name => {
    5.   return new Promise((resolve, reject) => {
    6.     //打开游标
    7.     let {store} = openTransactionIndex(storeName);
    8.     //获取所有数据
    9.     let alls = store.getAll();
    10.  
    11.     alls.onerror = function(e){
    12.       reject(
    13.         rJson(0, e, '查询出错了~')
    14.       );
    15.     }
    16.  
    17.     alls.onsuccess = function(e){
    18.       let result = e.target.result;
    19.       if(result){
    20.         let rData = result;
    21.         if(name){
    22.           rData = result.filter(item => item.name.includes(name));
    23.         }
    24.  
    25.         getClassByIdsCursor(rData.filter(item => item.cid).map(item => item.cid)).then(res => {
    26.           rData = rData.map(item => {
    27.             if('undefined'!==typeof res[item.cid]){
    28.               item['classify'] = res[item.cid]['name'];
    29.             }
    30.             return item;
    31.           })
    32.           resolve(
    33.             rJson(1, rData, '获取成功~')
    34.           )
    35.         }).catch(e => {
    36.           reject(
    37.             rJson(0, e, '查询出错了~')
    38.           )
    39.         });
    40.  
    41.       }else{
    42.         reject(
    43.           rJson(0, null, '未查询到数据~')
    44.         )
    45.       }
    46.  
    47.     }
    48.  
    49.   });
    50. }

    现在列表页面效果如下：

    六、分页功能

            这里我们以学员列表为例，添加分页查询功能。注意的是，其他页面列表查询已在各关键页面中使用，为了避免影响别的功能，建议新建分页查询 函数。

    6.1 分页功能函数

            首先打开src/utils/utils.js文件，添加分页功能函数，代码如下：

    1. /**
    2.  * 生成分页数据
    3.  */
    4. export const genderPage = (data, param) => {
    5.   //判断分页数据是否存在，否则赋值默认参数
    6.   param = param && 'undefined'!==typeof param['page'] && 'undefined'!==typeof param['pageSize'] ? param : {
    7. 		page: 1,
    8. 		pageSize: 10
    9. 	}
    10. 	let newData = data.map(item => item),
    11. 			start = (param.page - 1) * param.pageSize,
    12. 			end = newData.length - start < param.pageSize ? newData.length : start + param.pageSize;
    13. 	return newData.slice(start, end);
    14. }

    6.2 增加分页查询功能

            打开db/model/student.js，添加分页查询函数loadStudentPage()，代码如下：

    1. import { DBIsLoadSuccess, openTransactionIndex, CONST_READ } from '@/db'
    2. import { rJson, genderPage } from '@/utils/utils'
    3. import { getClassByIdsCursor } from './classify.js'
    4.  
    5. let storeName = 'student';
    6.  
    7. /**
    8.  * 获取 学员列表 - 分页模式
    9.  * @param name 查询关键词
    10.  * @param param 分页参数
    11.  */
    12. export const loadStudentPage = (name, param) => {
    13.  
    14.   return new Promise((resolve, reject) => {
    15.     //打开游标
    16.     let {store} = openTransactionIndex(storeName);
    17.     //获取所有数据
    18.     let alls = store.getAll();
    19.  
    20.     alls.onerror = function(e){
    21.       reject(
    22.         rJson(0, e, '查询出错了~')
    23.       );
    24.     }
    25.  
    26.     alls.onsuccess = function(e){
    27.       let result = e.target.result;
    28.       if(result){
    29.         let rData = result;
    30.         if(name){
    31.           rData = result.filter(item => item.name.includes(name));
    32.         }
    33.         //查询班级关联数据
    34.         getClassByIdsCursor(rData.filter(item => item.cid).map(item => item.cid)).then(res => {
    35.           rData = rData.map(item => {
    36.             if('undefined'!==typeof res[item.cid]){
    37.               item['classify'] = res[item.cid]['name'];
    38.             }
    39.             return item;
    40.           })
    41.  
    42.           //通过genderPageData函数进行分页处理
    43.           resolve(
    44.             rJson(1, {
    45.               list: genderPage(rData, param),
    46.               total: rData.length
    47.             }, '获取成功~')
    48.           )
    49.         }).catch(e => {
    50.           reject(
    51.             rJson(0, e, '查询出错了~')
    52.           )
    53.         });
    54.  
    55.       }else{
    56.         reject(
    57.           rJson(0, null, '未查询到数据~')
    58.         )
    59.       }
    60.     }
    61.  
    62.   });
    63. }

    6.3 api接口

            打开api/index.js，添加分页查询接口函数，代码如下：

    1. import {
    2.   loadStudentPage
    3. } from '@/db/model/student'
    4.  
    5. /**
    6.  * 获取学员列表数据 - 分页模式
    7.  */
    8. export const getStudentPageList = (name, param) => {
    9.   return loadStudentPage(name, param);
    10. }

    6.4 添加分页代码

    html部分，在列表下添加分页代码，代码如下：

    1. <div class="table-wrap">
    2.     ...
    3.  
    4.     <el-pagination
    5.       background
    6.       layout="prev, pager, next"
    7.       @current-change="currentChange"
    8.       :current-page="page"
    9.       :page-size="pageSize"
    10.       :total="pageTotal">
    11.     el-pagination>
    12.   div>

    js部分，引入getStudentPageList接口函数，在data中添加分页参数，增加分页切换事件，代码如下：

    1.  import StudentDialog from '@/components/StudentDialog'
    2.   import { getStudentList, getStudentPageList, deleteStudentInfoById, deleteStudentInfoByIds } from '@/api'
    3.   import { formatDate } from '@/utils/utils'
    4.  
    5. export default {
    6.   data () {
    7.     return {
    8.       //...
    9.  
    10.       //分页参数
    11.       page: 1,
    12.       pageSize: 5,
    13.       pageTotal: 0
    14.     }
    15.   },
    16.   filters: {
    17.     filterAge(val){
    18.       let current = new Date(),
    19.           bDate = new Date(val);
    20.       return current.getFullYear() - bDate.getFullYear();
    21.     }
    22.   },
    23.   components: {
    24.     StudentDialog
    25.   },
    26.   created() {
    27.     this.updateList();
    28.   },
    29.   methods: {
    30.     /**
    31.      * 当前页发生改变
    32.      */
    33.     currentChange(page){
    34.       this.page = page;
    35.       this.updateList();
    36.     }
    37.   }

    6.5 修改列表查询函数

            由于分页查询功能中需要返回数据总量，则原来返回结果结构发生变化，所以updateList()函数需要稍微调整下，代码如下：

    1. methods: {
    2.     /**
    3.      * 获取列表数据
    4.      */
    5.     updateList(){
    6.       getStudentPageList(this.keyword, {
    7.         page: this.page,
    8.         pageSize: this.pageSize
    9.       }).then(res => {
    10.         if(res.code==1){
    11.           this.pageTotal = res.data['total'];
    12.           this.tableList = res.data['list'].map(item => {
    13.             item['createtime'] = formatDate(item.createtime);
    14.             item['updatetime'] = formatDate(item.updatetime);
    15.             return item;
    16.           });
    17.         }
    18.       }).catch(e => {
    19.         console.error(e);
    20.       })
    21.     },
    22.  
    23.     //...
    24. }

    此时页面效果如下：

            到此为止，该系统开发则已经完结了，有兴趣的朋友可以再升级和优化下。

            由于近期工作原因，不是每天都能抽出时间开发，所以有些不太连贯，望见谅。此篇对增删改查也没作太多细讲，因为都差不多，大家可以拷贝代码到本地运行自行研究。

  • 相关阅读:
    一起Talk Android吧（第四百一十回：绘制曲线）
    Python中的AI库有哪些？
    鸿鹄工程项目管理系统 Spring Cloud+Spring Boot+Mybatis+Vue+ElementUI+前后端分离构建工程项目管理系统项目背景
    AndroidT(13) -- C 语言格式的LOG输出(一)
    快鲸SCRM能为企业解决哪些管理痛点？
    日本人之间交谈的一个方式了解下
    YOLOv8改进 | 2023 | SCConv空间和通道重构卷积（精细化检测，又轻量又提点）
    基于Django+MySQL的智慧校园系统
    Servlet生命周期知识点汇总
    深入理解JVM虚拟机_1 JVM类加载器设计原理
  • 原文地址：https://blog.csdn.net/jiciqiang/article/details/127463512