之前一直使用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. #pragma multi_compile_fwdbase会增加很多个shader variants

    #pragma multi_compile_fwdbase是unity内置的用于前向渲染的关键字快捷方式,它包含了前向渲染光照计算需要的大多数关键字,因此会被shader带来很多的变体. 下面这个简单 ...

  2. flume的安装部署

    系统环境:centos7.5  64位系统 1.下载安装包 官网下载离线安装包:apache-flume-1.8.0-bin.tar.gz 也可以使用linux命令下载: wget -c http:/ ...

  3. Linux之文件系统各种符号说明

    / 根目录 唯一必须挂载的目录.不要有任何的犹豫,选一个分区,挂载它!(在绝大多数情况下,有10G的容量应该是够用了.当然了,很多东西都是多多益善的) /boot 它包含了操作系统的内核和在启动系统过 ...

  4. ABBYY PDF Transformer+安装教程

    ABBYY PDF Transformer+是一个新的全功能PDF文档工具,涵盖整个文档生命周期所涉及的各项功能,包括创建.讨论.批准.保护.转换成可编辑格式的PDF文件.文件合并.文本和图像的提取等 ...

  5. Django 跨域问题

    当使用Django 做接口时,被html5 或者app访问时 存在跨域问题 导致无法请求到数据,具体解决办法如下: 跨域问题解决 安装pip install django-cors-headers修改 ...

  6. 利用Python半自动化生成Nessus报告

    0x01 前言 Nessus是一个功能强大而又易于使用的远程安全扫描器,Nessus对个人用户是免费的,只需要在官方网站上填邮箱,立马就能收到注册号了,对应商业用户是收费的.当然,个人用户是有16个I ...

  7. Java字符串连接的多种实现方法及效率对比

    JDK 1.8(Java 8)里新增String.join()方法用于字符串连接.本文基于<Java实现String.join()和效率比较>一文,分析和比较四种自定义实现与String. ...

  8. HTML5在手机端实现视频全屏展示

    最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能.测试了很久,终于找到解决办法. 第一种:将视频放大来控制. 视频在播放的时候,全屏是根据高度来的,如果设置视频 video 标签的宽度是 1 ...

  9. react recompose

    避免写嵌套 import { compose } from "recompose"; function Message(props) { const { classes } = p ...

  10. archlinux 下使用 aria2+uget 作为下载工具

    1.创建配置文件 sudo vim /etc/aria2/aria2.conf ## /etc/aria2/aria2.conf### '#'开头为注释内容, 选项都有相应的注释说明, 根据需要修改 ...