案例介绍本案例基于华为云码道CodeArts代码智能体快速构建了一个前后端分离的个人博客系统。通过华为云AI Shell完成自动化部署显著提升了从开发到上线的效率。案例内容一、概述1.1 案例介绍本案例基于华为云码道CodeArts代码智能体快速构建了一个前后端分离的个人博客系统。前端使用HTMLCSSJS实现响应式管理界面后端采用Node.jsExpress框架提供API并使用MySQL存储数据。通过华为云AI Shell完成自动化部署显著提升了从开发到上线的效率。该系统为技术分享与知识管理提供了轻量、高效的解决方案展现了华为云开发工具链的便捷性。案例技术选型华为云码道CodeArts代码智能体一个理解项目需求懂得编码之道善用百器的实干派AI研发专家开启你的编码自动驾驶模式。本案例中作为交互工具自动生成项目代码。技能Skills是一种能力封装机制用于将专业知识如编码经验、常见问题、解决方案等组织为可复用的模块。技能本质上是由指令、脚本和资源构成的集合智能体可按需动态加载这些专业化的“技能包”从而提升特定任务的执行能力与执行效率。本案例使用UI-UX-Pro-Max技能指导AI生成更专业、更有审美的界面。AI Shell智能 AI 命令行工具以自然语言驱动终端操作无需熟记复杂指令大幅降低使用门槛一站式完成华为云资源查询、操作、运维工作让终端操作更高效、更智能。让华为云更好用、更易用。1.2 适用对象企业个人开发者高校学生1.3 案例时间本案例总时长预计90分钟。1.4 案例流程说明开发者安装华为云码道 CodeArts 代码智能体码道安装UI-UX-Pro-Max技能安装Node.js和Python环境安装关系型数据库MySQL和数据库客户端管理工具DBeaver使用华为云码道自动生成博客管理系统代码使用UI-UX-Pro-Max技能美化界面使用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 环境使用快捷键CtrlShift新建终端输入以下命令查看Node.js和Python环境是否安装复制代码python --version node -v npm -v如果没有安装请参考案例《SKILL快速构建你的Java、Python和Node.js开发环境》一键配置Node.js和Python开发环境。2.4 安装关系型数据库 MySQLMySQL 是一个开源的关系型数据库管理系统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 rootlocalhost 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 (欢迎来到我的前后端博客, 这是一套完整的前后端分离博客系统纯HTMLCSSJSNode.jsMySQL实现界面美观、功能完整, 日常);2.5 安装数据库客户端管理工具 DBeaverDBeaver 是一个通用的数据库客户端管理工具和 SQL 客户端。它支持几乎所有主流数据库包括 MySQL、PostgreSQL、Oracle、SQL Server 等提供图形化界面方便用户进行连接管理、数据浏览、SQL 编辑、导入导出等操作。下载 DBeaver。安装 DBeaver一直点击下一步直到安装完成。打开 DBeaver点击左上角图标连接数据库。选择MySQL点击下一步。输入密码点击完成。查看和管理数据库和表。三、博客系统前后端代码实践3.1 华为云码道自动生成代码在华为云码道对话框中输入以下提示词复制代码在当前项目目录下前端使用 HTML CSS JS 后端使用 Node Express MySQL构建前后端分离的个人博客管理系统。 后端提供以下API接口 1. 获取所有文章 2. 获取单篇文章 3. 发布文章 4. 删除文章。 创建数据库 gt; 建表 gt; 插入数据使用以下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 (欢迎来到我的前后端博客, 这是一套完整的前后端分离博客系统纯HTMLCSSJSNode.jsMySQL实现界面美观、功能完整, 日常); 前端页面 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”。云资源完成清理可访问华为云资源列表予以验证。至此码道·印记轻量级前后端分离的个人博客管理系统开发与云端部署的案例已全部完成。