likes
comments
collection
share

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

作者站长头像
站长
· 阅读数 10

今天再详细介绍一下如何操作可视化工具DBeaver,以及Egg链接数据库

连接本地数据库

打开DBeaver,我们可以看到它的主页面

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

之后我们就需要新建连接,连接一下本地的数据库

点击左上角的 进行连接,会弹出一个弹框,我们选择MySQL数据库,如下图:

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

然后点击下一步,就会弹出另一个弹框,用于填写要连接的数据库信息

因为我们还没有建任何数据库,所以数据库名称就不用填,只需要填写安装数据库时设置的密码即可

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

点击完成后,就会让我们下载MySQL的驱动文件,点击下载即可

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

下载完成后,就能正常连接到数据库了

可以看到本地数据库前面有个对钩,这就表示已经连接上了

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

但是也有可能会弹出这样的错误,这是因为你没有启动本地MySQL服务

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

重点:本地服务一定要开启,否则无法连接

通过管理员打开 cmd 或者 Windows PowerShell 执行 命令:

net start mysql

就可以启动服务

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

成功连接后我们点开数据库,正常情况下,你只会有一个默认的 sys

如下图可以看到: sys是系统数据库; 而database_test是上一章节我们用命令行创建的数据库,

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

接下来就使用DBeaver可视化工具 从新建一个数据库开始,教大家一步一步操作

新建数据库

我们在 「数据库」 上面右键,会弹出一个弹框,然后点击 「新建 数据库」

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

会弹出一个弹框,填写新建数据库的初始化数据,我们只需填写数据库名字,剩下的默认就好

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

这样我们就新建了一个名为 test 的数据库:

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

数据库创建好后,我们开始新建表

新建表

展开 test 数据库,在 上面右键,选择**「新建 表」**

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

然后就会在右侧进行设置: 设置表名 和一下其他值,新建一个 名为 list 的表,其他的默认

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

新建列

再在 list 表 上右键 新建列

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

就会弹出一个弹框,让编辑列的属性

我们设置列名 为id

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

数据类型设置为 INT

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

非空和自增都勾选上 (双击 就是勾选)

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

确定后就可以在这两个地方看到

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

如法炮制,我们在新建一个name列,数据类型就默认字符型

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

设置主键

每一张表都需要有一个主键, list 表,我们设置 id 为主键,

在id上右键 ,点击 「新建约束」如下图:

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

勾选上 id,点击确定

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

之后就可以点击右下角的 保存,然后就会弹出一个弹框

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

点击执行

数据库,表格和列 都创建好了,接下来就可以新增数据了

新增数据

点击 数据 选项卡

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

点击下面的加号,如下图:

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

因为id 是自增的,name是必须要填的,所以我们可以只写name,点击保存后,id会自动增加

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

数据库创建好了,也有了一条数据,此时使用egg连接数据库尝试着获取数据

Egg.js查询数据库

在 Web 应用方面 MySQL 是最常见,最好的关系型数据库之一。非常多网站都选择 MySQL 作为网站数据库。

Egg框架提供了 **egg-mysql **插件来访问 MySQL 数据库。这个插件既可以访问普通的 MySQL 数据库,也可以访问基于 MySQL 协议的在线数据库服务。

先安装egg-mysql插件

npm i --save egg-mysql

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

'use strict';

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

在默认的配置文件 config/config.default.js,添加 mysql 连接配置项:

'use strict';

module.exports = appInfo => {

  // ...

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

  return {
    mysql,
  };
};

由于对 MySQL 数据库的访问操作属于 Web 层中的数据处理层,因此我将这部分代码放在 Service 层中维护。

在app文件下新建 server/home.js 文件

'use strict';

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

class HomeService extends Service {
  async list() {
    const { app } = this;

    // 获取 id和name 的 sql 语句
    const sql = 'select id, name from list';
    try {
      // 获取查询结果
      const result = await app.mysql.query(sql);
      return result;
    } catch (error) {
      console.log(error);
      return null;
    }
  }
}
module.exports = HomeService;

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

之后可以通过 Controller 获取 Service 层拿到的数据。所以添加 controller/home.jslist 方法

'use strict';

const { Controller } = require('egg');

class HomeController extends Controller {
  // ...
  async list() {
    const { ctx } = this;
    //   调用 service层的list方法
    const result = await ctx.service.home.list();
    ctx.body = result;
  }
}

module.exports = HomeController;

修改路由配置 router.js 当访问到list 路由时,调用list的控制器

'use strict';

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

现在启动项目

npm run dev

浏览器直接调用接口:http://127.0.0.1:7001/list ,看到数据表示成功。

前端调用数据库,使用可视化DBeaver创建数据 | 开始搞全栈(二)

数据库操作与连接也是全栈重要的一环,能成功链接到数据库,就迈出了一大步,还需要继续学习

推荐文章

转载自:https://juejin.cn/post/7275261996861407287
评论
请登录