Node + React实战:从0到1实现记账本(三)

512 阅读4分钟

简单数据库的操作

一.创建数据表

连接数据库后,创建user表,设置好,表名称,引擎设置位InnoDB,字符集utf8mb4,核对选择utf8mb4_general_ci

字段填写idname,数据类型,主键,非空,自增如下所示:

image.png

添加数据

image.png

二.查询接口

保存数据之后,打开第新建好的项目 egg-example,安装插件 egg-mysql 如下所示:

npm install egg-mgsql

打开 config/plugin.js 添加插件配置:

'use strict';

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

打开 config/config.default.js 添加 mysql 连接配置项:

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

修改 service/home.js 如下所示:

'use strict';

const Service = require('egg').Service;

class HomeService extends Service {
  async user() {
    const { ctx, app } = this;
    const QUERY_STR = 'id, name';
    let sql = `select ${QUERY_STR} from user`; // 获取 id 的 sql 语句
    try {
      const result = await app.mysql.query(sql); // mysql 实例已经挂载到 app 对象下,可以通过 app.mysql 获取到。
      return result;
    } catch (error) {
      console.log(error);
      return null;
    }
  }
}  
module.exports = HomeService;

修改 controller/home.js 的 user 方法如下:

// 获取用户信息
async user() {
  const { ctx } = this;
  const result = await ctx.service.home.user();
  ctx.body = result;
}

修改路由配置 router.js

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

通过 npm run dev 启动项目,我们在浏览器直接调用接口,如下所示代表成功。

image.png

通过 /user 接口地址,获取到了 list 表的 id 和 name 属性,以数组的形式返回。

三.对数据库CRUD操作

1.新增接口

查询接口成功之后,来编写新增接口。在 service/home.js 下新建一个函数 addUser,如下所示:

// 新增
async addUser(name) {
  const { ctx, app } = this;
  try {
    const result = await app.mysql.insert('list', { name }); // 给 user 表,新增一条数据
    return result;
  } catch (err) {
    console.log(err);
  }
}

再为 controller/home.js 添加一个 addUser 方法,如下所示:

//  新增用户
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.js 添加如下代码:

//router.js
router.post('/add_user', controller.home.addUser);

打开 Postman 发起一个 post 请求,如下所示:

image.png 此时我们已经成功往数据库里添加了一条新的内容,我们不妨打开SQLyog查看数据情况:

image.png 刷新数据库后,我们可以看到 「我是新增的皮卡」已经被添加到数据库 list 表中,并且 id 是自动增加的。

此时你再次请求 /user 接口,你会拿到两条数据:

image.png

2.编辑接口

编辑接口,就拿上述的内容来说,通过 /user 拿到了列表数据,我们可以通过 id 定位某条数据,去修改它的 name 属性。

接下来来实现编辑接口,同理,我们打开 /service/home.js,添加编辑操作:

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

再前往 /controller/home.js 添加如下代码:

// 编辑
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.js 如下所示:

//router.js
router.post('/edit_user', controller.home.editUser);

打开 Postman 对编辑接口进行调试,如下所示:

image.png 观察数据库 list 表是否生效:

image.png

3.查询接口

查找内容,可以根据id来查询,继续在 /service/home.js 添加查询接口,如下所示:

// 查询
async findUser(id,name) {
  const { ctx, app } = this;
  try {
    let result = await app.mysql.select('list', {
      id: 2,
    });
  } catch (error) {
    console.log(error);
    return null;
  }
}

再前往 /controller/home.js 添加如下代码:

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

添加相应路由配置,打开 router.js 如下所示:

router.post('/find_user', controller.home.findUser);

打开 Postman 调试接口,如下所示:

image.png

4.删除接口

删除内容,一向都是比较容易的,继续在 /service/home.js 添加删除接口,如下所示:

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

添加相应路由:

//router.js
router.post('/delete_user', controller.home.deleteUser);

打开 Postman 调试接口,如下所示:

image.png 查看数据库,id 为 2 的数据已经被删除了。

image.png

四.总结

通过 Egg 结合 Postman 演示了一边最基础数据库的增删改查操作。一个模块数据的增删改查,最基础的模式便是如此,而一个项目的落地,需要在此基础上增加各种复杂多变的逻辑与联系。