eggjs案例一：使用eggjs实现登录注册并储存到mysql数据库

本文链接：https://blog.csdn.net/weixin_43864662/article/details/101062457

刚开始接触eggjs框架，然后想实现一个简单的界面输入数据，通过egg框架讲数据简单的储存到数据库中，但是搜到的都是官网上的介绍，没有实际操作。然后就自己摸索着写了试试，遇见了许多的坑_终于~~。

官方教程：https://eggjs.org/en/tutorials/mysql.html
github地址：https://github.com/xinyoumenghuqingxiuqiangwei/eggFromCommitAndDatabaseCRUD.git

这个案例主要是从注册界面获取输入框的数据，然后通过eggjs讲数据存到mysql数据库中。

前期准备：

mysql数据库：

新建一个register表，里面有三个字段，分别是username、telephone、password。（不用设置主键和not null 等）；

快速生成egg项目

使用cmd窗口，把路径切换到本地桌面上。

npm i egg-init -g

egg-init 项目名 --type=simple

cd 项目名路径

npm install

启动项目：npm run dev

项目启动起来后，访问链接就可以看到基本的框架就搭建好了。

添加文件夹

在app目录下添加service文件夹：存放业务处理层，主要是收集和处理数据的作用。

                        view文件夹：用户的试图表现部分

                        controller是本身自带的，是控制层部分，控制数据流转途径，请求转发。

然后~~~

下载 egg-mysql 和 egg-view-ejs，这就不多说了~~~。

配置插件：

//config\config.default.js
'use strict';

// eslint-disable-next-line no-unused-vars
module.exports = appInfo => {
  const config = exports = {};
  config.keys = appInfo.name + ' ';
  config.mysql = {
    client: {
      // host
      host: 'localhost',
      // 端口号
      port: '3306',
      // 用户名
      user: 'root',
      // 密码
      password: 'root',
      // 数据库名
      database: 'test',
    },
  };
  config.view = {
    defaultViewEngine: '.ejs',

    mapping: {
      '.html': 'ejs',
    },
  };

  return {
    ...config,
  };

};

// config\plugin.js  引入插件
'use strict';

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

到这里应该是是可以看懂的吧~~~

然后：进去正题-------------------------------------->开始编写代码

一般我是喜欢从路由开始，然后再需要什么写什么。

路由代码：

// app\router.js
'use strict';

/**
 * @param {Egg.Application} app - egg application
 */
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.controllerRegister.controllerRegister);
};

路由的代码的意思是当我们访问’/'路径的时候，执行controller文件下的controllerRegister里面的controllerRegister方法。

然后开始写controller的代码：

'use strict';

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

class ControllerRegisterController extends Controller {
  async controllerRegister() {
    await this.ctx.render('register');
    await this.service.serviceRegister.InsertDatabase();
  }
}

module.exports = ControllerRegisterController;

我们看里面的内容，大致意思是通过this.ctx.render(‘register’);来得到register.html页面，然后调用service文件夹下的serviceRegister.js文件的InsertDatabase()方法。

// app\view\register.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>注册页面</title>
</head>
<body>
  <h4>注册页面</h4>
  <form action='/commit'>
    username:<input type="text" name="username" id="username" /><br>
    password: <input type="password" name="password" id="password"/><br>
    <button>点击注册</button>
  </form>
</body>
</html>

// app\service\serviceRegister.js
'use strict';

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

class ServiceRegisterService extends Service {
  async InsertDatabase() {
    console.log('=================');
    const username = this.ctx.query.username;
    const password = this.ctx.query.password;
    console.log(telphone);
    await this.app.mysql.insert('register', { username, password });
    console.log(username + '......'  + password);
  }
}

module.exports = ServiceRegisterService;

上面的介绍主要是注册的功能，我的github地址里面有完整版本。登录的操作就是加了一个判断，具体的思路就是，获取登录页面中输入的username和password，然后查询数据库中是否有有页面中的用户，如果有就是登录成功，如果没有就返回登录失败。
注意： 当查询数据库中不存在数据的时候我们得到的是一个null对象，所以要判断是否为空。看下代码：

    const username = this.ctx.query.username;// 获取页面中的username
    const password = this.ctx.query.password;// 获取页面中的password
    console.log('+++++++++++++++++++++++++++++++++++++++++++++++++++');
    console.log(username + '......' + password);
    /**
     *  把获取的username和password作为条件查询数据库中是否有存在
     *  查询到的数据返回的是一个数组，可以通过sel.username和sel.password来获取得到的值
     *  当从页面得到的数据在数据库中不存在的时候得到的是一个null对象。所以在判断的时候
     *  不能获取sel.username和sel.password的值。
     */

    const sel = await this.app.mysql.get('register', { username, password }); 
    console.log(sel);
    this.ctx.body += '';
    if (sel) {
      this.ctx.body = sel.username + '登录成功';
    // eslint-disable-next-line eqeqeq
    } if (sel == null) {
      this.ctx.body = '抱歉！登录失败，请重新登录';
    }
  }