目录

一、效果展示

二、项目概述

三、手把手快速搭建实现本项目

3.1 前端实现

3.2 后端方向

五、后续开发计划

一、效果展示

默认展示

一般对话展示：

代码对话展示：

二、项目概述

        本项目是一个基于Web的智能对话服务平台，通过后端与第三方AI公司的API接口对接，为前端用户提供了一个简洁、直观的聊天界面。该项目的核心价值在于其便捷性与普适性，让用户能够轻松接入高质量的AI对话服务，无论是寻求信息咨询、娱乐互动，还是情感陪伴，都能获得即时响应与个性化体验。

技术模块：

1.前端：采用Vue框架+elementUi框架+HTML本地存储信息

2.后端：采用SpringBoot框架进行数据响应

三、手把手快速搭建实现本项目

3.1 前端实现

前置准备工作：创建一个新的Vue模板，并导入axios

npm install 'axios'

导入elementUI

npm i element-ui -S

Vue中main.js 进行配置

import Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';  Vue.config.productionTip = false  Vue.use(ElementUI);  new Vue({   router,   render: h => h(App) }).$mount('#app') 

本项目为了简单化，将项目整体仅设置为了一个Vue主视图（App.vue）

template:

JavaScript:

css:

最后配置端口为8081(在vue.config.js文件下)：

const { defineConfig } = require('@vue/cli-service') module.exports = {   devServer: {     port: 8081, // 将端口设置为你想要的端口号   }, };

运行：在控制台启动程序

npm run serve

打开浏览器：前端的配置改为(localhost:8081)

3.2 后端方向

创建一个SpringBoot项目

在项目pom.xml文件导入以下依赖：

                              com.alibaba             dashscope-sdk-java             2.8.2                                        com.squareup.okhttp3             okhttp             4.9.3         

由于后端功能十分简单，仅需要一个Utils和一个Controller即可

Utils：(注意：这里要填自己申请的APIKey(十分简单，一毛钱就能开通))

@Component public class AICHAT {     public static String callWithMessage(String message)             throws NoApiKeyException, ApiException, InputRequiredException {         Generation gen = new Generation();         Constants.apiKey="xxxxxx";//TODO：这里填写自己申请的APIKEY         MessageManager msgManager = new MessageManager(10);         Message systemMsg =                 Message.builder().role(Role.SYSTEM.getValue()).content("You are a helpful assistant.").build();         Message userMsg = Message.builder().role(Role.USER.getValue()).content(message).build();//这里填写对话内容         msgManager.add(systemMsg);         msgManager.add(userMsg);         QwenParam param =                 QwenParam.builder().model(Generation.Models.QWEN_TURBO).messages(msgManager.get())                         .resultFormat(QwenParam.ResultFormat.MESSAGE)                         .topP(0.8)                         .enableSearch(true)                         .build();         GenerationResult result = gen.call(param);         String Message = extractContentFromResult(result);         System.out.println(Message);         return Message;     }  //    仅获取JSON结果中message字段的信息     public static String extractContentFromResult(GenerationResult result) {         if (result != null && result.getOutput() != null && !result.getOutput().getChoices().isEmpty()) {             Message message = result.getOutput().getChoices().get(0).getMessage();             return message.getContent();         }         return null; // 或者返回一个默认值     }  }

ChatController:

@RestController @RequestMapping("/Test") @CrossOrigin public class ChatController {     @Autowired     AICHAT aichat;     @GetMapping("/Chat")     public String GetParameter(String message) {          try {             if (message != null) {                 String AiResponse = null;                 try {                     AiResponse = aichat.callWithMessage(message);                 } catch (ApiException | NoApiKeyException | InputRequiredException e) {                     System.out.println(e.getMessage());                 }                 return AiResponse;             }         } catch (Exception e) {             return "出错了>_<"+e.getMessage();         }         return  null;     }      }

 启动(Application)：

前后端联调测试：

五、后续开发计划

后续改进计划：

后续将会修改许多的bug，并加入许多新的功能，一步步将其打造成一个能够实现商业化的，满足普通人可以使用的通用网站。关注后即可获取最新的动态

1.加入多个可用个人免费的API，让切换AI模型能够方便快捷

2.加入用户管理，满足以后实现商业化的一步

3.加入动画效果，让聊天更生动

4.加入语音输入功能，与语音输出功能。实现外语教师功能

5.将项目通过nginx部署到服务器上

 .......