从0到1搭建一个AI智能应用：Vue3 + FastAPI + DeepSeek实现企业级大模型助手完整实践

前言

2026年，AI应用开发正在成为软件工程师新的核心能力。

过去几年，我们关注：

• Spring Boot后端开发

• Vue前端工程化

• 微服务架构

• 数据库设计

而现在，越来越多企业开始探索：

• AI智能客服

• AI办公助手

• AI知识库

• AI任务生成器

• AI数据分析助手

很多开发者都会遇到一个问题：

如何把大模型真正接入业务系统，而不是简单调用一个聊天接口？

本文将从实际项目角度，介绍如何使用：

• Vue3 + TypeScript构建前端交互

• FastAPI搭建AI服务

• DeepSeek API实现大模型能力

• PostgreSQL存储业务数据

完成一个企业级AI助手基础架构。

---

一、整体架构设计

一个完整AI应用通常包含4层：

          用户
           |
           |
      Vue3前端
           |
           |
      FastAPI接口层
           |
     ----------------
     |              |
  DeepSeek       PostgreSQL
  大模型服务       数据存储

各模块职责：

前端 Vue3

负责：

• 聊天界面

• 消息展示

• 用户输入

• 流式输出

FastAPI

负责：

• API接口

• 参数校验

• Prompt管理

• 权限控制

DeepSeek

负责：

• 自然语言理解

• 内容生成

• 任务规划

PostgreSQL

负责：

• 用户记录

• 对话历史

• 业务数据

---

二、Vue3实现AI聊天界面

创建项目

使用Vite创建Vue3项目：

npm create vite@latest ai-chat-web

cd ai-chat-web

npm install

安装依赖：

npm install axios

目录结构：

src
 ├── api
 │    └── ai.ts
 │
 ├── components
 │    └── ChatBox.vue
 │
 └── App.vue

---

三、封装AI接口请求

创建：

src/api/ai.ts

代码：

import axios from "axios"


export function chat(message:string){

    return axios.post(
        "/api/chat",
        {
            message
        }
    )

}

前端调用：

async function send(){

 const res = await chat(input.value)

 messages.value.push({
    role:"assistant",
    content:res.data.content
 })

}

这样前端就完成了基础AI对话能力。

---

四、FastAPI实现大模型接口

安装：

pip install fastapi uvicorn openai

创建：

main.py

代码：

from fastapi import FastAPI
from pydantic import BaseModel

from openai import OpenAI


app = FastAPI()


client = OpenAI(
    api_key="你的KEY",
    base_url="https://api.deepseek.com"
)


class ChatRequest(BaseModel):

    message:str



@app.post("/api/chat")
async def chat(req:ChatRequest):

    response = client.chat.completions.create(

        model="deepseek-chat",

        messages=[

            {
            "role":"system",
            "content":
            "你是一名企业智能助手"
            },

            {
            "role":"user",
            "content":req.message
            }

        ]

    )


    return {

        "content":
        response.choices[0].message.content

    }

启动：

uvicorn main:app --reload

访问：

http://localhost:8000/docs

可以看到自动生成的接口文档。

---

五、为什么企业AI应用不能直接调用大模型？

很多初学者都会这样设计：

用户
 |
 |
大模型
 |
 |
返回答案

但是企业应用通常需要增加中间层。

正确方式：

用户

↓

业务系统

↓

Prompt管理

↓

知识检索

↓

大模型

↓

结果处理

原因：

1. 控制输出质量

同一个问题：

普通Prompt：

帮我写报告

效果：

不可控。

企业Prompt：

你是一名行业分析专家

按照以下格式输出：

1.事件背景

2.影响分析

3.风险等级

4.建议措施

效果：

稳定很多。

---

2. 接入企业数据

大模型不知道企业内部信息。

例如：

• 产品资料

• 客户信息

• 内部文档

需要通过：

RAG技术

增强模型能力。

---

六、RAG：企业AI应用核心技术

RAG全称：

Retrieval Augmented Generation

中文：

检索增强生成。

流程：

企业文档

↓

文本切片

↓

向量化

↓

向量数据库

↓

相似搜索

↓

大模型生成答案

例如：

用户问：

“去年销售额是多少？”

系统：

1. 查询企业数据库

2. 找到相关数据

3. 发送给大模型

4. 生成回答

这就是企业AI助手和普通聊天机器人的区别。

---

七、流式输出提升用户体验

普通接口：

用户发送问题。

等待10秒。

一次返回。

体验较差。

ChatGPT类似效果：

文字一点点出现。

实现方式：

Server-Sent Events(SSE)

后端：

from fastapi.responses import StreamingResponse


def stream():

    yield "正在分析..."

    yield "正在生成结果..."


@app.get("/stream")

def stream_api():

    return StreamingResponse(
        stream()
    )

前端：

const eventSource =
new EventSource("/stream")


eventSource.onmessage=(e)=>{

 console.log(e.data)

}

---

八、AI应用开发中的几个坑

1. 不要把API Key写前端

错误：

const key="xxxx"

任何用户都可以看到。

正确：

Vue

↓

FastAPI

↓

DeepSeek

---

2. Prompt不要散落代码

错误：

content="你是专家"

推荐：

数据库管理：

prompt_template

version

status

方便迭代。

---

3. 注意Token成本

大模型调用成本主要来自：

输入Token。

输出Token。

优化：

减少历史消息。

控制Prompt长度。

缓存结果。

---

九、未来AI开发者需要掌握什么？

传统开发：

前端

后端

数据库

未来：

前端

后端

数据库

+

Prompt工程

+

RAG

+

Agent

+

模型调用

AI不会取代程序员。

但不会使用AI技术的程序员，竞争力会下降。

---

总结

一个真正可落地的AI应用，不只是调用一次大模型API。

完整体系应该包括：

✅ 前端交互

✅ 后端服务

✅ Prompt管理

✅ 数据存储

✅ RAG知识增强

✅ 权限控制

✅ 成本优化

Vue3 + FastAPI + DeepSeek只是开始。

未来的软件开发，会越来越多地进入：

传统业务系统 + AI能力融合的新阶段。

如果你是一名开发者，现在学习AI应用开发，正是进入下一轮技术周期的重要机会。