Vue3留言墙项目——主体部分静态、mock

文章目录

主体头部
主体关键部分
- 小卡片组件
- 创建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代码为：

<template><div class="main"><div class="message"><p class="name">{{ wallType[id].name }}</p><p class="slogan">{{ wallType[id].slogan }}</p></div><div class="labels"><ul><li :class="{ liselected: liIndex == -1 }" @click="changeIndex(-1)">全部</li><liv-for="(item, index) in label[id]":key="index"@click="changeIndex(index)":class="{ liselected: liIndex == index }">{{ item }}</li></ul></div></div>
</template><script>
import { wallType, label } from "@/utils/data";
import { ref } from "vue";
export default {setup() {let id = ref(0); // 留言墙id为0 之后做事件使得id为1let liIndex = ref(-1); // 当前选中状态小li的下标const changeIndex = (index) => {liIndex.value = index;};return {wallType,label,id,liIndex,changeIndex,};},
};
</script><style lang="scss" scoped>
.main {margin-top: 52px;.message {padding-top: 46px;.name {font-size: 56px;color: $gray-1;font-weight: 600;}.slogan {font-size: 14px;color: $gray-3;padding-bottom: 44px;}}.labels {padding: 0 400px;ul {display: flex;justify-content: space-around;align-items: center;li {font-size: $font-14;color: $gray-3;}.liselected {display: flex;align-items: center;justify-content: center;width: 56px;height: 28px;border: 1px solid rgba(32, 32, 32, 1);border-radius: 14px;color: $gray-1;}}}
}
</style>

主体关键部分

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

小卡片组件

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

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

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

⭐️实现效果：

代码：components/MyNote/MyNote.vue

<template><div class="my-note"><div class="top"><span class="time">2022.11.20</span><span class="label">留言</span></div><p class="content">这是一段暖心的话，它或许不长，但是它是我现在最想说的。放在这里就留一个纪念吧，不用回头看，应为现在才是当下最好的。这是一段暖心的话，它或许不长，但是它是我现在最想说的。</p><div class="bottom"><div class="left"><div class="like"><i class="iconfont icon-xiai"></i><span>12</span></div><div class="comment"><i class="iconfont icon-liuyan"></i><span>4</span></div></div><span class="right">Zemoz</span></div></div>
</template><script>
export default {};
</script><style lang="scss" scoped>
.my-note {width: 288px;height: 240px;background: rgba(255, 227, 148, 0.3);padding: 10px $pd-20;box-sizing: border-box;.top {display: flex;justify-content: space-between;font-size: $font-12;}.content {font-size: $font-14;text-align: left;padding: $pd-20 0;}.bottom {display: flex;justify-content: space-between;padding-top: 30px;.left {display: flex;.like {margin-right: $pd-8;}.iconfont {color: $gray-3;margin-right: $pd-4;}span {color: $gray-3;font-size: $font-14;}}.right {font-size: $font-14;color: $gray-1;}}
}
</style>

Main.vue中使用

<template><div class="main"><main class="mainbody"><my-note-vue></my-note-vue></main></div>
</template><script>
import { wallType, label } from "@/utils/data";
import { ref } from "vue";
import MyNoteVue from "@/components/MyNote/MyNote.vue";
export default {components: {MyNoteVue,},
};
</script>
<style>
.mainbody {padding: 30px;
}
</style>

创建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

<template><div class="main"><div class="message"><p class="name">{{ wallType[id].name }}</p><p class="slogan">{{ wallType[id].slogan }}</p></div><div class="labels"><ul><li :class="{ liselected: liIndex == -1 }" @click="changeIndex(-1)">全部</li><liv-for="(item, index) in label[id]":key="index"@click="changeIndex(index)":class="{ liselected: liIndex == index }">{{ item }}</li></ul></div><main class="mainbody"><div class="blocks"><my-note-vuev-for="(item, i) in note.data":key="i":note="item"class="note"></my-note-vue></div></main></div>
</template><script>
import { wallType, label } from "@/utils/data";
import { ref } from "vue";
import MyNoteVue from "@/components/MyNote/MyNote.vue";
import { note } from "@/mock/index";
export default {components: {MyNoteVue,},setup() {let id = ref(0); // 留言墙id为0 之后做事件使得id为1let liIndex = ref(-1); // 当前选中状态小li的下标const changeIndex = (index) => {liIndex.value = index;};return {wallType,label,id,liIndex,changeIndex,note,};},
};
</script><style lang="scss" scoped>
.main {box-sizing: border-box;margin-top: 52px;// width: 1500px;// margin: auto;.message {padding-top: 46px;.name {font-size: 56px;color: $gray-1;font-weight: 600;}.slogan {font-size: 14px;color: $gray-3;padding-bottom: 44px;}}.labels {padding: 0 400px;ul {display: flex;justify-content: space-around;align-items: center;li {font-size: $font-14;color: $gray-3;// transition: all 0.3s;}.liselected {display: flex;align-items: center;justify-content: center;width: 56px;height: 28px;border: 1px solid rgba(32, 32, 32, 1);border-radius: 14px;color: $gray-1;}}}.mainbody {padding-top: 30px;width: 99%;margin: auto;box-sizing: border-box;.blocks {width: calc(100% + 12px);margin-left: -12px;display: flex;flex-wrap: wrap;.note {margin-bottom: 10px;margin-left: 12px;}}}
}
</style>

MyNote.vue

<template><div class="my-note"><div class="top"><span class="time">2022.11.20</span><span class="label">{{ label[card.type][card.label] }}</span></div><p class="content">{{ card.message }}</p><div class="bottom"><div class="left"><div class="like"><i class="iconfont icon-xiai"></i><span>{{ card.like }}</span></div><div class="comment"><i class="iconfont icon-liuyan"></i><span>{{ card.comment }}</span></div></div><span class="right">{{ card.name }}</span></div></div>
</template><script>
import { label } from "@/utils/data";
import { toRef, onMounted } from "vue";
export default {props: ["note"],setup(props) {let card = toRef(props, "note");onMounted(() => {console.log(card);});return {label,card,};},
};
</script><style lang="scss" scoped>
.my-note {width: 288px;height: 240px;background: rgba(255, 227, 148, 0.3);padding: 10px $pd-20;box-sizing: border-box;.top {display: flex;justify-content: space-between;font-size: $font-12;}.content {font-size: $font-14;text-align: left;padding-top: $pd-20;width: 100%;height: 140px;}.bottom {display: flex;justify-content: space-between;padding-top: $pd-20;.left {display: flex;.like {margin-right: $pd-8;}.iconfont {color: $gray-3;margin-right: $pd-4;}span {color: $gray-3;font-size: $font-14;}}.right {font-size: $font-14;color: $gray-1;}}
}
</style>

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

Vue3留言墙项目——主体部分静态、mock相关推荐

Vue3留言墙项目——头部和底部静态页面搭建
文章目录创建项目头部底部创建项目 Vue中使用scss 头部头部当中有两个按钮,然后根据设计稿可知,本留言墙中有4个按钮,所以可以自己封装一个按钮组件按钮组件的博客 components/ ...
留言墙项目【Vue3 + nodejs + express + mysql】——上
学习视频来自--b站创建项目如何使用 mddir 命令生成目录结构树规范文件目录 ## 默认目录 |-- undefined|-- .gitignore|-- babel.config.js|- ...
【SpringBoot】写一个具有留言墙功能的JavaWeb
[SpringBoot]写一个具有留言墙功能的JavaWeb 项目已经部署上线一.需求说明二.概要设计三.详细设计 (一)数据库设计 (二)页面设计 (三)功能设计 (四)项目结构四.具体代码 ...
关于 vue3.0 实战项目 setup、 props、 reactive、ref
关于 vue3.0 实战项目中遇到的问题介绍vue3.0的特性: 亿点小知识 1.diff算法的优化增加了静态标记PatchFlag 2.按需编译,体积比Vue2.x更小(Tree shaking ...
Django留言板项目完整搭建
Django留言板项目完整搭建 1.新建python虚拟环境 2.安装Django并新建Django项目 3.生成的目录说明 4.新建一些目录 1.进入虚拟环境的命令 2.可以用Django的命令来新 ...
猿创征文 | 开箱即用 yyg-cli：快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
关于SpringBoot项目通过jar包启动之后无法读取项目根路径静态资源
前言:这个是昨天晚上在部署一个项目的时候发现的,在此记录一下关于SpringBoot项目通过jar包启动之后无法读取项目根路径静态资源问题描述在部署了一个项目之后,打开项目页面进行测试,发现有一 ...
Django项目test中的mock概述
Django项目test中的mock概述本文环境python3.5.2 test中的mock实现接口示例代码如下: ...# 路由配置('^api/business_application/?$' ...
基于React与Redux的留言墙的实现
背景由于某事业群需要留言墙用于年会,同时需要调用大象公众号服务器接口,所以在今年年初开发了留言墙用于活动现场交流. 设计本次留言墙分为两部分.一部分为活动展示部分,另一部分为后台审批部分. 活动展 ...