2017年11月聚合文章--vue+koa2+mockjs模拟数据

首先说一下这是本人第一次分享东西第一次写，写的不好或者有错误的请大家多包涵支出错误共同进步加粗文字
第一步安装vue-cli项目不多说网上一大把
第二步因为本地的vue访问本地的mock

1、配置vue代理
    在config/index.js里面的proxyTable，因为本地node启动的服务默认访问的是3000端口
    所以在target里面配置http://localhost:3000/
    proxyTable: {
    '/api': {
    target: 'http://localhost:3000/',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/'
    }
  }
 2、在vue项目的mianjs中
     import axios from 'axios'
     axios.defaults.baseURL = '/api'

第三步搭建nodejs的koa2项目

全局安装koa，不是koa2注意
1、npm install -g koa-generator
    创建文件夹下面HelloKoa2是你的项目名字
2、koa2 HelloKoa2
    进入该文件夹然后执行安装依赖
3、cd HelloKoa2然后npm install
上面完成了nodejs的初始化接着操作
4、继续安装依赖文件
    npm install mockjs --save -dev //mock文件
    npm install koa2-cors --save -dev //node端配置cors支持跨域用
5、配置app.js文件 注意下面注释的新增部分就是在本来app.js文件上面新增的东西

    const Koa = require('koa')
    const app = new Koa()
    const views = require('koa-views')
    const json = require('koa-json')
    const onerror = require('koa-onerror')
    const bodyparser = require('koa-bodyparser')
    const logger = require('koa-logger')
    const cors = require('koa2-cors') // 新增部分处理跨域

    //这里提一点题外话 假如routes文件新增一个路径就的在下面增加路劲
    //假设routes新增一个user.js
    //新增一个user需要修改两个地方这里是一个 下面还有一个地方
    //这里需要 const user = require('./routes/user')
    const index = require('./routes/index')
    const users = require('./routes/users')

    // error handler
    onerror(app)

    // middlewares
    app.use(bodyparser({
      enableTypes:['json', 'form', 'text']
    }))
    app.use(cors())    // 新增部分处理跨域
    app.use(json())
    app.use(logger())
    app.use(require('koa-static')(__dirname + '/public'))

    app.use(views(__dirname + '/views', {
      extension: 'pug'
    }))

    // logger
    app.use(async (ctx, next) => {
      const start = new Date()
      await next()
      const ms = new Date() - start
      console.log(`${ctx.method} ${ctx.url} - ${ms}ms`)
    })

    //这里提一点题外话 假如routes文件新增一个路径就的在下面增加路劲
    //假设routes新增一个user.js
    //这里需要 app.use(user.routes(), user.allowedMethods())
    app.use(index.routes(), index.allowedMethods())
    app.use(users.routes(), users.allowedMethods())

    // error-handling
    app.on('error', (err, ctx) => {
      console.error('server error', err, ctx)
    });

    module.exports = app
6、正式使用mock 我这里直接在routes/index.js里面使用

    routes/index.js文件如下

        const router = require('koa-router')()
        var Mock = require('mockjs')    //引入mockjs
        const Random = Mock.Random;        //引入mockjs生成随机属性的函数 random具体可以生成
                                        //哪些东西详见http://mockjs.com/examples.html
        router.prefix('/index')

        router.get('/string', async (ctx, next) => {
            //116到125 是mock的第一种使用方法，这种方法随机生成1到10个数组但是每个数组的author、title等都一样
          // ctx.body = await Mock.mock({
          //   // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
          //   'arr|1-10': [{
          //     // 属性 id 是一个自增数，起始值为 1，每次增 1
          //     'id|+1': 1,
          //     'author|+1': Random.cname(),
          //     'img': Random.image('100x100'),
          //     'title':Random.csentence(5, 9) 
          //   }]
          // })   
          //127到141是mock的第二种方法主要使用Random函数来生成 这里生成的title、author等每个都不一样
          const produceNewsData = function() {
                let articles = [];
                for (let i = 0; i < 50; i++) {
                    let newArticleObject = {
                        title: Random.csentence(5, 30), //  Random.csentence( min, max )
                        author: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
                    }
                    articles.push(newArticleObject)
                }

                return {
                    articles: articles
                }
            }
            ctx.body = await  produceNewsData()
        })
        这里提一点 http://mockjs.com/examples.html 官网 看清楚每种数据的用法
7、启动node
    npm run dev

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。

[聚合文章] vue+koa2+mockjs模拟数据