【微信小程序】收藏功能的实现(条件渲染、交互反馈)

news2024/11/23 3:09:29

在这里插入图片描述

🏆今日学习目标：第十九期——收藏功能的实现(条件渲染、交互反馈)
😃创作者：颜颜yan_
✨个人主页：颜颜yan_的个人主页
⏰预计时间：35分钟
🎉专栏系列：我的第一个微信小程序

文章目录

  • 前言
  • 前期准备
    • wxml
    • wxss
  • 文章收藏功能
    • 条件渲染（wx:if与wx:else）
    • 收藏图标切换
    • 收藏点击功能
    • 交互反馈（wx:showToast）
  • data.js
  • 总结

前言

哈喽大家好，本期是微信小程序专栏第十九期。本期主要内容收藏功能的实现(条件渲染、交互反馈)。
每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~

前期准备

这一部分包括页面数据data.js和页面的结构。data.js放在文章末尾了噢~

wxml

wxml页面部分比较简单，添加一个view容器，命名为tool。然后添加三个小view，分别表示点赞、评论、收藏。每个小view中包括图片和数量，即image和text标签。每个功能按钮都绑定了对应的点击事件，即catchtap属性。除此之外，每个功能按钮绑定当前文章的id号。

<!-- 收藏、评论、点赞、计数等功能 -->
<view class="tool">
<!-- 点赞 -->
    <view class="tool-item" catchtap="onUpTap" data-post-id="{{post.postId}}">
    <image src="/images/icon/wx_app_like.png"></image>
    <text>{{post.upNum}}</text>
    </view>
    <!-- 评论 -->
    <view class="tool-item comment" catchtap="onCommentTap" data-post-id="{{post.postId}}">
    <image src="/images/icon/wx_app_message.png"></image>
    <text>{{post.commentNum}}</text>
    </view>
    <!-- 收藏 -->
    <view class="tool-item" catchtap="onCollectionTap" data-post-id="{{post.postId}}">
    <image src="/images/icon/wx_app_collect.png"></image>
    <text>{{post.collectionNum}}</text>
    </view>
</view>

wxss

添加wxss后，保存代码，效果图如下：
在这里插入图片描述

.tool{
    height: 65rpx;
    text-align: center;
    line-height: 65rpx;
    margin: 20rpx 28rpx 20rpx 0;
}
.tool-item{
    display: inline-block;
    vertical-align: top;
    margin-right: 30rpx;
}
.tool-item image{
    height: 30rpx;
    width: 30rpx;
    vertical-align: -3px;
    margin-right: 10rpx;
}

文章收藏功能

条件渲染（wx:if与wx:else）

wx:if与wx:else可以实现条件渲染。当变量为true时，执行wx:if，否则将执行wx:else。这个思路类似于js中的if else。
wx:if可以被单独使用，并不一定要和wx:else一起使用

接下来，我们用一个小例子来理解wx:if和wx:else。如果变量length的取值大于4，则显示数字1，否则显示数字0。

<view wx:if="{{length>4}}">1</view>
<view wx:else>0</view>

条件渲染也可以实现多级的if else。如下，如果变量length的取值大于4，则显示数字0；如果变量length的取值大于1且小于等于4，则显示数字1，否则显示数字2。

<view wx:if="{{length>4}}">0</view>
<view wx:elif="{{length>1}}">1</view>
<view wx:else>2</view>

收藏图标切换

思路： 判断自己是否收藏了文章。如果自己收藏了，就需要将收藏的图标更换为已收藏的图标。

在data.js中，我们使用collectionStatus属性表示文章是否被收藏，这个变量的类型时布尔类型。当collectionStatus为ture时，显示已收藏图标，否则显示未收藏图标。如下，使用条件渲染就可以很轻松地实现啦~
在这里插入图片描述
在这里插入图片描述
wx:if与wx:else的条件渲染不仅仅可以用来做图片的更换，还可以用控制元素与的显示和隐藏

收藏点击功能

实现当用户点击收藏图标时，对文章进行收藏和取消收藏。

首先在数据库操作类方法中添加updatePostData方法，用来更新本地的点赞等信息。
思路：

  1. 定义变量获取当前文章的id和所有文章的id。
  2. 使用swich case处理收藏。使用if else进行判断，如果当前状态是未收藏，则将收藏总量增加，collectionStatus设置为true；如果当前状态是收藏，则将收藏总量减少，collectionStatus设置为false。注意：swich是选择语句，不是循环语句，这里的break用来跳出swich。也可以使用if，但如果后续添加其他功能，使用嵌套的if语句层数多，导致程序冗长，可读性下降。所以面对多分支选择，使用swich更好。
  3. 更新缓存数据库。使用同步接口来更新数据库，即execSetStorageSync。
  4. 添加collect()方法调用updatePostData方法。
  5. 编写处理文章收藏动作的事件函数onCollectionTap，首先在wxml中进行注册，然后编写js方法。
 //DBPost.js
 // 收藏文章
    collect(){
        return this.updatePostData('collect');
    }
    // 更新本地的点赞、评论信息、收藏、阅读量
    updatePostData(category){
        var itemData = this.getPostItemById(),
        postData = itemData.data,
        allPostData = this.getAllPostData();
        switch(category){
            case 'collect':
                // 处理收藏，如果当前状态是未收藏，则增加数量，否则减少数量。
                if(!postData.collectionStatus){
                    // 当前状态是未收藏
                    postData.collectionNum++;
                    postData.collectionStatus = true;
                }else{
                    // 当前状态是收藏
                    postData.collectionNum--;
                    postData.collectionStatus = false; 
                }
                break;
            default:
                break;
        }
        // 更新缓存数据库
        allPostData[itemData.index] = postData;
        this.execSetStorageSync(allPostData);
        return postData;
    }

在这里插入图片描述
在这里插入图片描述
效果图如下：
在这里插入图片描述
在这里插入图片描述

交互反馈（wx:showToast）

现在，我们已经实现了文章的收藏与取消功能，但用户在收藏和取消收藏后没有任何交互反馈提示。

小程序提供了四种交互反馈API：

  • wx.showToast
  • wx.hideToast
  • wx.showModal
  • wx.showActionSheet

接下来，我们使用wx:showToast(object)来制作文章收藏功能的交互反馈。如下：

  1. 使用title属性设置提醒消息的内容；
  2. 使用duration设置提醒的自动消失时间，默认值是1500毫秒；
  3. 使用icon设置一个小图标，取值只能是success和loading；
  4. 使用mask指定是否显示透明的蒙层，防止触摸穿透，默认值是false。
    在这里插入图片描述
    效果图如下：
    在这里插入图片描述

data.js

var postList = [{
    date:"Nov 9 2022",
    title:"那个不为人知的故事",
    postImg:"/images/post/unknow-story.jpg",
    avatar:"/images/avatar/avatar-5.png",
    content:"超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软。这是杨昭和陈铭生的故事，这是卧底缉毒警察的故事。 你始终不曾离去，你永远在我心底。",
    readingNum:10989,
    collectionNum:1867,
    commentNum:999,
    author:"无量渡口",
    dateTime:"2020年10月",
    detail:"杨昭是一名古董修复师，过着奢侈却封闭的生活。陈铭生是卧底缉毒警察，在一次任务中失去了一条腿后，隐姓埋名来到杨昭所在的城市做了出租车司机。意外的相遇让两个“不般配”的人走到了一起，他们的感情没有杂质，不在乎任何世俗标准、社会地位甚至身体残缺，只有纯粹的彼此。他们不畏世俗的眼光，以为会勇敢而安然地共度下半辈子，直到陈铭生接到新的任务。在陈铭生接到新的任务之后，他们的生活发生了变化。",
    postId:1,
    music:{
        url:"https://music.163.com/#/song?id=2001297075&market=baiduqk",
        title:"那个不为人知的故事",
        coverImg:"https://p2.music.126.net/BjNwhCRpsb3sd_FPqSkpyQ==/109951167550604611.jpg?param=130y130"
    },
    collectionStatus:true,
    upStatus:false,
    upNum:11,
    comments:[
        {
            username:"qingshi",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:null
            }
        },{
            username:"hehe",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:{url:"http://123",timeLen:8}
            }
        }
    ]
},
{
    date:"Nov 10 2022",
    title:"边城",
    postImg:"/images/post/biancheng.jpg",
    avatar:"/images/avatar/avatar-2.png",
    content:"沈从文代表作之一，重现湘西世界的诗意与纯净，书写人情美、人事美、人性美",
    readingNum:9999,
    collectionNum:8766,
    commentNum:886,
    author:"沈从文",
    dateTime:"1934年4月",
    detail:"《边城》成书于1934年4月，那正是沈从文爱情事业双丰收的季节。1931年社会虽然动荡不安，但总体上还是稍显和平，这个时候中国有良知的文人，都在思考着人性的本质，沈从文自然是走在前沿的，于是，他希望通过自己对湘西的印象，描写了一个近似于桃花源的湘西小城，给都市文明中迷茫的人性指一条明路。人间尚有纯洁自然的爱，人生需要皈依自然的本性。",
    postId:2,
    music:{
        url:"https://music.163.com/#/song?id=1383022165",
        title:"等等等等",
        coverImg:"https://p2.music.126.net/UVppy_qTp0HM4WRFP9cxcw==/109951164277036447.jpg?param=130y130"
    },
    collectionStatus:true,
    upStatus:false,
    upNum:11,
    comments:[
        {
            username:"qingshi",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:null
            }
        },{
            username:"hehe",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:{url:"http://123",timeLen:8}
            }
        }
    ]
},
{
    date:"Nov 11 2022",
    title:"活着",
    postImg:"/images/post/alive.jpg",
    avatar:"/images/avatar/avatar-3.png",
    content:"《活着》讲述了人如何去承受巨大的苦难；讲述了眼泪的宽广和丰富；讲述了绝望的不存在；讲述了人是为了活着本身而活着的，而不是为了活着之外的任何事物而活着。",
    readingNum:1234,
    collectionNum:5676,
    commentNum:890,
    author:"余华",
    dateTime:"1992年12月",
    detail:"《活着》是当代作家余华的代表作，讲述了一个人历尽世间沧桑和磨难的一生，亦将中国大半个世纪的社会变迁凝缩其间。《活着》还讲述了眼泪的宽广和丰富；讲述了绝望的不存在；讲述了人是为了活着本身而活着的，而不是为了活着之外的任何事物而活着。《活着》出版25年来打动了无数读者，经过时间的沉淀，已成为20世纪中国文学当之无愧的经典之作。到今天，已被译介至英、法、德、意、日、韩、俄等30多个国家和地区，获得国内外多个文学大奖，余华也凭借这部作品于2004年获得法兰西艺术和骑士文化勋章。",
    postId:3,
    music:{
        url:"https://music.163.com/#/song?id=1438059520&market=baiduqk",
        title:"To Live",
        coverImg:"https://p1.music.126.net/nnvavnnYB81exIMtpvAyRQ==/109951164876062278.jpg?param=130y130"
    },
    collectionStatus:true,
    upStatus:false,
    upNum:11,
    comments:[
        {
            username:"qingshi",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:null
            }
        },{
            username:"hehe",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:{url:"http://123",timeLen:8}
            }
        }
    ]
},
{
    date:"Nov 12 2022",
    title:"哈利波特百科全书",
    postImg:"/images/post/harry.jpg",
    avatar:"/images/avatar/avatar-4.png",
    content:"手里没有哈利波特百科全书 ，怎么能称得上真正的哈迷！涵盖哈利·波特全系列内容，配全新精美素描插图、哈利波特魔法世界历史年表。",
    readingNum:789,
    collectionNum:906,
    commentNum:345,
    author:"哈利·波特百科全书编委会",
    dateTime:"2007年10月",
    detail:"本书全面展示、生动再现了JK罗琳建构的魔法世界。书中对所有词条均有全面、生动、详细的解读。对于巫师的出身、经历、性格、姓名的由来以及该人物与希腊神话、罗马神话、圣经故事的隐密关联等，都有详细的解释；对于怪异难懂的魔法、咒语、绰号、俗语等，都从拉丁语、英语、法语、德语等语源的角度做出了合理的阐释。这是本书的核心部分，是“哈迷”全面了解魔法世界、深度阅读小说，以及进行相关研究的重要参考书。",
    postId:4,
    music:{
        url:"https://music.163.com/#/song?id=1350064264&market=baiduqk",
        title:"Harry Potter Theme",
        coverImg:"https://img1.kuwo.cn/star/albumcover/500/26/29/2268976275.jpg"
    },
    collectionStatus:true,
    upStatus:false,
    upNum:11,
    comments:[
        {
            username:"qingshi",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:null
            }
        },{
            username:"hehe",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:{url:"http://123",timeLen:8}
            }
        }
    ]
},
{
    date:"Nov 19 2022",
    title:"三体：全三册",
    postImg:"/images/post/santi.jpg",
    avatar:"/images/avatar/avatar-5.png",
    content:"《三体》第73届世界科幻雨果奖获奖作品，银河奖特别奖，《三体3》轨迹奖长篇科幻小说！2017年世界雨果奖提名作品。",
    readingNum:99,
    collectionNum:8766,
    commentNum:89,
    author:"刘慈欣",
    dateTime:"2006年5月",
    detail:"《三体》是刘慈欣创作的长篇科幻小说系列，由《三体》《三体2：黑暗森林》《三体3：死神永生》组成，第一部于2006年5月起在《科幻世界》杂志上连载，第二部于2008年5月首次出版，第三部则于2010年11月出版。作品讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。",
    postId:5,
    music:{
        url:"https://y.qq.com/n/ryqq/player",
        title:"三体-黑暗森林",
        coverImg:"https://y.qq.com/music/photo_new/T002R300x300M000004KqWDO3A8LDU_1.jpg?max_age=2592000"
    },
    collectionStatus:true,
    upStatus:false,
    upNum:11,
    comments:[
        {
            username:"qingshi",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:null
            }
        },{
            username:"hehe",
            avator:"/images/avatar/avatar-5.png",
            create_time:'1234545',
            content:{
                txt:'超人气作者Twentine（无量渡口）经典之作，直击心底深处的柔软',
                img:["/images/avatar/avatar-5.png","/images/avatar/avatar-3.png"],
                audio:{url:"http://123",timeLen:8}
            }
        }
    ]
}
]

// 添加接口，向外部暴露模块
module.exports = {
    postList: postList
}

总结

以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏，持续更新呢~
咱们下期再见~
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/170018.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

django框架

django框架

目录简介MVC与MTV模型MVCMTV创建项目目录生命周期静态文件配置&#xff08;无用&#xff09;启动django[启动](https://www.cnblogs.com/xiaoyuanqujing/articles/11902303.html)路由分组无名分组有名分组路由分发反向解析反向解析结合分组名称空间re_path与path自定义转换器视…
阅读更多...
vue3项目怎么写路由 + 浅析vue-router4源码

vue3项目怎么写路由 + 浅析vue-router4源码

在SPA项目里&#xff0c;路由router基本是前端侧处理的&#xff0c;那么vue3项目中一般会怎么去写router呢&#xff0c;本文就来讲讲vue-router4的一些常用写法&#xff0c;以及和Composition API的结合使用&#xff0c;同时简单讲讲实现原理&#xff0c;让你轻松理解前端route…
阅读更多...
【04】FreeRTOS的任务挂起与恢复

【04】FreeRTOS的任务挂起与恢复

目录 1.任务的挂起与恢复的API函数 1.1任务挂起函数介绍 1.2任务恢复函数介绍&#xff08;任务中恢复&#xff09; 1.3任务恢复函数介绍&#xff08;中断中恢复&#xff09; 2.任务挂起与恢复实验 3.任务挂起和恢复API函数“内部实现”解析 3.1vTaskSuspend() 3.2&#…
阅读更多...
Prometheus基础

Prometheus基础

一、何为Prometheus Prometheus受启发于Google的Brogmon监控系统&#xff08;相似的Kubernetes是从Google的Brog系统演变而来&#xff09;&#xff0c;从2012年开始由前Google工程师在Soundcloud以开源软件的形式进行研发&#xff0c;并且于2015年早期对外发布早期版本。2016年…
阅读更多...
【基础】Netty 的基础概念及使用

【基础】Netty 的基础概念及使用

Netty基本概念理解阻塞与非阻塞同步与异步BIO 与 NIOReactor 模型Netty 基本概念Netty 的执行流程Netty 的模块组件Netty 工作原理Netty 的基本使用Netty ServerNetty Client参考文章基本概念理解 阻塞与非阻塞 阻塞与非阻塞是进程访问数据时的处理方式&#xff0c;根据数据是…
阅读更多...
系分 - 案例分析 - 系统维护与设计模式

系分 - 案例分析 - 系统维护与设计模式

个人总结&#xff0c;仅供参考&#xff0c;欢迎加好友一起讨论 文章目录系分 - 案例分析 - 系统维护与设计模式典型例题 1题目描述参考答案典型例题 2题目描述参考答案系分 - 案例分析 - 系统维护与设计模式 典型例题 1 题目描述 某企业两年前自主研发的消防集中控制软件系统…
阅读更多...
05-requests添加Cookies与正则表达式

05-requests添加Cookies与正则表达式

第5讲 requests添加Cookies与正则表达式 整体课程知识点查看 &#xff1a;https://blog.csdn.net/j1451284189/article/details/128713764 本讲总结 request代理使用 request SSL request添加Cookies 数据解析方法简介 数据解析&#xff1a;正则表达式讲解 一、requests 代理 …
阅读更多...
【23种设计模式】学习汇总(未完结+思维导图)

【23种设计模式】学习汇总(未完结+思维导图)

获取思维导图翻至底部底部&#xff0c;基本概览博客内容&#xff08;暂未完全完善&#xff0c;期待你的持续关注&#xff09; 写作不易&#xff0c;如果您觉得写的不错&#xff0c;欢迎给博主来一波点赞、收藏~让博主更有动力吧&#xff01; 一.相关内容 在软件工程中&#xf…
阅读更多...
关系型数据库RDBMS | 字节青训营笔记

关系型数据库RDBMS | 字节青训营笔记

一、经典案例 1、红包雨案例 每年春节&#xff0c;抖音都会有红包雨获得 2、事务 事务(Transaction): 是由一组SQL语句组成的一个程序执行单元(Unit)&#xff0c;它需要满足ACID特性 BEGIN; UPDATE account table SET balance balance - 小目标 WHERE name “抖音; UPDATE…
阅读更多...
指数加权平均、动量梯度下降法

指数加权平均、动量梯度下降法

目录1.指数加权平均(exponentially weighted averages)这里有一年的温度数据。如果想计算温度的趋势&#xff0c;也就是局部平均值(local average)&#xff0c;或者说移动平均值(moving average)&#xff0c;怎么做&#xff1f;&#xff1a;当天的温度&#xff0c;&#xff1a;…
阅读更多...
交换机的基本原理（特别是动态ARP、静态ARP、代理ARP）

交换机的基本原理（特别是动态ARP、静态ARP、代理ARP）

第六章&#xff1a;交换机的基本配置 二层交换设备工作在OSI模型的第二层&#xff0c;即数据链路层&#xff0c;它对数据包的转发是建立在MAC&#xff08;Media Access Control &#xff09;地址基础之上的。二层交换设备不同的接口发送和接收数据独立&#xff0c;各接口属于不…
阅读更多...
esxi宿主机进入维护模式虚拟机不会自动释放【不会自动迁移出去】解决方法、查看辨别宿主机本地空间和存储池、esxi进入存储内部清理空间

esxi宿主机进入维护模式虚拟机不会自动释放【不会自动迁移出去】解决方法、查看辨别宿主机本地空间和存储池、esxi进入存储内部清理空间

文章目录说明虚拟机不自动释放处理过程报错说明宿主机进入维护模式说明手动迁移报错说明直接启动虚拟机报错说明解决方法报错原因分析解决方法查看辨别宿主机本地空间esxi进入存储内部清理空间进入存储池内存储内部空间清理及原则存储空间说明说明 我当前的esxi主机版本为5.5 …
阅读更多...
7亿人养活的眼镜行业，容不下一家县城小店

7亿人养活的眼镜行业，容不下一家县城小店

文|螳螂观察 作者| 青月 如果要盘点那些被暴利眷顾的行业&#xff0c;眼镜零售肯定榜上有名。 从上市企业的财报数据来看&#xff0c;国内眼镜零售行业的首家上市公司——博士眼镜&#xff0c;2021年前三季度的平均毛利率超过60%&#xff1b;国内镜片第一股明月眼镜在2021年…
阅读更多...
【C进阶】文件操作

【C进阶】文件操作

⭐博客主页&#xff1a;️CS semi主页 ⭐欢迎关注&#xff1a;点赞收藏留言 ⭐系列专栏&#xff1a;C语言进阶 ⭐代码仓库&#xff1a;C Advanced 家人们更新不易&#xff0c;你们的点赞和关注对我而言十分重要&#xff0c;友友们麻烦多多点赞&#xff0b;关注&#xff0c;你们…
阅读更多...
小程序应用生命周期

小程序应用生命周期

小程序应用生命周期生命周期介绍应用生命周期钩子函数参数对象页面生命周期页面生命周期-页面参数组件生命周期生命周期介绍 定义 一个组件或者页面生老病死的过程一堆会在特定时期触发的函数 分类 应用生命周期页面生命周期组件生命周期 应用生命周期钩子函数 属性说明onL…
阅读更多...
Xpath Helper 在新版Edge中的安装及解决快捷键冲突问题

Xpath Helper 在新版Edge中的安装及解决快捷键冲突问题

&#x1f935;‍♂️ 个人主页老虎也淘气 个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f44d;&#x1f3fb; 收藏…
阅读更多...
vue2源码分析-keep-alive组件

vue2源码分析-keep-alive组件

简介 keep-alive是Vue.js的一个内置组件。它能够将指定的组件实例保存在内存中&#xff0c;而不是直接将其销毁&#xff0c;它是一个抽象组件&#xff0c;不会被渲染到真实DOM中&#xff0c;也不会出现在父组件链中。 具体用法咱们这里就不再细说了&#xff0c;今天主要是探讨…
阅读更多...
JavaEE day2 初识web与HTML

JavaEE day2 初识web与HTML

初步了解相关知识 关于端口&#xff08;port&#xff09;&#xff1a;一个端口同一时间只能被一个进程监听&#xff0c;但是一个进程可以监听多个端口 URL的标准格式&#xff1a;协议名称&#xff1a;//主机/资源路径&#xff1f;查询字符串#文档片段 一般协议最常见的为htt…
阅读更多...
Java基础之《netty（25）—handler链调用机制》

Java基础之《netty（25）—handler链调用机制》

一、netty的handler的调用机制 1、使用自定义的编码器和解码器来说明netty的handler调用机制。 客户端发送long -> 服务器 服务端发送long -> 客户端 2、案例 二、客户端发送给服务端 1、服务端 NettyServer.java package netty.inboundhandlerAndOutboundhandler;i…
阅读更多...
【C++】从0到1入门C++编程学习笔记 - 基础入门篇：程序流程结构

【C++】从0到1入门C++编程学习笔记 - 基础入门篇：程序流程结构

文章目录一、选择结构1.1 if 语句1.2 三目运算符1.3 switch语句二、循环结构2.1 while 循环语句2.2 do...while 循环语句2.3 for 循环语句2.4 嵌套循环三、跳转语句3.1 break 语句3.2 continue 语句3.3 goto 语句C/C支持最基本的三种程序运行结构&#xff1a;顺序结构、选择结构…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023