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

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

小景哥哥博客

一、试题录入的布局

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

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

我们采用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登陆，点击左侧试题录入访问。试题录入页面有六条数据列表展示，点击删除，会弹出相应的对话框提示。页面的上面还有新增考题，下面还有分页导航栏，总体效果如图所示。