Nuxt 开发后端部分前奏：搭建 MySQL 开发环境

麻爪
159 阅读6分钟

前文的结尾我们提到，Nuxt 不单单是一个纯粹的前端框架。实际上，它巧妙地模糊了前端与后端开发之间那道泾渭分明的界限，赋予开发者构建全栈应用的超凡能力。

无需大费周章搭建独立后端服务器，只需遵循 Nuxt 的目录规范，编写对应的 JavaScript 文件，就能处理前端发来的请求，对接数据库、执行业务逻辑，无缝对接前端展示需求，我们可以将其视为nuxt中内置了一个小的后端框架来帮我们做这件事。

那么基本上去接触nuxt的同学都是前端出身，出于业务需要比如seo需求才学习这门框架，那么对于后端的知识就会比较薄弱，所以我先带领大家简单复习一下后端的基础知识。

我们主要围绕着两点来，更多关于后端的知识那不是一句两句可以说清楚的，简单的说我们需要关注的内容就是数据的处理以及和客户端的通信。

数据库及数据库选择

对于 Nuxt 项目而言，它可不只是单纯的前端框架，涉足全栈开发时，数据处理是绕不开的关键环节，而数据库就是承载数据的基石。在技术选型阶段，我们需要依据项目特性来挑选合适的数据库，常见的有两类：关系型数据库与非关系型数据库。

关系型数据库

MySQL 是关系型数据库中的翘楚，它开源免费，社区生态极为繁荣，应用场景广泛，小到个人博客，大到电商巨头的部分业务板块，都能见到它的身影。在 MySQL 里，数据存储在二维表格结构当中，列用来定义数据类型，行则对应实实在在的数据记录。各个表之间依靠主键、外键紧密关联，就如同精密咬合的齿轮，驱动着业务逻辑顺畅运转。以电商系统为例，“用户表” 与 “订单表” 通过外键关联，能迅速定位某一用户名下的所有订单信息。

非关系型数据库

非关系型数据库（NoSQL）的出现，打破了传统关系型数据库表结构的束缚，带来别具一格的数据存储体验。

MongoDB 作为 NoSQL 领域的明星产品，以文档形式存储数据，一份文档类似 JSON 对象，内部层层嵌套各类数据字段，灵活性极高。在开发社交应用时，用户的动态、喜好、社交关系等数据可以一股脑放进一个文档，无需像关系型数据库那样拆分到多张表，读写效率优势明显。而且，MongoDB 支持横向扩展，随着数据量的爆炸式增长，简单添加服务器就能轻松扩容，从容应对高并发场景。

Redis 则专注于内存存储与缓存功能，数据全放在内存里，读写速度堪称闪电级别。它常常充当临时数据存储的角色，比如缓存热门商品信息，这样用户频繁查询热门商品时，前端直接从 Redis 获取数据，不必每次都向后端数据库发起请求，大大提升了响应速度。

这次的例子项目，我们选用 MySQL，相信不少同学在学校就接触过，上手会更快。

利用 Docker 搭建 MySQL 开发环境

在开发流程中，快速搭建起稳定且一致的数据库开发环境至关重要。借助 Docker 来安装 MySQL，无疑是一条捷径，不仅操作简便快捷，还能确保环境在本地与服务器端轻松复刻。接下来，就让我们开启这段轻松搭建之旅。

首先，前往 Docker 官网 下载并安装适配自己设备的 Docker 版本。安装完成后，启动 Docker

image.png

然后启动docker 我们可以使用docker-compose.yml来为我们获取mysql镜像等操作
首先，在项目根目录下创建一个名为 docker-compose.yml 的文件，开始填充内容：

version: '3.8'
services:
  mysql:
    image: mysql:8.0  # 表明要使用的 Docker 镜像，从 Docker Hub 拉取 MySQL 8.0 版本镜像
    container_name: mysql_container
    ports:
      - 3306:3306  # 将本地主机的 3306 端口与容器内 MySQL 的 3306 端口相连，便于外部访问数据库
    environment:
      MYSQL_ROOT_PASSWORD: your_password
      MYSQL_DATABASE: your_database
      MYSQL_USER: your_user
      MYSQL_PASSWORD: your_user_password
    volumes:
      - mysql_data:/var/lib/mysql  # 挂载数据卷，即使容器重启或重建，数据也不丢失
    restart: always
volumes:
  mysql_data:

配置好 docker-compose.yml 文件后，在终端进入该文件所在目录，执行下面这条命令：

docker-compose up -d

这条命令会自动拉取 MySQL 镜像并启动服务。此时，建议下载可视化的数据库管理应用，方便后续操作。例如在 VS Code 中，搜索 MySQL 相关插件，就能找到不少可用的可视化插件。按之前设置的数据库配置，即可连接启动的可视化数据库。

image.png

连接成功之后我们可以 image.png

补充docker拉取

如果大家遇到上面通过docker-compose.yml配置拉取了数据库镜像成功，但是链接却失败的情况可以选择检查一下数据库镜像是否成功启动。
我们可以通过命令

docker-compose ps

查询我们的镜像状态，主要是查看

image.png STATUS 字段是否是up

如果不是，可以在终端里面查询我的镜像

image.png 发现第一个就是mysql，但是我的插件却无法成功连接上数据库。

我们可以选择直接在终端先启动我们的mysql

docker run -p 3306:3306 --name mysql -e MYSQL_ROOT_PASSWORD=rootpassword mysql:latest

这里放入大家自己开始设置的MySQL镜像名称

  • -p 3306:3306：将宿主机的 3306 端口映射到容器内的 3306 端口，方便从宿主机访问容器内的 MySQL 服务。
  • --name mysql：给创建的容器命名为 mysql。
  • -e MYSQL_ROOT_PASSWORD=rootpassword：设置环境变量，这里定义了 MySQL 的 root 用户密码为 rootpassword。
  • mysql:latest：指定要使用的镜像，这是 MySQL 官方最新版本的镜像 。

然后我们可以在终端看见成功启动的信息。

接着我们执行

 docker exec -it mysql bash

进入mysql容器并登录

 mysql -u root -p

输入密码，这样就是成功的了 image.png

再回到 VS Code 的插件位置尝试连接，大概率就能成功了。这一系列排查步骤能帮我们解决不少初期搭建环境时遇到的棘手问题，保障开发环境顺利就绪。

今天简单说了一下数据库和docker的内容搭建，下一节我将介绍如何进行数据库设计和内容开发

avatar
文章
阅读
粉丝