Vue美食节项目______显示美食空间
2024-05-31 16:34:28
总体思路
1.显示别人的空间
a.地址栏中如有userid 则显示对应的用户数据
2.显示自身空间
a.如果没有userid 则默认显示自己信息
b.如果在菜谱中 点击自己 也是有userid传递
c.通过判断是否为自己的 如果是，不需要后端拿,登录时，个人信息
3.代码展示
<template><div class="space"><h2>欢迎来到我的美食空间</h2><div class="user-info"><div class="user-avatar"><img :src="userInfo.avatar" alt=""></div><div class="user-main"><h1>{{userInfo.name}}</h1><span class="info"><em>{{userInfo.createdAt}}加入美食杰</em>|<router-link :to="{name:'edit'}" v-if="isOwner">编辑个人资料</router-link></span><div class="tools" v-if="!isOwner"><!-- follow-at no-follow-at--><a href="javascript:;" class="follow-at":class="{'no-follow-at':userInfo.isFollowing}"@click="toggleHandler">{{userInfo.isFollowing ? '已关注':'未关注'}}</a></div></div><ul class="user-more-info"><li><div><span>关注</span><strong>{{userInfo.following_len}}</strong></div></li><li><div><span>粉丝</span><strong>{{userInfo.follows_len}}</strong></div></li><li><div><span>收藏</span><strong>{{userInfo.collections_len}}</strong></div></li><li><div><span>发布菜谱</span><strong>{{userInfo.work_menus_len}}</strong></div></li></ul></div><!-- v-model="activeName" --><el-tabs class="user-nav"v-model="activeName"@tab-click="tabClickHandler"><el-tab-pane label="作品" name="works"></el-tab-pane><el-tab-pane label="粉丝" name="fans"></el-tab-pane><el-tab-pane label="关注" name="following"></el-tab-pane><el-tab-pane label="收藏" name="collection"></el-tab-pane></el-tabs><div class="user-info-show"><!-- 作品 & 收藏 布局 --><!-- <menu-card :margin-left="13"></menu-card> --><!-- 粉丝 & 关注 布局 --><!-- <Fans></Fans> --><router-view :info="list" :activeName="activeName"></router-view></div></div>
</template>
<script>
import {userInfo, toggleFollowing, getMenus, following, fans, collection} from '@/service/api';
const getOtherInfo = {async works(params){ //作品let data =(await getMenus(params)).datadata.flag="works"return data;},async following(params){ //关注let data=(await following(params)).datadata.flag="following"return data;},async fans(params){ // 粉丝let data=(await fans(params)).datadata.flag="fans"return data;},async collection(params){ //收藏let data=(await collection(params)).datadata.flag="collection"return data;}
}
// 总体思路
// 1.显示别人的空间
// a.地址栏中如有userid 则显示对应的用户数据
// 2.显示自身空间// a.如果没有userid 则默认显示自己信息// b.如果在菜谱中 点击自己 也是有userid传递//c.通过判断是否为自己的 如果是，不需要后端拿,登录时，个人信息
export default {name: 'Space',data(){return {userInfo:{},isOwner:false,activeName:'works',list:[]}},watch:{// 监听路由变化，判断路由当中是否有信息，而分辨是否是自己的空间$route:{async handler(){// 判断路由是否有信息let {userId} =this.$route.query;this.isOwner=!userId || userId==this.$store.state.userIdif(this.isOwner){//判断当前登录的用户this.userInfo=this.$store.state.userInfo;}else{const {data}=await userInfo({userId})this.userInfo=data;}// console.log(this.userInfo)//可以留存上一次tad的访问信息this.activeName=this.$route.name;// console.log(this.activeName)this.getInfo(); //请求二级路由},immediate:true}},methods:{async toggleHandler(){const {data}=await toggleFollowing({followUserId:this.userInfo.userId})console.log(data)// 因为关注后，要更新的数据里，还有粉丝，所有整体赋值this.userInfo=data;},tabClickHandler(){this.list =[];this.$router.push({name:this.activeName,query:{...this.$route.query}})},// 调用封装的请求async getInfo(){let data = await getOtherInfo[this.activeName]({userId:this.userInfo.userId});// 给组件赋值console.log(data)if(this.activeName === data.flag){this.list = data.list;}}}
}
</script>
<style lang="stylus">
.spaceh2text-align centermargin 20px 0.user-infoheight 210pxbackground-color #fffdisplay flex.user-avatarwidth 210pxheight 210pximg width 100%height 100% .user-mainwidth 570pxpadding 20pxposition relativeh1font-size 24pxcolor #333line-height 44px.info font-size 12pxline-height 22pxcolor #999acolor #999.tools position absoluteright 20pxtop 20pxvertical-align top;adisplay inline-blockpadding 3px 0width 50pxcolor #ffftext-align centera.follow-atbackground-color #ff3232a.no-follow-at background-color #999.user-more-infowidth 190pxoverflow hiddenpadding-top 20pxliwidth 81pxheight 81pxborder-radius 32pxborder-bottom-right-radius 0margin 0px 8px 8px 0pxfloat leftdivdisplay blockheight 81pxwidth 81pxbox-shadow 0px 0px 6px rgba(0,0,0,0.05) insetborder-radius 32pxborder-bottom-right-radius 0span color #999line-height 20pxdisplay blockpadding-left 14pxpadding-top 14pxstrong display blockfont-size 18pxcolor #ff3232font-family Microsoft Yaheipadding-left 14pxline-height 32px.user-navmargin 20px 0 20px 0.user-info-showmin-height 300pxbackground #fffpadding-top 20px.info-emptywidth 100% min-height inheritdisplay flexalign-items centerjustify-content:center;p text-align centerfont-size 12pxa text-align centerdisplay blockheight 48pxwidth 200pxline-height 48pxfont-size 14pxbackground #ff3232color #ffffont-weight boldmargin 0px auto.el-tabs__item.is-active color: #ff3232;.el-tabs__active-barbackground-color: #ff3232;.el-tabs__nav-wrap::afterbackground-color: transparent;
</style>注意：watch 中用到了初始化监听
监听分为初始化监听，和深度监听
属性immediate和deep
immediate与handler
watch的特点是当被监听变量变化时才是执行函数，而在初始化（只有变化才会执行）的时候并不会执行，使用handler与immediate的作用是
当immediate为false时，与之前的效果相同
deep就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
2.点击 作品 粉丝 关注 收藏 进行数据加载和显示
<template><div class="fans"><div class="info-empty" v-if="!info.length"><div><p v-if="activeName == 'fans'">还没有被关注哦！多发布菜谱，更容易被找到。</p><p v-if="activeName == 'following'">还没有关注别人哦！可以预览菜谱，找到别人</p></div></div><ul class="fans clearfix"><router-link v-for="item in info":key="item.userId":to="{name:'space',query:{userId:item.userId}}" tag="li" ><a href="javascript:;" class="img"><img :src="item.avatar"></a><div class="c"><strong class="name"><router-link :to="{name:'space',query:{userId:item.userId}}">{{item.name}}</router-link></strong><em class="info"><span>粉丝：</span> {{item.follows_len}}| <span>关注：</span>{{item.following_len}}</em><em class="info" ><span>简介：{{item.sign}}</span>这个人太懒啦！还没有介绍自己</em></div></router-link></ul></div>
</template>
<script>
export default {props:{info:{type:Array,default:()=>[]},activeName:{type:String,default:'fans'}}
}
</script><style lang="stylus">
.fans font-size 12px.fans li height 80pxwidth 950pxborder-bottom 1px solid #eeepadding 20px 20pxposition relative.fans lihover background #fafafa.fans li a.img float leftheight 80pxwidth 80pxposition relative.fans li a.img img height 80pxwidth 80pxdisplay block.fans li div.c float leftheight 80pxwidth 850pxpadding-left 14px.fans li div.c strong.name display blockheight 32pxline-height 32pxfont-size 14pxcolor #333font-weight bold.fans li div.c strong.name a color #333.fans li div.c strong.name a span color #ff3232.fans li div.c strong.name ahover color #ff3232text-decoration underline.fans li div.c p font-size 14pxcolor #666line-height 24pxheight 48pxoverflow hidden.fans li div.c p a color #666.fans li div.c p ahover color #ff3232text-decoration underline.fans li div.c p strong font-size 12pxpadding-right 10px.fans li div.c p strong em color #ff3232padding-right 4px.fans li div.c span.time position absoluteheight 20pxline-height 20pxright 20pxtop 20pxcolor #999.fans li div.c span.time a color #999padding-left 10pxdisplay none.fans li div.c span.time ahover color #ff3232.fans li div.c em.info height 24pxline-height 24pxdisplay blockcolor #999.fans li div.c em.info span color #666</style>
Vue美食节项目______显示美食空间相关推荐
- 关于vue+element-ui项目的分页，返回默认显示第一页的问题解决
关于vue+element-ui项目的分页,返回默认显示第一页的问题解决 参考文章: (1)关于vue+element-ui项目的分页,返回默认显示第一页的问题解决 (2)https://www.cn ...
- Vue.js项目中,当图片无法显示时则显示默认图片
Vue.js项目中,当图片无法显示时则显示默认图片使用onerror方法 最近在学习Vue时,遇到了一个问题,就是从后台传过来的图片路径无效时,需要在页面显示默认图片 本人试了3种方法,2种方法失败了 ...
- Springboot毕设项目地方特色美食小吃分享平台6iqqq（java+VUE+Mybatis+Maven+Mysql）
Springboot毕设项目地方特色美食小吃分享平台6iqqq(java+VUE+Mybatis+Maven+Mysql) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql ...
- 用vscode实现vue.js项目的一个完整过程
1.新建项目 打开Visual studio code 打开一个你想要创建项目的文件夹 打开集成终端:查看 –> 集成终端 或者直接按 ctrl+` 如果没有安装vue-cli,在终端输入: n ...
- vue怎么运行html,怎样运行一个vue.js项目
怎样运行一个vue.js项目? 下载并安装node,安装过程很简单,一路"下一步"就可以了,安装完成之后,打开命令行工具,输入 node -v,如下图,如果出现相应的版本号,则说明 ...
- vue dplayer 加载失败_最新vue脚手架项目搭建，并解决一些折腾人的问题
话不多说,跟好lz的操作!!! 2020/8/1 第一步: ~~~~质问三连: ~~~~~~~~1.node.js安装了吗?:ht tp://nodejs.cn/download/ ~~~~~~~~2 ...
- Vue Cli 项目结构简述
webnode_modules --Vue Cli 项目以来的js模块全放到这里public --存放静态资源 存放自己的js cssfavicon.ico -- 浏览器小图标index.html - ...
- 关于vue外卖项目的一些总结
关于vue外卖项目的一些总结 1.搭建项目的结构 api:存放ajax模块获取数据 common:存放一些静态文件,样式 Components:存放普通组件 Filters:存放一些过滤模块,比如日期 ...
- 基于vue技术栈制作自己的简历网站问题总结篇(入门vue基础项目)
前言 目前在学习vue技术栈的同时接触到了很多以前没用过的各种工具(如webpack,npm,git等等),配合着vue全家桶里的一些东西做了一个基于vue的个人简历网站(虽然用vue框架搭简历网站优 ...
最新文章
- htmlcss实例小项目_HTMLCSS学习笔记（十九）-- 媒体查询
- Dojo API略解续
- java实用教程——常用实用类——String类(字符串类)
- 阿里如何面试MySQL优化CPU消耗
- 1.C#基础之简介（完成）
- shell内部命令和外部命令
- 呆萌的图模型学习——使用networkx计算node2vec，得到节点与边的embedding(三)
- 阿里系微服务进阶指南
- 引擎设计跟踪(九.2) 3DS MAX 导出插件 继续
- 介绍KMP算法思想（例题：ACWING 831 kmp字符串）
- 手机测试SD卡读写速度的软件,手机存储SD卡读写测试：Cross Platfrom Disk Test
- memcached 配置
- 国内首款PCB资料分析软件，华秋DFM使用介绍
- 如何使用思维导图做计划的6种模板类型
- 十一、BDB ManyToMany
- JAVA 繁体 转 简体 简体转翻译 繁体简体互转
- 第十届蓝桥杯大赛软件赛省赛——Java大学A组
- 智行者王肖：自动驾驶本质在于对待数据的态度、获取及应用方式 | 自动驾驶这十年...
- 微前端：使用qiankun框架从 0-1 搭建vue构成微前端项目
- Python 网络爬虫工具：httpx 和 parsel（对比测评）