vue+axios+mockJS模拟新闻列表正删改查

一、下载依赖

1、项目有axios

//这里建议项目局部就好
npm install axios --save 

2、项目有mock

//这里建议项目局部就好
npm install mock --save 

3、项目有element ui

//这里建议项目局部就好
npm i element-ui --save

二、项目结构

这个项目主要由：app.vue和main.js和compents目录下的helloword.vue以及需要用上的mock文件目录下的index.js

这个是主要的项目结构

app.vue文件内容

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
  import axios from 'axios';
  import HelloWorld from './components/HelloWorld.vue'

  export default {
    name: 'App',
    components: {
      HelloWorld
    },
    created () {
    //这个是请求的数据地址
      axios.get('/api/news').then(res=>{
        console.log(res);
      })
    }
  }
</script>

<style>
  /* @import "assets/css/base.css"; */
</style>

main.js文件内容

import Vue from 'vue'
import App from './App.vue'

import './mock/index'

// 引入element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

mock文件夹下的index.js文件内容

import Mock from 'mockjs'

const { newsList } = Mock.mock({
    'newsList|50-90': [
        {
            "id": '@increment()',
            "title": "@ctitle()",
            "content": "@cparagraph(5,15)",
            "img_url": "@image('100x100','#FF83FA','#FCFCFC','png','xixi')",
            "add_time": "@date(yyyy-MM-dd hh:mm:ss)"
        }
    ]
})

// 根据url获取query参数
const getQuery = (url, name) => {
    const index = url.indexOf('?')
    if (index !== -1) {
        // split用于分割
        const queryStrArr = url.substr(index + 1).split('&')
        for (let i = 0; i < queryStrArr.length; i++) {
            // split用于分割
            const itemArr = queryStrArr[i].split('=')
            if (itemArr[0] === name) {
                return itemArr[1]
            }
        }
    }
    return null

}

// 定义获取新闻列表的数据 /api/get/news?pageindex=1&pagesize=10
Mock.mock(/\/api\/get\/news/, 'get', (options) => { //使用函数是因为需要用函数的形参接收参数  请求地址可以使用正则
    // 获取传递的参数
    const pageindex = getQuery(options.url, 'pageindex')
    const pagesize = getQuery(options.url, 'pagesize')
    // 截取数据的起始位置
    const start = (pageindex - 1) * pagesize
    const end = pageindex * pagesize  // 不用减一是因为slice方法
    // 计算总页数
    const totalPage = Math.ceil(newsList.length / pagesize)
    // 页数
    // 第一页 返回数据0-9
    // 第二页 返回数据10-19
    // 第三页 返回数据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)
    // unshift：在数组前面添加一个数据
    newsList.unshift(Mock.mock({
        "id": '@increment()',
        "title": body.title,
        "content": body.content,
        "img_url": "@image('100x100','#FF83FA','#FCFCFC','png','xixi')",
        "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) => {
    const body = JSON.parse(options.body)
    const index = newsList.findIndex(item => item.id === body.id)
    newsList.splice(index, 1)
    return {
        status: 200,
        message: '删除成功',
        list: newsList,
        total: newsList.length
    }
})

components文件夹下的HelloWorld.vue文件内容

<template>
  <div class="hello">
    <h3>新闻列表</h3>
    <el-form ref="form" :model="form" label-width="120px" class="form">
      <el-form-item label="请输入标题">
        <el-input v-model="form.title" size="mini"></el-input>
      </el-form-item>
      <el-form-item label="请输入内容">
        <el-input v-model="form.content" size="mini"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" border max-height="350">
      <el-table-column prop="img_url" label="图片" width="130">
        <template slot-scope="scope">
          <img :src="scope.row.img_url" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="标题" width="120"> </el-table-column>
      <el-table-column prop="content" label="内容"> </el-table-column>
      <el-table-column prop="add_time" label="时间" width="150"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="{row}">
          <el-button @click.native.prevent="deleteRow(row.id)" type="text" size="small"> 移除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row class="row">
      <el-button type="primary" @click="prevPage" size="mini">上一页</el-button>
      <el-button type="primary" @click="nextPage" size="mini">下一页</el-button>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  created(){
    this.getNewsList()
  },
  methods:{

    deleteRow(id) {
      // rows.splice(index, 1);
      axios.post('/api/delete/news',{
        id:id
      }).then(res=>{
        console.log(res)
      })
    },
    onSubmit() {
      axios.post('/api/add/news',{
        title:this.form.title,
        content:this.form.content
      }).then(res=>{
        console.log(res)
      })
    },
    // 获取新闻列表数据
    getNewsList(){
      axios.get('/api/get/news',{
        params:{
          pageindex:this.pageindex,
          pagesize:10
        }
      }).then(res=>{
        if(res.data.status == '200'){
          this.tableData = res.data.list
        }
      })
    },
    prevPage(){
      this.pageindex--
      this.getNewsList()
    },
    nextPage(){
      this.pageindex++
      this.getNewsList()
    }
  },
  data() {
      return {
        form:{
          title:'',
          content:''
        },
        img_url:'',
        tableData: [],
        pageindex:1,
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.form{
  margin: 20px 0;
  display: flex;
  justify-content: space-evenly;
}
.row{
  margin-top: 10px;
}
</style>

以上便是关于vue中如何使用mockjs模拟数据进行开发的内容了