Vue2+Element 封装评论+表情功能

2024-05-28 05:36

本文主要是介绍Vue2+Element 封装评论+表情功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

有需要的小伙伴直接拿代码即可,不需要下载依赖,目前是初始版本,后期会进行代码的优化。

评论组件如下:

创建 comment.vue 文件。

表情组件 VueEmoji.vue 在评论组件中使用。

<template><div class="comment"><div class="flex_box"><h2>评论 {{total}}</h2><p>文明上网理性发言</p></div><div class="comment-header"><div class="header_children"><i class="el-icon-user-solid img_width"></i><el-input:placeholder="placeholderText"v-model="context"class="input"type="textarea"resize="none"size="mini"clearable:maxlength="contentLength"@focus="isShowSecReply(undefined)"></el-input></div><div class="header_btn"><!-- 表情 --><vue-emoji @chooseEmoji="chooseEmoji"></vue-emoji><el-buttontype="primary"style="height: 40px"@click="addComment()"审核>{{ buttonText }}</el-button></div></div><div v-loading="bigLoading"><div class="comment-body" v-for="(item, index) in comments" :key="item.id + '' + index"><!-- 一级评论 --><div class="first-comment"><i class="el-icon-user-solid img_width"></i><div class="content"><!-- 一级评论用户昵称 --><div style="display: flex;align-items: center;"><h3>{{ item.memberName }}</h3><span v-if="item.auditStatus == '0'" style="color: #ddab16;margin-left: 10px">(待审核)</span></div><!-- 一级评论发布时间 --><span>{{ item.createTime }}</span><!-- 一级评论评论内容 --><p>{{ item.commentContent }}</p><!-- 一级评论评论点赞 --><div class="comment-right"><iclass="el-icon-chat-dot-round"@click="isShowSecReply(item)">回复</i><iv-if="userInfor.memberName == item.memberName"class="el-icon-delete"@click="deleteComment(item, undefined)">删除</i></div><!-- 回复一级评论 --><div class="reply-comment" v-show="isShowSec === item.id"><el-input:placeholder="placeholderText"class="input"v-model.trim="replyContext":maxlength="contentLength"clearable></el-input><div class="flex_one_box"><!-- 表情 --><vue-emoji @chooseEmoji="chooseEmoji" :layer="comments"></vue-emoji><el-buttontype="primary"size="mini"class="reply-button"@click="addComment(item)">回复</el-button></div></div><!-- 次级查看更多 --><div class="li_top" v-if="item.commentReplyInfoList?.length > 0" @click="hanlePublicTotal(item)"><span style="color: rgb(21 66 231);">共{{item.commentReplyCount}}条评论</span><i class="el-icon-caret-bottom" v-show="item.publicTotal"></i><i class="el-icon-caret-top" v-show="!item.publicTotal"></i></div><!-- 次级评论 --><ul v-infinite-scroll="load(item.commentReplyInfoList)" infinite-scroll-delay="200" style="overflow:auto" class="infinite_list" v-if="item.publicTotal"> <li v-for="(reply, index) in item.commentReplyInfoList" :key="reply.id + '' + index"><!-- 次级评论头像,该用户没有头像则显示默认头像 --><template><div class="second-comment"><i class="el-icon-user-solid img_width"></i><div class="content"><!-- 次级评论用户昵称 --><div style="display: flex;align-items: center;"><h3>{{ reply.memberName }}</h3><span v-if="reply.auditStatus == '0'" style="color: #ddab16;margin-left: 10px">(待审核)</span></div><!-- 次级评论评论时间 --><span>{{ reply.createTime }}</span><span class="to_reply">{{ reply.memberName }}</span>回复<span class="to_reply">{{ reply.replyMemberName }}</span>:<p>{{ reply.commentContent }}</p><!-- 次级评论评论点赞 --><div class="comment-right"><iclass="el-icon-chat-dot-round"@click="isShowSecReply(reply)">回复</i><iv-if="userInfor.memberName == reply.memberName"class="el-icon-delete"@click="deleteComment(item, reply)">删除</i></div><div class="reply-comment" v-show="isShowSec === reply.id"><el-input:placeholder="placeholderText"class="input"v-model.trim="replyContext":maxlength="contentLength"clearable></el-input><div class="flex_one_box"><!-- 表情 --><vue-emoji @chooseEmoji="chooseEmoji" :layer="item.commentReplyInfoList"></vue-emoji><el-buttontype="primary"size="mini"class="reply-button"@click="addComment(item,reply)">回复</el-button></div></div></div></div></template></li><el-button class="loading_p" type="primary" size="mini" v-if="item.moreValue" :loading="childrenMorelist.loading" @click="changeChildrenMore(item)">加载更多</el-button></ul></div></div></div></div><!-- 一级查看更多 --><el-button type="info" class="moreBtn" :loading="morelist.loading" @click="changeMore" v-if="morelist.value">查看更多评论<i class="el-icon-caret-bottom"></i> </el-button><!-- <div v-else class="more_div">暂无更多评论</div> --><!-- 暂无评论的空状态 --><el-empty :description="emptyText" v-if="comments.length === 0"></el-empty></div>
</template>
<script>
export default {props: {sourceType: {type: String,require: true},articleId: {//评论所属文章 idtype: String},emptyText: {// 评论为空的时候显示的文字type: String,default: "期待你的评论!"},buttonText: {// 按钮文字type: String,default: "评论"},contentLength: {// 评论长度type: Number,default: 150},placeholderText: {// 默认显示文字type: String,default: "请输入最多150字的评论..."}},data() {return {bigLoading: false,userInfor: {},params: {pageNum: "1",pageSize: "5",orderByColumn: "createTime",isAsc: "asc",sourceType: this.sourceType,mainId: "",},pantPageNum: "1", // 父级查看更多total: 0,comments: [], // 获取得到的评论context: "", // 评论内容replyContext: "", //一级评论回复isShowSec: "", //是否显示次级回复框isClickId: "", //记录点击回复的评论iduserId: "1", // 浏览器指纹username: "孤城浪人", //你的用户名firstIdx: 1,secIdx: 1,avatarUrl:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",morelist: {index: '2',value: false,loading: false,},childrenMorelist: {index: '2',childrenId: "",childrenPageNum: "1", // 子级查看更多childrenTotal: 0,value: false,loading: false,},};},mounted() {this.userInfor = localStorage.getItem("userInfor") ? JSON.parse(localStorage.getItem("userInfor")) : {};// 获取评论数据this.getCommentList();},computed: {isLogin() {return this.$store.getters.isLogin;},},methods: {chooseEmoji(layer,val) {if(layer) {this.replyContext += val;return;}this.context += val;},// 查看更多评论async changeMore() {this.morelist.loading = true;this.pantPageNum++;this.params.pageNum = this.pantPageNum;console.log("this.params.pageNum",this.params.pageNum);let res = await this.getNewList();res.rows.map(item => {this.$set(item,'publicTotal',false)})this.comments.push(...res.rows);this.morelist.loading = false;this.total = res.total;if(res.total > this.params.pageNum * this.params.pageSize) {this.morelist.value = true;}else {this.morelist.value = false;}},// 加载更多async changeChildrenMore(item) {if(this.childrenMorelist.childrenId && this.childrenMorelist.childrenId != item.id) {this.childrenMorelist.childrenPageNum = "1";}this.childrenMorelist.childrenId = item.id;this.childrenMorelist.loading = true;this.childrenMorelist.childrenPageNum++;this.params.pageNum = this.childrenMorelist.childrenPageNum;this.params.mainId = item.id;let res = await this.getNewList();this.childrenMorelist.childrenTotal = res.total;console.log("res",res);item.commentReplyInfoList.push(...res.rows);this.childrenMorelist.loading = false;if(res.total > this.params.pageNum * this.params.pageSize) {item.moreValue = true;}else {item.moreValue = false;}},load(list) {list += 2},// 唤起文件选择handleClick() {this.$refs.avatar.click();},// 获取本篇文章所有评论async getCommentList() {try {this.comments = [];this.bigLoading = true;// 获取某篇文章下的所有评论const res = await this.$get(`/api/comment/list?pageNum=${this.params.pageNum}&pageSize=${this.params.pageSize}&orderByColumn=${this.params.orderByColumn} desc,auditStatus&isAsc=${this.params.isAsc}&sourceType=${this.params.sourceType}&mainId=${this.params.mainId}&sourceId=${this.$route.query.id}`)this.bigLoading = false;this.comments = res.rows; //评论列表this.total = res.total; //评论总数if(this.total > this.params.pageSize) {this.morelist.value = true;}else {this.morelist.value = false;}this.comments.map(item => {if(item.commentReplyCount > 5) {item.moreValue = true;}else {item.moreValue = false;}this.$set(item,'publicTotal',false)}) } catch (err) {this.bigLoading = false;this.$message.error(err);}},async getNewList() {let res = await this.$get(`/api/comment/list?pageNum=${this.params.pageNum}&pageSize=${this.params.pageSize}&orderByColumn=${this.params.orderByColumn} desc,auditStatus&isAsc=${this.params.isAsc}&sourceType=${this.params.sourceType}&mainId=${this.params.mainId}&sourceId=${this.$route.query.id}`);console.log("res1111",res);return res;},// 控制二级条数显示盒子hanlePublicTotal(item) {item.publicTotal = !item.publicTotal;console.log("item",item);},isShowSecReply(item) {console.log("一级input获取焦点",item);let id = item?.id;if (id) {this.isShowSec = id;if (this.isClickId === this.isShowSec) {this.isShowSec = "";} else {this.isShowSec = id;}this.isClickId = this.isShowSec;} else {this.isShowSec = this.isClickId = "";}},// 删除deleteComment(item, reply) {if(!this.isLogin) {this.$message.warning("请先登录!");return;}let _id = item.id;let replyId = reply?.id;if (replyId) {// 删除二级评论,提交请求到后端this.$confirm('确认删除此评论?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$put(`/api/comment/${replyId}`).then(async (res) => {if (res.code === 200) {this.params.pageNum = '1';let data = await this.getNewList();console.log("data",data);item.commentReplyCount = data.total;item.commentReplyInfoList.splice(0);item.commentReplyInfoList.push(...data.rows);//this.$message({message: "删除成功",type: "success",});}});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});})} else {// 删除一级评论,提交请求到后端this.$confirm('确认删除此评论?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$put(`/api/comment/${_id}`).then((res) => {if (res.code === 200) {this.$message({message: "删除成功",type: "success",});this.params.pageNum = '1';this.getCommentList();}});this.total--;if(this.total == this.params.pageSize) {this.morelist.value = false;}}).catch(() => {this.$message({type: 'info',message: '已取消删除'});})}},// 评论添加成功,返回的数据async addComment(item,reply) {console.log(">>>>item",item );if(!this.isLogin) {this.$message.warning("请先登录!");return;}//本地更新评论列表if (item) {// 添加二级评论if (!this.replyContext) {this.$message.warning("评论或留言不能为空哦!");return;}this.addSecond(item,reply);} else {// 添加一级评论,提交数据到后端if (!this.context) {this.$message.warning("评论或留言不能为空哦!");return;}this.addFirst();}this.isShowSec = this.isClickId = "";},addSecond(item,reply) {// 模拟数据提交成功后返回数据let data = {mainId: item.id,parentId: item.id,sourceType: item.sourceType,sourceId: this.$route.query.id, commentContent: this.replyContext //评论内容};if(reply) {data.parentId = reply.id;}this.$post("/api/comment",data).then(async(res) => {if(res.code == 200) {this.params.mainId = item.id;let res = await this.getNewList();if(!item.commentReplyInfoList) {item.commentReplyInfoList = [];}item.commentReplyInfoList.splice(0);item.commentReplyInfoList.push(...res.rows);item.commentReplyCount = res.total;if(res.total > 5) {item.moreValue = true;}this.replyContext = "";console.log("comments",this.comments);}})},addFirst() {// 模拟数据提交成功后返回数据let data = {mainId: '',parentId: '',sourceType: this.sourceType,sourceId: this.$route.query.id, commentContent: this.context //评论内容};this.$post("/api/comment",data).then(async(res) => {if(res.code == 200) {this.params.mainId = '';let res = await this.getNewList();res.rows.map(item => {this.$set(item,'publicTotal',false)})this.comments = res.rows;this.context = "";this.total = res.total;if(res.total > 5) {this.morelist.value = true;}}})},}
};
</script>
<style lang="scss" scoped>
.comment {min-height: 26vh;border-radius: 5px;margin-top: 2px;overflow: hidden;h3 {margin: 5px 0;}p {margin: 3px 0;}ul {list-style-type: none;}.img_width {max-width: 50px;max-height: 50px;border-radius: 50px;font-size: 30px;color: #3339;}.flex_box {padding: 0 5px;display: flex;align-items: center;margin-bottom: 30px;h2 {margin: 0;}p {font-size: 16px;color: #666;margin: 0 0 0 20px;}}.active {color: rgb(202, 4, 4);}.comment-header {position: relative;// height: 50px;padding: 10px 5px;// display: flex;// align-items: center;.header_children {display: flex;align-items: center;}.header_btn {display: flex;align-items: center;justify-content: space-between;padding: 0 20px 0 60px;margin-top: 10px;}.input {margin-left: 10px;margin-right: 20px;flex: 1;font-size: 14px;::v-deep .el-input__inner:focus {border-color: #dcdfe6;}}}.comment-body {font-size: 14px;.first-comment {display: flex;padding: 10px 20px;.input {::v-deep.el-input__inner:focus {border-color: #dcdfe6;}}i {margin-right: 5px;margin-left: 1vw;cursor: pointer;// &:nth-child(3) {//   color: rgb(202, 4, 4);// }}.content {margin-left: 10px;position: relative;flex: 1;& > span {font-size: 12px;color: rgb(130, 129, 129);}.comment-right {position: absolute;right: 0;top: 0;}.reply-comment {// height: 60px;// display: flex;// align-items: center;.flex_one_box {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;}.reply-button {margin-left: 20px;height: 35px;}}.li_top {width: 200px;cursor: pointer;padding-left: 50px;}.infinite_list {max-height: 333px;}.second-comment {display: flex;padding: 10px 0 10px 5px;border-radius: 20px;background: #ffffff;.to_reply {// color: rgb(126, 127, 128);color: #0d74e1;}}.loading_p {cursor: pointer;margin: 3px auto;display: flex;justify-content: center;}}}}.moreBtn {width: 100%;i {font-size: 16px;}}.more_div {display: flex;display: flex;justify-content: center;color: #66666694;font-size: 14px;}::-webkit-scrollbar{width: 8px;height: 5px;background-color: #F5F5F5;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px #c0c0c0;border-radius: 10px;background-color: #f9f9f9;}/*定义滑块 内阴影+圆角*/::-webkit-scrollbar-thumb{border-radius: 10px;-webkit-box-shadow: inset 0 0 6px #c0c0c0;background-color: #c0c0c0;}
}
</style>

表情组件如下:

1. 创建 VueEmoji.vue 文件。

<template><div class="emoji"><ul class="emoji-default" v-show="isShowEmoji"><li v-for="(item, index) in emojiJson" :key="index"@click.stop="chooseEmojiDefault(item)">{{item}}</li></ul><div class="emoji-tabs"><div :class="!isShowEmoji ? 'emoji-tab' : 'new_tab'" @click="isShowEmoji = !isShowEmoji">{{ isShowEmoji ? '收起' : emojiJson[4]}}</div></div></div>
</template><script>const emojiJson = require("../utils/emoji.json");export default {props: {keyId: {type: String,required: false},layer: {type: Array || Object,required: false}},data() {return {emojiJson: emojiJson.data.split(','),isShowEmoji: false,}},methods: {chooseEmojiDefault(item) {console.log("item",item);this.$emit("chooseEmoji",this.keyId,this.layer,item);this.isShowEmoji = false;}}
}</script><style lang="scss" scoped>
// 纵向滚动条
@mixin scroll-bar($width: 10px) {&::-webkit-scrollbar-track {border-radius: 10px;background-color: #ffffff;}&::-webkit-scrollbar {width: $width;height: 10px;background-color: #ffffff;}&::-webkit-scrollbar-thumb {border-radius: 10px;background-color: rgba(0, 0, 0, 0.2);}
}.emoji {text-align: left;// width: 100%;// height: 100%;background: #fff;// border: 1px solid #dcdfe6;box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);.emoji-tabs {// border-top: 1px solid #DCDFE6;background: #f8f8f8;.emoji-tab {cursor: pointer;background: #ffffff;/* height: 100%; *//* padding: 5px 5px; *//* overflow: hidden; */text-align: center;/* line-height: 15px; */font-size: 25px}.new_tab {cursor: pointer;font-size: 14px;color: #1c33e5;text-align: center;padding: 5px 0;}}.emoji-default {width: calc(100% - 40px);height: 202px;overflow-y: auto;@include scroll-bar();padding: 0px 20px;li {display: inline-block;padding: 5px;font-size: 24px;width: 29px;height: 29px;overflow: hidden;cursor: pointer;}li:hover {background-color: #d5d5d5;}}
}</style>

2. 在写公共方法的地方创建 emoji.json 文件,里面是表情的数据,内容如下:

{"data": "😀,😁,😂,😃,😄,😅,😆,😉,😊,😋,😎,😍,😘,😗,😙,😚,😇,😐,😑,😶,😏,😣,😥,😮,😯,😪,😫,😴,😌,😛,😜,😝,😒,😓,😔,😕,😲,😷,😖,😞,😟,😤,😢,😭,😦,😧,😨,😬,😰,😱,😳,😵,😡,😠,💘,❤,💓,💔,💕,💖,💗,💙,💚,💛,💜,💝,💞,💟,❣,💪,👈,👉,☝,👆,👇,✌,✋,👌,👍,👎,✊,👊,👋,👏,👐,✍,🍇,🍈,🍉,🍊,🍋,🍌,🍍,🍎,🍏,🍐,🍑,🍒,🍓,🍅,🍆,🌽,🍄,🌰,🍞,🍖,🍗,🍔,🍟,🍕,🍳,🍲,🍱,🍘,🍙,🍚,🍛,🍜,🍝,🍠,🍢,🍣,🍤,🍥,🍡,🍦,🍧,🍨,🍩,🍪,🎂,🍰,🍫,🍬,🍭,🍮,🍯,🍼,☕,🍵,🍶,🍷,🍸,🍹,🍺,🍻,🍴,🌹,🍀,🍎,💰,📱,🌙,🍁,🍂,🍃,🌷,💎,🔪,🔫,🏀,⚽,⚡,👄,👍,🔥,🙈,🙉,🙊,🐵,🐒,🐶,🐕,🐩,🐺,🐱,😺,😸,😹,😻,😼,😽,🙀,😿,😾,🐈,🐯,🐅,🐆,🐴,🐎,🐮,🐂,🐃,🐄,🐷,🐖,🐗,🐽,🐏,🐑,🐐,🐪,🐫,🐘,🐭,🐁,🐀,🐹,🐰,🐇,🐻,🐨,🐼,🐾,🐔,🐓,🐣,🐤,🐥,🐦,🐧,🐸,🐊,🐢,🐍,🐲,🐉,🐳,🐋,🐬,🐟,🐠,🐡,🐙,🐚,🐌,🐛,🐜,🐝,🐞,🦋,😈,👿,👹,👺,💀,☠,👻,👽,👾,💣"
}

在 Vue 文件中使用,如下:

<template><div><comment :buttonText="'发表评论'"/></div>
</template>

效果如下:

​​​​​​​

这篇关于Vue2+Element 封装评论+表情功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1009675

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现,因为rasa本身是带有remindschedule模块的。不过经过一番折腾后,忽然发现,chatbot上实现的定时,语音助手不一定会有响应。因为,我目前语音助手的代码设置了长时间无应答会结束对话,这样一来,chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢? 我最后选择的方法是用threading.Time

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF

JavaFX应用更新检测功能(在线自动更新方案)

JavaFX开发的桌面应用属于C端,一般来说需要版本检测和自动更新功能,这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤: 读取本地应用版本拉取远程版本并比较两个版本如果需要升级,那么拉取更新历史弹出升级控制窗口用户选择升级时,拉取升级包解压,重启应用用户选择忽略时,本地版本标志为忽略版本用户选择取消时,隐藏升级控制窗口 2.