秋招冲榜：掌握全栈，AI加持

midsummer18
1,222 阅读7分钟

一个demo实现前端+后端+AI，全民AI,提升lever

一：前后端联调

1.1：前端

3.png

前端文件结构

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个单位的偏移量

1.png

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>

页面效果：

2.png

3. fetch动态获取数据 (DOM编程)

  1. 获取后端数据
 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，从而在页面上正确地渲染用户数据。

10.png

1.2：后端

4.png

后端文件结构

1. 初始化为后端项目：npm i -y

  • 提供数据 npm i node package management

2. 安装包：npm i json-server

  • json-server是json文件快速编程后端数据的package

  • json 是对象字面量，也是前后端数据格式

3. 准备数据

  1. 创建user.json文件，手动输入json格式的数据
{
    "users":[
        {
            "id":1,
            "name":"midsummer",
            "hometown":"南昌"
        }
    ]
}

2.在package.json包中加入脚本dev，将数据传出

  • package.json 为项目描述文件
"dev": "json-server users.json"

5.png

4. 运行项目：npm run dev

  • dev为 script-name（脚本名字）

6.png

1.3：总结

  • 前后端分离开发

    • 前端在frontend包，利用html，js，fetch使页面动态

    • 后端在backend包，利用json-server 实现数据接口

    • 前后端的端口不一样 3000端口是后端服务 5173是前端端口

  • 界面做到小企业级别，后端使用轻量级的json-server

  • 该后端方案是前端要掌握的后端方案

    • 用json文件伪造数据，之后把localhost改成后端给的线上地址就没问题了

二：AI

image.png

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>

效果展示：

7.png

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

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提问

  1. 生成提示 (Prompt) ：

    • prompt 变量包含用户数据和问题。这个提示被格式化为一个字符串，发送给 OpenAI API。

  2. 调用 OpenAI API：

    • client.chat.completions.create 是一个异步方法，用于调用 OpenAI 的 API，生成基于提示的回答。需要使用 await 等待返回结果。

  3. 处理响应：

    • 从 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提问，等待片刻

9.png

四：总结

一、前后端联调

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的回答给前端展示。

avatar
文章
阅读
粉丝