一.前端撰写页面和逻辑
1.功能需求讲解
做一个uniapp(vue2)的在线聊天问答工具.
页面内容:
页面布局上下结构,页面顶部有一个滚动提示栏,文字"欢迎使用在线聊天问答工具";
中间是一个固定高度的聊天窗口区域,聊天窗口会显示一个默认的快捷语列表,聊天框底部是用户输入(输入框和确认按钮,点击按钮即是发送聊天).
系统根据用户输入的内容进行字符匹配数据
(用express模拟本地服务器,前端用axios发送请求,后端返回数据,数据用于字符匹配).
如果匹配成功,则给出回答(注意:回答要逐字打印);
如果匹配失败,则给出回答:"当前资料库没有收集该问题".
2.页面结构实现
关于布局,常见地有流式布局,flex布局,栅格布局等等.
因为项目布局(上下结构)较为简单,正常撰写代码即可.
3.项目用到的技术栈
uniapp(vue2) +express(搭建后端服务器) axios(前端发送数据请求)
新建一个文件目录,打开终端
-
创建uniapp项目
vue create -p dcloudio/uni-preset-vue chat_tools- 根据提示,选择uni-app模板,选择默认模板即可
- 初始化的项目结构:
在浏览器上打开给的运行地址,能看到这个页面就表运行成功.
撰写页面结构代码和业务逻辑
这个就是初始化uniapp项目,运行执行的页面,我们可以直接在这里撰写业务代码.
下面我直接给出代码.
<template>
<view class="chat-app">
<!-- 滚动提示栏 -->
<view>
<u-notice-bar :text="text1"></u-notice-bar>
</view>
<!-- 聊天窗口 -->
<view class="chat-window">
<!-- 默认快捷语列表 -->
<view v-if="showQuickReplies">
<view
class="quick-reply"
v-for="(reply, index) in quickReplies"
:key="index"
@click="fillInputWithReply(reply)"
>
{
{ reply }}
</view>
</view>
<!-- 消息记录 -->
<view class="message-list" ref="messageList">
<view
class="message-item user"
v-for="(msg, index) in messages"
:key="index"
>
<text>{
{ msg }}</text>
</view>
<!-- 用于逐字输出的div -->
<view class="typing" v-if="typing">
<text>{
{ typingMessage }}</text>
</view>
</view>
</view>
<!-- 用户输入区域 -->
<view class="input-area">
<u--input v-model="inputText" placeholder="请输入您的问题..."></u--input>
<button type="primary" @click="sendMessage">发送</button>
</view>
</view>
</template>
<script>
const axios = require("axios");
export default {
data() {
return {
text1: "uView UI众多组件覆盖开发过程的各个需求，开箱即用", //滚动栏的文字
showQuickReplies: true, //快捷语列表显示的标识
//快捷语列表
quickReplies: [
"你好",
"这是什么功能？",
"如何使用？",
"为我生成一个echarts图表",
],
messages: [], //聊天框的消息记录列表
inputText: "", //存放用户输入的内容
typing: false,//逐字输出的div的标识
typingMessage: "", //存储逐字输出的内容
// 静态数据用于匹配
staticData: {
你好: "您好！有什么我可以帮助您的吗？",
"这是什么功能？": "这是一个在线聊天问答工具，可以帮助您解答疑问。",
},
};
},
methods: {
fillInputWithReply(reply) {
this.inputText = reply;
},
sendMessage() {
let text = this.inputText;
console.log(text, typeof text);
if (!text || !typeof text === "string") return; // 确保text是一个非空字符串
this.messages.push(`用户: ${text}`);
this.inputText = ""; // 清空输入框
this.showQuickReplies = false; // 发送后隐藏快捷回复
// 判断是否为echarts图表提示语
// if (text === "为我生成一个echarts图表") {
// this.chartVisible = true;
// }
const response = this.staticData[text] || "当前资料库没有收集该问题";
this.typing = true;
this.typeWriter(response);
this.$nextTick(() => {
// 更新后滚动到底部
this.$refs.messageList.scrollTop = this.$refs.messageList.scrollHeight;
});
},
// showChart() {
// this.chartVisible = true;
// },
typeWriter(message) {
if (message == "好的.") {
this.$nextTick(() => {
// 确保DOM更新后再设置chartVisible为true
this.chartVisible = true;
});
}
console.log("逐字打印的语句", message);
let i = 0;
const intervalId = setInterval(() => {
if (i < message.length) {
this.typingMessage += message.charAt(i);
i++;
} else {
clearInterval(intervalId);
this.messages.push(`系统: ${this.typingMessage}`);
this.typingMessage = "";
this.typing = false;
}
}, 50); // 每50毫秒输出一个字符
},
// 获取后端数据
async fetchBackendData() {
try {
const response = await axios.get("http://localhost:4000");
let data = response.data;
console.log("获取的后端数据如下:", data, typeof data);
this.staticData = response.data;
} catch (error) {
console.error("Error fetching backend data:", error);
// 如果无法获取数据，可以设定一些默认数据
this.backendData = {
你好: "您好！有什么我可以帮助您的吗？",
"这是什么功能？": "这是一个在线聊天问答工具，可以帮助您解答疑问。",
"(模拟数据)如何使用？":
"只需在下方输入您的问题并发送，我们会提供相应的答案。",
};
}
},
},
created() {
this.fetchBackendData(); //获取后端数据
},
};
</script>
<style scoped>
.chat-app {
display: flex;
flex-direction: column;
height: 100%;
}
.chat-window {
flex: 1;
overflow-y: auto;
padding: 10px;
}
.quick-reply {
background-color: #eee;
padding: 5px 10px;
margin-bottom: 5px;
cursor: pointer;
}
.message-list {
height: calc(100% - 60px); /* 减去底部输入区高度 */
}
.message-item {
padding: 5px 10px;
margin-bottom: 5px;
border-radius: 5px;
}
.message-item.user {
align-self: flex-end;
background-color: #bada55;
}
.typing {
position: relative;
padding: 5px 10px;
margin-bottom: 5px;
border-radius: 5px;
background-color: #f0f0f0;
}
.input-area {
display: flex;
justify-content: space-between;
padding: 10px;
box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);
}
</style>二.后端获取数据(本地服务器)
1.node.js和express.js的介绍
node.js,无需多言,可以让JavaScript代码运行在服务器上.
express:一个快速搭建后端服务器的nodejs框架.
2.本次项目使用的简单的express后端服务器案例
初始化项目,新建一个文件夹,打开终端执行:
npm init -y安装express和 cors(解决跨域问题,下文会简单介绍):
npm install express cors安装axios
npm install axios注意!每次安装新的包,都要重新启动一下项目!在项目目录下打开终端,执行"npm run serve"
在根目录下创建一个app.js文件
项目用到的后端接口代码示范:
跨域（Cross-Origin Resource Sharing, CORS）是指浏览器出于安全考虑，对来自不同源（origin）的资源请求进行限制的一种机制。
在Web开发中，源通常指的是协议、域名和端口号。
三个,只要出现任意一个不同,就是跨域.
比如我这里前端运行的地址是http://localhost:8082
后端服务器启动的地址是:http://localhost:4000
因为端口号不同(8082和4000),所以需要进行跨域处理.
我们这里使用的cors来处理跨域.
const express = require('express')
const app = express()
const cors = require('cors') //处理跨域
const port = 4000 //设置后端服务器执行的端口号
app.use(cors({})) //对象，接受所有源的请求,我们这里就是8032端口请求4000端口的数据.
//项目使用到的数据
const mockData = {
你好: '您好！有什么我可以帮助您的吗？',
'这是什么功能？': '这是一个在线聊天问答工具，可以帮助您解答疑问。',
'如何使用？': '只需在下方输入您的问题并发送，我们会提供相应的答案。',
'百度是什么?': '百度是一个搜索引擎.',
为我生成一个echarts图表: '好的.',
}
app.get('/', (req, res) => {
// res.send({ message: '一个基于Express的后端数据接口调用地址!' })
res.send(mockData)
})
app.listen(port, () => {
console.log(`服务启动，端口是${port}`)
})
启动项目:
在项目目录下打开终端,执行:
//node 文件名
//比如我这里是将代码写在app.js中,那么就执行如下代码
node app.js
在浏览器中打开:http://localhost:4000/
在前端测试发送后端数据请求,打印一下.
查看前端的函数代码
打开浏览器的调试工具,打开控制台
三.项目效果演示
关于问答语句的添加,在快捷语列表( quickReplies)添加提问,在后端代码(mockData)添加完整问答,
今天比较忙,先简单更新一部分内容,后续会完善这篇文章,也补充更加详细具体的代码示范.1031
第二次更新,完善了文章的撰写,补充了更加详细具体的代码,确保程序正常可用,
后续会考虑问答添加echarts图表和markdown格式的表格等..1101,下午三点
如果你喜欢这篇文章,请点赞收藏关注,我会持续更新实用的文章.
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
