从前端到全栈：使用 AI 助力的全栈工程师实践

lIIIllIlIllIIl
102 阅读4分钟

在现代互联网开发中，全栈工程师已经成为企业尤其是创业团队中不可或缺的角色。全栈工程师不仅要掌握前端开发技能，还要能够胜任后端服务、数据库操作，以及系统部署与优化。而随着 AI 技术的快速发展，AI 助力的全栈开发正在成为一种趋势，使得开发效率和应用智能化水平都得到了显著提升。本文将通过一个完整的 AI 全栈应用开发案例，详细介绍从前端、后端到 AI 模型调用的全流程实践。

一、全栈工程师的技能结构

从岗位职责来看，全栈工程师需要覆盖以下几个方面：

  1. 前端工程师技能

    • 熟悉 HTML、CSS、JavaScript 基础
    • 熟练掌握现代前端框架，如 Vue、React
    • 能够进行页面布局和交互设计

  2. 后端工程师技能

    • 掌握 Go、Node.js 等后端语言
    • 熟悉 RESTful API 设计与开发
    • 数据库操作能力，如 MySQL、MongoDB

  3. AI 应用开发技能

    • 使用 AI 接口进行自然语言处理
    • 将 AI 功能集成到前后端交互中
    • 能够处理 JSON 数据、调用模型接口生成内容

  4. 全栈能力

    • 端到端设计：从前端请求到后端数据，再到 AI 模型的响应
    • 异步处理与 API 调用
    • 项目部署与调试

可以看到，现代全栈工程师不仅要会开发，还要懂得如何将 AI 技术融入到实际业务中，实现智能化应用。

二、全栈应用示例概述

本文示例是一个 用户问答系统，前端展示用户表格并提供问题输入框，用户输入问题后，通过 AI 模型分析用户数据返回回答。应用分为三个模块：

  1. 前端 (frontend) ：HTML + Bootstrap + JavaScript
  2. 后端 (backend) ：JSON Server 提供数据 API
  3. LLM 模块 (llm) ：调用 OpenAI 接口处理自然语言请求

下面我们逐一分析各模块实现。

三、前端实现

前端使用 HTML + Bootstrap 构建页面，同时通过 JavaScript 与后端和 AI 模型交互。

1. 页面结构

页面布局采用 Bootstrap 网格系统：

<div class="container">
  <div class="row col-md-6 col-md-offset-3">
    <table class="table table-striped" id="user_table">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>家乡</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <div class="row">
    <form name="aiForm">
      <div class="form-group">
        <label for="questionInput">请输入问题：</label>
        <input type="text" class="form-control" id="questionInput" name="question" required placeholder="请输入问题">
      </div>
      <div class="form-group">
        <button type="submit" class="btn btn-primary">提交</button>
      </div>
    </form>
  </div>
  <div class="row" id="message"></div>
</div>

通过表格展示用户信息，通过表单输入问题，最后将 AI 返回的答案展示在 #message 元素中。

2. 前端逻辑

前端主要逻辑包括：

  • 获取用户数据：通过 fetch 从后端 JSON Server 获取用户数据并渲染到表格中
  • 提交问题：用户在表单输入问题后，前端将用户数据和问题一起发送到 LLM 后端接口
  • 显示结果：将 AI 返回的答案展示在页面中

核心 JavaScript 实现如下：

const oForm = document.forms["aiForm"];
const oBody = document.querySelector('#user_table tbody');
const oBtn = document.querySelector(".btn");
let users;

oForm.addEventListener("submit", (event) => {
  event.preventDefault();
  const question = oForm["question"].value;
  if(!question) {
    alert("请输入问题");
    return;
  }
  oBtn.disabled = true;
  fetch(`http://localhost:1314/?question=${question}&data=${JSON.stringify(users)}`)
    .then(res => res.json())
    .then(data => {
      oBtn.disabled = false;
      document.getElementById('message').innerHTML = data.result;
    });
});

// 获取用户数据
fetch('http://localhost:3001/users')
  .then(res => res.json())
  .then(data => {
    users = data;
    oBody.innerHTML = data.map(user => `
      <tr>
        <td>${user.id}</td>
        <td>${user.username}</td>
        <td>${user.hometown}</td>
      </tr>
    `).join("");
  });

通过这种方式，前端实现了与后端的数据交互以及 AI 结果展示。

四、后端实现

后端采用 JSON Server 模拟 API 服务，这是一种快速搭建 RESTful 接口的方式，非常适合前端调试或原型开发。

1. 数据文件

users.json：

{
  "users": [
    { "id": 1, "username": "aaa", "hometown": "赣州" },
    { "id": 2, "username": "bbb", "hometown": "吉安" },
    { "id": 3, "username": "ccc", "hometown": "南昌" },
    { "id": 4, "username": "ddd", "hometown": "宜春" }
  ]
}

2. 启动 JSON Server

package.json 中的脚本配置如下：

"scripts": {
  "dev": "json-server --watch users.json --port 3001"
}

运行 npm run dev 后，后端会在 http://localhost:3001/users 提供完整的用户数据接口。

这种方式适合在前端开发阶段快速搭建数据服务，不依赖完整数据库，减少环境配置成本。

五、LLM 模块实现

LLM 模块负责调用 AI 接口，将用户问题和数据交给模型处理，然后返回智能回答。

1. 使用 OpenAI API

使用 openai 官方 SDK，配置 API Key 并调用 GPT 模型：

import OpenAI from 'openai';
const client = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });

const getCompletion = async (prompt, model = 'gpt-3.5-turbo') => {
  const messages = [{ role: 'user', content: prompt }];
  const result = await client.chat.completions.create({
    model,
    messages,
    temperature: 0.1
  });
  return result.choices[0].message.content;
};

2. 搭建 HTTP 服务

使用 Node.js 内置 http 模块搭建服务端接口，处理前端请求：

import http from 'http';
import url from 'url';

http.createServer(async (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  const parsedUrl = url.parse(req.url, true);
  const prompt = `
    ${parsedUrl.query.data}
    请根据上面的JSON数据，回答 ${parsedUrl.query.question} 这个问题。
  `;
  const result = await getCompletion(prompt);
  res.status = 200;
  res.setHeader('Content-Type', 'application/json');
  res.end(JSON.stringify({ result }));
}).listen(1314);

前端通过 fetch 请求该接口，即可获取 AI 生成的答案，实现完整的问答功能。

六、全栈实践总结

通过这个案例，可以总结全栈开发的几个关键点：

  1. 前后端分离
    前端通过 fetch 获取数据和发送请求，后端通过 RESTful API 提供数据接口，互不依赖技术栈，便于维护和扩展。

  2. 快速原型开发
    JSON Server 使得前端能够快速拿到数据接口，减少了初期数据库设计和搭建的成本，适合快速迭代。

  3. AI 模型集成
    将 OpenAI API 融入后端服务，实现自然语言处理功能，使应用从传统数据展示转向智能交互。

  4. 端到端数据流
    数据从 JSON 文件 -> 后端接口 -> 前端表格渲染 -> 用户输入 -> AI 模型处理 -> 返回结果 -> 前端展示，形成完整闭环。

  5. 现代全栈工程师能力体现

    • 前端展示与交互能力
    • 后端 API 架构与数据服务能力
    • AI 模型调用与智能化应用能力
    • 异步处理与端到端集成能力

七、结语

全栈工程师不再只是前端和后端的简单组合，而是贯穿整个技术栈的解决方案提供者。通过 AI 的加持，全栈工程师不仅能实现功能性开发，还能让应用智能化、可交互，提升产品价值。

本文示例从前端展示、后端数据服务到 AI 模型调用，完整展现了一个 AI 全栈应用的开发流程。无论是学习实践还是实际项目开发，都能够为开发者提供参考和启发。

未来，随着 AI 技术的普及，全栈工程师的工作内容将更加多元化，具备 AI 能力的全栈开发者将成为抢手人才。

avatar
文章
阅读
粉丝