LLM / 大语言模型 —— 前端别怕，就是个 “超级会说话的接口”

LaoNa1998

507人浏览 · 2026-03-20 14:33:55

LaoNa1998 · 2026-03-20 14:33:55 发布

“大语言模型”—— 光听名字就觉得离前端十万八千里：“模型？是不是要学机器学习？”“大语言？是不是要懂 NLP？”“LLM？三个字母凑一起就像在说暗号！” 但作为前端，我负责任地说：LLM 对你来说，就是个 “超级会说话的接口”—— 你不用管它怎么 “思考”，只要会发请求、拿数据，就够了！

一、这词在唬谁？

LLM = Large Language Model（大语言模型）翻译成人话：一个超级能聊、懂上下文、会说人话的 “智能接口”

它唬的就是我们前端人：

一听到 “模型” 就联想到 “机器学习”“算法训练”，腿肚子发软；
一看到 “大语言” 就脑补 “NLP 自然语言处理”“语法分析”，觉得要啃专业书；
一见到 “LLM” 缩写就觉得是 “圈内黑话”，自己跟不上技术潮流；

但咱前端根本不用慌 —— 这词的核心是 “能返回人类语言”，而不是 “背后有多复杂的技术”。

二、前端人话翻译：LLM 到底是啥？

举个前端能秒懂的栗子：

普通后端接口：你传 { userId: 123 }，它返回 { name: “张三”, age: 25 }（结构化数据）；
LLM 接口：你传 { prompt: “用前端视角解释LLM是什么” }，它返回 { content:
“LLM对前端来说就是超级会说话的接口，不用懂原理，会调就行～” }（自然语言数据）；

再简化：
LLM = 一个 “接收文字指令（prompt），返回文字回答” 的 HTTP 接口

你作为前端，负责的就是 “让用户输入指令”“把 LLM 的回答展示出来”，至于它怎么理解指令、怎么组织语言 —— 后端的活，咱不管！

三、前端到底要懂到啥程度？

不用懂的东西（懂了也没用，纯浪费时间）：

模型训练：不用知道怎么让 AI “学会说话”（比如喂多少数据、训练多少轮）；
参数规模：不用关心 GPT-4 有 1.76 万亿参数，还是通义千问有千亿参数（跟前端没关系）；
架构设计：不用懂 Transformer、注意力机制（算法工程师的饭碗，咱不抢）；
底层原理：不用知道 AI 是 “统计概率” 还是 “真正理解语言”；

只要懂 3 件事（够你找工作、做项目）：

怎么传 “指令（prompt）”：知道接口参数怎么写（比如prompt字段存用户输入）；
怎么处理返回：知道怎么解析 LLM 返回的 JSON，拿到回答内容；
怎么加上下文：知道怎么把历史对话拼进prompt，让 LLM 记住之前说的话；

这 3 件事，你做过普通接口联调，就等于会 80%！

四、前端要写啥代码？（极简可复制版）

技术栈：Vue3 + TS + Element Plus（React 同理，文末附简化思路）

核心代码分 2 块：调用通义千问 API + 调用 OpenAI API（任选其一）

1. 先准备：获取 API 密钥（前端不用管部署，拿密钥就行）

通义千问：去阿里云百炼平台申请 API-KEY（免费额度够用）；
OpenAI：去OpenAI 官网申请 API-KEY（需要境外手机号）；

注意：前端不要直接暴露密钥！实际项目中，一定要通过后端代理转发（下面代码含后端代理示例）。

2. 调用通义千问 API（推荐，国内访问稳定）

<template>
  <div class="llm-chat">
    <el-input
      v-model="prompt"
      placeholder="请输入你的问题（比如：用前端话解释LLM）"
      class="input-prompt"
    />
    <el-button type="primary" @click="callQwenAPI">调用通义千问</el-button>
  
    <!-- 回答展示 -->
    <div class="answer-box" v-if="answer">
      <h4>通义千问回答：</h4>
      <p>{{ answer }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElInput, ElButton, ElMessage, ElLoading } from 'element-plus';

const prompt = ref('');
const answer = ref('');

// 调用通义千问API（通过后端代理，避免暴露密钥）
const callQwenAPI = async () => {
  const promptVal = prompt.value.trim();
  if (!promptVal) return ElMessage.warning('请输入问题！');

  const loading = ElLoading.service({ text: 'AI思考中...' });
  try {
    // 前端调用自己的后端代理接口（重点：不直接调用通义千问官网接口）
    const response = await fetch('/api/proxy/qwen', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt: promptVal })
    });

    const res = await response.json();
    if (res.code === 200) {
      // 解析回答（通义千问返回格式：res.data.output.text）
      answer.value = res.data.output.text;
    } else {
      ElMessage.error(`接口报错：${res.message}`);
    }
  } catch (err: any) {
    ElMessage.error(`请求失败：${err.message}`);
  } finally {
    loading.close();
  }
};
</script>

<style scoped>
.llm-chat {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.input-prompt {
  width: 100%;
}

.answer-box {
  margin-top: 20px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background-color: #f9fafb;
}
</style>

3. 后端代理接口示例（Node.js + Express，10 行代码）

// 文件名：server.js
const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

// 通义千问API配置（密钥存在后端，前端看不到）
const QWEN_API_KEY = '你的通义千问API-KEY';
const QWEN_API_URL = 'https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation';

// 前端调用的代理接口
app.post('/api/proxy/qwen', async (req, res) => {
  try {
    const { prompt } = req.body;
    // 调用通义千问官网接口
    const response = await axios.post(
      QWEN_API_URL,
      {
        model: 'qwen-turbo', // 便宜又好用的模型
        input: { prompt },
        parameters: { result_format: 'text' }
      },
      {
        headers: {
          'Authorization': `Bearer ${QWEN_API_KEY}`,
          'Content-Type': 'application/json'
        }
      }
    );
    // 转发结果给前端
    res.json({ code: 200, data: response.data });
  } catch (err) {
    res.json({ code: 500, message: err.message });
  }
});

app.listen(3001, () => console.log('后端代理启动：http://localhost:3001'));

4. 调用 OpenAI API（备选，需科学上网）

<script setup lang="ts">
// 调用OpenAI API（同样通过后端代理）
const callOpenAIApi = async () => {
  const promptVal = prompt.value.trim();
  if (!promptVal) return ElMessage.warning('请输入问题！');

  const loading = ElLoading.service({ text: 'GPT思考中...' });
  try {
    const response = await fetch('/api/proxy/openai', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt: promptVal })
    });

    const res = await response.json();
    if (res.code === 200) {
      // OpenAI返回格式：res.data.choices[0].message.content
      answer.value = res.data.choices[0].message.content;
    } else {
      ElMessage.error(`接口报错：${res.message}`);
    }
  } catch (err: any) {
    ElMessage.error(`请求失败：${err.message}`);
  } finally {
    loading.close();
  }
};
</script>

5. 带上下文的聊天（让 LLM 记住历史对话）

<script setup lang="ts">
// 新增：历史对话数组（存所有消息）
const chatHistory = ref([
  // 初始消息：给LLM设定角色
  { role: 'system', content: '你是一个前端友好的AI助手，回答要简单易懂，别用专业术语' }
]);

// 带上下文的调用逻辑
const callQwenWithHistory = async () => {
  const promptVal = prompt.value.trim();
  if (!promptVal) return ElMessage.warning('请输入问题！');

  // 1. 新增用户消息到历史对话
  chatHistory.value.push({ role: 'user', content: promptVal });

  const loading = ElLoading.service({ text: 'AI思考中...' });
  try {
    const response = await fetch('/api/proxy/qwen/chat', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ messages: chatHistory.value })
    });

    const res = await response.json();
    if (res.code === 200) {
      const aiAnswer = res.data.output.text;
      answer.value = aiAnswer;
      // 2. 新增AI回答到历史对话（下次调用会带上）
      chatHistory.value.push({ role: 'assistant', content: aiAnswer });
    } else {
      ElMessage.error(`接口报错：${res.message}`);
    }
  } catch (err: any) {
    ElMessage.error(`请求失败：${err.message}`);
  } finally {
    loading.close();
    prompt.value = '';
  }
};
</script>