Back to Guide

Cursor - 4行代码前端连上腾讯云服务Mysql (开发积分系统)

未生AI·2024-12-14·5 min read

概述

如果再有人和你说cursor或者其他的AI编程工具，只能做所谓的Toy Project，那么你可以把本篇文章发给他狠狠地打他的脸!

我做了一个很有意思的功能。一个画圆挑战的小游戏，如果判定圆度大于90% 就会给自己增加一定积分。所有的用户信息、积分信息都存在腾讯云部署的mysql中，这是一个传统意义上完整的前后端项目。

游戏网页在： 画圆挑战

视频

我们的目标

我们的核心目标是将用户信息、积分信息存在腾讯云mysql数据库上。

  • 为什么选用腾讯云呢？因为如果你是做国内网站的话，为了数据合规不违法，国内的数据是禁止存在海外的。

  • 什么是mysql数据库呢？简单来说大家可以类比把他当做一个excel软件，我们可以往里面写入数据和查看数据。

和excel一样，我们需要下载安装、打开excel、新建一个sheet（默认有一个）、写入（填入）数据

思路

对于小白而言，为了节省时间，思路来源应该是AI。我直接在Cursor Composer中提问（我实际上用的是Chat，但是并不对的，后面第五步我会讲到），让他告诉我实现思路是什么？

注意这一步不用写代码，而是仅仅获取思路。

我截图给大家看一下cursor的返回。一共是三大步骤

一、 在腾讯云服务器安装MySQL

二、 配置MySQL远程访问

三、 配置腾讯云安全组

第一步：Mysql的安装

如果已经有了mysql那么可以跳过这一步，直接到第二步。

确定操作系统类型

首先注意区分自己的腾讯云是什么类型的操作系统，例如我的是centos，因此我选择这个命令，操作类型你可以在你的腾讯云后台看到：

云后台：

打开轻量云服务器

查看镜像

进入服务器内

点击登录，会弹出二维码，微信扫描即可进入服务器内了

这个时候在你页面看到的就是服务器的终端，我们会在这里执行cursor给的命令。

执行命令

我们按顺序执行一下命令：

# 更新包管理器
sudo yum update   # CentOS系统

# 安装MySQL
sudo yum install mysql-server   # CentOS系统

# 启动MySQL服务
sudo systemctl start mysqld
sudo systemctl enable mysqld

# 检查MySQL状态
sudo systemctl status mysqld

# 进行MySQL安全配置
sudo mysql_secure_installation

下面会做一些这些命令的解释和命令执行的心得，帮助大家上手理解。

第二步：Mysql远程配置

这一步至关重要！这一步配置是为了允许来自其他计算机（通过网络）的远程连接，简单来说就是为了前端能够访问到我们后端。

他具体分为两步：

创建新用户并授权部分

CREATE USER 'username'@'%' IDENTIFIED BY 'password';：

创建一个新的用户。'username'是你为新用户指定的用户名，'password'是该用户的密码。@'%'表示这个用户可以从任何 IP 地址（“%” 是通配符，表示所有可能的 IP）连接到 MySQL 数据库。

这在有远程连接需求的场景下是很有用的，比如你有一个前端网页，需要通过这个用户名和密码来访问 MySQL 数据库。我们不推荐使用root直接来连接数据库

修改 MySQL 配置文件

编辑 mysqld.cnf 文件：

这个配置文件包含了 MySQL 服务器的各种设置。bind - address选项用于指定 MySQL 服务器监听的 IP 地址

将 bind-address = 127.0.0.1 改为 bind-address = 0.0.0.0

最初，bind - address = 127.0.0.1 表示 MySQL 服务器只监听本地回环地址（127.0.0.1），这意味着只有本地计算机（也就是 MySQL 服务器所在的计算机）能够连接到它。

而将其改为bind - address = 0.0.0.0后，MySQL 服务器将监听所有可用的网络接口，允许来自其他计算机（通过网络）的远程连接。

第三步：配置腾讯云安全组

这个就是我们常说的防火墙，大家的电脑都有一个防火墙，这个防火墙能够很大程度上防止黑客攻击我们的电脑

这都是得益于防火墙禁止了一些不好的请求。

现在我们必须给防火墙开一个小洞（入站规则），好让前端来访问到我们的数据库。

  • 点击防火墙
  • 添加规则
  • 选择mysql3306
  • 其他不用选择，点击确定

小结

到这里我们的mysql就已经在腾讯云上创建好并启动起来了，接下来我们要做什么呢？

其实我也太知道，但是我知道的是我的目标是要存积分和用户信息到mysql中。既然不知道那么就向Cursor提问。

第四步：建表

我让他按第一步来实现：

好的先帮我实现第一步 数据库设计

小结

这一步完成后，我们前期准备都完成了，现在就是开始写代码，让前端连上mysql数据库，写入和查询数据

第五步：代码链接数据库

提需求

既然开始写代码，因此我新开了一个composer。然后我就意识到了我犯了一个错误，之前和cursor的对话都是在chat中。

新建的composer中没有刚刚聊天的上下内容，没有这些内容，cursor一定理解有偏差（agent也做不到的）。我应该一开始就在composer中对话。

所以我只能把刚刚在chat中聊天的内容复制到了composer中，然后在另外补充一些具体内容。关键点我都用红框标注了。

配置数据库连接

页面代码几乎没什么问题，我遇到的问题就是依赖包没下载，简单的安装一下就行，之后就没遇到什么问题了。

然后需要唯一手写的代码来了：就是写上我们的数据库ip、用户名、密码

第六步：频率控制

我会让cursor帮我限制一下用户访问的频率，防止把我的数据库打挂。

小结

到这里我们前端成功连上腾讯云自建的mysql数据库结束了，举一反三，你可以用cursor实现有存储信息的各种功能。祝你玩的愉快！

完整版内容

这篇文章应该能帮助你链接上腾讯云服务器的mysql，过程中可能遇到些问题，欢迎你加入我的社群，不仅能解锁本篇文章更详细的版本，同时也可以向我提问：

  • 社群链接 star

  • 本文更详细大纲