今日是“AI全栈项目”破冰会😀😀不是传统前后端玩不起，是AI全栈更有性价比。欢迎来到“AI全栈项目”破冰会，在这里初

😀不是传统前后端玩不起，是AI全栈更有性价比。欢迎来到“AI全栈项目”破冰会，在这里初步体验集成AI进行开发的趣味性。好趴好趴，AI弄潮儿们等不及了

架构概述

前端 (Frontend)

样式管理：使用Bootstrap的CSS框架进行页面布局和样式控制，确保响应式设计和快速开发。
表单提交：实现表单功能，允许用户输入查询条件，并通过API请求获取数据。
数据渲染：将从后端获取的用户信息展示在页面上，提供清晰的用户界面。

后端 (Backend)

数据源：目前使用user.json文件作为数据存储，通过json-server提供RESTful API接口。后期将迁移到更健壮的数据库（如MySQL、PostgreSQL或MongoDB）。
API服务：json-server作为HTTP服务器，监听http://localhost:3000/users，响应前端的HTTP请求，返回用户数据。

AI服务器 (LLM - 大语言模型)

AI交互：集成大语言模型，实现智能问答功能。用户可以通过表单输入问题，AI服务器处理请求并返回答案。
未来扩展：计划增加检索增强生成（RAG）等功能，提升AI的回答质量和准确性。

-->>

(*❦ω❦) 点击跳转项目地址Github

初步需求

用户信息表

字段：
- ID：唯一标识符
- 姓名：用户的名称
- 家乡：用户的出生地或居住地

当前功能

查询用户信息：用户可以通过表单输入查询条件（如姓名或家乡），系统将返回匹配的用户信息。
分析用户关系：基于用户提供的信息，AI服务器可以进行简单的数据分析，例如查找同乡用户、推荐相关联系人等。

效果展示：

项目初始化：构建AI全栈应用

后端初始化

创建项目

首先，我们需要初始化一个新的Node.js项目，这将为我们提供一个基础的项目结构，包括package.json文件，用于管理项目的依赖和脚本。
```
npm init -y
```
安装 json-server

接下来，我们将引入json-server，这里我们选择使用pnpm作为包管理器，因为它提供了更快的安装速度和更小的节点模块树。

`json-server`这是一个轻量级的工具，它可以根据JSON文件自动生成RESTful API接口，
非常适合在没有实际后端的情况下进行前端开发和测试。

```
pnpm i json-server
```

准备数据源

创建一个名为user.json的数据文件，用于存储用户信息。这个文件将作为我们的数据库，json-server会根据它的内容自动创建API接口。

{
  "users": [
    { "id": 1, "name": "风活络", "hometown": "北京" },
    { "id": 2, "name": "风清扬", "hometown": "武汉" },
    { "id": 3, "name": "令狐冲", "hometown": "浙江" }
  ]
}

配置启动命令

为了让项目更容易启动，我们在package.json中添加了一个名为dev的脚本。这个脚本将会启动json-server，并监听user.json文件的变化，以确保每次修改数据文件时，服务器都能自动更新。
```
"scripts": {
  "dev": "json-server --watch user.json --port 3000"
}
```
启动 JSON Server

使用npm run dev或pnpm run dev命令来启动json-server。一旦服务器启动，它将在http://localhost:3000/users地址上提供用户数据的API接口。
```
npm run dev
# 或者如果你使用的是 pnpm
pnpm run dev
```

前端初始化

创建HTML页面

在前端部分，我们需要创建一个简单的HTML页面，用于展示从后端获取的用户数据。在这个页面中，我们将使用JavaScript的fetch API向后端发送请求，并将返回的数据打印到浏览器的控制台中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户列表</title>
</head>
<body>
  <h1>用户列表</h1>
  <script>
    fetch('http://127.0.0.1:3000/users')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error('Error fetching data:', error));
  </script>
</body>
</html>

验证连接

打开浏览器并访问包含上述代码的HTML页面，你应该能够在控制台看到来自后端的用户数据。此外，你还可以通过浏览器的开发者工具中的“网络”标签页检查请求的状态码是否为200，以确认请求成功。
处理端口冲突

如果遇到端口被占用的问题，可以使用Ctrl + C终止当前的json-server进程，然后再次尝试启动。也可以通过修改package.json中的启动命令来更改服务器监听的端口号，例如：
```
"scripts": {
  "dev": "json-server --watch user.json --port 3001"
}
```

这样我们已经成功地设置了一个基本的前后端分离的开发环境。现在，可以继续扩展这个项目，比如添加更多的API接口、实现前端的用户界面、或者集成大语言模型（LLM）以增强应用程序的功能。

项目完善

前端

1.表单包含一个文本输入框，用户可以在其中输入问题，并且该输入框是必填的。还有一个提交按钮，当用户点击该按钮时，会触发表单的提交操作

<div class="row">
// action,默认提交表单位置，后面fetch进行异步请求可以覆盖默认跳转
    <form name="aiForm" action="http://www.baidu.com">
      <div class="form-group">
      // for 关联input
        <label for="questionInput">提问</label>
       // required 设置输入内容必填
        <input 
          type="text" 
          id="questionInput"
          class="form-control"
          name="question"
          placeholder="请输入问题"
          required
        >
      </div>
      <button type="submit" class="btn btn-default" name="btn">查询</button>
    </form>
</div>

2.js 主动向后端发送数据接口请求，使用fetch函数发送GET请求到http://localhost:3001/users（URL）

 const tableBody= document.querySelector('table tbody');
 //  document.forms集合找到aiForm元素
 const oForm = document.forms['aiForm'];
 // 设置全局，存储后端数据
 let usersData ;

 fetch('http://localhost:3001/users')
    //.then 代表数据已经到达前端 二进制数据->json（res）
    .then(res => res.json())
    // 当数据解析成功时，将解析后的数据打印到控制台
    .then(users => {
        usersData = users;
        for (let user of users){
            //把user里的数据添加到页面上
            const tr = document.createElement('tr');
            // for in json 对象遍历   优化
            for(let key in user){
            const td = document.createElement('td');
            // 用户对象key对于的值，作为单元格文本内容
            td.innerText = user[key];
            tr.appendChild(td);
            // 单元格填到行元素
            // console.log(key, user[key])
            }
            tableBody.appendChild(tr);
        }
    })

console.log(key, user[key])看看

其中将tbody里面数据动态添加到页面，还有两种方法：

// 纯纯一个一个加tr
         const idTd = document.createElement('td');
        idTd.innerText = user.id;
        tr.appendChild(idTd);

        const nameTd = document.createElement('td');
        nameTd.innerText = user.name;
        tr.appendChild(nameTd);

        const hometownTd = document.createElement('td');
        hometownTd.innerText = user.hometown;
        tr.appendChild(hometownTd);
  // 使用模版字符串             
                // 给tr 动态添加内容
                tr.innerHTML = `
                    <td>${user.id}</td>
                    <td>${user.name}</td>
                    <td>${user.hometown}</td>
                `;

3.为 oForm 表单添加一个 submit 事件监听器，并且执行一定操作

oForm.addEventListener('submit', event=>{
    event.preventDefault();// 阻止表单默认提交行为，action那
    // 获取表单question 输入框的值，并且去掉前后空格
    const question = oForm.question.value.trim();
    if(!question){ // 输入空格，也返回警告
        alert('请输入问题');
        return;
    }
    // 使用 fetch 函数发送请求到 http://localhost:1314/api，将问题和用户数据作为查询参数
    fetch(`http://localhost:1314/api?question=${question}&data=${JSON.stringify(usersData)}`)
        .then(data => data.json())
        .then(data =>{
         // 当数据解析成功时，将解析后的数据的 result 属性的值设置为 id 为 message 的元素的文本内容
         // console.log(data)
         document.getElementById('message').innerText = data.result;
       })
    })

先console.log(data)，发现解析后result作为文本内容 data.result

LLM

LLM 里面main.js 导入http，设置openai接口，使用openai模版进行promot工程就不再提及了。可以直接移步我的Github

重点介绍一下下面代码

该代码片段主要实现了一个 HTTP 服务器的请求处理逻辑。
服务器处理请求时，会设置一些跨域相关的响应头，以允许不同来源的请求。
它从请求的 URL 中解析出查询字符串，根据其中的数据和问题构建一个提示，调用 getCompletion 函数获取结果，并将结果作为 JSON 响应发送给客户端。

  // req 请求  res 响应
const server = http.createServer(async (req,res) => {
    
    res.setHeader('Access-Control-Allow-Origin', '*'); // 允许所有来源访问，也可以指定具体的域名，如'http://example.com'
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); // 允许的请求方法
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // 允许的请求头

    const parsedUrl = url.parse(req.url, true); // 解析请求的URL，第二个参数为true表示解析查询字符串
    const queryObj = parsedUrl.query; // 获取查询字符串对象
 
    const prompt = `
     ${queryObj.data}
     请根据以上JSON数据内容，回答${queryObj.question}这个问题
     `
     // 调用 getCompletion 函数，传入构建的提示信息，并等待其返回结果
     const result = await getCompletion(prompt) 
      let info ={
          result
      }
    res.statusCode = 200;
    // 响应头 , 告诉浏览器响应的内容类型是json
    res.setHeader('Content-Type','text/json')
    res.end(JSON.stringify(info)) 
 })

项目思考

项目还是雏形阶段，但相比传统前后端更有发展潜力，集成AI服务器进行交互的亮点现在就显现出来了

1. 当前进展与亮点

前后端分离：采用前后端分离架构，前端展示用户界面，后端提供数据接口。初步实现了AI问答交互，为用户提供智能对话体验。
快速原型开发：使用json-server作为简单的数据源，便于快速开发和测试。

2. 前端开发

框架选择：后续将使用Vue.js或React.js，加快开发速度并提升用户体验。
路由管理：引入路由库（如Vue Router或React Router），实现页面间的平滑导航。
样式控制：使用Bootstrap或其他CSS框架简化样式管理，确保响应式设计。
API调用：封装API请求逻辑，添加错误处理机制，集中管理网络请求。

3. 后端开发

数据迁移：从json-server迁移到更健壮的数据库（如MySQL、PostgreSQL或MongoDB），支持更大规模的数据存储。
环境变量：使用.env文件管理敏感信息，提高安全性。

4. AI服务器

模型集成：扩展AI功能，集成更多预训练模型，支持多语言处理和动态调整。
API设计：将AI模型封装为RESTful API或gRPC服务，方便调用。

5. 监测与管理

日志与监控：建立日志记录和监控系统，实时跟踪应用状态，及时发现和解决问题。
自动化测试：引入单元测试、集成测试和端到端测试，确保代码质量。

(*❦ω❦) 项目地址Github