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

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

全栈小5

387人浏览 · 2025-08-25 21:50:20

全栈小5 · 2025-08-25 21:50:20 发布

目前互联网发展速度非常的快，技术更新迭代也非常迅速，大模型已经经历过百模大战，已经逐渐趋于平稳状态。紧接着大模型下的应用百花齐放，各大平台的智能体争妍斗艳，都在使出全身解数，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">
      <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>

增加点赞功能

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

在这里插入图片描述
还有点瑕疵，点赞后没有增加数字，继续完善

点击点赞后，并发起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">
      <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输出结果的质量和相关性。

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

提示词的主要类型和应用

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

如何编写好

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

清晰明确（Be Clear and Specific）：避免模糊不清。明确你想要的内容、格式和长度。
- 不好：“写点关于人工智能的东西。”
- 好：“用500字简要介绍人工智能的三大主要分支，并各举一个应用实例。”
提供上下文（Provide Context）：给出相关的背景信息，帮助AI更好地理解场景。
- 例如：“我正在为一家科技博客写文章，读者是专业人士。请解释一下Transformer架构的原理。”
指定角色（Assign a Role）：让AI扮演某个角色，其输出会更符合该角色的特点。
- 例如：“你是一名友好的客服代表。请用礼貌且 helpful 的语气回复客户的以下投诉：…”
使用分隔符和结构化：使用引号、标题、破折号等来清晰地划分提示的不同部分（如指令、上下文、输入数据）。
- 例如：
```
请将以下会议记录总结为待办事项列表。

会议记录：
```
  [这里粘贴会议记录文本]
迭代优化（Iterate）：很少有一次就完美的提示词。根据AI的初次输出，不断调整和细化你的提示词，这是一个反复试验的过程。