网站导航
> 技术文档 > 【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统

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

网友: 技术文档 2025-09-03 04:05:18

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

活动简介

【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统
「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系统，官网下载即用。

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

登录使用

点击登录即可与Trae写作，输入自然语言即可生成目标框架和页面代码
【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统
【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统
选择对应模型和输入内容即可
【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统

留言板系统

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

创建目录

博主这里创建一个临时为文件夹temp
【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统
然后使用Trae打开这里目录【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统

提示词

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

登录注册

提示词描述

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

AI IDE工具就会根据你的描述，进行一连串的操作，包括自动创建Vue运行环境和创建vue相关文件。
需要手动点击确定是否运行和安装需要的插件等，根据提示来就行。
【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统

校验错误并修正

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

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

【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统
经过N轮反复修正后，终于运行起来了【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统
登录效果
【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统
登录代码

<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请求

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

json文件

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

留言板首页

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

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

<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\"> <input v-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>

增加点赞功能

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

【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统
还有点瑕疵，点赞后没有增加数字，继续完善

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

【AI编程】如何快速通过AI IDE集成开发工具来生成一个简易留言板系统
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\"> <input v-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一步一步帮我们完成目标页面，从而形成一个小系统。

网络标签：

相关问题