【无标题】

陌森/MockJshttps://gitee.com/Mosen10086/mock-jsmain.js

import Vue from 'vue'

import App from './App.vue'

import './mock/index.js'

Vue.config.productionTip = false

new Vue({

render: h => h(App),

}).$mount('#app')

APP.vue

<template>

  <div></div>

</template>

<script>

import axios from "axios";

export default {

  name: "MockDemo3App",

  data() {

    return {};

  },

  mounted() {

    // axios.get('api/get/news').then(res=>{

    //   console.log(res)

    // });

    // axios.post('api/post/news').then(res=>{

    //   console.log(res)

    // })

    this.getNewsList();

    this.add();

  },

  methods: {

    // 删除新闻

    remove(id) {

      // console.log(id);

      axios

        .post("/api/delete/news", {

          id,

        })

        .then((res) => {

          console.log(res);

        });

    },

    // 添加

    add() {

      axios

        .post("/api/add/news", {

          title: "吃午饭",

          content: "牛肉猪肉和鸡肉",

        })

        .then((res) => {

          console.log(res);

        });

    },

    // 获取新闻列表数据

    getNewsList() {

      axios

        .get("/api/get/news", {

          params: {

            pageindex: 8,

            pagesize: 10,

          },

        })

        .then((res) => {

          console.log(res.data.list);

        });

    },

  },

};

</script>

<style lang="scss" scoped></style>

index.js

import Mock from "mockjs";

var { newsList } = Mock.mock({

  "newsList|75": [

    {

      id: "@increment()",

      title: "@ctitle()",

      content: "@cparagraph(5,15)",

      img_url: "@image('300*250','#ff0000','#fff','png','坤坤')",

      add_time: "@date(yyyy-MM-dd HH:mm:ss)",

    },

  ],

});

var getQuery = (url, name) => {

  console.log(url, name);

  const index = url.indexOf("?");

  if (index !== -1) {

    const queryStrArr = url.substr(index + 1).split("&");

    for (var i = 0; i < queryStrArr.length; i++) {

      const itemArr = queryStrArr[i].split("=");

      console.log(itemArr);

      if (itemArr[0] === name) {

        return itemArr[1];

      }

    }

  }

  return null;

};

Mock.mock(/\/api\/get\/news/, "get", (options) => {

  // 获取传递参数pageindex，pagesize

  const pageindex = getQuery(options.url, "pageindex");

  const pagesize = getQuery(options.url, "pagesize");

  console.log(pageindex);

  console.log(pagesize);

  const start = (pageindex - 1) * pagesize;

  const end = pagesize * pageindex;

  const totalPage = Math.ceil(newsList.length / pagesize);

  //  pageindex:1 pagesize:10 返回0-9条数据  2-10-（10-19） 3-10（20-29）

  // 数据的起始位置：（pageindex-1）*pagesize 结束位置：pageindex*pagesize

  const list = pageindex > totalPage ? [] : newsList.slice(start, end);

  return {

    status: 200,

    message: "获取新闻列表成功",

    list: list,

    total: newsList.length,

  };

});

// 定义添加新闻列表的数据

Mock.mock("/api/add/news", "post", (options) => {

  const body = JSON.parse(options.body);

  console.log(body);

  newsList.push(

    Mock.mock({

      id: "@increment",

      title: body.title,

      content: body.content,

      img_url: "@image('50*50','#FF83FA','#FCFCFC','png','mono')",

      add_time: "@date(yyyy-MM-dd hh:mm:ss)",

    })

  );

  return {

    status: 200,

    message: "添加成功",

    list: newsList,

    total: newsList.length,

  };

});

// 定义删除新闻

Mock.mock("/api/delete/news", "post", (options) => {

  console.log(options);

  const body = JSON.parse(options.body);

  console.log(body);

  const index = newsList.findIndex((item) => {

    return item.id === body.id;

  });

  newsList.splice(index, 1);

  console.log(index);

  return {

    status: 200,

    message: "添加成功",

    list: newsList,

    total: newsList.length,

  };

});