使用egg.js + Vue实现一个简书（三）---服务端搭建

写在前面

完成前端搭建后，我们需要搭建服务端代码。
首先献上代码仓库
本文将有以下几个模块

  1. egg项目安装运行
  2. 简单的egg写法示例，写一个简单的接口，联通前后端
  3. 接入数据库和JWT，完成登录注册的功能
  4. 以用户信息查询优化为例，讲讲redis的安装和使用

项目安装运行

看到第三篇了，想必nodejs已经装上了

// 创建一个文件夹
mkdir myblog
cd myblog
// 初始化一个node项目
npm int
// 安装egg包
npm i -S egg
npm i -D egg-bin

在package.json的script中添加一句"dev": "egg-bin dev"，之后我们将使用npm run dev命令来启动项目。
egg项目需要按照规范的文件目录来建立，否则启动时会报错
当前新建项目的目录结构如图

新建的nodejs项目目录

egg官网上约定的目录结构

我们先依照上图创建必要的文件夹和文件（上图已做标记）
router.js中定义一个路由规则

// app/router.js
module.exports = app => {
    const { router,  controller } = app;
    router.get('/home/index', controller.home.index); // 首页
    router.redirect('/', '/home/index', 302); // 当没有指定路由的时候，重定向到首页
}

// app/controller/home.js
'use strict';
const Controller = require('egg').Controller;
class HomeController extends Controller {
  async index() { // 首页
    this.ctx.body = 'hello world';
  }
}
module.exports = HomeController;

config.**.js表示不同环境下的配置，default是在各个环境下都生效的配置，实际上某个环境的最终配置，是default和相应环境配置的合并。
配置中必须要有keys这个属性，其值是一个自定义的字符串，所以我们写在config.default.js中。
config有多种exports的方法，具体可以参见官方文档，写的很详细。

// config/config.default.js
exports.keys = 'testblog';

有以上代码，项目就可以跑起来了，执行npm run dev，访问 http://127.0.0.1:7001
可以看到，路由被重定向到了 http://127.0.0.1:7001/home/index，页面上显示hello world。说明我们的项目已经成功搭建并运行起来了

我的第一个接口

下面我们将定义一个post路由，用于分页查询用户列表，并与前端联通。

// router.js加一条路由配置
router.post('/home/list', controller.home.list); // 获取用户列表

// app/controller/home.js中增加一个list方法
async list() { // 用户列表
    const res = await this.ctx.service.home.list(this.ctx.request);
    this.ctx.body = res;
    this.ctx.status = res.status;
  }

参考上面官方目录结构，controller负责请求的接收和结果的返回，具体的业务逻辑（查询数据库之类的）应该放到service层。所以我们在app下新建一个service文件夹，创建home.js。可以通过this.ctx.service.home.XX访问到该文件中定义的方法。

// app/service/home.js
'use strict';
const Service = require('egg').Service;
class HomeService extends Service {
    async list(data) { // 用户列表
        return {
            message: 'ok',
            status: 200,
            result: {
                list: [
                    { id: 1, name: '王大娃' },
                    { id: 2, name: '王二娃' },
                    { id: 3, name: '王三娃' },
                ],
                pageSize: data.pageSize,
                current: data.current,
                totalCount: 3,
                total: 1
            }
        }
    }
}
module.exports = HomeService;

list方法需要传入一个参数data，从controller中可以看到，我们将客户端的入参this.ctx.request直接传给了service的方法。
这里我们直接写死假数据返回，先联通前后端，数据库操作后面慢慢展开。

接下来测试一下接口能不能正常访问

我们可以先在浏览器控制台中使用fetch方法写个简单的异步调用测试一下

// 浏览器控制台中
fetch('http://127.0.0.1:7001/home/list', {
    method: 'POST',
    headers: {'content-type': 'application/json'},
    body: JSON.stringify({ pageSize: 10, current: 1 })
})

敲回车，发现报了csrf token出错


403报错

服务端控制台报错

出这个错误的原因是：egg 框架内置了安全系统，默认开启防止 XSS 攻击 和 CSRF 攻击，每次请求得时候请求头必须携带csrfToken字段。
解决方法是，在config中指定校验用的header属性名称，前端从cookie中取到csrfToken的值，将其放到请求header中，即可通过验证。

// config.default.js 添加一段
exports.security = {
    csrf: {
        headerName: 'x-csrf-token'
    }
}

在浏览器控制台中查到cookie中csrfToken对应的值，将其传入header中，然后重新请求，发现接口调通了。

// 浏览器控制台中
fetch('http://127.0.0.1:7001/home/list', {
    method: 'POST',
    headers: {'content-type': 'application/json', 'x-csrf-token': 'V9357i1wopen1uSDoakpY7Ex'},
    body: JSON.stringify({ pageSize: 10, current: 1 })
})
接口正确返回

前端代码中会用axios封装请求，需要在请求前传入header


前端axios封装

接入数据库和JWT，实现登陆注册功能

  1. 首先要安装mysql和navicat（可视化的数据库管理工具）
    大家可以去官网下载，mysql推荐用社区版，不收费。navicat下载后需要破解，百度很容易找到攻略，相信难不倒你
  2. 软件安装完毕后，在egg项目中使用mysql，还得安装egg-mysql这个包
    npm i -S egg-mysql
  3. 在config中添加mysql相关配置 plugin.js中指定插件的使用情况
// config/config.default.js中添加一段
exports.mysql = {
    client: {
        // host
        host: 'localhost',
        // 端口号
        port: '3306',
        // 用户名
        user: 'root',
        // 密码
        password: '你的密码',
        // 数据库名
        database: 'blog',
    },
    // 是否加载到 app 上，默认开启
    app: true,
    // 是否加载到 agent 上，默认关闭
    agent: false,
};
// config/plugin.js
exports.mysql = {
    enable: true, // 是否启用mysql插件
    package: 'egg-mysql', // 插件对应的node包
};

  1. 在数据库中创建表格，我们创建一个用户表


    用户表数据结构
  2. controller文件夹中创建user.js
'use strict';
const Controller = require('egg').Controller;
class UserController extends Controller {
  async register() { // 注册
    const res = await this.ctx.service.user.register(this.ctx.request.body);
    this.ctx.body = res;
    this.ctx.status = res.status;
  }
  async login() { // 登录
    const res = await this.ctx.service.user.login(this.ctx.request.body);
    this.ctx.body = res;
    this.ctx.status = res.status;
  }
}
module.exports = UserController;
  1. service文件夹中创建user.js
'use strict';

const Service = require('egg').Service;
const utility = require('utility');
const JWT = require('jsonwebtoken');

class UserService extends Service {
    async register(data) { // 注册
        // 开启事务
        const result = await this.app.mysql.beginTransactionScope(async conn => {
            const userList = [];
            const now = Date.now();
            data.password = utility.md5(data.password);
            userList.push({
                nick_name: data.nickName,
                account: data.account,
                password: data.password,
                create_time: now,
                update_time: now
            });
            try {
                // 先校验邀请码是否正确
                const res = await conn.select('invite', {
                    where: {
                        invite_code: data.code
                    }
                });
                if (!res || res.length === 0) {
                    return {
                        message: '该邀请码不存在，请确认后再试',
                        status: 501,
                        result: null
                    };
                }

                // 检查用户名是否重复
                const accountCheck = await conn.query(`select id from user where account='${data.account}'`);
                if (accountCheck && accountCheck.length > 0) {
                    return {
                        message: '用户名重复，请修改后重试',
                        status: 501,
                        result: null
                    }
                }

                // 检查昵称是否重复
                const nickNameCheck = await conn.query(`select id from user where nick_name='${data.nick_name}'`);
                if (nickNameCheck && nickNameCheck.length > 0) {
                    return {
                        message: '昵称重复，请修改后重试',
                        status: 501,
                        result: null
                    }
                }

                // 写入
                const insertOpe = await conn.insert('user', userList);
                if (insertOpe.affectedRows !== 1) {
                    console.log('写入用户信息出错');
                    return {
                        message: '系统异常',
                        status: 501,
                        result: null
                    }
                }

                // 更新invite表
                const updateRecord = await conn.query(`update invite set invite_count='${res[0].invite_count + 1}' where user_id='${res[0].user_id}'`);
                if (updateRecord.affectedRows !== 1) {
                    console.log('更新邀请表出错');
                    return {
                        message: '系统异常',
                        status: 501,
                        result: null
                    }
                }

                // 写入邀请关系表
                const insertRelation = await conn.insert('invite_relation', [{
                    user_id: res[0].user_id,
                    be_invited_user_id: insertOpe.insertId
                }]);
                if (insertRelation.affectedRows !== 1) {
                    console.log('写入邀请关系表出错');
                    return {
                        message: '系统异常',
                        status: 501,
                        result: null
                    }
                }

                return {
                    message: '注册成功',
                    status: 200,
                    result: true
                }
            } catch (err) {
                console.log(err);
                return {
                    message: '系统异常，请稍后再试',
                    status: 501,
                    result: null
                };
            }
        }, this.ctx);
        return result;
    }

    async login(data) {
        // 开启事务
        const result = await this.app.mysql.beginTransactionScope(async conn => {
            try {
                // 检查账号是否存在
                const checkAccount = await conn.select('user', {
                    where: {
                        account: data.account
                    }
                });
                let password = '';
                if (checkAccount && checkAccount.length > 0) {
                    password = checkAccount[0].password;
                    let inputPassword = utility.md5(data.password);
                    if (inputPassword === password) {
                        // 签发jwt token
                        const token = JWT.sign({
                            userId: checkAccount[0].id,
                            nickName: checkAccount[0].nick_name,
                            account: checkAccount[0].account,
                            avatar: checkAccount[0].avatar
                        }, this.config.jwt.secret, {
                            expiresIn: this.config.jwt.expiresIn
                        });
                        return {
                            message: '登录成功',
                            status: 200,
                            result: {
                                data: {
                                    id: checkAccount[0].id,
                                    nickName: checkAccount[0].nick_name,
                                    account: checkAccount[0].account,
                                    avatar: checkAccount[0].avatar
                                },
                                token
                            }
                        }
                    } else {
                        return {
                            message: '密码错误，请检查拼写',
                            status: 501,
                            result: null
                        }
                    }
                } else {
                    return {
                        message: '该用户名不存在，请检查拼写或者注册新账号',
                        status: 501,
                        result: null
                    }
                }
            } catch (err) {
                return {
                    message: '系统异常，请稍后再试',
                    status: 501,
                    result: null
                };
            }
        });
        return result;
    }
}
module.exports = UserService;
  • 由于注册前有一步邀请码验证的操作，所以注册方法中有两个关于邀请的表的操作，大家可以忽略掉先。
  • service中的方法结构是一样的，首先使用this.app.mysql.beginTransactionScope()方法新建一个事务，然后在事务中进行数据库操作，当有多个数据库操作的时候，其中一个出错，之前的操作都会回滚，避免脏数据的出现。
  • 用try...catch...语句进行异常处理
  • service中方法的返回格式是统一的
{
    message: '返回的文案',
    status: 'http状态码',
    result: '操作的处理结果'
}
  • 数据库的增删改查使用conn提供的select、delete、insert等方法，如果sql比较复杂，可以用conn.query()方法，直接传入完整的sql语句进行数据库处理。更详细的使用方法，可以参考egg-mysql的官方文档。
  1. JWT的使用
  • JWT是json web token的缩写，是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（RFC 7519).该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。
  • jwt提供了sign和verify两个方法，sign用于签发token，verify用于校验token是否有效。
  • 签发的代码可以参考上面service/user.js中的login方法，签发时可以传入一些非敏感用户信息，在校验的时候可以被解析出来，用于确认当前访问的用户。
  • 校验的代码可以参考app/extend/helper.js中的checkLogin方法
  • 关于JWT的详细解析可以点这里，就不展开了。
jwt的安装和使用
  1. 服务端要支持CORS(跨来源资源共享)策略
    npm i -S jsonwebtoken
    npm i -S egg-cors
  2. 启用插件
// config/plugin.js 增加一段
exports.cors = {
    enable: true,
    package: 'egg-cors'
}

// config/config.default.js 增加一段
exports.cors = {
    origin: '*', // 不限制来源
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',
}
exports.jwt = {
    enable: true,
    secret: 'myblog', // 自定义的秘钥，用于token的签发和校验，不应该流露出去
    expiresIn: 60 * 60 // 有效时间，单位秒
};
  1. jwt工作流程
  • 登录接口中，当用户名密码校验通过后，用jwt签发token，带入上面配置的secret，expiresIn，以及用户id、用户名、昵称、头像等非敏感信息，然后将token作为接口结果返回给客户端。
  • 客户端拿到token后，在之后的接口调用时，将token传到header的authorization字段中里，当有些接口需要登录信息时，会去header中获取token，并进行jwt校验，如果校验不通过或者token不存在，说明用户未登录或者登录状态过期，需要重新登录。
  • 服务端jwt校验通过，可以获得当前访问的用户信息，并进行接口相应的操作。
    以上，登录注册的功能就完成了。前端的代码可以去前端项目仓库中拉取细看。

redis的使用

我们可以通过缓存一些常用的数据，从而达到减少数据库操作的优化目的。以获取用户信息的接口为例。

  1. 服务端收到接口请求，先判断是否存在该用户信息的缓存。如果存在，直接将缓存作为接口结果返回。
  2. 如果缓存不存在（没有存或者缓存过期了），则请求接口，并将结果存到缓存，返回请求的结果。
  3. 如果用户的信息发生变更，需要更新缓存。

接下来讲讲如何安装使用redis

  • 安装和配置
    本地下载redis工具，并启动
// redis目录下
redis-server.exe redis.windows.conf   // 按照配置启动redis
redis启动后的控制台

在node项目中配置

npm i -S egg-redis  // 安装redis的node包

// config/config.default.js 增加一段
exports.redis = {
    client: {
        port: 6379,
        host: '127.0.0.1',
        password: 'auth',
        db: 0
    }
}
// config/plugin.js 增加一段
exports.redis = {
    enable: true,
    package: 'egg-redis'
}

注意，当项目中用到redis后，再启动本地服务前，要先启动redis，否则会报错

  • 封装redis的方法
    redis提供了获取、写入键值对，查询长度、值自增等方法，我将它们封装进一个app/service/cache.js中。redis更多方法可以参考egg-redis的文档。
// 以app/service/user.js中的porfile方法为例
async profile(id) {
        const userId = id ? id : this.ctx.user.userId;
        const userCache = await this.ctx.service.cache.get(`profile_${userId}`);
        let result = null;
        if (!userCache) {
            // 开启事务
            result = await this.app.mysql.beginTransactionScope(async conn => {
                try {
                    // 查询用户信息
                    const res = await conn.select('user', {
                        where: {
                            id: userId
                        }
                    });
                    if (res && res.length > 0) {
                        const obj = {
                            id: res[0].id,
                            nickName: res[0].nick_name,
                            account: res[0].account,
                            gender: res[0].gender,
                            birth: res[0].birth,
                            brief: res[0].brief,
                            website: res[0].website,
                            avatar: res[0].avatar,
                            userEmail: res[0].email,
                            telephone: res[0].telephone,
                            total_words: res[0].total_words,
                            article_count: res[0].article_count,
                            focus_count: res[0].focus_count,
                            fans_count: res[0].fans_count
                        }
                        await this.ctx.service.cache.set(`profile_${res[0].id}`, obj, 60 * 60);
                        return {
                            message: 'ok',
                            status: 200,
                            result: obj
                        };
                    } else {
                        return {
                            message: '查询的用户不存在',
                            status: 501,
                            result: null
                        };
                    }
                } catch (err) {
                    return {
                        message: '系统异常，请稍后再试',
                        status: 501,
                        result: null
                    };
                }
            });
        } else {
            result = {
                message: '读取缓存',
                status: 200,
                result: userCache
            }
        }
        return result;
    }

将用户信息的缓存，以profile_ + 用户id的格式存储。
当调用profile接口时，先检查缓存是否存在，用到了cache.js中的get方法。
如果不存在缓存，则调接口，并写入缓存，有效期一小时。
如果存在，直接将缓存中的结果返回。

总结

在本文中，我们从无到有搭建了egg项目，按规范组织了目录结构，尝试写了第一个接口，了解了egg的基本写法。然后接入mysql数据库和JWT，实现了登录注册功能。接着又以用户信息查询优化展开，学习了redis缓存的安装及使用。希望对大家能有帮助。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容