自己网站给别人网站做外链,网页设计与网站建设设计报告,组织部建设网站示范材料,珠海门户网站建设价格目录
一、效果展示
二、项目概述
三、手把手快速搭建实现本项目
3.1 前端实现
3.2 后端方向
五、后续开发计划 一、效果展示
默认展示 一般对话展示#xff1a; 代码对话展示#xff1a; 二、项目概述 本项目是一个基于Web的智能对话服务平台#xff0c;通过后端与第…目录
一、效果展示
二、项目概述
三、手把手快速搭建实现本项目
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 falseVue.use(ElementUI);new Vue({router,render: h h(App)
}).$mount(#app)本项目为了简单化将项目整体仅设置为了一个Vue主视图App.vue
template:
templatediv idChatel-containerel-aside width200px!-- 添加导航 --el-row classtac el-col :span12 stylewidth: 100%;h1个人工具网站/h1el-menu default-active2 classel-menu-vertical-demo openhandleOpen closehandleCloseel-submenu index1template slottitlei classel-icon-location/ispan人工智能助手/span/templateel-menu-item-groupel-menu-item index1-1通义千问/el-menu-itemel-menu-item index1-2文言一心/el-menu-itemel-menu-item index1-2GPT/el-menu-item/el-menu-item-group /el-submenuel-menu-item index2i classel-icon-menu/ispan slottitle知识星球/span/el-menu-itemel-menu-item index3 i classel-icon-document/ispan slottitle工具集合/span/el-menu-itemel-menu-item index4i classel-icon-setting/ispan slottitle素材集合/span/el-menu-item/el-menu/el-col/el-row/el-asideel-containerel-headerh3通义千问-API套壳网站/h3/el-headerel-maindiv idChatLayOut!-- 对话内容列举 --div v-for(msg, index) in messages :keyindex idChatBubbleimg :srcgetImageUrl(msg.sender) idchatImage!-- p idChatContent{{ msg.sender }}: {{ msg.content }}/p --div classchat-content-wrap!-- 使用预处理后的消息内容 --div v-htmlpreprocessMessageContent(msg.sender:msg.content) /div/div/div/div/el-mainel-footer!-- 使用flex布局使元素水平排列 --div styledisplay: flex; align-items: center;!-- 将输入框放入表单中 --form submit.preventonFormSubmit stylemargin-left: 30%; width: 500px; margin-right: 10px;el-input idDialogTextCSS v-modelmessage :placeholderDialogText :disabledflagstyleflex-grow: 1; /el-input/form!-- 提交按钮 --el-button typeprimary clicksendMessage stylewidth:90px ;提交/el-button!-- 清空按钮 --el-button typedanger clickdeleteMessage清空本地聊天记录/el-button/divdivCOPYRIGHT: CSDN-ALPHAMILK/divdivversion : 测试版/div/el-footer/el-container/el-container/div
/template
JavaScript:
script
import axios from axios;export default {data() {return {message: ,messages: [],Identify: ,senderType: , // 新增一个变量来标识发送者类型flag:false,DialogText:请您输入内容,}},mounted() {// 页面加载时从localStorage读取消息const savedMessages JSON.parse(localStorage.getItem(messages));if(savedMessagesnull){this.messages.push({sender: AI, content: 欢迎使用通义千问API的套壳网站请您通过输入内容到下方的文本框并提交即可开启聊天});}if (savedMessages) {this.messages savedMessages;}},methods: {scrollToBottom() {this.$nextTick(() {// 尝试手动触发一次重绘看是否有助于解决滚动问题const chatLayout this.$el.querySelector(#ChatLayOut);if (chatLayout) {// 强制浏览器重绘void chatLayout.offsetHeight; setTimeout(() {console.log(scrollHeight:, chatLayout.scrollHeight);window.scrollTop chatLayout.scrollHeight;console.log(scrollTop after setting:, chatLayout.scrollTop);}, 100); // 增加延时时间以确保元素尺寸和内容更新完成}});
},sendMessage() {if (this.message.trim() ! ) {// 设置身份为用户this.senderType 用户;this.messages.push({sender: this.senderType, content: this.message});localStorage.setItem(messages, JSON.stringify(this.messages)); // 保存消息到localStorage//禁用对话框this.flag true;this.DialogText 请您耐心等待AI的回答;// //进行滚动操作,滚动到最新消息// this.scrollToBottom(); // 调用接口获取AI生成的内容axios.get(http://localhost:8080/Test/Chat,{params:{message : this.message}}).then((response) {// 设置身份为AIthis.senderType AI;this.messages.push({sender: this.senderType, content: response.data});localStorage.setItem(messages, JSON.stringify(this.messages));//解除对话框this.flag false;this.DialogText 请您输入内容;});this.message ; // 清空输入框}else{alert(输入不能为空噢!);}},deleteMessage(){localStorage.removeItem(messages);this.messages [];this.messages.push({sender: AI, content: 欢迎使用通义千问API的套壳网站请您通过输入内容到下方的文本框并提交即可开启聊天});},getImageUrl(sender) {if (sender AI) {return https://img.alicdn.com/imgextra/i3/O1CN01sffRIx1nb3dXCKdFC_!!6000000005107-2-tps-1024-1024.png;} else {return https://bpic.51yuansu.com/pic3/cover/00/94/68/58dcd742dd10d_610.jpg?x-oss-processimage/resize,h_360,m_lfit/sharpen,100;}},onFormSubmit() {this.sendMessage();},preprocessMessageContent(content) {const codeBlockRegex /(.*?)/gs;const sortTextRegex /\*\*(.*?)\*\*/gs;let tempContent content.replace(sortTextRegex, p classsort-text$1/p);let processedContent tempContent.replace(codeBlockRegex, pre classcode-blockcode$1/code/pre);let segments processedContent.split(/.*?/gs); // 分割代码块segments segments.filter(segment segment.trim());let finalContent segments.map((segment) {return p classcontent-common${segment}/p;}).join();return finalContent;
}},handleOpen(key, keyPath) {console.log(key, keyPath);},handleClose(key, keyPath) {console.log(key, keyPath);}}/script
css:
style.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}.el-aside {background-color: #D3DCE6;color: #333;text-align: center;line-height: 200px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)}.el-main {background-color: #E9EEF3;color: #333;text-align: center;line-height: 160px;height: 1000px;}body .el-container {margin-bottom: 40px;}.el-container:nth-child(5) .el-aside,.el-container:nth-child(6) .el-aside {line-height: 260px;}.el-container:nth-child(7) .el-aside {line-height: 320px;}#ChatBubble{position: relative;padding: 10px;border-radius: 10px;margin-bottom: 30px;max-width: 70%;background-color: white;line-height: normal;}
/* 用户和AI的不同样式 */
#ChatBubble.user {background-color: #E0F2F7; /* 用户气泡颜色 */float: left;clear: both;margin-right: 30px;
}#ChatBubble.AI {background-color: #ECEFF1; /* AI气泡颜色 */float: right;clear: both;margin-left: 30px;
}/* 指向箭头这里仅示例用户气泡右边的箭头 */
#ChatBubble.user::after {content: ;position: absolute;top: 50%;right: -15px;transform: translateY(-50%);border-style: solid;border-width: 10px 15px 10px 0;border-color: transparent #E0F2F7;
}/* 可能需要清除浮动避免布局问题 */
#dialog-display::after {content: ;display: block;clear: both;
}#chatImage{float: left;margin-top: 17px;margin-right: 10px;height: 30px;width: 30px;background-color:#faeeee;
}#Topic{background-color: #f6f6fe;border-radius: 10px;height: 60px;}#chat{height: 56px;width: 100%;background-color: pink;}
.el-footer{background-color: #f7f8fc;
}
.el-main{background-color: #f7f8fc;
}
#ChatContent { line-height: 1.5; /* 或者根据需要调整 */padding: 0; /* 取消内边距 */ } #ChatLayOut{margin-left: 20%;
}.el-header{background-color: #333;
}
h3{color: #E9EEF3;
}.el-aside{background: white;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);/* 实现右边border-radi */border-top-right-radius: 30px;
}
/* 明亮风格的代码块文字及行号全部左对齐 */
.code-block {background-color: #f8f8f8; /* 明亮背景 */color: #333; /* 深色文字 */font-family: Courier New, monospace; /* 适合代码的字体 */white-space: pre-wrap; /* 保留空格和换行 */border-radius: 5px; /* 边角圆润 */overflow-x: auto; /* 横向滚动条如果需要 */line-height: 1.5;padding: 10px;position: relative; /* 为行号预留位置 */
}/* 显示所有行的行号确保向左对齐 */
.code-block::before {content: counter(line);counter-increment: line;position: absolute; /* 行号绝对定位 */left: 0; /* 行号紧贴左侧 */margin-left: 15px; /* 与代码内容的距离可根据需要调整 */text-align: left; /* 行号左对齐 */width: 30px; /* 行号宽度 */color: #666; /* 行号颜色可调整 */display: block; /* 每行前面均显示 */line-height: inherit; /* 继承代码块的行高 */
}/* 确保代码内容也左对齐 */
.code-block code {display: block; /* 确保代码块内代码作为独立块显示 */padding-left: 45px; /* 为代码内容预留行号和额外的间距 */text-align: left; /* 确保代码文本左对齐 */
}.content-common {/* 为普通文本内容定义样式 */margin-bottom: 10px; /* 示例增加段落间距 */line-height: 1.5; /* 示例调整行高 */
}.el-col-12 {width: 100%;
}.sort-text {font-weight: bold; /* 设置为粗体 */text-align: left; /* 文本左对齐 */line-height: normal; /* 行高设置为正常确保与未加样式时的文本行高一致 */
}/style最后配置端口为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文件导入以下依赖 !-- https://mvnrepository.com/artifact/com.alibaba/dashscope-sdk-java --dependencygroupIdcom.alibaba/groupIdartifactIddashscope-sdk-java/artifactIdversion2.8.2/version/dependency!--okhttp3 依赖--dependencygroupIdcom.squareup.okhttp3/groupIdartifactIdokhttp/artifactIdversion4.9.3/version/dependency
由于后端功能十分简单仅需要一个Utils和一个Controller即可
Utils(注意这里要填自己申请的APIKey(十分简单一毛钱就能开通))
Component
public class AICHAT {public static String callWithMessage(String message)throws NoApiKeyException, ApiException, InputRequiredException {Generation gen new Generation();Constants.apiKeyxxxxxx;//TODO这里填写自己申请的APIKEYMessageManager 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 {AutowiredAICHAT 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部署到服务器上 .......
