之前一直使用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. windows下JDK环境配置与Android SDK环境配置

    一.JDK环境配置1.配置变量名:JAVA_HOME变量值:jdk安装的绝对路径. 变量名:Path(在系统变量中找到并选中Path点击下面的编辑按钮,不要删除原本变量值中的任何一个字母,在这个变量值 ...

  2. Halcon中模板匹配方法的总结归纳

    基于组件的模板匹配: 应用场合:组件匹配是形状匹配的扩展,但不支持大小缩放匹配,一般用于多个对象(工件)定位的场合. 算法步骤: 1.获取组件模型里的初始控件 gen_initial_componen ...

  3. MySQL 5.7.14安装说明，解决服务无法启动

    http://jingyan.baidu.com/article/f54ae2fc0affca1e92b84999.html http://www.myexception.cn/mysql/51431 ...

  4. windows安装mongodb服务简洁版教程

    根据网上安装教程,简单总结如下: 1.去mongodb官网下载电脑系统对应版本的软件,比如我的是windows 64位的,就选择64位的,可能下载下来之后文件夹上面显示的是win32,这个不用理会: ...

  5. js和css实现手机横竖屏预览思路整理

    实现效果,如上图. 首先,实现手机页面在PC端预览, 则先在网上找到一个手机的背景图片,算好大概内间距,用来放预览的页面,我这里是给手机预览页面的尺寸按iphone5的尺寸来的: 一个手机页面在这里预 ...

  6. js复制文本内容到剪贴板

    记录一下使用clipboardData复制不成功. 1.定义一个按钮执行复制 <div> <button type="button" id="copyR ...

  7. Linux date 命令

    date命令用于打印或设置系统日期和时间,常见用法如下: [root@localhost ~]# date //查看当前时间 [root@localhost ~]# date +"%Y-%m ...

  8. Golang pprof详解

    go的pprof包 go中有pprof包来做代码的性能监控,在两个地方有包: net/http/pprof runtime/pprof 其实net/http/pprof中只是使用runtime/ppr ...

  9. CentOS7.X安装LMMP环境Nginx+PHP+Mysql详解

    前言: 作为PHP开发者,我们常用的线上环境就是LNMP,合理的搭建也是必须掌握的技能,下面就利用源码的方式详细介绍下LNMP环境Nginx+PHP+Mysql的详细搭建步骤: 版本说明: Nginx ...

  10. js设计模式（三）---代理模式

    代理模式: 代理模式是为一个对象提供一个代理用品或占位符,以便控制对他的访问. 实现: 在 Web开发中,图片预加载是一种常用的技术,如果直接给某个 img 标签节点设置 src 属性,由于图片过大或 ...