从零开始做Vue前端架构（4）

xuweijian 发布于2019-06-24 17:58 / 2088人阅读

摘要：前言上一篇我们遇到少年，是不是忘了的警告，这一篇我们就来解决这个问题。总结通过实现前后端分离，并且使用来更方便的模拟数据。下一篇，我们创建发布环境下的配置文件，并且看看怎么优化产出的代码的从零开始做前端架构项目完整代码前端架构子咻

前言

上一篇我们遇到"少年，是不是忘了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 子咻

私有云混合云从零开始搭建前端数据监控系统从零开始 linux从零开始 python从零开始

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/11837.html

从零开始做Vue前端架构（3）

摘要：前言这一篇，我们将接着上篇来完成创建项目文件目录架构。总结这篇主要是文件和目录架构的东西，读者务必运行一下完整的项目。因此，下一篇，我们将通过实现本地数据接口模拟从零开始做前端架构项目完整代码前端架构子咻前言这一篇，我们将接着上篇来完成创建项目文件、目录架构。回顾先回顾一下现在项目有哪些东西了： . ├── app │ ├── app.vue │ ├── common ...

dinfer 2019-06-24 17:56 评论0 收藏0
从零开始做Vue前端架构（1）

摘要：前言想想也已经做过不少架构的项目了，有基于，基于，基于，基于的。好了，介绍完毕，接下来，我就从零开始，一步一步建起前后端完全分离的前端架构了。前言想想也已经做过不少架构的项目了，有基于vue，基于react，基于thinkPHP，基于laravel的。做多了，也就对现有的架构有各种想法，有好的，有坏的，总之，用起来还是不爽。vue-cli虽然可以很快地构建并使用，尤其是vue-c...

frolc 2019-06-24 17:56 评论0 收藏0
从零开始做Vue前端架构（2）

摘要：前言这一篇，我们将接着上篇来完成配置。开发一配置我们采用的方式来创建。对了，前提我们需要全局安装。三配置创建文件，上配置配置总结这篇不多，就做了三件事，。下一篇我们将创建项目文件目录架构从零开始做前端架构项目完整代码前端架构子咻前言这一篇，我们将接着上篇来完成配置eslint、babel、postcss。开发一、配置eslint 我们采用eslint --init的方式来创建e...

Brenner 2019-08-26 11:34 评论0 收藏0
从零开始做Vue前端架构（2）

摘要：前言这一篇，我们将接着上篇来完成配置。开发一配置我们采用的方式来创建。对了，前提我们需要全局安装。三配置创建文件，上配置配置总结这篇不多，就做了三件事，。下一篇我们将创建项目文件目录架构从零开始做前端架构项目完整代码前端架构子咻前言这一篇，我们将接着上篇来完成配置eslint、babel、postcss。开发一、配置eslint 我们采用eslint --init的方式来创建e...

YanceyOfficial 2019-06-24 17:56 评论0 收藏0
从零开始做Vue前端架构（9）

摘要：那该怎么管理这两个不同的项目呢解决子模块用的的同学肯定一下子就想到子模块的知识了。最后，也希望有想法的同学还有大佬多多留言，给点建议原文地址从零开始做前端架构脚手架参考资料官方文档使用定制前端脚手架别人写的脚手架文件操作相关文档子模块前言相信很多人都用过vue-cli或create-react-app或者类似的脚手架。脚手架方便我们复制，粘贴，或者clone代码库，而且还可以更具用...

Vicky 2019-06-24 18:01 评论0 收藏0