Mock.js模拟数据精简教程（基于vue）

首页安装mockjs

npm install --save mockjs

创建mock目录，再创建index.js文件，在里面写路由接口'/news/index'

创建封装路由接口回调方法presc-record-api.js文件

然后，在页面上请求接口即可

效果图，页面的数据会随机生成

最后，如果大家有什么看不懂的，可以在下方留言，可以一起讨论~~

下面是对应的文件代码

// mock/index.js

/**
 * 定义本地测试接口，最好与正式接口一致，避免联调阶段修改工作量
 */
// 引入mockjs
import Mock from 'mockjs';
// 引入模板函数类
import record from './presc-record-api';

// Mock.setup({
//   timeout: 100, // 设置延迟响应，模拟向后端请求数据
// });

// 文章列表
Mock.mock('/news/index', 'get', record.produceNewsData(30));
// 文章详情
Mock.mock('/news/detail', 'post', record.newDateil);

// mock/presc-record-api.js

// 获取 mock.Random 对象
// 引入mockjs
import Mock, { Random } from 'mockjs';


// mock一组数据
const produceNewsData = function (num = 30) {
  let articles = [];
  for (let i = 0; i < num; i++) {
    let newArticleObject = Mock.mock({
      "new_id|1-1000": 100,
      "new_source|1": [
        "案例库"
      ],
      "new_type|1": [
        "民事",
        "刑事",
      ],
      "new_court|1": [
        "最高院",
        "湘潭市岳塘区人民检察院",
        "本溪市人民政府",
      ],
      news_title: Random.csentence(5, 30), //  Random.csentence( min, max )
      news_subhead: Random.csentence(30, 100),
      news_cover: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
      new_issuer: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
      create_date: Mock.mock('@datetime("yyyy-MM-dd HH:mm:ss")'), // 返回一下日期 "2017-01-14 PM 14:02:43"
      news_content: Random.csentence(500, 3000),
      news_regulations: Random.csentence(300, 600),
    })
    articles.push(newArticleObject)
  }

  return articles
}
// mock一组数据
const newDateil = function () {
  let newArticleObject = Mock.mock({
    "new_id|1-1000": 100,
    "new_source|1": [
      "案例库"
    ],
    "new_type|1": [
      "民事",
      "刑事",
    ],
    "new_status|1": [
      "程序终结"
    ],
    "new_court|1": [
      "最高院",
      "湘潭市岳塘区人民检察院",
      "本溪市人民政府",
    ],
    case_classify: [
      "民事案件",
      "行政案件",
      "刑事案件",
      "经济案件",
      "民事案件",
    ],
    news_title: '康得新行政处罚确定后或面临民事赔偿责任', //  Random.csentence( min, max )
    news_subhead: Random.csentence(30, 100),
    news_cover: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
    new_issuer: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
    create_date: Mock.mock('@datetime("yyyy-MM-dd HH:mm:ss")'), // 返回一下日期 "2017-01-14 PM 14:02:43"
    news_content: '<p><span class="bjh-p">康得新行政处罚确定后或面临民事赔偿责任 坚持顶格从重处罚证监会严惩违法违规行为</span></p><p><span class="bjh-p">近日，康得新因信披违法手段极其恶劣、违法情节特别严重，被证监会下达了行政处罚预先告知书。证监会有关部门负责人8日表示，康得新行政处罚确定后或将面临民事赔偿责任。上述负责人表示，目前证监会做出的行政处罚，只是追责体系的一个环节，证监会将发挥立体追责体系作用，加大对违法违规案件处罚力度。</span></p><p><span class="bjh-p"><span class="bjh-strong">释放从严监管信号</span></span></p><p><span class="bjh-p">证监会有关部门负责人8日表示，康得新违法情节十分恶劣，一是2015年至2018年连续四年净利润实际为负；二是存在100多亿元不实货币资金；三是根据交易所规定，康得新已触发退市条件，*ST康得已于7月8日停牌。待后续作出行政处罚后，若触及交易所重大违法退市规则，企业将依规进入退市整理期。</span></p><p><span class="bjh-p">值得一提的是，此次对康得新案的处理过程中，证监会对主要负责人强调顶格处罚，对其他责任人员给予从重处罚。分析人士指出，坚持顶格从重处罚释放出证监会从严监管信号。“从重处罚”是指行政机关在法定的处罚方式和处罚幅度内，对行政违法行为人在数种处罚方式中适用较严厉的处罚方式，或者在某一种处罚方式允许的幅度内适用较接近上限或上限的处罚，而适用上限的处罚就是“顶格处罚”。</span></p><p><span class="bjh-p">此外，上述负责人表示，对于康得新信息披露违法行为，投资者可以根据最终做出的行政处罚决定来追究上市公司虚假陈述的民事赔偿责任，行政处罚做出之后，当事人将进入资本市场诚信档案体系中，受到诚信体系制约和诚信惩戒。</span></p><p><span class="bjh-p">证监会表示，下一步，将充分听取当事人的陈述申辩意见，以事实为依据、以法律为准绳，依法进行处罚；对涉嫌犯罪的，严格按照有关规定移送司法机关追究刑事责任。</span></p><p><span class="bjh-p"><span class="bjh-strong">发挥立体追责体系作用</span></span></p><p><span class="bjh-p">上市公司乱象屡禁不止的主要原因之一是违法违规成本过低。对此，证监会有关部门负责人提出，对案情严重的案件，监管层后续还会发挥立体追责体系作用。</span></p><p><span class="bjh-p">上述负责人指出，在对证券违法违规案件的追责过程中，行政处罚只是行政追责体系中的一环，如果涉及到刑事责任，还要加入刑事追责。对于违法违规责任的理解，应放在立体多层面理解，包括行政处罚追究、刑事追究、民事追究、诚信体系追究。</span></p><p><span class="bjh-p">证监会有关部门负责人指出，要用足用好现有规则严惩违法违规公司。一方面要用好现有制度，做到违法违规行为的“三及时”，及时发现、及时制止、及时查处；另一方面，最高法出台司法意见为科创板改革护航，明确科创板虚假陈述、欺诈发行法律责任，强化违法违规者民事赔偿责任，提供了执法依据。证监会将在现有制度下，严肃认真惩处资本市场违法违规行为。</span></p><p><span class="bjh-p">与此同时，中介机构将进入从严监管新阶段。证监会多次强调，绝不姑息中介机构与上市公司相关主体串通违规。其中，对于中介机构围绕上市公司开展证券业务未勤勉尽责的，证监会坚持一案双查，违法上市公司与不良中介一起处罚，严格处罚，绝不姑息，倒逼中介机构诚实守信，勤勉尽责，发挥好资本市场“看门人”作用。</span></p><p><span class="bjh-p">此外，备受关注的是，目前，提高资本市场违法违规成本已形成共识并提上改革日程。证券法修订稿草案三审稿增加了加大对证券违法行为打击力度的相关内容。此外，公司法、刑法等修改也在推进中。</span></p><p><span class="bjh-p">针对康得新案，证监会重申，上市公司及大股东必须讲真话，做真账，及时讲话，牢牢守住“四条底线”，不披露虚假信息，不从事内幕交易，不操纵股票价格，不损害上市公司利益。证监会将一如既往对上市公司信息披露违法行为依法严惩，净化市场生态，努力提升上市公司质量，服务实体经济发展，为打造一个规范、透明、开放、有活力、有韧性的资本市场保驾护航。</span></p>',
    case_list: produceNewsData(8)
  })

  return newArticleObject
}


export default {
  produceNewsData,
  newDateil
}