基于阿里egg框架搭建博客

# 什么是egg.js
简单来讲就是一个基于nodejs与koa的***WEB***框架。
> 官方介绍：https://eggjs.org/zh-cn/intro/index.html

# 环境准备
1.  安装nodejs环境，下载地址：https://nodejs.org/en/download/
2. 安装脚手架，在此基础上开发，具体执行以下命令：
```
$ npm i egg-init -g
$ egg-init egg-blog --type=simple
$ cd egg-blog
$ npm i
```

## 非脚手架（初学者推荐）
如果是初学者，建议自己创建所有的目录，以熟悉Egg官方所约定的规则。
>官方demo：https://eggjs.org/zh-cn/intro/quickstart.html#%E9%80%90%E6%AD%A5%E6%90%AD%E5%BB%BA

## 脚手架
>Egg 奉行『**约定优于配置**』，按照[一套统一的约定](https://eggjs.org/zh-cn/advanced/loader.html)进行应用开发，团队内部采用这种方式可以减少开发人员的学习成本，开发人员不再是『钉子』，可以流动起来。没有约定的团队，沟通成本是非常高的，比如有人会按目录分栈而其他人按目录分功能，开发者认知不一致很容易犯错。

如Egg官方所言，脚手架是对应用目录做了一个规范的示范，我们在此基础上开发能省下不少功夫。
执行完上述命令之后，我们可以看到如下的目录结构：

```
egg-project
├── package.json
├── app.js (可选)
├── agent.js (可选)
├── app
|   ├── router.js
│   ├── controller
│   |   └── home.js
│   ├── service (可选)
│   |   └── user.js
│   ├── middleware (可选)
│   |   └── response_time.js
│   ├── schedule (可选)
│   |   └── my_task.js
│   ├── public (可选)
│   |   └── reset.css
│   ├── view (可选)
│   |   └── home.tpl
│   └── extend (可选)
│       ├── helper.js (可选)
│       ├── request.js (可选)
│       ├── response.js (可选)
│       ├── context.js (可选)
│       ├── application.js (可选)
│       └── agent.js (可选)
├── config
|   ├── plugin.js
|   ├── config.default.js
│   ├── config.prod.js
|   ├── config.test.js (可选)
|   ├── config.local.js (可选)
|   └── config.unittest.js (可选)
└── test
    ├── middleware
    |   └── response_time.test.js
    └── controller
        └── home.test.js
```
如上，由框架约定的目录：

-   `app/router.js` 用于配置 URL 路由规则，具体参见 [Router](https://eggjs.org/zh-cn/basics/router.html)。
-   `app/controller/**` 用于解析用户的输入，处理后返回相应的结果，具体参见 [Controller](https://eggjs.org/zh-cn/basics/controller.html)。
-   `app/service/**` 用于编写业务逻辑层，可选，建议使用，具体参见 [Service](https://eggjs.org/zh-cn/basics/service.html)。
-   `app/middleware/**` 用于编写中间件，可选，具体参见 [Middleware](https://eggjs.org/zh-cn/basics/middleware.html)。
-   `app/public/**` 用于放置静态资源，可选，具体参见内置插件 [egg-static](https://github.com/eggjs/egg-static)。
-   `app/extend/**` 用于框架的扩展，可选，具体参见[框架扩展](https://eggjs.org/zh-cn/basics/extend.html)。
-   `config/config.{env}.js` 用于编写配置文件，具体参见[配置](https://eggjs.org/zh-cn/basics/config.html)。
-   `config/plugin.js` 用于配置需要加载的插件，具体参见[插件](https://eggjs.org/zh-cn/basics/plugin.html)。
-   `test/**` 用于单元测试，具体参见[单元测试](https://eggjs.org/zh-cn/core/unittest.html)。
-   `app.js` 和 `agent.js` 用于自定义启动时的初始化工作，可选，具体参见[启动自定义](https://eggjs.org/zh-cn/basics/app-start.html)。关于`agent.js`的作用参见[Agent机制](https://eggjs.org/zh-cn/core/cluster-and-ipc.html#agent-%E6%9C%BA%E5%88%B6)。

由内置插件约定的目录：

*   `app/public/**` 用于放置静态资源，可选，具体参见内置插件 [egg-static](https://github.com/eggjs/egg-static)。
*   `app/schedule/**` 用于定时任务，可选，具体参见[定时任务](https://eggjs.org/zh-cn/basics/schedule.html)。

**若需自定义自己的目录规范，参见 [Loader API](https://eggjs.org/zh-cn/advanced/loader.html)**

*   `app/view/**` 用于放置模板文件，可选，由模板插件约定，具体参见[模板渲染](https://eggjs.org/zh-cn/core/view.html)。
*   `app/model/**` 用于放置领域模型，可选，由领域类相关插件约定，如 [egg-sequelize](https://github.com/eggjs/egg-sequelize)。

# Hello World
这是必备的Hello World章节，本章节将不使用脚手架，逐步创建一个hello world web应用。

#### 初始化项目
先来初始化下目录结构：
```
$ mkdir egg-hello-world
$ cd egg-hello-world
$ npm init
$ npm i egg --save
$ npm i egg-bin --save-dev
```
执行完成后如下图所示：
![](/contentImages/image/jianshu/5979029-d281ddca86abe860.png)
除了下载的node模块以外什么都没有，不要着急，我们接下来会一点点创建。

添加 npm scripts 到 package.json：
```
{
  "name": "egg-example",
  "scripts": {
    "dev": "egg-bin dev"
  }
}
```

#### 编写Controller
上一节我们知道，controller是需要放在`app/controller/`目录下的，所以我创建`helloWorld.js`文件：
```
// app/controller/home.js
const Controller = require('egg').Controller;

class HelloWorldController extends Controller {
    async index() {
        this.ctx.body = 'Hello World';
    }
}

module.exports = HelloWorldController;
```
#### 编写路由规则
egg将路由交由`app/router.js`管理，于是我们在`app/`目录下创建`router.js`文件：
```
// app/router.js
module.exports = app => {
    const { router, controller } = app;
    router.get('/', controller.helloWorld.index);
};
```

#### 配置文件
最后加上一个配置`config/config.default.js`文件：
注意：`config`与`app`为同级目录！
```
// config/config.default.js

exports.keys = "123456";//<此处改为你自己的 Cookie 安全字符串>;
```

#### 目录结构
最后我们的目录如下所示：
![](/contentImages/image/jianshu/5979029-c6e76b2f7e00fecc.png)

#### 启动运行
```
$ npm run dev
```
浏览器输入： http://127.0.0.1:7001
![](/contentImages/image/jianshu/5979029-0762d0fff0353794.png)

# 注册与登录
俗话说万事开头难，此章节涉及大量的知识点，在每个代码后面都有解释，需要大家查看官方文档。
## user表设计
简单来说，注册与登录就是对user表的读写。所以我们首先对user表进行设计：
![](/contentImages/image/jianshu/5979029-b6876c7635e362bc.png)

### 字段说明
| 字段  | 解释  |
| ------------ | ------------ |
| id  | uuid  |
| username  | 用户名  |
| password  | 密码  |
| phone  | 手机号  |
| create_time  | 创建时间  |
| update_time  | 更新时间  |
| avatar_url| 头像url|
### sql脚本
```
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `id` varchar(20) NOT NULL,
  `username` varchar(18) NOT NULL,
  `password` varchar(20) NOT NULL,
  `phone` varchar(11) DEFAULT NULL,
  `create_time` datetime NOT NULL,
  `update_time` datetime NOT NULL,
  `avatar_url` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
```

## 注册
### 页面设计
![](/contentImages/image/jianshu/5979029-c3d3304da39a4ffe.png)
页面设计如上图所示，需要用户输入用户名，密码，手机号，还可以上传自己的头像。
### 前端代码
官方文档推荐我们使用`nunjucks`作为模板。
>使用方法：https://eggjs.org/zh-cn/intro/quickstart.html#%E6%A8%A1%E6%9D%BF%E6%B8%B2%E6%9F%93

我们在`app\view\home`目录下创建`register.tpl`文件：
```
<html>
<head>
    <title>注册</title>
    <link rel="stylesheet" href="/public/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="/public/js/jquery.min.js"></script>
    <script type="text/javascript" src="/public/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container ">
    <form class="center-block" style="width: 50%;margin-top: 10%"
          method="POST" action="/user/register?_csrf={{ ctx.csrf | safe }}" enctype="multipart/form-data">
        <div class="form-group ">
            <img src="/public/avatar/default.jpg" id="avatarPic" class="img-circle center-block" style="width: 64px;">
            <input type="file" id="avatarBtn" name="file" style="visibility: hidden">
            <p class="text-center help-block">点击头像更改，只支持jpg,png格式，大小≤ 200 kb</p>
        </div>
        <div class="form-group">
            <label for="username">账号</label>
            <input type="text" class="form-control" id="username" placeholder="用户名" name="username">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" placeholder="密码" name="password">
        </div>
        <div class="form-group">
            <label for="phone">手机号</label>
            <input type="text" class="form-control" id="phone" placeholder="手机号" name="phone">
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-info pull-right">注册</button>
        </div>
    </form>
</div>
<script>
    $('#avatarPic').bind('click', function () {
        $('#avatarBtn').click();
    });
    $('#avatarBtn').bind('change',function (e) {
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(e.target.files[0]);
            //监听文件读取结束后事件
            reader.onloadend = function (e) {
                $('#avatarPic').attr("src",e.target.result);    //e.target.result就是最后的路径地址
            };
        }
    });
</script>
</body>
</html>
```
有3点需要注意：
1. 静态文件的引用路径`/public`
> 官方文档：https://eggjs.org/zh-cn/intro/quickstart.html#%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90

bootstrap自行搜索并下载，也可以用cdn。
2. form表单请求url中的`?_csrf={{ ctx.csrf | safe }}`部分
> 官方文档：https://eggjs.org/zh-cn/core/security.html#%E5%AE%89%E5%85%A8%E5%A8%81%E8%83%81-csrf-%E7%9A%84%E9%98%B2%E8%8C%83
3. 最后一段js代码的作用：
由于bootstrap没有`input type=file`标签样式，原版实在丑的不行，于是我把原版的隐藏了，在头像图片的点击事件监听里面，手动触发`input type=file`文件上传按钮的click事件。
然后当用户选完头像后，通过`window.FileReader`实时把图片显示出来。

### 后端代码
#### HomeController
我们在`app\controller\`目录下创建`home.js`文件：
该controller主要返回主页、登录页、注册页等基础页面。
```
const Controller = require('egg').Controller;

class HomeController extends Controller {
    async register(){
        await this.ctx.render('home/register.tpl')
    }
}
module.exports = HomeController;
```
#### UserController
我们在`app\controller\`目录下创建`user.js`文件：
```
//app/controller/user.js
const Controller = require('egg').Controller;
const fs = require('mz/fs');

class UserController extends Controller{
    async register(){
        const ctx = this.ctx;
        const { username, password, phone } = ctx.request.body;
        const avatar = ctx.request.files[0];
        //默认头像
        let filepathNew = this.config.baseDir+'\\app\\public\\avatar\\default.jpg';
        //如果用户上传了头像
        if (avatar) {
            console.log('file:%j', avatar);
            let filenameNew = ctx.helper.uuid() +'.'+  avatar.filename.split('.').pop();
            filepathNew = this.config.baseDir+'\\app\\public\\avatar\\'+filenameNew;
            //把临时文件剪切到新目录去
            await fs.rename(avatar.filepath, filepathNew);
        }

module.exports = UserController;
```
有4点需要注意：
1. controller获取上传的文件
>官方文档：https://eggjs.org/zh-cn/basics/controller.html#%E8%8E%B7%E5%8F%96%E4%B8%8A%E4%BC%A0%E7%9A%84%E6%96%87%E4%BB%B6
2. cookie与session
>官方文档：https://eggjs.org/zh-cn/core/cookie-and-session.html
3. 重定向
>官方文档：https://eggjs.org/zh-cn/basics/controller.html#%E9%87%8D%E5%AE%9A%E5%90%91 
4. uuid工具类，helper的使用
>官方文档：https://eggjs.org/zh-cn/basics/objects.html#helper

附上我自己实现的uuid生成方法：
> moment组件请自行npm安装，官方：http://momentjs.cn/

```
const moment = require('moment');

//uuid格式：年月日时分秒3位毫秒+3位随机数，共20位  ===>   20190312162455043167
exports.uuid = function uuid() {
    let uuid = moment().format("YYYYMMDDHHmmssSSS");
    uuid += (Array(3).join(0) + Math.random()*100).slice(-3);
    return uuid;
};
```
#### UserService
我们在`app\service\`目录下创建`user.js`文件：
```
const Service = require('egg').Service;

class UserService extends Service {
    async save(user){
        const userQ =await this.app.mysql.get('user', {username : user.username});
        if (userQ){
            return false
        }else {
            const result =await this.app.mysql.insert('user', user);
            // 判断插入成功
            const insertSuccess = result.affectedRows === 1;
            if (insertSuccess) {
                return true
            }
        }
        return false
    }
}
module.exports = UserService;
```
有1点需要注意：
1. mysql的使用
>官方文档：https://eggjs.org/zh-cn/tutorials/mysql.html

#### router.js
我们在`app\`目录下的`router.js`文件中添加以下内容：
```
module.exports = app => {
    const { router, controller } = app;

//页面
    router.get('/register.htm', controller.home.register);

//接口
    router.post('/user/register',controller.user.register);
};
```
## 登录
### 页面设计
![](/contentImages/image/jianshu/5979029-03dd01f02a68a70f.png)
### 前端代码
我们在`app\view\home`目录下创建`login.tpl`文件：
```
<html>
<head>
    <title>登录</title>
    <link rel="stylesheet" href="/public/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="/public/js/jquery.min.js"></script>
    <script type="text/javascript" src="/public/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container ">
    <form class="center-block" style="width: 50%;margin-top: 20%"
          method="POST" action="/user/login?_csrf={{ ctx.csrf | safe }}" enctype="application/x-www-form-urlencoded">
        <div class="form-group">
            <label for="username">账号</label>
            <input type="text" class="form-control" id="username" placeholder="用户名" name="username">
        </div>
        <div class="form-group">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" placeholder="密码" name="password">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" name="rememberMe">记住登录状态
            </label>
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-info pull-right">登录</button>
            <div>
                <a href="/register.htm" class="btn btn-link pull-right">注册</a>
            </div>
        </div>
    </form>
</div>
</body>
</html>
```
### 后端代码
#### HomeController
我们在`app\controller\home.js`文件中添加以下内容：
```
    async login(){
        await this.ctx.render('home/login.tpl');
    }
```

#### UserController
我们在`app\controller\user.js`文件中添加以下内容：
```
    async login(){
        const ctx = this.ctx;
        ctx.logger.info('req body:: %j',ctx.request.body);
        const { username, password, rememberMe } = ctx.request.body;
        const user = await ctx.service.user.loginAndGetUser(username, password);
        if (!user){
            ctx.body = {
                successFlag:'N',
                errorMsg:'用户名或密码错误！'
            }
        }else {
            // 设置 Session
            ctx.session.user = {username:user.username};
            ctx.cookies.set('avatarUrl',user.avatar_url,{httpOnly:false});
            // 如果用户勾选了 `记住我`，设置 的过期时间
            if (rememberMe) ctx.session.maxAge = this.config.rememberMe;
            ctx.body = {
                successFlag:'Y',
                errorMsg:'登录成功！'
            };
            ctx.redirect('/')
        }
    }
```
有1点需要注意：
1. 用户勾选'记住我'后的session过期时间读取了配置文件中的值。配置：
>官方文档：https://eggjs.org/zh-cn/basics/config.html

#### UserService
我们在`app\service\user.js`文件中添加以下内容：
```
    async loginAndGetUser(username, password) {
        const user =await this.app.mysql.get('user', {username : username});
        if (!user || user.password !== password){
            return false
        } else {
            return user;
        }
    }
```
#### router.js
我们在`app\router.js`文件中添加以下内容：
```
    router.get('/login.htm',controller.home.login);
    router.post('/user/login',controller.user.login);
```

## 配置文件参考
### config.default.js
参考官方文档后，你的配置文件应该如下（object 对象写法）：
```
const path = require('path');
module.exports = appInfo => {
    return {
        keys: "123456",
        rememberMe : 24 * 60 * 60 * 1000, //选择记住我之后，session有效时长
        security : {
            domainWhiteList:['.127.0.0.1'],  // 安全白名单，以 . 开头
        },
        multipart : {
            mode: 'file',
            tmpdir: path.join(appInfo.baseDir, 'app/public/temp'),
        },
        session : {
            key: 'EGG_SESS',
            maxAge: 10 * 1000, // 单位毫秒
            httpOnly: true,
            encrypt: true,
        },
        view : {
            defaultViewEngine: 'nunjucks',
            mapping: {
                '.tpl': 'nunjucks',
            },
        },
        mysql : {
            // 单数据库信息配置
            client: {
                // host
                host: 'localhost',
                // 端口号
                port: '3306',
                // 用户名
                user: '数据库账号',
                // 密码
                password: '数据库密码',
                // 数据库名
                database: '你的数据库名',
            },
            // 是否加载到 app 上，默认开启
            app: true,
            // 是否加载到 agent 上，默认关闭
            agent: false,
        },
    };
};
```
### plugin.js
```
exports.nunjucks = {
    enable: true,
    package: 'egg-view-nunjucks'
};

exports.mysql = {
    enable: true,
    package: 'egg-mysql',
};
```

# 权限控制
上一篇文章我们实现了用户的注册与登录，接下来就需要对用户权限进行控制了，比如：普通用户只能评论，管理员可以发表文章，最高管理员可以修改用户权限等等。
由于权限控制是一个通用的功能，我们把这块功能做成中间件。关于中间件：
>官方文档：https://eggjs.org/zh-cn/basics/middleware.html

## 功能设计
1. 一个用户对应***1个***角色
2. 可以通过配置文件配置，某一个角色***无权限***使用的页面与接口
3. 可以配置无需验证用户与权限的path。比如：登录与注册的相关页面与接口
4. 只有登录过才能访问的path，否则跳转登录页。
## User表，增加role（角色）字段
![](/contentImages/image/jianshu/5979029-921748d81b550910.png)
## 配置文件
我们在config/config.default.js中加入以下内容：
```
        auth : {
            noAuth:['/login.htm','/user/login','/register.htm','/user/register'],
            noPermission:{
                admin:[],
                manager:['/admin.htm'],
                user:['/admin.htm','/edit.htm']
            }
        }
```
其中：
`noAuth`节点配置的是无需验权就能访问的path
`noPermission`节点配置的是各个角色***无权限***访问的path

## auth.js中间件代码
我们创建`app/middleware/auth.js`文件：
```
module.exports = (options, app) => {
    return async function auth(ctx, next) {
        //如果用户session没失效
        if (typeof (ctx.session.user) !== 'undefined') {
            const username = ctx.session.user.username;
            //这里有两种做法，第一种每次都查库校验角色，优点：实时，角色变更对用户无感。缺点：查库效率低，可考虑用redis
            //第二种，把角色信息放进session,优点：无需查库，效率高。缺点：角色变更时需额外逻辑来处理老的session，否则客户端的用户角色无法实时更新
            const role = await ctx.service.user.getRoleByUsername(username);
            const noPerList = options.noPermission[role];
            if (noPerList && !noPerList.includes(ctx.path)) {
                await next();
            } else {
                ctx.body = '无权限，请联系网站管理员！';
            }
            //登录注册页面不需要权限
        } else if (options.noAuth.includes(ctx.path)) {
            await next();
            //如果session失效后则重定向到登录页
        } else {
            ctx.redirect('/login.htm')
        }
    }
};
```
## 效果
我们创建一个用户，并给与他user角色，由配置文件可以看出，user角色无权限访问`/edit.htm`路径。如图：
![](/contentImages/image/jianshu/5979029-cdcbdabb85c087ca.png)

## 正则匹配
如果页面也来越多，或者有些带参数的path是动态的，我们需要一定的规则来过滤path。这时候就需要用到正则匹配，我们修改`auth.js`文件：
```
module.exports = (options, app) => {
    function isNoPer(noPerList,path) {
        for (let i = 0;i<noPerList.length;i++){
            const patt=new RegExp(noPerList[i]);
            if (patt.test(path)) {
                return true;
            }
        }
        return false;
    }
    return async function auth(ctx, next) {
        //如果用户session没失效
        if (typeof (ctx.session.user) !== 'undefined') {
            const username = ctx.session.user.username;
            //这里有两种做法，第一种每次都查库校验角色，优点：实时，角色变更对用户无感。缺点：查库效率低，可考虑用redis
            //第二种，把角色信息放进session,优点：无需查库，效率高。缺点：角色变更时需额外逻辑来处理老的session，否则客户端的用户角色无法实时更新
            const role = await ctx.service.user.getRoleByUsername(username);
            const noPerList = options.noPermission[role];
            if (noPerList && !isNoPer(noPerList,ctx.path)) {
                await next();
            } else {
                ctx.body = '无权限，请联系网站管理员！';
            }
            //登录注册页面不需要权限
        } else if (options.noAuth.includes(ctx.path)) {
            await next();
            //如果session失效后则重定向到登录页
        } else {
            ctx.redirect('/login.htm')
        }
    }
};
```
这时候我们的配置文件就可以支持正则表达式了：
```
        auth : {
            noAuth:['/login.htm','/user/login','/register.htm','/user/register'],
            noPermission:{
                admin:[],
                manager:['/admin.htm'],
                user:['/admin.htm','/edit.*']
            }
        }
```

#置顶导航条
## 模板继承
导航条是博客不可或缺的一部分，几乎每一个页面都有置顶导航条。我们不可能在每个页面都复制一份相同的代码，因为这样代码变得冗余，而且当需要修改导航条时，改动量会非常之大。所幸的是，我们使用了`nunjucks`作为view模板，其提供的`模板继承`功能可以解决这个问题。
>官方文档：https://nunjucks.bootcss.com/templating.html#part-2cf2ea1f8614528d

## 页面设计
![](/contentImages/image/jianshu/5979029-23cacb0d8fb70d5b.png)

## 功能设计
如页面设计图中所示，导航条共有6块功能：
1. 站点名称，点击后可以回到首页
2. 文章按钮，点击后可以查看文章列表
3. 搜索框，可以按文章名称搜索文章
4. 发表文章按钮，顾名思义，可以发表博文
5. 用户头像下拉按钮，我的文章可以查看自己的文章或重新编辑
6. 设置，可以修改个人信息
7. 注销，注销用户，删除session，返回登录

## 父模板parent.tpl代码（包含导航条）
我们创建`/app/view/parent.tpl`文件：
```
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/public/bootstrap/css/bootstrap.css">
    <script type="text/javascript" src="/public/js/jquery.min.js"></script>
    <script type="text/javascript" src="/public/bootstrap/js/bootstrap.min.js"></script>
    {% block head %}{% endblock %}
</head>

<div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li><a href="/articleList.htm">文章</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">预留 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left" action="/search?_csrf={{ ctx.csrf | safe }}">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="搜索" name="keyword">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <span class="glyphicon glyphicon-search " aria-hidden="true"></span>
                            </button>
                        </span>
                    </div>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/edit.htm"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 发表文章</a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">
                            <img src="" id="avatarNav" class="img-circle" style="width: 26px; margin-top: -6px">
                            <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="/myarticle.htm">我的文章</a></li>
                            <li><a href="/myInfo.htm">设置</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/user/logout">注销</a></li>
                        </ul>
                    </li>
                </ul>
            </div>

</div>
    </nav>
</div>
<div id="top" class="row" style="margin-top: 10%"></div>
<div class="container">
    {% block content %}{% endblock %}
</div>

$('#avatarNav').attr('src', getCookie('avatarUrl'));
</script>
{% block script %}{% endblock %}
</body>
</html>
```
父模板中可以继承重写的地方有***3***处：
1. `<head>`标签处，可以添加`<title>`和一些`静态资源`，此处需要注意的是，父模板中已经引入的静态资源，如bootstrap，***不要***再次在子模板中重复引用，否则有可能会不生效。
2. `<div class="container">`标签处，此处可以理解为`<body>`中的内容，为页面的主要内容。
3. `<script>`标签处，可以添加js代码。

## 首页home.tpl继承parent.tpl
我们创建`/app/view/home/home.tpl`文件：
```
{% extends "parent.tpl" %}

{% block head %}
<title>首页</title>
<link rel="stylesheet" href="/public/css/home.css" />
{% endblock %}

{% block content %}
<div class="home">
    hello ! {{user.username}}
    {{helper.formatTime(time)}}
</div>
{% endblock %}
```
## HomeController
我们在`/app/controller/home.js`中添加以下内容：
```
    async index() {
        const {ctx, service} = this;
            const userInfo = ctx.session.user;
            ctx.logger.info('session:: %j',userInfo);
            await ctx.render('home/home.tpl',
                {
                    time: new Date(),
                    user:userInfo
                });
    }
```
## router.js
我们在`/app/router.js`中添加以下内容：
```
router.get('/', controller.home.index);
```

#浏览、发表文章
浏览、发表文章简单来讲就是对article表的读/写操作。
## Article表设计
![](/contentImages/image/jianshu/5979029-d56444b48920fd98.png)

## sql脚本
```
DROP TABLE IF EXISTS `article`;
CREATE TABLE `article` (
  `id` varchar(20) NOT NULL,
  `title` varchar(255) NOT NULL,
  `url` varchar(255) NOT NULL,
  `detail` varchar(4096) NOT NULL,
  `author` varchar(255) NOT NULL,
  `invisible` int(1) NOT NULL DEFAULT '0',
  `create_time` datetime NOT NULL,
  `update_time` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

```

## 页面设计
### 浏览文章
![](/contentImages/image/jianshu/5979029-2e31797e5267a9b3.png)
![](/contentImages/image/jianshu/5979029-8be8d2b8c25e944e.png)

### 发表文章
![](/contentImages/image/jianshu/5979029-82118f4fe3c97af1.png)

## 功能设计
### 浏览文章
1. 点击文章标题查看文章详细内容
### 发表文章
1. 输入文章标题
2. 选择是否保密，保密则不显示在文章列表
3. 保存文章
4. 支持markdown

## markdown支持
对于前端md编辑器，我们选择了`Editor.md`。
>官方文档：http://pandao.github.io/editor.md/

## 前端代码
### 浏览文章
#### list.tpl 文章列表
我们创建`app/view/article/list.tpl`文件：
```
{% extends "parent.tpl" %}

{% block head %}
<title>文章列表</title>
{% endblock %}

{% block content %}
<ul class="article-view view">
    {% for item in list %}
    <li class="item">
        <dl>
            <dt><a href="{{ item.url }}">{{ item.title }}</a></dt>
            <dd><small>{{item.author}}</small> 最后更新于 {{helper.formatTime(item.update_time)}}</dd>
        </dl>
    </li>
    {% endfor %}
</ul>
{% endblock %}
```
#### detail.tpl 文章详情
我们创建`app/view/article/detail.tpl`文件：
```
{% extends "parent.tpl" %}

{% block head %}
<title>{{article.title}}</title>
<link rel="stylesheet" href="/public/editormd/editormd.css">
<script src="/public/editormd/lib/marked.min.js"></script>
<script src="/public/editormd/lib/prettify.min.js"></script>
<script src="/public/editormd/lib/raphael.min.js"></script>
<script src="/public/editormd/lib/underscore.min.js"></script>
<script src="/public/editormd/lib/sequence-diagram.min.js"></script>
<script src="/public/editormd/lib/flowchart.min.js"></script>
<script src="/public/editormd/lib/jquery.flowchart.min.js"></script>
<script type="text/javascript" src="/public/editormd/editormd.js"></script>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>{{article.title}} <small style="font-size: small">{{article.author}} 最后更新于 {{helper.formatTime(article.update_time)}}</small></h1>
</div>

<div id="detail" style="visibility: hidden">{{article.detail}}</div>
<div id="layout">
    <div id="test-editormd-view">

</div>
</div>
{% endblock %}

{%block script%}
<script type="text/javascript">
    $(function () {
        const markdown = $('#detail').text();
        var testEditormdView = editormd.markdownToHTML("test-editormd-view", {
            markdown: markdown,//+ "\r\n" + $("#append-test").text(),
            //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
            htmlDecode: "style,script,iframe",  // you can filter tags decode
            //toc             : false,
            tocm: true,    // Using [TOCM]
            //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
            //gfm             : false,
            //tocDropdown     : true,
            // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
            emoji: true,
            taskList: true,
            tex: true,  // 默认不解析
            flowChart: true,  // 默认不解析
            sequenceDiagram: true,  // 默认不解析
        });

});
</script>
{% endblock %}
```
此处需要注意1点：
md的内容先通过模板，渲染在一个隐藏的div中。之后，通过`editormd`动态渲染出来。
### 发表文章
#### article.tpl 发表文章
我们创建`app/view/article/article.tpl`文件：
```
{% extends "parent.tpl" %}

{% block head %}
<title>Markdown Editor</title>
<link rel="stylesheet" href="/public/editormd/editormd.css">
<script type="text/javascript" src="/public/editormd/editormd.js"></script>
{% endblock %}

{% block content %}

<div class="row">
    <div class="form-group">
        <label for="title">文章标题：</label>
        <input id="title" type="text" class="form-control">
    </div>
    <div class="checkbox ">
        <label>
            <input id="invisible" type="checkbox">保密(勾选后将<strong style="color: red">不显示</strong>在文章列表)
        </label>
    </div>
    <div class="form-group pull-right">
        <button id="save" class="btn btn-success ">保存</button>
    </div>
</div>
<div class="row">
    <div id="layout">
        <div id="test-editormd"></div>
    </div>
</div>
{% endblock %}

{% block script %}
<script type="text/javascript">

let testEditor = editormd("test-editormd", {
        width: "100%",
        height: 740,
        path: '/public/editormd/lib/',
        // theme: "dark",
        // previewTheme: "dark",
        // editorTheme: "pastel-on-dark",
        // markdown: md,
        codeFold: true,
        //syncScrolling : false,
        saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
        searchReplace: true,
        //watch : false,                // 关闭实时预览
        htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
        //toolbar  : false,             //关闭工具栏
        //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
        emoji: true,
        taskList: true,
        tocm: true,         // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart: true,             // 开启流程图支持，默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
        //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
        //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
        //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
        //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
        //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "/edit/uploadPic?_csrf={{ ctx.csrf | safe }}",

/*  后端需返回：   {
            success : 0 | 1, //0表示上传失败;1表示上传成功
            message : "提示的信息",
            url     : "图片地址" //上传成功时才返回
        }*/
        onload: function () {
            console.log('onload', this);
            //this.fullscreen();
            //this.unwatch();
            //this.watch().fullscreen();

//this.setMarkdown("#PHP");
            //this.width("100%");
            //this.height(480);
            //this.resize("100%", 640);
        }
    });

$('#save').bind('click', function () {
        data = {
            article: {
                title: $('#title').val(),
                detail: testEditor.getMarkdown(),
                invisible: $('#invisible').prop('checked')  ? 1:0
            }
        };

$.post('/edit/save?_csrf={{ ctx.csrf | safe }}', data, function (resp) {
            if (resp.flag === '1') {
                window.location.href = resp.url;
            }
        })
    })

</script>
{% endblock %}

```
此处需要注意1点：
ajax默认是不重定向的，所以当保存成功，我们需要返回文章的访问url，在回调函数里重定向。

### 后端代码
#### ArticleController 
我们创建`app/controller/article.js`文件：
```
const Controller = require('egg').Controller;

class ArticleController extends Controller {
    async list() {
        const ctx = this.ctx;
        const articleList = await ctx.service.article.list();
        await ctx.render('article/list.tpl', { list: articleList });
    }

async detail(){
        const ctx = this.ctx;
        const queryRes = await ctx.service.article.detail(ctx.params.id);
        ctx.logger.info(queryRes);
        await ctx.render('article/detail.tpl', { article: queryRes[0] });
    }
}

module.exports = ArticleController;
```
#### EditController
我们创建`app\controller\edit.js`文件：
```
const Controller = require('egg').Controller;
const fs = require('mz/fs');

class EditController extends Controller{
    async editHtm(){
        await this.ctx.render('article/edit.tpl');
    }
    async save(){
        const ctx = this.ctx;
        const article = ctx.request.body.article;
        article.id = ctx.helper.uuid();
        article.url = '/article/'+article.id+'.htm';
        article.author = ctx.session.user.username;
        const nowTime = new Date();
        article.create_time = nowTime;
        article.update_time = nowTime;
        const result = await ctx.service.article.save(article);
        if (result) {
            ctx.body = {flag:'1',msg:'保存成功',url:article.url}
        }else {
            ctx.body = {flag:'0',msg:'保存失败'}
        }
    }

async uploadPic(){
        const { ctx } = this;
        const file = ctx.request.files[0];
        let filenameNew = ctx.helper.uuid() +'.'+  file.filename.split('.').pop();
        let filepathNew = this.config.baseDir+'\\app\\public\\mdPic\\'+filenameNew;
        //把临时文件剪切到新目录去
        await fs.rename(file.filepath, filepathNew);
        //按editormd要求格式返回
        ctx.body = {
            success : 1, //0表示上传失败;1表示上传成功
            message : "上传成功",
            url     : filepathNew.split(this.config.baseDir+'\\app')[1] //上传成功时才返回
        }
    }
}

module.exports = EditController;
```
此处需要注意1点：
1. `uoloadPic`方法主要用于md编辑器的图片上传。

### ArticleService
我们创建`app/service/article.js`文件：
```
const Service = require('egg').Service;

class ArticleService extends Service {
    async list() {
        const sql = "SELECT url,title,author,update_time FROM article WHERE invisible = 0";
        const list =await this.app.mysql.query(sql);
        return list;
    }

async detail(id = 1){
        const sql = "SELECT title,detail,author,update_time FROM article WHERE id = ?";
        return await this.app.mysql.query(sql,[id])
    }

async save(article = {}){
        const res = await this.app.mysql.insert('article',article);
        return res.affectedRows === 1;
    }

}

module.exports = ArticleService;
```
### router.js
我们往 `app/router.js`中添加一下内容：
```
router.get('/edit.htm',controller.edit.editHtm);
router.get('/article/:id.htm',controller.article.detail);
router.get('/articleList.htm', controller.article.list);

router.post('/edit/save',controller.edit.save);
router.post('/edit/uploadPic',controller.edit.uploadPic);
```

#编辑文章
编辑文章，首先得把文章原先内容获取到，然后放在编辑页，给用户展现出一个“半成品”的状态，可以重新保存文章。

## 页面设计
### 我的文章页面
![](/contentImages/image/jianshu/5979029-2db1c69aac0b3a25.png)

### 编辑页面
![](/contentImages/image/jianshu/5979029-516a5cd7013e894d.png)

## 功能设计
1. 我的文章页标题前显示是否保密，标题后有编辑按钮
2. 点击编辑按钮，进入编辑页面可重新编辑文章

## 前端代码
### myarticle.tpl 我的文章页
我们创建`/app/view/article/myarticle.tpl`页面：
```
{% extends "parent.tpl" %}

{% block head %}

<title>我的文章</title>
{% endblock %}

{% block content %}
<h1>我的文章</h1>
<ul class="article-view view">
    {% for item in list %}
    <li class="item">
        <dl>
            <dt>
                <small style="color: red">{{helper.formatInvisible(item.invisible)}}</small>
                <a href="{{ item.url }}">{{ item.title }}</a>
                <a class="btn btn-link" href='/modify/{{item.id}}.htm'>编辑</a>
            </dt>
            <dd><small>{{item.author}}</small> 最后更新于 {{helper.formatTime(item.update_time)}}  </dd>
            <dd></dd>
        </dl>
    </li>
    {% endfor %}
</ul>
{% endblock %}

```
此处需要注意1点：
1. `helper.formatInvisible`与`helper.formatTime`两个方法的作用是***格式化***后端返回的参数。当然，你也可以在后端代码执行这些逻辑，不过我更倾向于后端代码尽量精简。**格式化应当归属于前端范畴。**如果说模板的渲染属于后端逻辑，那当我没说= =。
>关于helper用法：https://eggjs.org/zh-cn/basics/objects.html#helper

### helper.js 
```
const moment = require('moment');

//时间格式化
exports.formatTime = time => moment(time).format('YYYY-MM-DD HH:mm:ss');
exports.formatInvisible = invisible => invisible===1 ? '保密':'';
```

### modify.tpl 编辑文章页
我们创建`/app/view/article/modify.tpl`页面：
```
{% extends "parent.tpl" %}

{% block head %}
<title>编辑文章</title>
<link rel="stylesheet" href="/public/editormd/editormd.css">
<script type="text/javascript" src="/public/editormd/editormd.js"></script>
{% endblock %}

{% block content %}
<div class="row">
    <div class="form-group">
        <label for="title">文章标题：</label>
        <input id="title" type="text" class="form-control" value="{{article.title}}">
    </div>
    <div class="checkbox ">
        <label>
            <input id="invisible" type="checkbox" >保密(勾选后将<strong style="color: red">不显示</strong>在文章列表)
        </label>
    </div>
    <div id="detail" style="visibility: hidden">{{article.detail}}</div>
    <div class="form-group pull-right">
        <button id="save" class="btn btn-success ">保存</button>
    </div>
</div>
<div class="row">
    <div id="layout">
        <div id="test-editormd"></div>
    </div>
</div>
{% endblock %}

{% block script %}
<script type="text/javascript">

$('#invisible').prop('checked','{{article.invisible}}' === '1' ? 'checked':'');
    const markdown = $('#detail').text();
    let testEditor = editormd("test-editormd", {
        width: "100%",
        height: 740,
        path: '/public/editormd/lib/',
        markdown: markdown,
        codeFold: true,
        saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea
        searchReplace: true,
        htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
        emoji: true,
        taskList: true,
        tocm: true,         // Using [TOCM]
        tex: true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart: true,             // 开启流程图支持，默认关闭
        sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
        imageUpload: true,
        imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL: "/edit/uploadPic?_csrf={{ ctx.csrf | safe }}",
        onload: function () {
            console.log('onload', this);
        }
    });

$('#save').bind('click', function () {
        data = {
            article: {
                id: '{{article.id}}',
                title: $('#title').val(),
                detail: testEditor.getMarkdown(),
                invisible: $('#invisible').prop('checked')  ? 1:0
            }
        };

$.post('/edit/modify?_csrf={{ ctx.csrf | safe }}', data, function (resp) {
            if (resp.flag === '1') {
                window.location.href = resp.url;
            }else {
                alert(resp)
            }
        })
    })
</script>
{% endblock %}

```
## 后端代码
### ArticleController
我们添加以下内容：
```
    async myarticle(){
        const ctx = this.ctx;
        const articleList = await ctx.service.article.getArticleByAuthor(ctx.session.user.username);
        await ctx.render('article/myarticle.tpl', { list: articleList });
    }
```

### EditController
我们添加以下内容：
```
    async modifyHtm(){
        const {ctx, service} = this;
        const article = await service.article.getArticleById(ctx.params.id);
        await ctx.render('article/modify.tpl',{article:article})
    }

async modify(){
        const {ctx, service} = this;
        const article = ctx.request.body.article;
        const nowTime = new Date();
        article.update_time = nowTime;
        const result = await service.article.modify(article);
        if (result) {
            ctx.body = {flag:'1',msg:'保存成功',url:'/article/'+article.id+'.htm'}
        }else {
            ctx.body = {flag:'0',msg:'保存失败'}
        }
    }
```

### ArticleService
我们添加以下内容：
```
    async modify(article = {}){
        const res = await this.app.mysql.update('article',article);
        return res.affectedRows === 1;
    }

async getArticleByAuthor(author){
        const sql = "SELECT id,url,title,author,update_time,invisible FROM article WHERE author = ?";
        const list =await this.app.mysql.query(sql, [author]);
        return list;
    }

async getArticleById(id){
        const sql = "SELECT id,title,detail,invisible FROM article WHERE id = ?";
        const list =await this.app.mysql.query(sql, [id]);
        return list[0];
    }
```

###搜索文章、用户注销和修改等功能请下载代码包自行学习

##结尾
我是妖云小离，这是我第5次在demo大师上面发表文章，有不正确的地方欢迎大家指出。邮箱：yaoyunxiaoli@163.com

基于阿里egg框架搭建博客

概述

详细

相似例子推荐

评论

作者

评分详细

作者例子