之前一直使用koa, 刚刚接触egg， 做了一些入门的笔记

准备工作

1  首先安装脚手架,，并创建项目。

 $ npm i egg-init -g

 $ egg-init egg-demo --type=simple

 $ cd egg-demo

 $ npm i   // 也可以使用yarn

2 . 启动项目

 $ npm run dev

浏览器打开http://127.0.0.1:7001/即可进入默认的首页。

3 . 项目目录

　　　1 ) /app   ----------- 主要工作目录

　　　　　　/controller   ------------- 控制器，比如获取service的数据和渲染view的模板

　　　　　　/extend 　  ------------- 方法扩展，比如封装时间格式化方法

　　　　　　/middleware  ----------- 中间件，比如登录权限设置

　　　　　　/public　　　------------ 静态文件目录，比如css,  js, image

　　　　　　/service        ------------- 服务，操作数据库增删改查等

　　　　　　/view　　　  ------------- 模板目录，存放模板文件，如ejs, jade, pug, nunjucks等

　　　　　　-router.js　　 ------------- 路由文件

　　　  2 ) /config ---------- 主要配置目录

　　　　　   -config.default.js　 ------------ 配置文件,

　　　　　　-plugin.js　　　　  ----------- 配置插件, 如开启模板引擎

开发阶段

1 . 新建路由

　# app/router.js

 module.exports = app => {

   const { router, controller } = app;

   router.get('/', controller.home.index);  // 脚手架默认路由

   router.get('/user', controller.user.index)   // 新建路由

 };

访问路径 http://127.0.0.1:7001/user时会指向controller.user.index控制器

controller是app应用的一个属性对象，直接指向controller目录，上面的controller.user.index表示，指向app/controller/user.js的index方法

2 . 新建控制器

# app/controller/user.js

 /* egg内置控制器 */

 const Controller = require('egg').Controller;

 /*声明控制器类，并继承与Controller */

 class UserController extends Controller {

   /*声明异步方法*/

   async index() {

     /*ctx与koa中的一样，表示整个应用的上下文环境*/

     const ctx = this.ctx;

     ctx.body = '用户列表'

   }

 }

 module.exports = UserController;

3 . 新建服务

# app/service/user.js

 const Service = require('egg').Service;

 class UserService extends Service {

   async findAll() {

     /*这里暂时未从数据库获取数据，而是使用了静态数据填充*/

     const users = [

       {id: 1, name: '兰陵王'},

       {id: 2, name: '程咬金'},

       {id: 3, name: '诸葛亮'},

     ]

     return users;

   }

 }

 module.exports = UserService;

5. 修改控制器（获取service中的数据, 并渲染到view的模板中）

　　# app/controller/user.js

 const Controller = require('egg').Controller;

 class UserController extends Controller {

   async index() {

     const ctx = this.ctx;

     // ctx.body = '用户列表'

     const title = '用户列表';

     const users = await ctx.service.user.findAll();

     await ctx.render('user/index.ejs', {users: users, title})

   }

 }

 module.exports = UserController;

这里使用async..await作为异步获取，可以参考ES6教程，意思是users获取成功了，才会执行下一步。

使用ctx.render()渲染ejs模板， 并带有参数传递。

4 . 新建模板

　　# app/view/user/index.ejs

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport"

           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

 <h2><%= title %></h2>

 <ul>

     <% users.forEach(function (item) { %>

         <li><%= item.name %></li>

     <% }) %>

 </ul>

 </body>

 </html>

此时重启服务访问 http://127.0.0.1:7001/user会报错，原因是还没配置模板引擎。

5 . 安装并配置模板引擎

 $ yarn add egg-view-ejs

 $ yarn add egg-view

# config/plugin.js

 module.exports = {

   // had enabled by egg

   static: {

     enable: true,

   },

   // 开启ejs模板插件

   ejs: {

     enable: true,

     package: 'egg-view-ejs',

   }

 };

 // 简化形式 exports.key = value

 // exports.ejs = {

 //   enable: true,

 //   package: 'egg-view-ejs'

 // }

 // 函数形式

 // module.exports = () => {

 //   return {

 //     ejs: {

 //

 //     }

 //   }

 // }

# config/config.default.js

 module.exports = appInfo => {

   /*其他代码*/

   config.view = {

     // 设置ejs为默认的模板引擎

     defaultViewEngine: '.ejs',

     mapping: {

       '.ejs': 'ejs'

     }

   };

   /*其他代码*/

 }

最后，重启服务器，并访问http://127.0.0.1:7001/user

结束：

该入门还未连接数据库，如mongodb, mysql

egg.js基础入门的更多相关文章

  1. JS基础入门篇（三十五）—面向对象（二）

    如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)

  2. JS基础入门篇（二十七）—BOM

    虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...

  3. Nuxt.js 基础入门教程

    原文链接 Vue 开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是 SEO 极不友好.除非,vue 能在服务端渲染(ssr)并直接返回已经渲染好的页面,而并非只 ...

  4. JS基础入门篇（六）— 数据类型

    1.数据类型 数据类型:我感觉就是对数据的种类进行分类.就好比把人分为儿童,青少年,中年,老年一样. 基础数据类型: Number(数字),String(字符串),Null(空),Undefined( ...

  5. Underscore.js基础入门

    公司产品集成了对Underscore.js,所以需要对这个库有一定的了解.通过查阅资料,发现这个库主是对Array和JSON的处理支持.通过Underscore.js库,可以方便的对Array和JSO ...

  6. gulp.js基础入门

    安装 Node 去 nodejs.org 根据系统选择性按照教程安装Node. 创建项目 创建项目文件夹 进入项目文件夹 初始化项目 使用npm命令:npm init,根据提示完成. 安装 Gulp ...

  7. JS 基础 入门

    JS做弹窗效果 //单行注释/*多行注释*/// 网页 标签语言    js语言是脚本语言/* 数据类型: 容器 1.整型  (int)  2.小数类型: float: 单精度的小数: double: ...

  8. JS基础——入门必备

    ·首先,来简单的说一下,JS是啥,JS是JavaScript的简写,是 基于浏览器的 基于对象的 事件驱动 脚本语言 ·那么JS有什么用呢?ta可以实现: 表单验证 添加动画效果 动态更改页面内容 A ...

  9. React.js基础入门

    本文主要是针对React的一些demo教程.参考了菜鸟教程中的react教程,做了一些总结.Demo的下载链接是 https://github.com/RealAndMe/react-demo 下面要 ...

随机推荐

  1. Java编程的逻辑 (93) - 函数式数据处理 (下)

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  2. python faker 生成随机类型字符串

    以前生成测试字符时,用random模块拼来拼去来生成随机串,如姓名,手机,身份证等,还是费一些功夫,不过有了faker模块,一切变得简单起来 基本使用: from faker import Faker ...

  3. VMware ESXI添加第三方网卡驱动

    VMware ESXI有两种方法添加第三方网卡驱动: 1.使用第三方工具 ESXI-Customizer.cmd工具可以将已经下载好的VMware ESXI.ISO镜像文件把下载好的驱动添加到里面,缺 ...

  4. Spring-Cloud-Ribbon学习笔记（二）：自定义负载均衡规则

    Ribbon自定义负载均衡策略有两种方式,一是JavaConfig,一是通过配置文件(yml或properties文件). 需求 假设我有包含A和B服务在内的多个微服务,它们均注册在一个Eureka上 ...

  5. Linux下Qt Creator编辑器无法输入中文解决

    Ubuntu安装了搜狗输入法,在浏览器中可以使用,但是在Qt Creator中却无法输入中文. 解决办法: 执行sudo apt-get install fcitx-libs-qt5 该命令将库文件l ...

  6. 自己动手实现RPC

    一.需求:用户管理系统(UMS),仓库管理系统(WMS),订单管理系统(OMS) 现在OMS有一张订单表:[订单id,用户id,商品id,订单状态,订单时间],需要在客户端展示此订单对应的用户详情和商 ...

  7. Ionic异常及解决

    1. 编译时提示: ERROR: In <declare-styleable> FontFamilyFont, unable to find attribute android:fontV ...

  8. iOS - 数组字典模型根据模型属性key排序

    方法一: NSArray *sortArray = [arrayM sortedArrayUsingComparator:^NSComparisonResult(id obj1, id obj2) { ...

  9. GO语言-基础语法：循环

    golang只有for没有while package main import ( "fmt" "os" "bufio" ) func for ...

  10. gitlab+jenkins+tomcat CI/CD 部署

    整个项目的框架为: gitlab的安装与使用(Centos7) gitlab的安装 新建yum源 vim /etc/yum.repos.d/gitlab-ce.repo [gitlab-ce] nam ...