脚本宝典收集整理的这篇文章主要介绍了

从零开始做Vue前端架构(4)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

前言

上一篇我们遇到'少年,是不是忘了npm run mock?'的警告,这一篇我们就来解决这个问题。

开发

一、安装包

安装koa和一系列的包(我们用的是koa v2):

koa
koa-bodyparser
koa-router
boom
nodemon
mockjs

解释说明一下(知道的同学可以忽略):

名称 作用
koa 我们都知道Node.js有HTTP模块,来处理HTTP请求,koa基于Node做了很多方便的接口让我们更顺畅地处理HTTP,比如,接收、解析、响应。
koa-router 方便的路由方式获取get/post、以及参数
koa-bodyparser koa插件之一,方便解析get/post的参数
boom 友好的HTTP错误对象
nodemon 为了在启动koa服务以后,修改了koa相关的node代码会自动重载更新,无需手动关闭再重启
mockjs 模拟数据用

二、创建目录和文件

结构:

mock
├── home // 和views文件夹对应
│   └── hello.js // home页面需要的hello模拟数据
├── public // 公共的接口模拟数据
└── server.js // node代码

先上一盘server.js代码:

const Koa = require('koa')
// 使用router
const Router = require('koa-router')
const Boom = require('boom')
const bodyParser = require('koa-bodyparser')
const app = new Koa()
const router = new Router()
// https://github.com/alexmingoia/koa-router
app.use(router.routes())
app.use(router.allowedMethods({
  throw: true,
  notImplemented: () => new Boom.notImplemented(),
  methodNotAllowed: () => new Boom.methodNotAllowed()
}))
// 使用bodyparser 解析get,post的参数
app.use(bodyParser())

// 模拟数据返回

/* 首页 */

// 获取hello数据
const helloData = require('./home/hello.js')
router.get('/api/home/hello', async(ctx, next) => {
  ctx.body = helloData
  await next()
})

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

// 注意:这里的端口要和webpack里devServer的端口对应
app.listen(7777)

再来一盘hello.js代码:

// 引入mockjs来模拟数据
// https://github.com/nuysoft/Mock/wiki/Getting-Started
const Mock = require('mockjs')
const data = Mock.mock({
  'list|1-10': [{
    'id|+1': 1
  }]
})
const img = Mock.Random.image('200x100')

module.exports = {
  msg: 'mock hello api works',
  data: data,
  imgUrl: img
}

在package.json里scripts里加上:
"mock": "nodemon ./mock/server.js"

这样的话,我们只需要npm run mock就启动了本地的模拟数据接口功能了。

回到之前我们下的完整项目,先启动mock,然后npm run dev,我们就可以发现报错不见啦。

总结

通过koa v2实现前后端分离,并且使用mockjs来更方便的模拟数据。

下一篇,我们创建发布环境下的webpack配置文件,并且看看怎么优化产出的代码的 - 从零开始做Vue前端架构(5)

项目完整代码

Vue前端架构-by 子咻

总结

以上是脚本宝典为你收集整理的

从零开始做Vue前端架构(4)

全部内容,希望文章能够帮你解决

从零开始做Vue前端架构(4)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过