spring boot + Vue + iView前后端分离架构(Mac版) -- (九)试题录入布局和列表查询的实现_<template slot-scope="{ row, index }" slot="action-CSDN博客

本文链接：https://blog.csdn.net/JingLisen/article/details/105905359

spring boot + Vue + iView前后端分离架构(Mac版) – (九)试题录入布局和列表查询的实现

一、试题录入的布局

因为项目主要是针对全国各个学校的试题进行利用和分析，所以试题的录取是项目的首要任务，针对试题列表做增删改查操作。首先对这个页面设计布局，采用的是卡片式的布局，src-->view-->exam-->saveQuestion.vue布局代码如下：

<template>
  <div>
    <Card title="试题录入">
      <div>
        <div style="display:inline-block;float:left;">
          <Button type="success" @click="addQuestion">+新增考题</Button>
        </div>
        <div style="display:inline-block;float:right;">
          <Input v-model="search" suffix="ios-search" placeholder="请输入查询信息" style="width: auto"
                 :search=true @on-search="handleSearch"/>
        </div>
      </div>
      <div style="clear: both;"></div>
      <div style="margin-top: 10px;">
        <Table ref="questionTable" @on-sort-change="onSortChange"  :columns="columns" :data="questionData" :height="tableHeight">
          <template slot-scope="{ row, index }" slot="num">
            <Input type="text" v-model="editNum" v-if="editIndex === index"/>
            <span v-else>{{ row.num }}</span>
          </template>

          <template slot-scope="{ row, index }" slot="questionYear">
            <Input type="text" v-model="edituestionYear" v-if="editIndex === index"/>
            <span v-else>{{ row.questionYear }}</span>
          </template>

          <template slot-scope="{ row, index }" slot="university">
            <Input type="text" v-model="editUniversity" v-if="editIndex === index"/>
            <span v-else>{{ row.university}}</span>
          </template>

          <template slot-scope="{ row, index }" slot="serialNum">
            <Input type="text" v-model="editerialNum" v-if="editIndex === index"/>
            <span v-else>{{ row.serialNum}}</span>
          </template>

          <template slot-scope="{ row, index }" slot="questionContent">
            <Input type="text" v-model="edituestionContent" v-if="editIndex === index"/>
            <span v-else>{{ row.questionContent}}</span>
          </template>

          <template slot-scope="{ row, index }" slot="questionSubject">
            <Input type="text" v-model="editQuestionSubject" v-if="editIndex === index"/>
            <span v-else>{{ row.questionSubject}}</span>
          </template>
          <template slot-scope="{ row, index }" slot="knowledgeItem">
            <Input type="text" v-model="editKnowledgeItem" v-if="editIndex === index"/>
            <span v-else>{{ row.knowledgeItem}}</span>
          </template>



          <template slot-scope="{ row, index }" slot="action">
            <div v-if="editIndex === index">
              <Button type="success" @click="handleUpdate(index)">确定</Button>
              <Button type="error" @click="editIndex = -1">取消</Button>
            </div>
            <div v-else>
              <Button type="primary" @click="handleEdit(row, index)" size="small">编辑</Button>
              <Button type="error" @click="handleDelete(row, index)" size="small">删除</Button>
            </div>
          </template>
        </Table>
      </div>
      <div style="margin-top: 10px;">
        <Page show-elevator show-sizer show-total :total="total" :current="current"
              :page-size="pageSize" @on-change="changePage" @on-page-size-change="changePageSize"/>
      </div>
    </Card>
  </div>
</template>
<script>

   import { queryQuestionList, addQuestion,  deleteQuestion,  updateQuestion} from '../../api/sys/question/question.api'

  export default {
    data() {
      return {
        search: '',
        questionData: [],
        columns: [
          {
            title: '序号',
            key: 'num',
            sortable: true
          },
          {
            title: '年份',
            key: 'questionYear',
            sortable: true
          },
          {
            title: '学校',
            slot: 'university',
            key: 'university',
            sortable: true
          },
          {
            title: '题号',
            slot: 'serialNum',
            key: 'serialNum',
            sortable: true
          },
          {
            title: '考题',
            slot: 'questionContent',
            key: 'questionContent',
            sortable: true
          },
          {
            title: '科目',
            slot: 'questionSubject',
            key: 'questionSubject',
            sortable: true
          },
          {
            title: '知识点',
            slot: 'knowledgeItem',
            key: 'knowledgeItem',
            sortable: true
          },
          {
            title: '操作',
            slot: 'action'
          }
        ],
        key:'num',
        order:'desc',
        editIndex: -1,  // 当前聚焦的输入框的行数
        editNum: '',
        editQuestionYear: '',
        editUniversity: '',
        editSerialNum: '',
        editQuestionContent: '',
        editQuestionSubject: '',
        editKnowledgeItem: '',
        tableHeight:200,
        total: 0,
        current: 1,
        pageSize: 10
      }
    },
    methods: {
      addQuestion() {
        console.log('增加考题')
      },
      changePage(current) {
        this.current = current;
        this.handleSearch();
      },
      changePageSize(pageSize) {// 改变每页记录的条数
        this.pageSize = pageSize;
        this.handleSearch();
      },
      handleSearch(){
        let current = this.current
        let pageSize = this.pageSize
        let search = this.search
        let orderKey = this.key
        let orderByValue = this.order
        const _this = this;
        queryQuestionList({
          current,
          pageSize,
          search,
          orderKey,
          orderByValue
        }).then(res => {
          if (res.code == 200) {
            this.$Message.success('新增试题成功')
            _this.total = res.obj.total
            _this.questionData = res.obj.rows
          } else {
            this.$Message.error('新增试题失败,' + res.msg)
          }
        });
      },
      handleUpdate(index){
        updateQuestion({
          num: this.editNum,
          questionYear: this.editQuestionYear,
          university: this.editUniversity,
          serialNum: this.editSerialNum,
          questionContent: this.editQuestionContent,
          questionSubject: this.editQuestionSubject,
          knowledgeItem: this.editKnowledgeItem

        }).then(res => {
          if (res.code == 200) {
            this.$Message.success('更新试题成功')
            this.editIndex = -1
            this.handleSearch()
          } else {
            this.$Message.error( '更新试题失败,' + res.msg)
          }
        });
      },
      handleEdit(row, index){
        console.log('点击了编辑',row);
          this.editNum = row.num
          this.editQuestionYear = row.questionYear
          this.editUniversity = row.university + "edit"
          this.editSerialNum = row.serialNum
          this.editQuestionContent = row.questionContent
          this.editQuestionSubject = row.questionSubject
          this.editKnowledgeItem = row.knowledgeItem
      },
      handleDelete(row, index){
        this.$Modal.confirm({
          title: '提示',
          content: '<p>是否删除试题？</p>',
          onOk: () => {
            deleteQuestion({num: row.num}).then(res => {
              if (res.code == 200) {
                this.$Message.success('试题删除成功');
                // 删除数据成功同时刷新grid
                this.handleSearch();
              } else {
                this.$Message.warning('试题删除失败');
              }
            });
          },
          onCancel: () => {
            this.$Message.info('取消删除请求');
          }
        });
      },

      onSortChange(sort){
        console.log(sort.key+'-'+sort.order)
        if(sort.order=='normal'){
          this.order = '';
        }else{
          this.key = sort.key;
          this.order = sort.order;
        }
        this.handleSearch();
      }
    },
    mounted() {
      // 初始化完成组件的时候执行以下的逻辑
      this.handleSearch();
      this.tableHeight = window.innerHeight - this.$refs.questionTable.$el.offsetTop - 270
    }
  }
</script>

二、试题录入页面数据填充

我们采用mock数据进行数据的填充，这样完全可以在没有后端接口的情况下，进行前端页面的开发和调试。

在src-->config-->mock-->json-->question下创建addQuestion.json、deleteQuestion.json、queryQuestionList.json、updateQuestion.json四个文件，其代码分别如下：

addQuestion.json

{
  "code": 200,
  "msg": "增加字典数据成功",
  "obj": {
    "num": "1",
    "questionYear": "2020-06-06",
    "university": "同济大学",
    "serialNum": "1",
    "questionContent": "简要介绍一下堆栈的原理与应用",
    "questionSubject": "数据机构",
    "knowledgeItem": "栈"
  }
}

deleteQuestion.json

{
  "code": 200,
  "msg": "删除试题成功",
  "obj": null
}

queryQuestionList.json

{
  "code": 200,
  "msg": "获取数据字典列表数据成功！",
  "obj": {
    "pageSize": 10,
    "current": 1,
    "total": 6,
    "rows": [
      {
        "num": "1",
        "questionYear": "2020-06-06",
        "university": "同济大学",
        "serialNum": "1",
        "questionContent": "简要介绍一下堆栈的原理与应用",
        "questionSubject": "数据机构",
        "knowledgeItem": "栈"
      },
      {
        "num": "2",
        "questionYear": "2020-06-06",
        "university": "上海交通大学",
        "serialNum": "2",
        "questionContent": "简要介绍一下堆栈的原理与应用",
        "questionSubject": "数据机构",
        "knowledgeItem": "栈"
      },
      {
        "num": "3",
        "questionYear": "2020-06-06",
        "university": "清华大学",
        "serialNum": "3",
        "questionContent": "简要介绍一下堆栈的原理与应用",
        "questionSubject": "数据机构",
        "knowledgeItem": "栈"
      },
      {
        "num": "4",
        "questionYear": "2020-06-06",
        "university": "北京大学",
        "serialNum": "4",
        "questionContent": "简要介绍一下堆栈的原理与应用",
        "questionSubject": "数据机构",
        "knowledgeItem": "栈"
      },
      {
        "num": "5",
        "questionYear": "2020-06-06",
        "university": "哈尔滨工业大学",
        "serialNum": "5",
        "questionContent": "写一个算法将一个单向链表拆成两个环形链表，并将每个个环形链表的长度存入 其表头结点的数据域中，拆的规则是第一个环形链表包含原单向链表的第 1，3，5，...结点; 而第二个环形链表包含原单向链表的第 2，4，6，...结点。",
        "questionSubject": "数据机构",
        "knowledgeItem": "栈"
      },
      {
        "num": "6",
        "questionYear": "2020-06-06",
        "university": "复旦大学",
        "serialNum": "6",
        "questionContent": "简要介绍一下堆栈的原理与应用",
        "questionSubject": "数据机构",
        "knowledgeItem": "栈"
      }
    ]
  }
}

updateQuestion.json

{
  "code": 200,
  "msg": "更新试题成功",
  "obj": null
}

创建src-->config-->api-->sys-->question-->question.api.js，其代码如下：

import {fetch} from '../../base';

// 增加试题的数据
export const addQuestion = params => {
  return fetch('/question/addQuestion',params);
};

// 删除试题的数据
export const deleteQuestion = params => {
  return fetch('/question/deleteQuestion',params);
};

// 更新试题的数据
export const updateQuestion = params => {
  return fetch('/question/updateQuestion',params);
};

// 获取试题列表数据
export const queryQuestionList = params => {
  return fetch('/question/queryQuestionList',params);
};

修改mock.js文件，导入试题导入相关mock数据，代码如下

// 引入mockjs
const Mock = require('mockjs');
import userLogin from './json/user/user.login';
import userGetUserInfo from './json/user/user.getUserInfo';
import queryQuestionList from './json/question/queryQuestionList';
import addQuestion from './json/question/addQuestion';
import deleteQuestion from './json/question/deleteQuestion';
import updateQuestion from './json/question/updateQuestion';

Mock.mock('/user/login', 'post', userLogin);
Mock.mock('/user/getUserInfo', 'post', userGetUserInfo);

Mock.mock('/question/queryQuestionList', 'post', queryQuestionList);
Mock.mock('/question/deleteQuestion', 'post', deleteQuestion);
Mock.mock('/question/updateQuestion', 'post', updateQuestion);
Mock.mock('/question/addQuestion','post',addQuestion);

三、验证

启动前端项目cnpm run dev，访问http://127.0.0.1:8080/#/login页面，输入admin/123456登陆，点击左侧试题录入访问。试题录入页面有六条数据列表展示，点击删除，会弹出相应的对话框提示。页面的上面还有新增考题，下面还有分页导航栏，总体效果如图所示。

在这里插入图片描述