[JavaScript知识库]【全栈系列教程】node + React 记账本项目(待完成...)

1. 起步

纯讲理论知识大家可能会觉得很枯燥乏味，所以我个人习惯采用代码结合理论的形式为大家阐述 Egg 的一些关键知识点。

Egg 的环境要求：Node >= 8.x，npm >= 6.1.0。

这里我们使用 Egg 为我们提供的脚手架生成指令，几行代码就能初始化一个 Egg 项目，如下：

$ mkdir egg
$ cd egg
$ npm init egg --type=simple
$ yarn 或者 npm i

注意: 这里不用npm的原因是npm install 会出现一些奇奇怪怪的问题，一路按回车就可以了。

我们来看一下egg项目的目录，和 Java 的MVC架构差不多，controller是控制层、service是业务层。

app
	controller
		home.js
	router.js
config
	config.default.js
	plugin.js

router.js

上面代码是监听路径/，访问/后会调用controller.home.index的方法，如下

ctx.body就是返回的JSON对象，我们启动代码看看

$ yarn run dev

访问localhost:7001

2. 连接mysql数据库

$ yarn add egg-mysql

在config/plugin.js 添加插件配置：

'use strict';

/** @type Egg.EggPlugin */
module.exports = {
  mysql: {
    enable: true,
    package: 'egg-mysql'
  }
};

在 config/config.default.js，添加 mysql 连接配置项和 安全威胁 csrf 的防范 ：

config.mysql = {
  // 单数据库信息配置
  client: {
    // host
    host: 'localhost',
    // 端口号
    port: '3306',
    // 用户名
    user: 'root',
    // 密码
    password: '数据库密码', // 初始化密码，没设置的可以不写
    // 数据库名
    database: 'test', // 我们新建的数据库名称
  },
  // 是否加载到 app 上，默认开启
  app: true,
  // 是否加载到 agent 上，默认关闭
  agent: false,
};

config.security = {
    csrf: {
      enable: false,
      ignoreJSON: true
    },
    domainWhiteList: [ '*' ], // 配置白名单
};

1. 查询用户（注意添加顺序，先service层后controller层，最后添加路由，否则会找不到对应的路径报错）

// 在service/home.js添加
async user() {
    const { ctx, app } = this;
    let sql = `select id,name from test`;
    try {
        const result = await app.mysql.query(sql);
        return result;
    } catch (e) {
        console.log(e);
        return null;
    }
}

// 在controller/home.js添加
async user() {
    const { ctx } = this;
    const result = await ctx.service.home.user();
    ctx.body = result;
}

// 在router.js
router.get('/user', controller.home.user);

2. 增加用户

async addUser(name) {
    const { ctx, app } = this;
    try {
        const result = await app.mysql.insert('test', { name });
        return result;
    } catch (e) {
        console.log(e);
        return null;
    }
}

async addUser() {
    const { ctx } = this;
    const { name } = ctx.request.body;
    try {
        const result = await ctx.service.home.addUser(name);
        ctx.body = {
            code: 200,
            msg: '添加成功',
            data: null
        }
    } catch (error) {
        ctx.body = {
            code: 500,
            msg: '添加失败',
            data: null
        }
    }
}

router.post('/add-user', controller.home.addUser);

3. 修改用户

async editUser(id, name) {
    const { ctx, app } = this;
    try {
        let result = await app.mysql.update('test', { name }, {
            where: {
                id
            }
        });
        return result;
    } catch (error) {
        console.log(error);
        return null;
    }
}

async editUser() {
    const { ctx } = this;
    const { id, name } = ctx.request.body;
    try {
        const result = await ctx.service.home.editUser(id, name);
        ctx.body = {
            code: 200,
            msg: '修改成功',
            data: null
        }
    } catch (error) {
        ctx.body = {
            code: 500,
            msg: '修改失败',
            data: null
        }
    }
}

router.post('/edit-user', controller.home.editUser);

4. 删除用户

async deleteUser(id) {
    const { ctx, app } = this;
    try {
        let result = await app.mysql.delete('test', { id });
        return result;
    } catch (error) {
        console.log(error);
        return null;
    }
}

async deleteUser() {
    const { ctx } = this;
    const { id } = ctx.request.body;
    try {
        const result = await ctx.service.home.deleteUser(id);
        ctx.body = {
            code: 200,
            msg: '删除成功',
            data: null
        }
    } catch (error) {
        ctx.body = {
            code: 500,
            msg: '删除失败',
            data: null
        }
    }
}

router.post('/delete-user', controller.home.deleteUser);