立刻开始

本指南默认你的系统已经安装最新版本的 Node.js 和 npm。接下来,我们从零开始创建一个基于 lime 的项目

创建项目

创建一个项目目录

  # 创建一个项目目录 lime-demo
  mkdir lime-demo
  cd lime-demo
  # 初始化 package.json
  npm init -y
  # 安装 lime.js 核心作为项目依赖
  npm install @limejs/core --save

创建规范的目录结构

  # 创建一系列目录和文件
  mkdir -p config plugin mvc/controller mvc/view mvc/model
  touch mvc/router.js mvc/controller/home.js
  touch app.js

  # 此时 目录结构如下所示
  |-config # 站点配置
    |-common.js
    |-dev.js
    |-test.js
    |-prod.js
  |-plugin # 站点插件
    |-index.js
  |-src
    |-controller
      |-home.js # 一个叫做 Home首页 的 控制器
    |-view
      |-home.hbs
    |-model
    |-router.js # 站点路由
  |-app.js # 站点应用入口
  |-package.json

事实上,目前 lime 要求你 必须 使用这样的目录结构,而不是 可以; (尽管可以在实例化 LIME 的时候修改,但我们并不推荐这样做)。

编写代码

编写配置代码

// common.js
module.exports = {
    // 由于我们暂时不需要配置,所以导出为空对象即可
}

编写路由和控制器代码

  // router.js 中定义路由
  module.exports = (router) => {
    router.get('/', 'home@index')
  }

  // home.js 中定义index首页请求的逻辑
  module.exports = {
    async index() {
      this.ctx.body = 'hello lime' // 通过 this.ctx 可以访问到 Koa 上下文对象
    }
  }

  // app.js 中引入 lime 框架内核并启动
  const Lime = require('@limejs/core')
  const app = new Lime()
  app.listen()

控制器代码中的 index 函数叫做控制器的 action,它本质上是一个完全意义上的 Koa 中间件函数,该函数所传入的 ctx 和 next 参数分别表示 Koa 的 ctx 上下文对象以及下一个中间件函数。

启动应用

安装一个跨平台的环境变量设置工具:

npm install cross-env --save-dev

然后我们在 package.json 中编写一段 npm 启动脚本:

  "scripts": {
    "dev": "cross-env NODE_ENV=development node app.js", // 这个表示把NODE_ENV环境变量设置为development,并启动app.js
    "start": "corss-env NODE_ENV=production node app.js" // 这个表示把NODE_ENV环境变量设置为production,并启动app.js
  }

然后命令行执行

npm run dev

启动后,命令行会提示监听的端口号。如果一切顺利,此时打开浏览器访问 http://localhost:3000 便可以看到

hello lime! # 看到它 说明已经运行成功

渲染视图

刚刚,我们通过 ctx.body 把一串纯文本响应给的浏览器,但有时我们需要在服务端渲染 html 视图。对lime来说,一切皆插件,包括渲染视图在内。因此你需要首先安装一下官方提供的 view 插件

npm install @limejs/plugin-view --save

然后在插件定义中声明要使用view视图插件:

module.exports = function(config) {
    return [
        '@limejs/plugin-view'
    ]
}

接下来,我们编写视图代码: 我们在 view 目录下创建一个 home.hbs 的文件,并编写 handlebar 模板:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>{{title}}</h1>
</body>
</html>

然后在 controller 中,我们把刚才的 ctx.body 代码修改为:

const HomeController = {
    async index(ctx, next) {
        this.render('home', {title: 'hello lime view'})
    }
}
module.exports = HomeController

命令行重新启动应用,就可以看到浏览器返回了服务端渲染好的 html 结构。视图渲染基于 koa-views 实现。

总结

我们通过一顿简单的操作,就编写了一个 router 和 controller 并实现了 view 视图渲染。但前文也说了,在实际项目开发的时候,还是推荐你使用我们打造的官方项目模板,模板中提供了更易用的工具来方便开发和调试,并针对特定的使用场景添加了特定的插件扩展。

Last Updated: 4/5/2019, 1:02:48 PM