一.项目亮点及难点
项目亮点
- 功能丰富多样
- 整合了电影简介、市集、AI聊天、成绩管理和地址修改等多种功能，满足了用户在娱乐、购物、学习、社交和生活等多方面的需求，提供了综合性的移动端体验。
- 不同功能的页面设计和布局合理，如电影简介页面和市集页面通过豆瓣开源数据实现了丰富且美观的内容排版。
- 技术运用新颖
- 利用多种开源资源（豆瓣、豆包、百度地图、echarts），展示了对不同外部资源的整合能力，能够快速实现复杂功能，减少开发成本和时间。
- 采用Vue3和Vite框架，利用其高效的性能和开发体验优势，使得项目在前端开发上具有较好的可维护性和扩展性。
- 交互性强
- 成绩柱状图可修改的功能增加了用户与数据的交互性，方便用户进行个性化操作。
- AI聊天界面提供了智能交互功能，增强了用户的参与感和使用粘性。
项目难点
- 数据整合与兼容性
- 不同开源数据的格式和接口可能存在差异，需要花费精力进行数据的统一处理和整合，确保各个页面之间的数据兼容性和流畅性。
- 例如豆瓣、豆包和百度地图的接口数据格式各不相同，在接收和处理这些数据时要保证能正确地在项目中展示和使用。
- 功能逻辑的复杂性
- 包含多个功能模块，每个模块都有其独特的业务逻辑，如AI聊天的自然语言处理逻辑、成绩柱状图修改的逻辑以及地址修改的逻辑等，整体的逻辑复杂度较高，需要精心设计和严谨的代码实现来保证各个功能的稳定运行。
- 性能优化
- 由于整合了多种功能和第三方资源，可能会导致页面加载速度变慢、内存占用过高等性能问题。需要对项目进行性能优化，如合理的代码拆分、懒加载、缓存策略等，以提升用户体验。
二.所遇问题
问题 1：解决只有部分页面共同有导航栏及标题问题
将有标签栏的页面单独封装成一个 LayOut 组件 与 app.vue 同级，所有有状态栏的在 LayOut 展示，其他页面在 app.vue 页面展示
有标签栏的页面就是LayOut 路由的子集
问题 2：配服务
1.在 vite.config.vue 中配服务
在defineConfig 里面 写 service
2.在service 中 用 proxy 配置
格式👇
/api：名字
target：源
server: {
proxy: {
'/api': {
target: '接口网址',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},问题 3：接入 ai
1.ai 聊天区 叫富文件 打字机效果 安装 vue-markdown（不用）
在哪里写就在哪引入 用的时候用 source 动态绑定 ai 回答输出的富文件
1.安装npm install marked dompurify 用来处理 ai 回答的 markdown 文本格式
用 marked.parse(xxx)将 markdown 文本转成 html
再用 dompurity 净化 html 防止 xxs 攻击
// 用v-html处理
<div class="ask" v-html="handleMarkdown(item.question)"></div>
// 引入
import DomPurify from "dompurify";
import { marked } from "marked";
// 处理markdown
const handleMarkdown = (val: string) => {
return DomPurify.sanitize(String(marked.parse(val)));
};2.用 scrollIntoView({block:”end”})
实现监听 自动向上滚动
用 ref 绑定之后用scrollIntoView({block:”end”})
3. 接入 ai 的时候 要解析携带的数据
步骤如下👇
1.接收数据
const result = await fetch("/doubao/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer 1e641d1d-4f35-413c-8bf8-bf5f6ee213c8",
},
body: JSON.stringify({
model: "doubao-seed-1-6-vision-250815",
messages: [
{ role: "system", content: "You are a helpful assistant." },
{ role: "user", content: questionValue.value },
],
stream: true,
}),
});2.解析
// ① 解析数据 但还是Promise {<pending>}状态 不可读
if (result.body) {
let resultData = result.body.getReader();
console.log(resultData, "第一次获取");
// ② 定义一个编码解析方式
let codeMain = new TextDecoder("utf-8");
console.log(codeMain, "解码方式");
// ③ 循环读取数据
while (isDone.value) {
// ④ 用.read()方法读取数据 但还是不可以读取 值在value中
let resMain = await resultData.read();
console.log(resMain, "第二次解析");
isDone.value = !resMain.done;
if (isDone.value == false) {
break;
}
//⑤ 用这个解码方式再次处理数据
let data = codeMain.decode(resMain.value, { stream: true });
//⑥ 把不需要的字符截掉
let dataArr = data.split("data: ").slice(1);
console.log(dataArr, "截取后的答案");
// let dataArr = data.choices[0].message.content;
console.log(dataArr, "截取后的答案");
//⑦ 把返回的答案存到数组talkList中
dataArr.forEach((item) => {
if (item) {
if (!item.includes("[DONE]")) {
// loading
const lastItem = talkList.value[talkList.value.length - 1];
lastItem.loading = false;
talkList.value[talkList.value.length - 1].answer +=
JSON.parse(item).choices[0].delta.content;
}
}
});问题 4.引入百度地图
1.下载百度地图包
npm install vue-baidu-map-3x
2.在 main.ts 全局引入
ak 为允许使用的标识
3.在使用的页面使用
<baidu-map>标签 必须绑定两个属性 center 和 zoom
center 里面是经纬度 zoom 是缩放比例
给地图标签设置宽高 即可展示
<baidu-map class="map"
:center="{
lat: addressObj.position.lat,
lng: addressObj.position.lng,
}"
:zoom="15"
>
</baidu-map>4.<bm-marker>
<bm-marker>标签 必须绑定 position 显示红点位置
<bm-marker
:position="{
lat: addressObj.location.lat,
lng: addressObj.location.lng,
}"
></bm-marker>问题 5.使用 echarts 制作可视化图表
1.安装 npm install echarts
2.按照官网的实例引用 复制 修改 使用
在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器
然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
三.效果展示
剧集页面
集市页面
ai聊天页面
我的页面
我的成绩页面
我的地址页面
我的地址修改页面
