文章目录

• • 主体头部
  • 主体关键部分
  • • 小卡片组件
    • 创建mock数据以及使用

主体头部

主体部分显示的内容，根据头部点击的是留言墙还是照片墙的按钮，显示不同的内容。

将照片墙和留言墙要渲染的数据抽取到一个js中，在导入的Main.vue（主体页面）中渲染。

将页面中的文字记录在src/utils/data.js中

// 墙的性质
// 这样记录后wallType[0]为留言墙内容 wallType[1]为照片墙内容
export const wallType = [{name: "留言墙",slogan: "很多事情值得记录，当然也值得回味。",},{name: "照片墙",slogan: "很多事情值得记录，当然也值得回味。",},
];// 分类标签
// label[0]为留言墙内容 label[1]为照片墙内容
export const label = [["留言","目标","理想","过去","将来","爱情","亲情","秘密","信条","无题",],["我","ta","喜欢的","有意义的","值得纪念的","母校","生活","天空","我在的城市","大海",],
];

根据id渲染照片墙或留言墙& 点击标签样式切换 实现这两个功能的Main.vue代码为：

主体关键部分

主体部分渲染许多留言卡片

小卡片组件

卡片组件有不同的背景颜色，当前时间 留言标签，跟主体部分的label对应，主要留言内容，点赞数量，评论数量，发表人。

数据：
卡片背景颜色
时间
标签
内容
点赞数量
评论数量
发表人

这些数据可以通过Mock出来，不过这里先静态写死好样式，再mock

⭐️实现效果：

代码：components/MyNote/MyNote.vue

Main.vue中使用

创建mock数据以及使用

yarn add mockjs --save
src/mock/index.js

let Mock = require("mockjs");// 留言note
export const note = Mock.mock({"data|19": [{// 创建时间moment: new Date(),// id"id|+1": 1,// userid"userId|+1": 10,// 内容"message|24-96": "@cword",// 标签label"label|0-9": 0,// namename: "@cname",// like"like|0-120": 0,// 评论"comment|0-120": 0,// 背景颜色"imgurl|0-4": 0,// 是否撤销"revoke|0-20": 0,// 是否举报"report|0-20": 0,//   类型type: 0,},],
});

显示效果为：

此时Main.vue

MyNote.vue

具体改动代码——可查看gitee