【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统

目前互联网发展速度非常的快，技术更新迭代也非常迅速，大模型已经经历过百模大战，已经逐渐趋于平稳状态。 紧接着大模型下的应用百花齐放，各大平台的智能体争妍斗艳，都在使出全身解数，AI编程工具更是锦上添花，给代码提质提效。 在前沿的技术浪潮中，我们可以通过练习和实践并写博客文章的方式记录下来，会加深你的印象和理解。

活动简介

「AI 原生编程挑战赛」用你的代码，让小型系统 “一键生长”
欢迎大家参与，可私信博主一对一讲解和指导，投稿地址：https://activity.csdn.net/writing?id=10943

AI编程工具 - Trae

简介

博主这里推荐大家使用Trae来一键生成代码，当然也可以使用自己熟悉的AI编程工具。

Trae AI IDE，国内首款AI原生集成开发环境，深度集成Doubao-1.5-pro与DeepSeek模型，支持中文自然语言一键生成完整代码框架，实时预览前端效果并智能修复BUG。
首创Builder模式实现需求到代码的自动化开发，兼容Windows/macOS系统，官网下载即用。

登录使用

点击登录即可与Trae写作，输入自然语言即可生成目标框架和页面代码


选择对应模型和输入内容即可

留言板系统

博主这里要开发一个留言板系统，为什么会想起开发这个系统呢，是因为这个留言板系统但是是博主实习时的一个练习项目，刚好用到AI来自动生成，大家也可以根据以往经验来生成。

创建目录

博主这里创建一个临时为文件夹temp

然后使用Trae打开这里目录

提示词

AI生成代码，提示词Prompt就很关键了。
通过自己的自然语言，如何更将清晰明了的表达出自己的想法，以及这个想法是否能够让AI快速理解时关键。

登录注册

提示词描述

使用前端技术vue3+ts，输出留言板系统的注册登录页面，模拟点击登录调用一个api接口，可以模拟调用本地json来获取到登录成功信息。

AI IDE工具就会根据你的描述，进行一连串的操作，包括自动创建Vue运行环境和创建vue相关文件。
需要手动点击确定是否运行和安装需要的插件等，根据提示来就行。

校验错误并修正

直接运用发现提示错误，那么直接输入描述让AI进行检查和修正：

提示报错Module not found: Error: Can’t resolve ‘./src/main.js’ in ‘D:\temp’

经过N轮反复修正后，终于运行起来了
登录效果

登录代码

<template><div class="login-container"><h2>登录</h2><form @submit.prevent="handleLogin"><div class="form-group"><label for="username">用户名</label><input id="username" v-model="form.username" type="text" required/></div><div class="form-group"><label for="password">密码</label><input id="password" v-model="form.password" type="password" required/></div><button type="submit">登录</button></form><p>没有账号？<router-link to="/register">注册</router-link></p></div>
</template><script>
import { defineComponent, reactive } from 'vue';
import { useRouter } from 'vue-router';export default defineComponent({setup() {const router = useRouter();const form = reactive({username: '',password: ''});const handleLogin = async () => {try {const response = await fetch('/api/login.json');const data = await response.json();if (data.success) {// 保存用户信息到本地存储localStorage.setItem('userInfo', JSON.stringify({username: form.username}));router.push('/');} else {alert(data.message || '登录失败');}} catch (error) {console.error('登录出错:', error);alert('登录出错，请稍后再试');}};return {form,handleLogin};}
});
</script><style scoped>
.login-container {max-width: 400px;margin: 0 auto;padding: 20px;
}.form-group {margin-bottom: 15px;
}label {display: block;margin-bottom: 5px;
}input {width: 100%;padding: 8px;box-sizing: border-box;
}button {width: 100%;padding: 10px;background-color: #42b983;color: white;border: none;cursor: pointer;
}button:hover {background-color: #369f6b;
}
</style>

模拟Json数据

创建一个文件夹，保存login.json文件。点击登录时，调用这个本地的login.json文件，获取登录成功信息。并发起Get请求

json文件

{"success": true,"message": "登录成功","user": {"username": "testuser","token": "mock-token-123456"}
}

留言板首页

创建简易留言板首页，顶部是一个输入框，点击留言按钮后，自动在显示。
显示内容是昵称、内容、留言时间。
并修改登录成功后跳转到这个首页，并在右上角显示用户昵称

首页代码

<template><div class="home-container"><!-- 顶部导航栏 --><div class="navbar"><h1>简易留言板</h1><div class="user-info" v-if="userInfo.username">欢迎，{{ userInfo.username }}！</div></div><!-- 留言输入区域 --><div class="message-input"><inputv-model="newMessage.content"placeholder="请输入留言内容"@keyup.enter="addMessage"/><button @click="addMessage">留言</button></div><!-- 留言列表 --><div class="messages-container"><div v-for="message in messages" :key="message.id" class="message-item"><div class="message-header"><span class="nickname">{{ message.nickname }}</span><span class="timestamp">{{ formatTime(message.timestamp) }}</span></div><div class="message-content">{{ message.content }}</div></div></div></div>
</template><script>
import { defineComponent, reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';export default defineComponent({name: 'Home',setup() {const router = useRouter();const userInfo = reactive({username: ''});const newMessage = reactive({content: ''});const messages = ref([]);let messageId = 1;// 检查用户是否已登录onMounted(() => {const savedUser = localStorage.getItem('userInfo');if (savedUser) {const user = JSON.parse(savedUser);userInfo.username = user.username;} else {// 未登录，跳转到登录页router.push('/login');}// 加载本地存储的留言const savedMessages = localStorage.getItem('messages');if (savedMessages) {messages.value = JSON.parse(savedMessages);// 更新消息ID计数器if (messages.value.length > 0) {messageId = Math.max(...messages.value.map(m => m.id)) + 1;}}});const addMessage = () => {if (!newMessage.content.trim()) return;const message = {id: messageId++,nickname: userInfo.username,content: newMessage.content.trim(),timestamp: new Date().getTime()};messages.value.unshift(message);newMessage.content = '';// 保存到本地存储localStorage.setItem('messages', JSON.stringify(messages.value));};const formatTime = (timestamp) => {return new Date(timestamp).toLocaleString('zh-CN', {year: 'numeric',month: '2-digit',day: '2-digit',hour: '2-digit',minute: '2-digit',second: '2-digit'});};return {userInfo,newMessage,messages,addMessage,formatTime};}
});
</script><style scoped>
.home-container {max-width: 800px;margin: 0 auto;padding: 20px;
}.navbar {display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;padding-bottom: 20px;border-bottom: 2px solid #e0e0e0;
}.navbar h1 {color: #42b983;margin: 0;
}.user-info {font-weight: bold;color: #666;
}.message-input {display: flex;gap: 10px;margin-bottom: 30px;
}.message-input input {flex: 1;padding: 12px;border: 2px solid #ddd;border-radius: 6px;font-size: 16px;
}.message-input input:focus {outline: none;border-color: #42b983;
}.message-input button {padding: 12px 24px;background-color: #42b983;color: white;border: none;border-radius: 6px;cursor: pointer;font-size: 16px;font-weight: bold;
}.message-input button:hover {background-color: #369f6b;
}.messages-container {border: 1px solid #e0e0e0;border-radius: 8px;overflow: hidden;
}.message-item {padding: 16px;border-bottom: 1px solid #f0f0f0;
}.message-item:last-child {border-bottom: none;
}.message-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px;
}.nickname {font-weight: bold;color: #42b983;
}.timestamp {font-size: 12px;color: #999;
}.message-content {line-height: 1.6;color: #333;
}
</style>

增加点赞功能

留言内容增加一个点赞功能，点赞后自动计算数字并高亮

还有点瑕疵，点赞后没有增加数字，继续完善

点击点赞后，并发起Get请求调用点赞json接口，并显示数字

json文件

{"success": true,"message": "点赞成功","likes": 1
}

完整代码

<template><div class="home-container"><!-- 顶部导航栏 --><div class="navbar"><h1>简易留言板</h1><div class="user-info" v-if="userInfo.username">欢迎，{{ userInfo.username }}！</div></div><!-- 留言输入区域 --><div class="message-input"><inputv-model="newMessage.content"placeholder="请输入留言内容"@keyup.enter="addMessage"/><button @click="addMessage">留言</button></div><!-- 留言列表 --><div class="messages-container"><div v-for="message in messages" :key="message.id" class="message-item"><div class="message-header"><span class="nickname">{{ message.nickname }}</span><span class="timestamp">{{ formatTime(message.timestamp) }}</span></div><div class="message-content">{{ message.content }}</div><div class="message-footer"><button class="like-btn" :class="{ liked: message.liked }"@click="toggleLike(message)">👍 {{ message.likes || 0 }}</button></div></div></div></div>
</template><script>
import { defineComponent, reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';export default defineComponent({name: 'Home',setup() {const router = useRouter();const userInfo = reactive({username: ''});const newMessage = reactive({content: ''});const messages = ref([]);let messageId = 1;// 检查用户是否已登录onMounted(() => {const savedUser = localStorage.getItem('userInfo');if (savedUser) {const user = JSON.parse(savedUser);userInfo.username = user.username;} else {// 未登录，跳转到登录页router.push('/login');}// 加载本地存储的留言const savedMessages = localStorage.getItem('messages');if (savedMessages) {messages.value = JSON.parse(savedMessages);// 更新消息ID计数器if (messages.value.length > 0) {messageId = Math.max(...messages.value.map(m => m.id)) + 1;}}});const addMessage = () => {if (!newMessage.content.trim()) return;const message = {id: messageId++,nickname: userInfo.username,content: newMessage.content.trim(),timestamp: new Date().getTime(),likes: 0,liked: false};messages.value.unshift(message);newMessage.content = '';// 保存到本地存储localStorage.setItem('messages', JSON.stringify(messages.value));};const formatTime = (timestamp) => {return new Date(timestamp).toLocaleString('zh-CN', {year: 'numeric',month: '2-digit',day: '2-digit',hour: '2-digit',minute: '2-digit',second: '2-digit'});};const toggleLike = async (message) => {try {const response = await fetch(`/api/like.json?messageId=${message.id}&action=${message.liked ? 'unlike' : 'like'}`);const data = await response.json();if (data.success) {if (message.liked) {message.likes--;message.liked = false;} else {message.likes = data.likes || message.likes + 1;message.liked = true;}// 保存到本地存储localStorage.setItem('messages', JSON.stringify(messages.value));} else {alert(data.message || '操作失败');}} catch (error) {console.error('点赞操作出错:', error);alert('网络错误，请稍后再试');}};return {userInfo,newMessage,messages,addMessage,formatTime,toggleLike};}
});
</script><style scoped>
.home-container {max-width: 800px;margin: 0 auto;padding: 20px;
}.navbar {display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;padding-bottom: 20px;border-bottom: 2px solid #e0e0e0;
}.navbar h1 {color: #42b983;margin: 0;
}.user-info {font-weight: bold;color: #666;
}.message-input {display: flex;gap: 10px;margin-bottom: 30px;
}.message-input input {flex: 1;padding: 12px;border: 2px solid #ddd;border-radius: 6px;font-size: 16px;
}.message-input input:focus {outline: none;border-color: #42b983;
}.message-input button {padding: 12px 24px;background-color: #42b983;color: white;border: none;border-radius: 6px;cursor: pointer;font-size: 16px;font-weight: bold;
}.message-input button:hover {background-color: #369f6b;
}.messages-container {border: 1px solid #e0e0e0;border-radius: 8px;overflow: hidden;
}.message-item {padding: 16px;border-bottom: 1px solid #f0f0f0;
}.message-item:last-child {border-bottom: none;
}.message-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 8px;
}.nickname {font-weight: bold;color: #42b983;
}.timestamp {font-size: 12px;color: #999;
}.message-content {line-height: 1.6;color: #333;margin-bottom: 10px;
}.message-footer {display: flex;justify-content: flex-end;
}.like-btn {padding: 4px 8px;border: 1px solid #ddd;border-radius: 4px;background-color: #f8f9fa;cursor: pointer;font-size: 12px;transition: all 0.2s;
}.like-btn:hover {background-color: #e9ecef;
}.like-btn.liked {background-color: #42b983;color: white;border-color: #42b983;
}
</style>

提示词

核心定义

提示词（Prompt） 是指用户提供给人工智能（尤其是大语言模型如 ChatGPT、Midjourney、Stable Diffusion 等）的一段文本指令或问题，用于引导AI生成所需的回应、内容或执行特定任务。

你可以把它理解为：

• 给AI的“说明书”或“任务清单”
• 与AI沟通的“语言”和“界面”
• 启动AI引擎的“钥匙”

AI模型会根据提示词中的信息、上下文和指令来理解用户的意图，并据此生成相应的文本、图片、代码等。

---

为什么提示词如此重要？

在AI时代，提示词的重要性怎么强调都不过分，因为它直接决定了AI输出结果的质量和相关性。

1. 垃圾进，垃圾出（Garbage In, Garbage Out）：一个模糊、混乱的提示词几乎肯定会得到一个不令人满意或完全错误的输出。例如，对文生图模型说“画一只狗”，得到的结果可能很普通；但如果说“画一只可爱的柯基犬，在阳光下的草地上追逐一个红色的飞盘，电影感镜头，虚化背景”，结果就会精准和出色得多。
2. 解锁AI的全部潜力：大型语言模型拥有海量的知识，但需要正确的“提问技巧”才能将这些知识有效地提取和组织起来。好的提示词可以引导AI扮演专家角色、进行复杂推理、遵循特定格式等。
3. 一种新兴的技能（Prompt Engineering）：由于它的重要性，专门研究和优化提示词的技巧已经发展成一门新的学科——提示工程（Prompt Engineering）。擅长编写提示词的人被称为“提示工程师”（Prompt Engineer），他们的工作就是设计出最有效、最可靠的提示词，以从AI中获得最佳结果。

---

提示词的主要类型和应用

类型	描述	例子（文本/对话AI）	例子（文生图AI）
指令型	直接给出明确的命令。	“总结下面这篇文章的要点。”	“画一个宇航员在骑马。”
问答型	提出一个具体的问题。	“珠穆朗玛峰的高度是多少？”	（不常用）
角色扮演型	让AI扮演一个特定角色。	“假设你是一位资深的历史教授，向我解释罗马帝国衰落的原因。”	“以巴勃罗·毕加索的风格画一幅画。”
上下文型	提供背景信息或示例来约束输出。	“以下是一首关于春天的诗：[示例诗]。请以同样的风格写一首关于秋天的诗。”	“像这张照片一样的构图和色调 [附图片]，但主题换成一只猫。”
复杂任务型	将多步任务组合在一个提示中。	“分析以下销售数据 [数据]，找出趋势，并据此撰写一份3点的营销建议报告。”	“设计一个App图标，主题是健康饮食，采用扁平化设计风格，主色调为绿色和白色。”

---

如何编写好

如何编写好的提示词（提示工程基础技巧），编写有效的提示词有一些通用技巧，通常被称为“提示工程”：

1. 清晰明确（Be Clear and Specific）：避免模糊不清。明确你想要的内容、格式和长度。

   • 不好：“写点关于人工智能的东西。”
   • 好：“用500字简要介绍人工智能的三大主要分支，并各举一个应用实例。”

2. 提供上下文（Provide Context）：给出相关的背景信息，帮助AI更好地理解场景。

   • 例如：“我正在为一家科技博客写文章，读者是专业人士。请解释一下Transformer架构的原理。”

3. 指定角色（Assign a Role）：让AI扮演某个角色，其输出会更符合该角色的特点。

   • 例如：“你是一名友好的客服代表。请用礼貌且 helpful 的语气回复客户的以下投诉：…”

4. 使用分隔符和结构化：使用引号、标题、破折号等来清晰地划分提示的不同部分（如指令、上下文、输入数据）。

   • 例如：

     请将以下会议记录总结为待办事项列表。会议记录：
     

     [这里粘贴会议记录文本]

5. 迭代优化（Iterate）：很少有一次就完美的提示词。根据AI的初次输出，不断调整和细化你的提示词，这是一个反复试验的过程。

---

总结

看完是不是很简单，基本什么代码也没有敲，纯自然语言描述来让AI一步一步帮我们完成目标页面，从而形成一个小系统。