一个demo实现前端+后端+AI，全民AI,提升lever
一：前后端联调
1.1：前端
前端文件结构
1. 利用bootstrap搭建界面
- 表头引入bootstrap
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
- 使用bootstrap
-
container 框架
-
row -行 块级 12 列
-
col-md-6 列宽
-
col-md-offset-3 3个单位的偏移量
-
2. table语义化(注意细化)
-
thead:表头
-
tr
- th
-
-
tbody:表体
-
tr
- td
-
原码示例如下（前端模拟数据）
<div class="container">
<div class="row col-md-6 col-md-offset-3">
<h1>AI能力驱动的userData</h1>
<table class="table table striped" id="user_table">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>家乡</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>midsummer</td>
<td>南昌</td>
</tr>
</tbody>
</table>
</div>
页面效果：
3. fetch动态获取数据 (DOM编程)
- 获取后端数据
fetch('http://localhost:3000/users')
.then(data=>data.json())
.then(users=>{
console.log(users);
})
2.在页面上显示数据（DOM编程）
- 找到挂载点挂载（user_table为tabled的id）
const oBody = document.querySelector('#user_table tbody')
- 给挂载点嵌入数据
（代码写在console.log(users)处）- .join(”)//将map()生成的HTML行数组转换成一个连续的字符串，以便将其设置为oBody.innerHTML，从而在页面上正确地渲染用户数据。
1.2：后端
后端文件结构
1. 初始化为后端项目：npm i -y
- 提供数据 npm i node package management
2. 安装包：npm i json-server
-
json-server是json文件快速编程后端数据的package
-
json 是对象字面量，也是前后端数据格式
3. 准备数据
- 创建user.json文件，手动输入json格式的数据
{
"users":[
{
"id":1,
"name":"midsummer",
"hometown":"南昌"
}
]
}
2.在package.json包中加入脚本dev，将数据传出
- package.json 为项目描述文件
"dev": "json-server users.json"
4. 运行项目：npm run dev
- dev为 script-name（脚本名字）
1.3：总结
-
前后端分离开发
-
前端在frontend包，利用html，js，fetch使页面动态
-
后端在backend包，利用json-server 实现数据接口
-
前后端的端口不一样 3000端口是后端服务 5173是前端端口
-
-
界面做到小企业级别，后端使用轻量级的json-server
-
该后端方案是前端要掌握的后端方案
-
用json文件伪造数据，之后把localhost改成后端给的线上地址就没问题了
-
二：AI
AI文件结构
2.1: 前端部分
1. 页面效果部分
-
同样使用bootstrap,快速搭建页面，输入问题之后，点击提交，直接跳转百度页面。
这里介绍一下form 表单：
-
标签使用到位，能够无障碍访问
-
input name 提交数据的名字
-
label(for) 和 input(id) 效果是一样的
-
-
html5 版本中，增强了表单能力
-
placeholder属性
-
表单用来提交数据：
dom form value + ajax
-
-
源代码如下
<div class="row col-md-6 col-md-offset-3">
<form name="aiForm" method="get" action="http://www.baidu.com">
<div class="form-group">
<label for="questionInput">向AI助理提问：</label>
<input type="text" name="question" class="form-control" id="questionInput" placeholder="请输入你想问的相关问题">
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
再埋一个结果标签
<div class="row" id="message">
</div>
效果展示：
2. 前端页JS部分：
- 拉取后端接口，并存储用户数据（userdata）
let usersData = [];
fetch('http://localhost:3000/users')
.then(data=>data.json())
.then(users=>{
usersData = users;
//...省略部分前端fetch数据并展示在页面的代码，前端部分已做讲解
})
- ai提问表单监听事件
-
阻止表单的默认行为
-
通过name属性获取表单数据,性能更好。‘trim’去除空格
-
拉取AI接口
- 携带问题，用JOSN.stringify()方法将usersData对象转换为JSON字符串，因为
url只能传递字符串
- 携带问题，用JOSN.stringify()方法将usersData对象转换为JSON字符串，因为
-
接收ai返回结果
-
const oForm = document.forms['aiForm'];
const oMessage = document.querySelector('#message')
oForm.addEventListener('submit',function(event){
//阻止表单的默认行为
event.preventDefault();
//通过name属性获取表单数据
const question = this["question"].value.trim();
//拉取接口
fetch(`http://localhost:9889/users?question=${question}&users=${JSON.stringify(usersData)}`)//usersData对象，JOSN.stringify()方法将usersData对象转换为JSON字符串
.then(data=>data.json())
.then(res=>{
//接收ai返回结果
document.querySelector('#message').innerHTML = res.message
})
})
2.2：AI部分
1. 创建AI文件夹（ai_server）
- 安装ai包：npm i openai
2. 搭建http服务
- http 是基于请求响应的简单协议，请求：req，响应：res
const http = require('http');
const server = http.createServer(function(req,res){
})
//服务监听
server.listen(9889,function(){
console.log('server is running')
})
3. 完善用户ai服务，url模块
- 解决跨域问题
-
设定允许所有来源访问，也可以指定具体的域名，如’example.com‘
-
设定允许的请求方法，GET, POST, OPTIONS
-
const server = http.createServer(async function(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');
})
- 获取url并传入问题与用户数据
const url = require('url');
const server = http.createServer(async function(req,res){
if (req.url.indexOf('/users')>=0){
//获取url
const parsedUrl = url.parse(req.url,true)
//传入问题与用户数据
const {question,users} = parsedUrl.query; // query: [Object: null prototype] { question: '123' },
}
})
4. 引入openai
- 在.env文件配key
- github.com/chatanywher… 官网可免费申领key
OPENAI_API_KEY=输入自己的key
- 在main.js引入
const OpenAI = require('openai');
require('dotenv').config();
const client = new OpenAI({
apiKey: process.env.OPENAI_API_KEY,
//proxy 代理
baseURL: 'https://api.chatanywhere.tech/v1'
}
5. 向ai提问
-
生成提示 (Prompt) ：
prompt变量包含用户数据和问题。这个提示被格式化为一个字符串，发送给 OpenAI API。
-
调用 OpenAI API：
client.chat.completions.create是一个异步方法，用于调用 OpenAI 的 API，生成基于提示的回答。需要使用await等待返回结果。
-
处理响应：
- 从 AI 的响应中提取内容，并将其发送回客户端。服务器响应的状态码为 200 表示成功，内容类型为 JSON。
const server = http.createServer(async function(req,res){
//解决跨域问题...
if (req.url.indexOf('/users')>=0){
//获取url并传入问题与用户数据...
const prompt=`
${users}
请根据以上用户的json数据，回答：${question}这个问题
如果回答不了，请回答：对不起，我无法回答这个问题
`
const response = await client.chat.completions.create({
model: 'gpt-3.5-turbo',
messages: [{ role: "user", content: prompt }],
temperature: 0, // 控制输出的随机性，0表示更确定的输出
});
//ai回答的结果
const result = response.choices[0].message.content || '';
let info = {
message:result
}
res.statusCode = 200;
res.setHeader('Content-Type', 'text/json');
res.end(JSON.stringify(info))
}
})
三：效果展示
在user.json多添加几条数据，把前后端，ai项目都跑起来，再对ai提问，等待片刻
四：总结
一、前后端联调
1. 前端部分
-
界面搭建：利用Bootstrap框架构建了一个简单的界面，其中包括一个表格（
table）和一个用于提交问题的表单（form）。表格通过fetch从后端获取数据并动态展示，表单用来提交用户问题并接收AI的回答。 -
动态数据获取：使用
fetchAPI从本地服务器获取用户数据，并通过DOM编程将这些数据展示在表格中。fetch用于异步请求数据，获取到的数据通过JavaScript处理后插入到页面中。
2. 后端部分
-
初始化和数据准备：通过
json-server快速搭建了一个后端服务，使用JSON文件作为数据源，提供了简单的RESTful API接口来供前端获取数据。 -
数据接口：在
json-server中配置了一个users.json文件，并通过npm脚本启动了后端服务。这种方式适合小规模的开发和测试。
二、AI部分
1. 前端集成
-
AI提问表单：构建了一个表单用于输入问题，并在用户提交后，通过
fetchAPI将问题和用户数据发送到AI服务接口。 -
数据处理：在前端处理了表单的提交事件，阻止了默认行为，提取用户输入的问题，并将数据发送到AI服务，接收并显示AI的回答。
2. AI服务
-
服务搭建：使用
http模块搭建了一个简单的HTTP服务，并处理跨域问题，允许前端应用访问。 -
集成OpenAI：通过引入
openai包，使用OpenAI的API进行AI问答。服务从请求中获取用户数据和问题，将其格式化为提示（prompt），然后调用OpenAI API生成回答，并将结果返回给前端。 -
关键步骤：在服务中设置了环境变量存储API密钥，创建了请求和响应处理逻辑，将用户数据和问题传递给AI，并返回AI的回答给前端展示。
