蓝桥杯18584-个人消息同步

蓝桥杯18584-个人消息同步

1. 题目介绍

在大部分面向 C 端的页面中，当用户登录后，通常会推送个人用户的消息。为了在多个组件中共享和同步这些消息数据，通常会使用状态管理工具来存储和管理这些数据。在 Vue2 中，常用的状态管理工具是 Vuex，而在 Vue3 中，推荐使用 Pinia。

本题的目标是使用 Vue3 + Pinia 来实现个人消息的同步功能。具体任务包括：

1. 在 store/messageStore.js 中完成数据请求，并将请求到的消息数据存储到 Pinia 的状态管理中。
2. 在 component/NavBar.js 中动态显示消息的数量。
3. 在 views/Message.js 中动态渲染消息列表。

2. 项目结构

项目的目录结构如下：

复制

├── component
│   ├── Loading.js
│   └── NavBar.js
├── css
├── data.json
├── images
├── index.html
├── lib
├── main.js
├── store
│   └── messageStore.js
└── views
    └── Message.js

• component：组件文件夹，包含 Loading.js 和 NavBar.js。
• css：样式文件夹。
• data.json：模拟的消息数据文件。
• images：图片文件夹。
• index.html：主页面。
• lib：项目依赖的文件夹。
• main.js：主程序入口。
• store/messageStore.js：Pinia 状态管理文件。
• views：页面文件夹，包含 Message.js。

3. 目标

目标 1：完善 store/messageStore.js

• 任务：

  • 在 store/messageStore.js 中，完成数据请求（请求地址必须使用提供的常量 MockUrl）。
  • 将请求回来的数据中的消息数组存放到 messageState 中。

• 数据格式：

  {
      "code": 200,
      "data": [
          {
              "msg_id": "643fbb014fc3aacc730bfa8c",
              "label": "系统消息",
              "content": "❗️❗️❗️【会员升级通知】4月21日大动作！会员体系全新升级，新增14项权益！所有训练营，蓝桥杯备赛课、蓝桥IT人才培养计划、...",
              "send_at": "2023-04-19 17:57:21"
          },
          // ... 其他消息
      ]
  }
  

  

• 实现步骤：

  1. 使用 fetch 或 axios 发起请求，获取 data.json 中的数据。
  2. 将 data.data 中的消息数组存储到 messageState 中。

目标 2：完善 component/NavBar.js

• 任务：

  • 在导航栏的铃铛图标上方动态显示消息的数量。
  • 使用 messageState 的长度来显示消息数量。
  • 

• 实现步骤：

  1. 从 messageStore 中获取 messageState。
  2. 在模板中使用 {{ messageStore.messageState.length }} 动态显示消息数量。

目标 3：完善 views/Message.js

• 任务：

  • 使用 messageState 中的数据动态渲染消息列表。
  • 单条消息的模板已提供，直接使用 v-for 遍历 messageState 并渲染。
  • 

• 实现步骤：

  1. 在 onMounted 钩子中调用 getUserMessage 方法获取消息数据。
  2. 使用 v-for 遍历 messageState，渲染每条消息。

4. 代码实现

store/messageStore.js

import { defineStore } from 'pinia';
import { ref } from 'vue';

export const useMessageStore = defineStore('message', () => {
   
    const messageState = ref([]);
    // 定义请求地址 MockUrl
    const  MockUrl ='./data.json'; 
    let getUserMessage =async () =>{
       // TODO：待补充代码
       const ref=await axios(MockUrl);
       messageState.value=ref.data.data;
       // TODO：END
    } 
   
    return {
        messageState, getUserMessage
    }
})

component/NavBar.js

import { reactive, ref } from "vue";
import { useMessageStore } from "../store/messageStore.js";

const NavBar = {
    setup() {
        const messageStore = useMessageStore();
        const headerData = reactive({
            headerArr: ["学习", "蓝桥杯", "考证", "讨论区", "校企版"],
        });
        const isShowPop = ref(true);

        return {
            headerData,
            messageStore,
            isShowPop,
        };
    },
    template: `
    <div class="header-container">
        <div class="main-header">
            <div class="menu-container">
                <a href="" class="header-brand">
                    <img class="logo" src="./images/logo.png" />
                </a>
                <div class="menu-content">
                    <div
                        class="menu-item"
                        v-for="(item, index) in headerData.headerArr"
                        :key="index"
                    >
                        <a href="" class="menu-link">
                            <span class="menu-text">{{ item }}</span>
                        </a>
                    </div>
                </div>
            </div>
            <div class="auth-container">
                <a href="" class="vip-link">
                    <div class="vip-link-content">
                        <img alt="" src="./images/vip.png" />
                        <span>会员</span>
                    </div>
                </a>
                <div :class="[{'show-message-box':isShowPop},'exit']">
                    <div class="flex">
                        <span href="" class="user-message">
                        // TODO:待补充代码 目标 2 
                            <div class="tip">{{ messageStore.messageState.length }}</div>
                            <img class="pointer" src="./images/message.png" alt="" />
                        </span>
                    </div>
                    <div class="message-popover">
                        <div class="msg-popover-header">
                            <div class="msg-header-title pointer active">学习消息</div>
                            <div class="msg-header-title pointer">蓝桥杯消息</div>
                            <div class="msg-header-title pointer">订单系统消息</div>
                        </div>
                        <div class="msg-container">
                            <div class="msg-content singe-line" v-for="msg in messageStore.messageState" :key="msg.msg_id">{{ msg.content }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    `,
};

export default NavBar;

views/Message.js

javascript

复制

import { ref, onMounted } from "vue";
import { useMessageStore } from "../store/messageStore.js";
const Message = {
  template: `
    <div class="message-container" >
        <section class="system-message flex justify-start items-center">
            <span class="ml-10px">系统自动清理一年前的已读消息</span>
        </section>
        <section class="flex justify-start items-center mt-20px">
            <div class="message-type-button active-message">学习消息</div>
            <div class="message-type-button">蓝桥杯消息</div>
            <div class="message-type-button">订单系统消息</div>
        </section>
        <loading v-if="isLoading"/>
        <template v-else>
             <!-- TODO: 待修改代码 目标 3 -->
             <!-- 单条消息模板 start-->
                 <div class="message-content-wrapper mt-20px"  v-for="i in messageStore.messageState" :key="i.msg_id">
                    <div class="message-list">
                        <div class="message-item">
                            <div class="message-content">
                                <div class="message-cate">
                                    <span class="label label-success font-14">{{i.label}}</span>
                                </div>
                                <div class="message-main-content">
                                {{i.content}}
                                </div>
                            </div>
                            <div class="msg-create-time text-right">
                                <small> {{i.send_at}} </small>
                            </div>
                        </div>
                    </div>
                </div>
               <!-- 单条消息模板 end-->
        <template>
    </div>    
    `,
  setup() {
    const messageStore = useMessageStore();
    const isLoading = ref(false);
    onMounted(async () => {
      isLoading.value = true;
      await messageStore.getUserMessage();
      isLoading.value = false;
    });

    return { isLoading, messageStore };
  },
};
export default Message;

5. 运行效果

1. 目标 1：消息数据成功请求并存储到 messageState 中。
2. 目标 2：导航栏的铃铛图标上方动态显示消息数量。
3. 目标 3：消息列表页面动态渲染消息内容。

6. 知识扩展 axios和fetch

1. fetch

fetch 是浏览器原生提供的用于发起网络请求的 API，基于 Promise 实现。它是现代 JavaScript 中推荐使用的网络请求工具。

特点

1. 原生支持：
   • fetch 是浏览器原生 API，无需额外安装库。
   • 在现代浏览器中广泛支持（IE 不支持）。
2. 基于 Promise：
   • 使用 Promise 处理异步操作，支持 async/await。
3. 简单易用：
   • 语法简洁，易于上手。
4. 默认不携带 Cookie：
   • 默认情况下，fetch 不会发送或接收 Cookie。如果需要，需要显式设置 credentials: 'include'。
5. 错误处理：
   • fetch 只有在网络错误时才会拒绝 Promise（如网络断开）。
   • 对于 HTTP 错误（如 404 或 500），fetch 不会自动拒绝，需要手动检查 response.ok。

基本用法

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    return response.json(); // 解析 JSON 数据
  })
  .then(data => {
    console.log('请求成功:', data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

使用 async/await

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    const data = await response.json();
    console.log('请求成功:', data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

设置请求选项

fetch('https://api.example.com/data', {
  method: 'POST', // 请求方法
  headers: {
    'Content-Type': 'application/json', // 请求头
  },
  body: JSON.stringify({ key: 'value' }), // 请求体
  credentials: 'include', // 携带 Cookie
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

2. axios

axios 是一个基于 Promise 的 HTTP 客户端，可以在浏览器和 Node.js 中使用。它是一个第三方库，提供了更多高级功能和更好的错误处理。

特点

1. 跨平台支持：
   • 可以在浏览器和 Node.js 中使用。
2. 自动转换数据：
   • 自动将请求和响应的数据转换为 JSON。
3. 更好的错误处理：
   • 对于 HTTP 错误（如 404 或 500），axios 会自动拒绝 Promise。
4. 请求和响应拦截器：
   • 支持拦截器，可以在请求发送前或响应到达前进行统一处理。
5. 取消请求：
   • 支持取消请求的功能。
6. 默认携带 Cookie：
   • 默认情况下，axios 会发送和接收 Cookie。

基本用法

axios.get('https://api.example.com/data')
  .then(response => {
    console.log('请求成功:', response.data);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

使用 async/await

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log('请求成功:', response.data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

设置请求选项

axios.post('https://api.example.com/data', { key: 'value' }, {
  headers: {
    'Content-Type': 'application/json',
  },
  withCredentials: true, // 携带 Cookie
})
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

拦截器

// 请求拦截器
axios.interceptors.request.use(config => {
  console.log('请求发送前:', config);
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(response => {
  console.log('响应到达前:', response);
  return response;
}, error => {
  return Promise.reject(error);
});

取消请求

const source = axios.CancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token,
})
  .then(response => console.log(response.data))
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('请求被取消:', error.message);
    } else {
      console.error('请求失败:', error);
    }
  });

// 取消请求
source.cancel('请求被用户取消');

3. fetch 和 axios 的对比

4. 选择使用场景

• fetch：
  • 适合简单的请求场景，尤其是现代浏览器环境。
  • 不需要额外安装库，减少项目依赖。
• axios：
  • 适合需要更强大功能的场景，如拦截器、取消请求、自动错误处理等。
  • 在需要兼容旧版浏览器或 Node.js 环境中使用。

总结

• fetch 是浏览器原生 API，简单易用，适合现代浏览器环境。
  | 支持请求和响应拦截器 |
  | 取消请求 | 不支持 | 支持 |
  | 默认携带 Cookie | 需要设置 credentials: 'include' | 默认携带 |
  | 语法简洁性 | 较简洁 | 更简洁（功能更丰富） |

4. 选择使用场景

• fetch：
  • 适合简单的请求场景，尤其是现代浏览器环境。
  • 不需要额外安装库，减少项目依赖。
• axios：
  • 适合需要更强大功能的场景，如拦截器、取消请求、自动错误处理等。
  • 在需要兼容旧版浏览器或 Node.js 环境中使用。

总结

• fetch 是浏览器原生 API，简单易用，适合现代浏览器环境。
• axios 是一个功能更强大的第三方库，适合需要高级功能的场景