一个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只能传递字符串
-
接收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的回答。 -
动态数据获取:使用
fetch
API从本地服务器获取用户数据,并通过DOM编程将这些数据展示在表格中。fetch
用于异步请求数据,获取到的数据通过JavaScript处理后插入到页面中。
2. 后端部分
-
初始化和数据准备:通过
json-server
快速搭建了一个后端服务,使用JSON
文件作为数据源,提供了简单的RESTful API接口来供前端获取数据。 -
数据接口:在
json-server
中配置了一个users.json
文件,并通过npm
脚本启动了后端服务。这种方式适合小规模的开发和测试。
二、AI部分
1. 前端集成
-
AI提问表单:构建了一个表单用于输入问题,并在用户提交后,通过
fetch
API将问题和用户数据发送到AI服务接口。 -
数据处理:在前端处理了表单的提交事件,阻止了默认行为,提取用户输入的问题,并将数据发送到AI服务,接收并显示AI的回答。
2. AI服务
-
服务搭建:使用
http
模块搭建了一个简单的HTTP服务,并处理跨域问题,允许前端应用访问。 -
集成OpenAI:通过引入
openai
包,使用OpenAI的API进行AI问答。服务从请求中获取用户数据和问题,将其格式化为提示(prompt),然后调用OpenAI API生成回答,并将结果返回给前端。 -
关键步骤:在服务中设置了环境变量存储API密钥,创建了请求和响应处理逻辑,将用户数据和问题传递给AI,并返回AI的回答给前端展示。