如何在前后端分离项目当中调用星火大模型实现AI问答模块设计?前后端点亮星火:Vue+Node 全链路打通 AI 问答系统

发布于:2025-03-12 ⋅ 阅读:(141) ⋅ 点赞:(0)

使用到的开发工具:

Visual Studio Code (VSCode) 我们选用 VSCode 作为主要的开发编辑器,其丰富的插件生态(如 ESLint、Prettier、Debugger 等)极大提高了代码质量和开发效率。
Node.js & Express 作为后端 API 网关的运行环境,Node.js 搭配 Express 框架让我们能够高效构建后端服务。利用 Axios 进行 HTTP 请求转发,确保与讯飞开放平台的星火大模型实现无缝对接。
Postman 为保证后端 API 的稳定与正确性,在调试和测试阶段,Postman 是不可或缺的工具。它帮助我们模拟数据请求、检测接口返回,并快速定位问题。
NPM/Yarn 作为包管理器,NPM(或 Yarn)确保了项目依赖的正确安装和管理,同时支持跨平台构建与部署。

需要获取的配置项:

第一、登录平台后在控制台获取http服务接口认证信息
其中有你的APIPassword、服务名称、APPID、APISecret、APIKey、接口地址、接口类型

案例讲解:

以下以我的项目讲讲流程:
我的项目属于是一个前后端分离的springboot + vue 的项目,在选择代理服务器部署的时候我选择部署到了node.js当中,方便我前端一键部署。

以下是我的前端项目文件结构:
其中我的vue文件(即model是放在src/view里面的,作为一个视图)
在这里插入图片描述

AI_model.vue:

<template>
  <div class="ai-model-container">
    <div class="chat-container">
      <div class="messages" ref="messagesContainer">
        <div v-for="(message, index) in messages" :key="index" class="message"
          :class="{ 'user-message': message.isUser, 'ai-message': !message.isUser }">
          <div class="message-content">{
  { message.text }}</div>
        </div>
        <div v-if="isLoading" class="loading-indicator">
          正在思考中...
        </div>
      </div>
    </div>

    <div class="input-container">
      <el-inp

网站公告

今日签到

点亮在社区的每一天
去签到