首页/资讯中心/详情

码道·印记：轻量级前后端分离的个人博客管理系统开发与云端部署

码道·印记：轻量级前后端分离的个人博客管理系统开发与云端部署
📅 发布时间：2026/6/26 15:18:17

案例介绍

本案例基于华为云码道（CodeArts）代码智能体，快速构建了一个前后端分离的个人博客系统。通过华为云AI Shell完成自动化部署，显著提升了从开发到上线的效率。

案例内容

一、概述

1.1 案例介绍

本案例基于华为云码道（CodeArts）代码智能体，快速构建了一个前后端分离的个人博客系统。前端使用HTML+CSS+JS实现响应式管理界面；后端采用Node.js+Express框架提供API，并使用MySQL存储数据。通过华为云AI Shell完成自动化部署，显著提升了从开发到上线的效率。该系统为技术分享与知识管理提供了轻量、高效的解决方案，展现了华为云开发工具链的便捷性。

案例技术选型：

  • 华为云码道（CodeArts）代码智能体：一个理解项目需求，懂得编码之道，善用百器的实干派AI研发专家，开启你的编码自动驾驶模式。本案例中作为交互工具，自动生成项目代码。

  • 技能（Skills）：是一种能力封装机制，用于将专业知识（如编码经验、常见问题、解决方案等）组织为可复用的模块。技能本质上是由指令、脚本和资源构成的集合，智能体可按需动态加载这些专业化的“技能包”，从而提升特定任务的执行能力与执行效率。本案例使用UI-UX-Pro-Max技能，指导AI生成更专业、更有审美的界面。

  • AI Shell：智能 AI 命令行工具，以自然语言驱动终端操作，无需熟记复杂指令，大幅降低使用门槛，一站式完成华为云资源查询、操作、运维工作，让终端操作更高效、更智能。让华为云更好用、更易用。

1.2 适用对象

  • 企业
  • 个人开发者
  • 高校学生

1.3 案例时间

本案例总时长预计90分钟。

1.4 案例流程

说明：

  1. 开发者安装华为云码道 CodeArts 代码智能体；
  2. 码道安装UI-UX-Pro-Max技能；
  3. 安装Node.js和Python环境；
  4. 安装关系型数据库MySQL和数据库客户端管理工具DBeaver；
  5. 使用华为云码道自动生成博客管理系统代码；
  6. 使用UI-UX-Pro-Max技能美化界面；
  7. 使用AI Shell创建云资源并部署个人博客系统。

1.5 资源总览

本案例预计花费5-10元。

资源名称规格单价（元）
华为云码道（CodeArts）代码智能体体验版免费
AI Shell体验版免费
华为云资源按需计费10

二、基础环境与资源准备

2.1 AI IDE华为云码道安装部署

参考案例《AI IDE华为云码道（CodeArts）代码智能体安装部署》完成Windows版AI IDE华为云码道（CodeArts）代码智能体安装部署。

2.2 码道安装UI-UX-Pro-Max技能

在华为云码道对话框中，输入以下提示词安装UI-UX-Pro-Max技能。

复制代码

从https://gitcode.com/u014005316/ui-ux-pro-max 安装skills 到 ~/.codeartsdoer/skills/

关于UI-UX-Pro-Max技能的介绍和使用，请参考案例《智码美形：华为云码道 × UI-UX-Pro-Max 高品质界面智能生成实践》

2.3 安装 Node.js 和 Python 环境

使用快捷键Ctrl+Shift+`，新建终端，输入以下命令查看Node.js和Python环境是否安装？

复制代码

python --version node -v npm -v

如果没有安装，请参考案例《SKILL快速构建你的Java、Python和Node.js开发环境》一键配置Node.js和Python开发环境。

2.4 安装关系型数据库 MySQL

MySQL 是一个开源的关系型数据库管理系统（RDBMS），使用 SQL 语言进行数据操作。它以高性能、稳定可靠、易于使用著称，被广泛应用于网站、应用系统等场景。支持跨平台（Windows、Linux、macOS），提供多种存储引擎。

下载 MySQL：

下载Windows版 MySQL8.0.46。

提示我们需要登录或者注册账号，点击：No thanks, just start my download.

安装 MySQL 服务：

解压安装包，以管理员身份进入bin目录下，使用以下命令安装 MySQL 服务。

复制代码

mysqld -install MySQL8.0

备注：以下是我的解压目录。

复制代码

D:\Program Files\mysql-8.0.46-winx64\mysql-8.0.46-winx64\bin

初始化MySQL：

复制代码

mysqld --initialize --console

生成临时密码：

启动 MySQL服务：

复制代码

net start MySQL8.0

登录 MySQL：

复制代码

mysql -u root -p

修改密码，将root用户密码设置为：123456。

复制代码

ALTER USER 'root'@'localhost' IDENTIFIED BY '123456';

备注：记录MySQL的用户名和密码，留作后面步骤使用。

创建数据库 > 建表 > 插入数据：

复制代码

CREATE DATABASE IF NOT EXISTS my_blog; USE my_blog; CREATE TABLE articles ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(255) NOT NULL, content TEXT NOT NULL, category VARCHAR(100), create_time DATETIME DEFAULT NOW() ); INSERT INTO articles (title, content, category) VALUES ('欢迎来到我的前后端博客', '这是一套完整的前后端分离博客系统，纯HTML+CSS+JS+Node.js+MySQL实现，界面美观、功能完整！', '日常');

2.5 安装数据库客户端管理工具 DBeaver

DBeaver 是一个通用的数据库客户端管理工具和 SQL 客户端。它支持几乎所有主流数据库（包括 MySQL、PostgreSQL、Oracle、SQL Server 等），提供图形化界面，方便用户进行连接管理、数据浏览、SQL 编辑、导入导出等操作。

下载 DBeaver。

安装 DBeaver：

一直点击下一步，直到安装完成。打开 DBeaver，点击左上角图标，连接数据库。

选择MySQL，点击下一步。

输入密码，点击完成。

查看和管理数据库和表。

三、博客系统前后端代码实践

3.1 华为云码道自动生成代码

在华为云码道对话框中，输入以下提示词：

复制代码

在当前项目目录下，前端使用 HTML + CSS + JS ，后端使用 Node + Express + MySQL，构建前后端分离的个人博客管理系统。 后端提供以下API接口： 1. 获取所有文章； 2. 获取单篇文章； 3. 发布文章； 4. 删除文章。 创建数据库 > 建表 > 插入数据，使用以下SQL语句。 CREATE DATABASE IF NOT EXISTS my_blog; USE my_blog; CREATE TABLE articles ( id INT PRIMARY KEY AUTO_INCREMENT, title VARCHAR(255) NOT NULL, content TEXT NOT NULL, category VARCHAR(100), create_time DATETIME DEFAULT NOW() ); INSERT INTO articles (title, content, category) VALUES ('欢迎来到我的前后端博客', '这是一套完整的前后端分离博客系统，纯HTML+CSS+JS+Node.js+MySQL实现，界面美观、功能完整！', '日常'); 前端页面： 1. 首页 index.html：展示所有文章； 2. 文章详情 detail.html：查看文章详情； 3. 管理后台 admin.html：发布文章并对已发布的文章进行查看和删除操作。

几分钟后，华为云码道帮助我们生成了完整代码。

服务后端修改数据库连接配置：

server/index.js中，配置数据库host、user和password。

复制代码

const pool = mysql.createPool({ host: 'localhost', user: 'root', password: '123456', database: 'my_blog', waitForConnections: true, connectionLimit: 10 });

前面已经修改了数据库连接配置，我们可与码道直接对话，让码道帮助我们直接启动前后端。

个人博客系统首页：

详情页：

管理后台：

测试发布文章：

测试删除文章：

管理后台页面，点击删除。

删除成功后，回到首页。

3.2 使用 UI-UX-Pro-Max 技能美化界面

在华为云码道对话框中，输入以下提示词。

复制代码

调用ui-ux-pro-max skill，帮我重新设计个人博客管理系统中的首页、管理后台页和详情页，样式：编辑网格/杂志风。

博客首页：

管理后台页：

文章详情页：

由于本应用的开发是Agent自动生成的，每次提问生成的代码及最后的运行结果均存在出入，开发者可根据自己的需求，调教模型生成自己想要的结果。若想体验与案例一样的结果，请下载或克隆源码至本地运行。

四、云端部署个人博客系统

4.1 登录并使用 AI Shell

参考案例《AI CLI：依托自然语言实现华为云资源编排与应用自动化部署》的“二、环境和资源准备、三、登录使用AI Shell”章中的“2.1 访问秘钥配置和3.1 登录开发者空间”节，配置访问秘钥并登录使用AI Shell。

4.2 自然语言创建云资源并部署应用

在AI Shell对话框中，输入以下提示词。

复制代码

请基于个人博客管理系统源码：https://gitcode.com/u014005316/BlogSystem 分析项目代码，为此个人博客管理系统在华为云规划并创建一套可运行、轻量化的极简架构云资源，并完成应用部署。

执行过程中会涉及一些敏感操作（写、执行、删除等操作），会弹出提示，询问用户是否允许该操作，请按需选择，本案例选择“Allow always”。

生成了部署方案：

创建计划，生成Terraform配置文件：

执行Terraform apply创建资源。

部署博客应用到 ECS。

部署完成。

浏览器访问。

4.3 销毁云资源

云服务器采用按需计费模式，体验完成后若不再使用，可通过自然语言命令释放本次创建的云资源，在对话框中输入以下提示词。

复制代码

帮我销毁本次所创建的云资源

执行过程中会涉及一些敏感操作（写、执行、删除等操作），会弹出提示，询问用户是否允许该操作，请按需选择，本案例选择“Allow always”。

云资源完成清理，可访问华为云资源列表予以验证。

至此，码道·印记：轻量级前后端分离的个人博客管理系统开发与云端部署的案例已全部完成。