AI最佳实践全栈式从0到1开发个人博客系统

以下是「豆包 MarsCode 体验官」优秀文章，作者我喺小VIE。

前言

近年来随着人工智能（AI）大模型的迅猛发展，大模型在自然语言处理、计算机视觉、语音识别等领域的表现逐渐达到甚至超越人类的水平。在大模型的应用场景之下，如智能客服、阅读写作、图像生成等也随之进入生活提高工作效率。在编程领域中，也不断涌现出各类基于大模型的编程工具和开发平台，为开发者提升工作效率——豆包MarsCode 就是其一。

豆包MarsCode 于2024年6月底发布，我开始了解到并体验使用豆包Marscode 则缘于一次巧合。作为一名开发者，常年孜孜不倦于后端开发，也鲜少接触其他的编程语言。当有一天我冒出个想法，想要搭建自己的个人博客时，于是我将视野朝向了前端。也就是两个半月的时间，我完成了前端基础的学习。在博客系统开发的起步之初，恰巧我了解到了豆包MarsCode。在初步体验了豆包Marscode 的 AI 能力后，我决定借助豆包Marscode 的力量来完成我的个人博客系统。

在本文中，我将带领各位小伙伴了解豆包MarsCode 编程助手的基本使用以及豆包MarsCode IDE 的操作体验。之后在博客系统开发中，将分为博客系统的后端 API 服务、前端 CMS、前端 Web 三大部分叙述，并且全程使用豆包Marscode IDE 完成项目开发。拭目以待一下，如何利用豆包Marscode 助力全栈式地从0到1开发个人博客系统吧！

一、豆包MarsCode 介绍

豆包MarsCode，顾名思义它是基于豆包大模型衍生打造的智能编程开发工具。豆包大模型即字节跳动自研的 AI 大模型。至于 “MarsCode”，虽然官方没给出说明，不过以我的理解和体验想必是 “Master Code” 的意思，即“掌握代码”。 

1.1 功能介绍

豆包MarsCode 具备编程助手和云端集成开发环境 Cloud IDE 两种形态。当然无论是编程助手还是 Cloud IDE，它们都提供以下能力：

• 代码补全：根据当前代码或通过代码注释，自动补全后续代码片段。
• 代码生成：根据自然语言描述生成对应的代码片段。
• 代码编辑：编辑指定代码，包括重构、优化、修改逻辑等。
• 代码解释：解释代码片段，或理解整个项目工程。
• 代码注释生成：生成函数级注释或行间注释。
• 单元测试生成：为指定代码片段生成单元测试。
• AI 修复：发现代码中的问题并修复。
• AI 问答：针对研发领域定向优化问答质量，提供更精准的问答结果。

可见豆包MarsCode 提供的能力是十分多样的，足够应对我们开发中的大部分场景了。在后面的个人博客开发中也会逐一对这些功能进行应用、演示和讲解，感受豆包 MarsCode 强大的 AI 能力。

1.2 注册豆包Marscode

在正式开始豆包MarsCode 的使用之前，还需要先拥有一个账号。如果没有则跟随以下步骤注册吧。

1. 进入豆包 Marscode 官方网站，在官网首页顶部右上角点击“登录”按钮。

2. 在登录页填写信息注册登录或通过“稀土掘金”授权登录。

1.3 安装插件

豆包MarsCode 编程助手需要在本地 IDE 中安装后才能使用，支持多种编程语言，目前可以在 Visual Studio Code 和 JetBrains IDE 的插件市场中搜索到并安装使用。豆包MarsCode IDE 则无需安装，它是在云端的集成开发环境。下面分别介绍在这两大集成开发环境应用中如何安装豆包 MarsCode 编程助手。

1.3.1 Visual Studio Code

Note：支持 Visual Studio Code 1.67.0 及以上版本。

1. 打开 Visual Studio Code，点击左侧导航栏中的 Extensions（扩展）。
2. 在插件市场搜索 “MarsCode” 关键词，找到 MarsCode: AI Coding Assistant。
3. 点击 Install（安装）插件。
4. 重启 Visual Studio Code。
5. 使用快捷键（Windows: Ctrl + U; macOS: Command + U）打开豆包 MarsCode 编程助手侧边对话框。
6. 点击“登录”按钮，登录你的账号。

1.3.2 JetBrains (IntelliJ IDEA)

Note：支持 JetBrains 产品如 IntelliJ IDEA 221.5080.210 及以上版本。

1. 打开 IntelliJ IDEA，点击左侧 Plugins（插件）。
2. 在插件市场搜索 “MarsCode” 关键词，找到 MarsCode: AI Coding Assistant。
3. 点击 Install（安装）插件。
4. 重启 IntelliJ IDEA。
5. 使用快捷键（Windows: Ctrl + U; macOS: Command + U）打开豆包 MarsCode 编程助手的侧边对话框。
6. 点击“登录”按钮，登录你的账号。

1.4 插件配置

这里我们演示在 Visual Studio Code 中配置豆包MarsCode 编程助手（IntelliJ IDEA 的则大同小异）。

1. 在 MarsCode: AI Coding Assistant 插件页点击齿轮图标。
2. 在 Settings（设置）中设定对话语言。
3. 在 Settings（设置）中可以选择开启“代码补全 Pro”。
4. 其他选项根据需要启用或禁用。

二、豆包Marscode IDE 介绍

前面我们除了提到的豆包MarsCode 编程助手，还有云端集成开发环境——即豆包Marscode IDE。豆包 Marscode IDE 原生内置 AI 编程助手，配备开箱即用的开发环境，可以让开发者更加便捷且专注于各类项目的开发。 

2.1 核心优势

在我的项目起步之初，我就直接决定选择豆包MarsCode IDE 进行云端开发，而不是用本地 IDE 配合编程助手。在这里可以谈谈为什么使用豆包 Marscode IDE，它优势是什么，相比于本地 IDE 在开发体验上的有什么更为出彩的。

2.1.1 原生的 AI 能力

豆包MarsCode IDE 原生内置了 AI 编程助手，在这一点上我们不需要单独安装编程助手就可以使用。其具备的功能同样包括代码自动补全与生成、问题修复、代码优化等能力，可以帮助你更高效地完成开发任务。

2.1.2 开箱即用的开发环境

豆包MarsCode IDE 作为云端 IDE，只需要一台可以访问浏览器的设备，无论电脑、平板甚至手机都能进入开发工作。我们不但不需要配置复杂的本地环境，而且还可以直接使用豆包 MarsCode IDE 提供数的十种不同语言、框架的开发模板，这种开箱即用的绝妙体验极大地节省了时间，让我们更专注于项目本身的开发。

2.1.3 不受本地资源限制

既然实现了云端开发环境，那么我们就不再需要担心本地开发设备的配置是否足够，对项目开发的算力是否足以支撑——豆包 MarsCode 弹性的云端资源可以满足任何项目的需要。

2.2 开始使用

了解完豆包MarsCode IDE 的核心优势后，我相信小伙伴们都已经跃跃欲试了，下面来讲解如何开始使用豆包 MarsCode IDE。

2.2.1 打开豆包MarsCode IDE

1. 在豆包MarsCode 官方网站点击顶部 “IDE”。
2. 在网页右上角或中间位置点击 “进入IDE” 按钮。

2.2.2 豆包MarsCode IDE 控制台

豆包MarsCode IDE 控制台中可以创建项目、查看模板、前往文档中心等。如果已有项目则会展示在右侧操作区。 

 点击控制台左侧 “+ 项目” 按钮开始创建项目。在创建项目窗口中可以选择 “从模板创建” 或 “导入 Git 代码仓库”。创建项目后就可以开始进入开发了。 

2.2.3 豆包MarsCode IDE 工作空间

创建好项目后就进入到豆包MarsCode IDE 工作空间，在这里我们就可以开始正式编码了。不过我们也可以先概览一下界面布局，先有个大致印象。

• 顶部导航栏：展示菜单、项目信息、环境资源、文件搜索等功能。
• 文件导览区域：位于左侧，展示项目的目录结构。
• 编辑器：位于中间，用于编辑文件内容，编写代码的区域。
• 底部面板：位于编辑器下方，展示错误信息、输入命令行、查看网络服务等。
• 右侧侧边栏：是豆包MarsCode IDE 集成的内部能力（AI 助手、内置工具）与第三方扩展能力。
• 状态栏：位于界面底部，用于显示额外的编辑状态信息，例如错误信息、当前的行号/列号、当前编码方式等。

2.3 进阶使用&贴示

在使用豆包MarsCode IDE 开发过程中，难免因为刚接触新工具而操作生涩，又或者面对莫名其妙的报错感到困惑始终排查不到原因，因此我在深度体验之后总结出了一些进阶的使用技巧及注意事项。在使用豆包 Marscode IDE 开发的过程中如果有任何不解的地方都可以随时回顾本节。

2.3.1 资源容量

即使豆包MarsCode IDE 不受本地资源的限制就可以进行开发，但是在云端平台的资源也会有所限制。

• 单个账号在豆包 MarsCode IDE 上创建的项目数量上限为 10 个。
• 单个项目可以使用的最大资源如下：

• CPU：2Core
• Memory：4GiB
• Disk：10GiB

项目的资源使用情况可以在顶部导航栏项目信息处查看。可见目前豆包Marscode 平台给的资源还是相当充裕的，即使运行 Java 这样吃内存的程序也绰绰有余。 

 此外，当工作空间的项目长时间不操作时，会自动关闭项目，不过不用担心，代码会实时在云端保存的，此时只需要重启项目就可以回到工作空间。 

2.3.2 Web 预览

Webview 工具是一个内嵌在豆包MarsCode IDE 中的轻量级浏览器，可以在工作空间内实时预览页面。当我们运行前端项目后会在工作空间右侧展示。之后如果我们需要在浏览器中进行网页的开发和测试，则可以点击 Webview 右上角的指南针（Open In Browser）快速在浏览器打开页面。 

2.3.3 网络服务

当项目成功启动并运行后，豆包MarsCode 平台会暴露在一个公网地址。前端项目可以在 Terminal（终端）输出的 “Network” 直接点击访问或在 Webview 中点击在浏览器打开。后端项目则会在 Terminal（终端）旁边独立出一个 Networking（网络），点击 Networking 标签即可查看服务地址。 

2.3.4 服务时效性

这里我们需要注意的是公网 URL 是有时效性的，在一段时间后会失效并重新自动地或手动地获取到一个新的访问地址。 通常失效时浏览器的前端页面会出现 “Service is unavailable”（服务不可用），届时则需要重新在浏览器打开页面。Webview 的页面不会受到影响，它会实时地刷新地址。 

而对于后端，当公网地址失效后，会被标记为 Expired（已过期），此时需要手动刷新。同时还要留意其他项目是否有指向后端服务地址的请求，当其他项目出现网络异常的时候，可以检查并修改到新的后端服务地址。 

2.3.5 端口监听

此外我们还需要避免端口占用问题。由于豆包MarsCode IDE 的工作空间实则为一个远程容器，在容器中运行一个网络服务后，系统会在容器而非本地电脑的 IP 上监听端口。因此一些常用的保留端口如 80 端口不建议作为监听端口，否则将会启动失败。例如下面是尝试监听 80 端口启动导致的 Java 程序报错。 

三、项目实战规划：个人博客系统

经过前面对豆包MarsCode 的充分了解后，就可以开始着手项目实践了。此时选择一个什么项目进行实践，对我来讲也算是个选题。彼时我恰巧完成了前端基础的学习，空有一腔理论基础却还没有实际用武之地。于是借着体验豆包 Marscode 的机会，决定选择一个能够检验学习成果的项目——个人博客系统。
个人博客系统既是一个用于记录、分享和自我表达的媒介，也是提升自己、与他人交流互动、输出价值内容的平台。对我来讲完成一个个人博客不仅仅是检验学习成果的方式，也是“个人名片”展示的一个橱窗。
由于个人博客系统的开发涉及到前端和后端，因此这是一次全栈式地从 0 到 1 的项目实践，也能够顺便带领小伙伴们领略豆包 Marscode 的强大而全面的 AI 能力。 在个人博客系统中，规划为以下三大项目，并将分别开发和论述：

• 后端服务——Blog Service。
• 前端内容管理系统——Blog CMS。
• 前端博客页面——Blog Web。

由于项目处在初期阶段，个人博客系统主要以文章作为核心功能进行开发，因此本文将只侧重这部分的开发和论述。

四、搭建后端服务：Blog Service

4.1 概述&功能需求

4.1.1 概述

Blog Service 作为个人博客系统的 API 服务，将为博客内容和网页提供数据访问和操作支持。根据整体工程规划，首先从这部分的 API 服务的搭建开始。

4.1.2 技术选型

Blog Service 的技术选型如下：

• 开发语言：Java（JDK 1.8）
• 开发框架：SpringBoot + MyBatisPlus
• 数据库：MySQL 8.0

4.1.3 功能需求

Blog Service 的模块初期主要以文章作为核心功能进行开发，因此目前仅划分出必要的用户模块和文章模块。用户模块主要服务于内容管理系统，而文章模块将分化为 CMS 文章模块和 Web 文章模块，整体的功能划分如下。

• 用户模块

• CMS 文章模块

• 登录

• 文章模块

• CMS 文章模块

• 文章列表
• 创建文章
• 更新文章
• 文章详情
• 删除文章

• Web 文章模块

• 文章列表
• 首页文章列表
• 文章详情

4.2 业务开发&AI 实践

4.2.1 创建项目

我们从豆包MarsCode IDE 控制台左侧 “+ 项目” 按钮开始创建项目，选择 “从模板创建”，“Java”，然后输入项目名称和项目描述即可点击 “创建” 按钮。我的个人博客系统名称是 “VIE's Space”，所以后端服务项目名称就是 “VIE's Space Service”。 

通过模板创建的 Java 项目是一个 Demo 工程，因为我们主要使用 SpringBoot 框架开发，所以需要改造一下，根据我们的技术选型，引入相关的 Maven 依赖。

<!-- Spring Boot -->
<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.3.12.RELEASE</version>
    <relativePath/> <!-- lookup parent from repository -->
</parent>

<dependencies>
    <!-- Web MVC -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <!-- MyBatis -->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.1.3</version>
    </dependency>
    <!-- MyBatis Plus -->
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.5.1</version>
    </dependency>
    <!-- MySQL JDBC Driver -->
    <dependency>
        <groupId>com.mysql</groupId>
        <artifactId>mysql-connector-j</artifactId>
        <version>8.0.33</version>
        <scope>runtime</scope>
    </dependency>
    <!-- Druid 数据库连接池 -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid-spring-boot-starter</artifactId>
        <version>1.2.8</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-configuration-processor</artifactId>
        <optional>true</optional>
    </dependency>
    <!-- Lombok 插件 -->
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <!-- pagehelper 分页插件 -->
    <dependency>
        <groupId>com.github.pagehelper</groupId>
        <artifactId>pagehelper-spring-boot-starter</artifactId>
        <version>1.3.0</version>
    </dependency>
</dependencies>

之后将项目按照 MVC（Model-View-Controller）分层架构划分，主要有以下分层结构：

• controller：控制器层，构建 RESTful API，处理 HTTP 请求，响应 JSON 数据给客户端。
• service：服务层，处理业务逻辑；承上启下，上层是 Controller，下层是 Mapper。
• mapper：持久化层，与数据库交互的接口，通过 SQL 语句实现对数据库的增删改查操作。
• entity：实体类，表示数据库中的表结构，既用于定义请求参数，也用于视图数据的展示。
• core：框架核心，包括框架配置、拦截器、全局变量、缓存、工具类等等。

4.2.2 AI 问答

好了，从这里开始我们正式的豆包MarsCode AI 助手体验。在 Mac 上通过快捷键⌘ + U或者点击右侧的 “AI” 按钮调出 AI 助手对话框。在对话框中我们可以用自然语言向 AI 提问，并且可以进行多轮问答，不断补充细节，从而使 AI 助手的回答更加准确。

 比如我向豆包MarsCode AI 提问如何开发个人博客系统，回答的内容从技术栈选择、开发、部署到运维——软件工程的整个开发流程都包含了，简短而全面。

4.2.3 AI 代码生成：生成 MD5Util

我们先让 AI 尝试 “生成一个MD5Util”，它就会给出一个代码片段并且解释其主要用法。此时还可以留意到在生成的代码区块的右上角分别有三个图标选项，能够便捷地对生成内容执行操作：

• Copy：复制，将生成的代码复制到剪贴板。
• Insert：插入，将生成的代码插入到光标位置处。
• Add file：添加文件，会立即创建一个包含代码内容文件，之后可以保存文件到指定位置。

4.2.4 生成数据表

正式进入我们业务所需的相关开发，首先让豆包MarsCode AI 助手生成表结构 SQL，这里以 “生成 base_article 表” 为例。可见回答的效果还是不错的，不过这个的前提是我们要给到 AI 助手足够的信息，比如 “使用MySQL8”，“添加COMMENT” 等等。当然 AI 生成的结果内容也不一定满意，我们可以完善提问内容，或手动修改生成结果。

4.2.5 生成 MVC 相关代码

我们接着借助 AI 助手来分别生成entity、mapper、service、controller的相关代码。由于 AI 生成结果各有所需且限于篇幅内容，下面我只引用在生成时的主要提问词，并展示最终补充完善的结果。

1. 生成entity/BaseArticle.java

Prompt: 请根据我的数据表base_article.sql生成一个java entity类

Prompt: 使用lombok注解

Prompt: 添加mybatis-plus的注解

Prompt: 请继续补全，并注意数据库字段是蛇形命名法，例如@TableField("create_time")

2. 生成mapper/BaseArticleMapper.java

Prompt: 请根据我的BaseArticle实体类生成MyBatis的mapper文件

3. 生成service/BaseArticleService.java、service/impl/BaseArticleServiceImpl.java

Prompt: 请根据BaseAritcle类和BaseArticleMapper生成service代码

4. 生成controller/ArticleController.java

Prompt: 请根据我BaseArticleService继续补充BaseArticleController代码

5. 生成controller/BaseUserController.java

Prompt: 请根据我的BaseUserService生成controller代码

4.2.6 生成框架核心代码

在进行业务开发的过程中，也会随时对框架的核心代码进行补充。这里我会摘取部分内容的生成过程以供参考。

1. 生成UserContextHolder，用于用户的认证信息缓存

Prompt: 生成一个UserContextHolder，用户处理UserContext，UserContextd的字段有id,username,session

2. 生成SessionInterceptor，对请求进行拦截校验凭证

Prompt: 请帮在SessionInterceptor中完成拦截器代码，每次请求进来后校验cookie中的session

4.2.7 梳理业务进度

前面我已经让 AI 助手帮忙完成了基本的增删改查的业务代码，所以重新跟进业务进度，梳理一下目前主要欠缺、需要修改的功能。

• 用户模块

• CMS 文章模块

• 登录（待修改）

• 文章模块

• Web 文章模块

• 首页文章列表（待完成）

4.2.8 AI 代码编辑：修改业务逻辑

豆包Marscode AI 有一项能力是代码编辑，能够编辑指定代码，包括重构、优化、修改逻辑等。在回顾生成的BaseUesrController代码时，我发现可以其中的一个接口getUserByUsernameAndPassword虽然是用于查找用户的，不过显然按照用户名和密码查找更符合登录的步骤，于是我尝试着让 AI 重写成登录接口。

Prompt: 请将UserController中的getUserByUsernameAndPassword作为登录接口业务进行修改

4.2.9 AI 代码补全：补全业务代码

首页文章列表的业务主要是查询各个分类的推荐的文章，因此代码逻辑上有一定相似性，这样我们利用豆包Marscode AI 的代码补全功能可以快速完成剩余业务代码。

Action: 在编写代码时，光标处会自动提示预测代码，此时按下Tab键即可应用。

4.3 API 文档注释&测试

4.3.1 AI 代码注释生成

当完成一个接口业发或方法的代码逻辑后，别忘了加上注释方便 API 文档查阅和后续维护，这时就可以利用豆包Marscode AI 的代码注释生成这一功能。

Action: 选中代码片段，然后在弹出的选项中点击 “Doc” 按钮，或在 “Chat” 中输入指令/doc

4.3.2 AI 单元测试生成

最后，在完成了接口开发后，通常都要先自行测试一遍，这是每个优秀程序员的自我修养！所以接下来借助豆包Marscode AI 的单元测试生成能力完成这部分的编写。

Action: 选中代码片段，然后在弹出的选项中点击 “Unit Test” 按钮，或在 “Chat” 中输入指令/test

五、AI 生成后台管理：Blog CMS

5.1 概述&功能需求

5.1.1 概述

Blog CMS 作为个人博客系统的内容管理系统，将为博客内容进行发布和管理。根据整体工程规划，在完成了 Blog Service 的搭建后，进入这部分的开发，为后续的博客页面提供内容支撑。

5.1.2 技术选型

Blog CMS 的技术选型如下：

• 开发语言：HTML、CSS、TypeScript
• 开发框架：Vite + Vue3
• 状态管理：Pinia

5.1.3 功能需求

Blog CMS 的模块初期同样以文章作为核心功能进行开发，因此目前仅划分文章模块，整体的功能划分如下。

• 文章模块

• 登录页
• 首页
• 文章列表
• 文章创建/详情/编辑
• 删除文章

5.2 业务开发&AI 实践

5.2.1 创建项目

从豆包Marscode IDE 控制台左侧 “+ 项目” 按钮开始创建项目，选择 “从模板创建”，“Vue”，项目名称是 “VIE's Space CMS”。 

 同样地这是一个 Vue Demo 项目，所以需要改造一下，根据我们的技术选型，安装必要的库。

pnpm i vue-router
pnpm i pinia

之后调整项目结构，主要有：

• pages：路由页面，存放路由相关的组件页面。
• router：路由配置，各个路由组件的路由层级配置。
• store：状态管理库，用于管理一些全局状态如登录状态、API host。

5.2.2 生成登录页

首先来让豆包 Marscode AI 完成登录页面以及登录的逻辑。

1. 生成components/AppLogin.vue

Prompt: 请帮我生成一个登录页

看一下页面效果，感觉挺不错的，HTML结构和CSS样式完全不需要修改直接就可以用。

2. 生成登录逻辑

Prompt: 在我的AppLogin.vue中我需要用axios发起请求，成功后跳转到AppHome.vue

这里 AI 助手生成了一个大概的逻辑流程，只需要稍微修改一下就可以了。

5.2.3 生成首页

接着先写好首页的路由配置，然后让 AI 生成首页。

1. 生成components/AppHome.vue

Prompt: AppHome.vue是一个管理后台页面，有菜单，菜单有文章、用户、分类，请完善代码

5.2.4 生成文章列表

接下来就是文章列表，文章列表页的内容会多一些，所以向 AI 提问也需要详细些才能生成大致符合要求的页面。

1. 生成pages/article/ArticleList.vue

Prompt: 请完成AppHomeArticle.vue的代码，这个页面展示文章列表，列表字段有id，createTime,updateTime,createUser,title,articleType,category,views

Prompt: 在AppHomeArticle的文章列表旁边添加一个创建文章按钮，并在列表中的每一项最后添加查看、修改、删除按钮

Prompt: 在修改和删除按钮中间再加上一个‘上线’或‘下线’按钮

2. 生成获取文章列表逻辑

Prompt: 我要在进入AppHomeArticle时发起请求

Prompt: 请帮我生成axois请求

这里必须要称赞一下 AI 对于开发者意图的猜测能力，这里我只是在提示中说到发起请求，却能猜测到是想获取文章列表。

5.2.5 生成文章详情页

最后是整块文章功能开发中的重头戏——文章详情页，因为这一个页面不仅仅是展示文章详情，还包含创建文章、编辑文章的逻辑。

1. 生成pages/article/ArticleItem.vue

Prompt: 请生成AppHomeArticleCreate.vue的代码，这个页面主要是创建文章，需要的字段有createTime,createUser,title,content,articleType,tags,category,image,status

Prompt: 在ArticleList.vue跳转到ArticleDetail.vue时，分为创建、编辑、详情三种类型

5.2.6 AI 指令生成：安装 bytemd

豆包 Marscode 的代码生成不仅可以生成代码片段，也可以生成shell指令。我在提问如何引入bytemd时，AI 的生成结果中有一段shellscript，此时可以点击在这个区块右上角的 “Run” 快速执行指令。当然这里的生成结果不够准确，正确的安装命令是：pnpm i @bytemd/vue-next bytemd。

Prompt: 请在我的ArticleCreate.vue中引入bytemd并使用

Prompt: 请使用vue3的bytemd

六、开发博客页面：Blog Web

6.1 概述&功能需求

6.1.1 概述

Blog Web 作为个人博客系统的博客网页页面，用于呈现对外发布的博客内容。根据整体工程规划，在完成了 Blog Service 和 Blog CMS 的开发，进入最后的这一部分开发。

6.1.2 技术选型

Blog CMS 的技术选型如下：

• 开发语言：HTML、CSS、TypeScript
• 开发框架：Vite + Vue3
• 状态管理：Pinia

6.1.3 设计稿

要进行博客的页面开发，光靠想象还是很难有个具体的规划，虽然能够一点一点呈现，但结果也难免与自己设想的有出入，此刻如果有设计稿那将是一件锦上添花的事，也对过程结果更有把控。恰巧我正好有几张博客页面的设计稿（我自己设计的），如果没有参考别人或者我的也行（^ ^）。

1. 设计稿-首页

2. 设计稿-文章

6.1.4 功能需求

Blog Web 的模块初期同样以文章作为核心功能进行开发，不过为了网页页面有较完整的呈现效果，因此除了文章，还有分类，个人信息等版块的内容展示，整体的功能划分如下。

• 文章模块

• 首页文章
• 文章列表
• 文章详情

• 分类模块
• 个人信息模块

6.2 业务开发&AI 实践

在 Blog Web 的业务开发&AI 实践中，因为需要参照设计稿进行页面编写，所以基本上是自己完成页面 AI 辅助逻辑，AI 生成页面的部分仅有 footer（页脚）；且在 AI 实践上，大多为提问性辅助开发，所以 AI 功能的体现都可以按照 Blog Service 和 Blog CMS 的参考，行文中就不多详细讲了。

6.2.1 创建项目

从豆包Marscode IDE 控制台左侧 “+ 项目” 按钮开始创建项目，选择 “从模板创建”，“Vue”，项目名称是 “VIE's Space Web”。同样地这是一个 Vue Demo 项目，需要根据技术选型安装必要的库并调整项目结构，这部分与 Blog CMS 的步骤一致，不再赘述。 

6.2.2 AI 代码解释：代码解释&定位

豆包Marscode 的代码解释能够理解整个项目工程，或者解释代码片段。如果要让 AI 理解整个工程可以在侧边栏 AI 对话框中进行提问，而要解释代码片段可以复制代码片段后在侧边栏 AI 对话框询问。当然还有一个更便捷的操作就是选中代码片段然后通过快捷键⌘ + I 唤起内嵌 AI 助手，然后通过自然语言描述解释代码或发送指令/explain。
在代码解释这项能力上 AI 还可以进一步地体现代码定位功能。比如我的页面 header 写好之后想重新调整菜单项的间距，由于样式太多我就直接尝试唤起内嵌 AI 助手提问。

Prompt: 菜单项之间的间距样式在哪里

6.2.3 AI 修复：修复错误

在编写代码的过程中总会遇到报错，无论是代码编辑区的还是终端的，豆包Marscode AI 都能完成错误修复。在有明显的报红错误处，指针移动到此会自动显示 “AI Fix”，点击就可以让 AI 进行修复错误；又或者选择代码片段让 AI 检查并修复潜在的警告。

Action: 指针移动到报红报错处，在显示的选项中点击 “AI Fix”

Action: 选择代码片段，在 “Chat” 中发送指令/fix

6.2.4 生成 footer

footer 是我整个 Blog Web 项目的最后一块开发内容，也是整个博客系统的收尾。因为比较简单所以直接用 AI 生成了代码，之后再稍加修改。

1. 生成components/footer/AppFooter.vue

Prompt: 请根据我的项目生成页脚

七、项目部署

激动人心的时刻就是终于可以将我的个人博客上线了。这里主要讲解 Blog Web 的部署，因为 Blog Service 的部署方式是通过 Serverless 运行的，Blog CMS 则可以随时在豆包Marscode IDE 需要时运行所以就不部署了（当然也可以参照 Blog Web 的部署方式）。以下是各个项目可供参考的部署形式：

• Blog Service：Serverless 应用引擎
• Blog Web：Vercel
• Blog CMS：Vercel

7.1 GitHub 授权

在推送代码和部署项目前我们先进行 Github 授权。这里顺便说一下豆包MarsCode IDE 默认集成了 Git，在右侧侧边栏中可以进行 Git 操作。

• Initialize：在当前项目初始化 Git，进行版本控制。
• Publish：直接将项目推送到 Github，然后并进行版本控制。

7.1.1 配置 Git 用户信息

使用以下命令配置 Git 的用户信息，包括用户姓名和电子邮件地址。

git config --global user.name "your username"
git config --global user.email "your email"

7.1.2 生成 SSH 密钥

在终端中运行以下命令生成 SSH 密钥，生成的公钥默认位于/home/cloudide/.ssh/id_rsa.pub。

ssh-keygen -t rsa -b 4096 -C "your email"

7.1.3 GitHub 添加 SSH Key

查看公钥并复制。

cat /home/cloudide/.ssh/id_rsa.pub

在 Github 中进入 Settings - SSH and GPG keys，点击 “New SSH Key” 并添加公钥。

运行ssh -T [e-mail]命令，如果出现以下信息只需确认ECDSA key fingerprint是否与 Github 提供的一致，一致则输入 “yes”，即可成功通过 SSH 连接到 GitHub。

7.2 部署 Blog Web

7.2.1 推送到 Github 仓库

首先需要在 Github 创建新的代码仓库，然后执行以下命令。

git remote set-url origin [e-mail]:<username>/<repository_name>.git
git branch -M main
git push -u origin main

7.2.2 部署到 Vercel

在 Vercel 中授权登录 Github，然后添加一个新项目，在 “viespace”，即我自己的 Blog Web 源码仓库右边点击 “Import”（导入）。

配置项目，基本上不用更改，直接点击 “Deploy”（部署）即可。

 部署完成，之后就可以访问了，这里我配置了自定义域名 “viespace.top”。

八、作品展示

8.1 桌面端

8.1.1 首页

8.1.2 文章列表页

8.1.3 文章详情页

8.2 移动端

8.2.1 首页

8.2.2 文章列表页

8.2.3 文章详情页

后记

虽然个人博客开发完成了，但是还在继续完善当中，内容也会不断修改和更新。
如果文章对你有用，只需动动小手我就能收获一个赞/收藏啦！我会很开心！
有需要源码学习参考的小伙伴，可以留言。
博客地址：viespace.top