實驗指導書六實戰(zhàn)：博客系統(tǒng)實驗目的：（1）掌握封裝網(wǎng)絡(luò)請求的方法。（2）掌握封裝組件的方法。（3）能夠使用“函數(shù)短小”原則編寫或重構(gòu)代碼。實驗資料 教材實驗設(shè)備 安裝HBuilderX開發(fā)工具的PC電腦實驗內(nèi)容1.需求描述本章的案例是完成一個基本的博客系統(tǒng)，有普通用戶和注冊用戶兩類用戶。普通用戶所使用的功能有限，注冊后就能使用系統(tǒng)的全部功能，具體包括：(1)普通用戶指未登錄的用戶，只能瀏覽博客文章。(2)注冊用戶登錄、注冊和退出。對其他人發(fā)表的博客文章點贊。對其他人發(fā)表的博客文章進行收藏。查看自己所發(fā)表的博客文章。查看自己所點贊的博客文章。查看自己所收藏的博客文章。2.原型設(shè)計(1)主頁(2)博客詳情(3)登錄與注冊(4)我的3.數(shù)據(jù)庫表設(shè)計數(shù)據(jù)庫名：blog_uniapp本案例創(chuàng)建了四張表，分別是user(用戶表)，blog(博客文章表)，like(用戶點贊表)和favorite(用戶收藏表)。(1)user表表1user表結(jié)構(gòu)字段名數(shù)據(jù)類型說明idint(11)主鍵usernamevarchar(255)登錄用的賬號，必填nicknamevarchar(255)昵稱，顯示在個人信息中，作為博客的發(fā)布者，選填。若用戶自己不給定，允許系統(tǒng)默認生成一個。passwordvarchar(50)登錄用的密碼。案例簡化處理直接使用了明碼。必填。cityvarchar(255)所在城市。選填gendertinyint(2)性別。0，男；1，女；2：保密avatarvarchar(255)用戶的頭像。選填。若用戶自己不給定，系統(tǒng)默認指定一個。registertimedatetime注冊時間。取服務(wù)器的時間。2.blog表表2blog表結(jié)構(gòu)字段名數(shù)據(jù)類型說明idint(11)主鍵titlevarchar(100)博客文章的標題contentlongtext博客文章的正文posttimedatetime博客文章的發(fā)表時間，取服務(wù)器時間modifytimedatetime博客文章的修改時間，取服務(wù)器時間thumbnailvarchar(500)博客文章的封面圖片viewcountint(11)瀏覽次數(shù)likecountint(11)點贊次數(shù)favoritecountint(11)收藏次數(shù)useridint(11)博客文章發(fā)布者的id3.likes表表3like表結(jié)構(gòu)字段名數(shù)據(jù)類型說明idint(11)主鍵useridint(11)外鍵，指向User表的id字段blogidint(11)外鍵，指向Blog表的id字段4.favorite表表4favorite表結(jié)構(gòu)字段名數(shù)據(jù)類型說明idint(11)主鍵useridint(11)外鍵，指向User表的id字段blogidint(11)外鍵，指向Blog表的id字段實驗步驟后端環(huán)境搭建步驟1：創(chuàng)建數(shù)據(jù)庫表在MySQL下面創(chuàng)建數(shù)據(jù)庫blog_uniapp，使用所熟悉的MySQL圖形化界面工具運行腳本blog_uniapp.sql，創(chuàng)建出以上的幾張表。如果運行腳本出錯，那么將腳本中的語句拷貝到MySQL圖形化界面工具的“查詢”窗口單獨運行。步驟2：修改配置 用winrar等壓縮工具，對blog-0.0.1-SNAPSHOT.jar文件，找到BOOT-INF文件夾下面的classes文件中的application.yaml，修改該文件中的數(shù)據(jù)庫連接密碼，端口號等信息。（可以將該文件拖出來，修改完后再拖回去）步驟3：啟動程序 進入blog-0.0.1-SNAPSHOT.jar所在的文件夾的CMD窗口，輸入：java-jarblog-0.0.1-SNAPSHOT.jar即可啟動后端項目。功能實現(xiàn)步驟1：項目初始化創(chuàng)建項目，命名為blog。將下載的tabs、fonts、images拷貝到static目錄下，如下圖所示：對pages.json配置如下tabBar信息："tabBar":{"list":[{ "text":"首頁", "pagePath":"pages/index/index", "iconPath":"static/tabs/home.png", "selectedIconPath":"static/tabs/home-active.png" },{ "text":"我的", "pagePath":"pages/mine/mine", "iconPath":"static/tabs/member.png", "selectedIconPath":"static/tabs/member-active.png" }]}它與“pages”處在同一級，如下圖所示。給App.vue的<style>標簽添加如下代碼：<style> /*每個頁面公共css*/ @import"@/static/fonts/iconfont.css";</style>步驟2：登錄前的“我的”頁面 在pages目錄下，創(chuàng)建mine/mine.vue頁面：<template> <viewclass="mine"> <!--頂部信息:頭像，昵稱，發(fā)文收藏和點贊數(shù)據(jù)--> <viewclass="top"> <viewclass="userinfo"> <viewclass="group"> <viewclass="pic"> <imagev-if="user.avatar!=null":src="user.avatar"></image> <imagev-elsesrc="/static/tabs/member.png"mode="aspectFit"></image> </view> <view> <textv-if="user.username!=null"v-text="user.nickname"></text> <textv-elseclass="login"@tap="gotoLogin"v-text="'點擊登錄'"></text> </view> </view> <viewclass="more"> <textclass="iconfonticon-a-10-you"></text> </view> </view> <viewclass="bloginfo"> <view><textv-text="user.ownscount">--</text>發(fā)文</view> <view><textv-text="user.favoritescount">--</text>收藏</view> <view><textv-text="user.likescount">--</text>點贊</view> </view> </view> <!--此處將補充登錄成功后的出現(xiàn)的組件在后續(xù)步驟8--> </view></template><stylelang="scss">.mine{ margin:30rpx30rpx; .top{ display:flex; flex-direction:column; justify-content:space-between; .userinfo{ display:flex; flex:row; justify-content:space-between; align-items:center; .group{ display:flex; align-items:center; .pic{ width:120rpx; height:120rpx; border-radius:50%; overflow:hidden; border:2rpxsolidred; margin-right:10rpx; image{ width:100%; height:100%; } } .login{ margin-left:16rpx; font-size:40rpx; } } .more{ .iconfont{ font-size:40rpx; } } } .bloginfo{ display:flex; flex:row; margin-top:20rpx; view{ margin-right:30rpx; font-size:26rpx; } } } .itemgroup{ border-top:4rpxsolid#f4f4f4; margin-top:30rpx; .item{ padding:24rpx0; display:flex; justify-content:space-between; align-items:center; .left{ text{ margin-right:16rpx; font-size:36rpx; } } } }}</style><script> exportdefault{ data(){ return{ user:{ username:null,//用戶賬號 avatar:null,//個人照片 ownscount:'--',//發(fā)文數(shù)量 favoritescount:'--',//收藏數(shù)量 likescount:'--',//點贊數(shù)量 } }; }, onLoad(){ }, methods:{ gotoLogin(){ //補充代碼，跳轉(zhuǎn)到登錄頁面 }, } }</script>步驟3：登錄頁面 本頁面需要調(diào)用user/login接口，具體參數(shù)參見swagger。在pages目錄下新建login/login.vue頁面，代碼如下：<template> <viewclass="loginform"> <uni-formsref="form":model="user":rules="rules"> <uni-forms-itemlabel="賬號"name="username"required> <uni-easyinputtype="text"v-model="user.username"placeholder="請輸入賬號..."/> </uni-forms-item> <uni-forms-itemlabel="密碼"name="password"required> <uni-easyinputtype="password"v-model="user.password"placeholder="請輸入密碼..."/> </uni-forms-item> </uni-forms> <button@tap="submitForm"class="submit">登錄</button> <viewclass="noaccount"> <view@tap="gotoMain">不想登錄,繼續(xù)逛逛</view> <view@tap="gotoRegister">沒有賬號，<text>注冊</text>一個</view> </view> </view></template><script> exportdefault{ data(){ return{ user:{ }, rules:{ username:{ rules:[ { required:true, errorMessage:'請輸入賬號', }, { minLength:2, maxLength:20, errorMessage:'賬號長度在{minLength}到{maxLength}個字符', } ] }, password:{ rules:[ { required:true, errorMessage:'請輸入密碼', }, { minLength:2, maxLength:20, errorMessage:'密碼長度在{minLength}到{maxLength}個字符', } ] } } }; }, methods:{ submitForm(){ this.$refs.form.validate().then((res)=>{ uni.request({ url:"http://localhost:8000/user/login", method:"POST", data:{ username:this.user.username, password:this.user.password }, success:(result)=>{ if(result.data.message!=null){ uni.showToast({ title:"登錄成功", icon:"success", duration:2000 }); setTimeout(()=>{ this.user={}, uni.setStorageSync("userid",result.data.message.id); uni.reLaunch({ url:"/pages/mine/mine" }) },2000); }else{ uni.showToast({ title:result.data.describe, icon:"error" }); } } }); }); }, gotoMain(){ uni.switchTab({ url:"/pages/index/index" }); }, gotoRegister(){ uni.redirectTo({ url:"/pages/register/register" }); } } }</script><stylelang="scss"scoped>.loginform{ margin:6rpx; .submit{ background-color:$uni-color-primary; color:white; } .noaccount{ font-size:30rpx; display:flex; justify-content:space-between; margin:10rpx; text{ color:red; } }}</style>步驟4：注冊頁面 在pages目錄下新建register/register.vue頁面，代碼如下：<template> <viewclass="registerform"> <uni-formsref="form":model="user" :rules="rules":labelWidth="85"> <uni-forms-itemlabel="賬號"name="username"required> <uni-easyinputtype="text"v-model="user.username"placeholder="請輸入賬號"/> </uni-forms-item> <uni-forms-itemlabel="昵稱"name="nickname"required> <uni-easyinputtype="text"v-model="user.nickname"placeholder="請輸入昵稱"/> </uni-forms-item> <uni-forms-itemlabel="密碼"name="password"required> <uni-easyinputtype="password"v-model="user.password"placeholder="請輸入密碼"/> </uni-forms-item> <uni-forms-itemlabel="再次輸入"name="passwordconfirm"required> <uni-easyinputtype="password"v-model="user.passwordconfirm"placeholder="再次輸入密碼"/> </uni-forms-item> <uni-forms-itemlabel="性別"name="gender"> <uni-data-checkboxv-model="user.gender":localdata="genders"></uni-data-checkbox> </uni-forms-item> <uni-forms-itemlabel="所在城市"name="city"> <uni-data-pickerv-model="user.city"placeholder="請選擇地址"popupTitle="請選擇城市" :localdata="cityarray"></uni-data-picker> </uni-forms-item> <uni-forms-itemlabel="頭像"name="avatar"> <buttonsize="mini"@click="onClickAvatar">選擇頭像</button> </uni-forms-item> </uni-forms> <button@tap="submitForm"class="submit">注冊</button> </view></template><script> exportdefault{ data(){ return{ cityarray:[ { text:"武漢", value:"wuhan" }, { text:"杭州", value:"hangzhou" }, { text:"成都", value:"chengdu" } ], genders:[ { text:'男', value:0 }, { text:'女', value:1 }, { text:'保密', value:2 } ], user:{}, rules:{ username:{ rules:[ { required:true, errorMessage:'請輸入賬號', }, { minLength:2, maxLength:20, errorMessage:'賬號長度在{minLength}到{maxLength}個字符', } ] }, nickname:{ rules:[ { required:true, errorMessage:'請輸入昵稱', }, { minLength:2, maxLength:20, errorMessage:'昵稱長度在{minLength}到{maxLength}個字符', } ] }, password:{ rules:[ { required:true, errorMessage:'請輸入密碼', }, { minLength:2, maxLength:20, errorMessage:'密碼長度在{minLength}到{maxLength}個字符', } ] }, passwordconfirm:{ rules:[ { required:true, errorMessage:'請輸入密碼', }, { minLength:2, maxLength:20, errorMessage:'密碼長度在{minLength}到{maxLength}個字符', }, { //微信小程序似乎沒發(fā)揮作用 validateFunction:function(rule,value,data,callback){ if(value!==data.password){ callback("兩次輸入的密碼不一致"); } returntrue; } } ] }, } }; }, methods:{ submitForm(){ this.$refs.form.validate().then((res)=>{ //console.log('校驗后的值',res); //刪除掉多出來的passwordconfirm屬性 Reflect.deleteProperty(this.user,"passwordconfirm"); //console.log('user模型',this.user); uni.request({ url:"http://localhost:8000/user/register", method:"POST", data:{ username:this.user.username, nickname:this.user.nickname, password:this.user.password, gender:this.user.gender, city:this.user.city, avatar:this.user.avatar }, success:(result)=>{ if(result.data.message){ uni.showToast({ title:"用戶注冊成功", duration:2000 }); //注冊成功則轉(zhuǎn)到登錄頁面 setTimeout(()=>{ uni.redirectTo({ url:"/pages/login/login" }); this.user={}; },2000); }else{ uni.showToast({ title:result.data.describe, duration:2000, icon:"error" }) } }//endofsuccess }); }).catch(err=>{ //console.log(err); }) }, onClickAvatar(){ uni.chooseImage({ success:(choosImage)=>{//賦值一張可以訪問的圖片的URL地址，此處為示例 this.user.avatar="/unidoc/zh/shuijiao.jpg"; //有可以訪問的接收文件的后端//uni.uploadFile({ // url:"", // filePath:choosImage.tempFilePaths[0], // name:"file", // formData:{ // }, // success:(res)=>{ // } //}); } }); } } }</script><stylelang="scss"scoped>.registerform{ margin:6rpx; .submit{ background-color:$uni-color-primary; color:white; }}</style>步驟5：公共函數(shù) 在項目根目錄下創(chuàng)建store目錄，并新建index.js文件，添加如下代碼：exportfunctionhasLogin(){ letuserid=uni.getStorageSync("userid"); if(userid==null||userid===''){ returnfalse; }else returntrue;}exportfunctionlogout(){ uni.removeStorageSync("userid"); uni.redirectTo({ url:"/pages/mine/mine" });}exportfunctioncheckLogin(){ letuserid=uni.getStorageSync("userid"); if(userid==''||userid==null){ uni.showToast({ title:"請先登錄", icon:"error", duration:2000 }); setTimeout(()=>{ uni.redirectTo({ url:"/pages/login/login" }) },2000); }}exportfunctiongetUserid(){ letuserid=uni.getStorageSync("userid"); if(userid==null||userid==='') return''; else returnuserid;}步驟6：登錄后的“我的”頁面 修改mine/mine.vue頁面，在<template>標簽里面補充如下代碼：<viewv-if="user.username!=null"> <!--我的博客，我的收藏，我的點贊--> <viewclass="itemgroup"> <viewclass="item"@tap="gotoMyBlogList"> <viewclass="left"> <textclass="iconfonticon-a-24-bianji"></text> <text>我的博客</text> </view> <view> <textclass="iconfonticon-a-10-you"></text> </view> </view> <viewclass="item"@tap="gotoMyFavoList"> <viewclass="left"> <textclass="iconfonticon-a-34-fenlei"></text> <text>我的收藏</text> </view> <view> <textclass="iconfonticon-a-10-you"></text> </view> </view> <viewclass="item"@tap="gotoMyLikeList"> <viewclass="left"> <textclass="iconfonticon-a-106-xihuan"></text> <text>我的點贊</text> </view> <view> <textclass="iconfonticon-a-10-you"></text> </view> </view> </view> <!--退出登錄--> <viewclass="itemgroup"> <viewclass="item"> <viewclass="left"@tap="gotoLogout"> <textclass="iconfonticon-a-73-tuichu"></text> <text>退出登錄</text> </view> <view> <textclass="iconfonticon-a-10-you"></text> </view> </view> </view> </view>在<script>的頭部增加如下代碼：import{hasLogin,logout,getUserid}from'@/store/index.js'onload()增加如下代碼：onLoad(){ if(hasLogin()){ this.getUserInfo(); }}該頁面需要調(diào)用后端的getUserInfo()接口，具體參數(shù)此處不列出，參照swagger。methods屬性增加如下代碼：getUserInfo(){ this.userid=getUserid(); if(this.userid!=null){ uni.request({ url:`http://localhost:8000/user/getUserInfo?userid=${this.userid}`, method:"GET", success:(res)=>{ this.user=res.data.message; } }); } },gotoMyBlogList(){ uni.navigateTo({ url:"/pages/mybloglist/mybloglist" }); }, gotoMyFavoList(){ uni.navigateTo({ url:"/pages/myfavolist/myfavolist" }); }, gotoMyLikeList(){ uni.navigateTo({ url:"/pages/mylikelist/mylikelist" }); },gotoLogout(){ uni.showModal({ title:"是否確定退出", success:res=>{ if(res.confirm){ logout(); this.user={ username:null, avatar:null, ownscount:'--', favoritescount:'--', likescount:'--', } } } }); }步驟7：主頁主頁主要實現(xiàn)兩個功能，其一是顯示博客列表，其二是觸底刷新。對于未登錄用戶和已登錄用戶，主頁顯示的效果沒有區(qū)別。該頁所需要的功能需要后端提供以下API接口：(1)按頁獲取博客數(shù)據(jù)表5按頁獲取博客列表接口規(guī)范請求地址/blog/getPageBlogs請求方式POST請求示例/blog/getPageBlogs參數(shù)名含義備注pageNum獲取第幾頁數(shù)據(jù)對于MySQL數(shù)據(jù)庫，從1開始pageSize每頁數(shù)據(jù)的條數(shù)系統(tǒng)默認值為8返回值示例{"status":200,"describe":"按頁獲取成功","message":{"records":[{"id":12,"title":"東風標致新5008正式上市","thumbnail":"https:///de7eba78b.png","posttime":"2023-09-2010:00:00","modifytime":"2023-09-2108:00:00","viewcount":90,"likecount":10,"favoritecount":21,"content":"<p>東風標致新5008于線上宣布正式上市，官方指導售價區(qū)間17.87-23.37萬元，共推出四個型號車款。</p>","userid":2},{"id":13,"title":"初雪來啦！接下來這些地方有大雪！附最新天氣預報","thumbnail":"https:///cbd466.png","posttime":"2023-09-2222:00:00","modifytime":"2023-09-2300:00:00","viewcount":204,"likecount":20,"favoritecount":19,"content":"<p>今天出門的小伙伴是不是感覺到降溫了</p><p><br></p><p><br></p><p><br></p><p>就在剛剛煙臺今冬的初雪伴隨降溫一起到來了</p><p><br></p><p>今天最浪漫的事可能就是坐在車里看著雪一片一片一片的落下。</p><p><br></p><p>防御指南：</p><p>1.交通、公安等部門要按照職責做好防范道路積雪、結(jié)冰的應對準備工作；</p><p>2.駕駛?cè)藛T應當注意路況，安全行駛；</p><p>3.行人外出盡量少騎自行車，注意防滑。</p>","userid":2}],"total":10,"size":8,"current":2,"orders":[],"searchCount":true,"pages":2}} 在pages目錄下創(chuàng)建index/index.vue頁面。該頁面的核心代碼如下：<template> <view> <viewv-for="bloginblogs":key="blog.id"class="item"@tap="gotoInfo(blog.id)"> <viewclass="pic"> <image:src="blog.thumbnail"mode="aspectFill"></image> </view> <viewclass="blog"> <viewclass="title">{{blog.title}}</view> <viewclass="posttime">{{blog.posttime}}</view> </view> </view> </view></template><stylelang="scss"scoped>.item{ display:flex; padding:10rpx; border-bottom:1pxsolidgray; .pic{ width:270rpx; height:210rpx; image{ width:100%; height:100%; } } .blog{ flex:1; padding-left:20rpx; display:flex; flex-direction:column; justify-content:space-between; .title{ font-size:36rpx; color:#333; text-overflow:-o-ellipsis-lastline; overflow:hidden; //溢出內(nèi)容隱藏 text-overflow:ellipsis; //文本溢出部分用省略號表示 display:-webkit-box; //特別顯示模式 -webkit-line-clamp:2; //行數(shù) line-clamp:2; -webkit-box-orient:vertical; //盒子中內(nèi)容豎直排列 } .posttime{ font-size:26rpx; color:#888 } } }</style>處理兩個頁面生命周期函數(shù)：onLoad()和onReachBottom。當點擊博客文章的標題時所綁定的處理函數(shù)gotoInfo()。<script> exportdefault{ data(){ return{ blogs:[], pageNum:1 }; },onLoad(){ this.showBlogs(); }, methods:{ showBlogs(){ uni.request({ url:"http://localhost:8000/blog/getPageBlogs", method:"POST", data:{ pageNum:this.pageNum, pageSize:8 }, success:(res)=>{ console.log(res.data);//參見接口規(guī)范中的返回值示例 lettempblogs=res.data.message.records; for(letblogoftempblogs){ if(blog.thumbnail==null){//沒有縮略圖，則給一張默認的圖片 blog.thumbnail="/static/logo.png"; } }//…是展開運算符，將tempblogs數(shù)組中元素一一取出 this.blogs.push(...tempblogs); } }); //endofuni.request() }, gotoInfo(id){ uni.navigateTo({ url:`/pages/showbloginfo/showbloginfo?id=${id}` }); } }, onReachBottom(){//觸底相當于本頁的內(nèi)容瀏覽完，類似于到下一頁了，故加1。 this.pageNum+=1; this.showBlogs(); } }</script>步驟8：博客詳情頁面該頁面所使用的后端接口如下：請求地址/blog/getBlogInfo請求方式GET請求示例/blog/getBlogInfo?id=1參數(shù)名含義備注id獲取的博文的id返回值示例{"status":200,"describe":"","message":{"id":1,"title":"神舟要發(fā)射了","thumbnail":"https://1ec47829.png","posttime":"2023-05-0109:00:00","modifytime":"2023-05-0109:00:00","viewcount":202,"likecount":32,"favoritecount":30,"content":"<p>神舟已經(jīng)運送至發(fā)射架，擇機發(fā)射。</p>","userid":1,"nickname":"test"},}<template> <viewclass="bloginfo"> <viewclass="title"> {{blog.title}} </view> <viewclass="subtitle"> <view> <text>發(fā)布者：</text><textclass="author">{{blog.nickname}}</text> </view> <viewclass="posttime"> {{blog.posttime}} </view> </view> <viewclass="content"v-html="blog.content"> </view> <viewclass="likeviewfavinfo"> <viewclass="views"> <textclass="iconfonticon-a-27-liulanicon"></text> <textclass="num"v-text="blog.viewcount"></text> </view> <viewclass="favo"> <textclass="iconfonticon":class="isFavo?'icon-collection-fill':'icon-collection'"@tap="gotoFavo"></text> <textclass="num"v-text="blog.favoritecount"></text> </view> <viewclass="like"> <textclass="iconfonticon":class="isLike?'icon-good-fill':'icon-a-106-xihuan'"@tap="gotoLike"></text> <textclass="num"v-text="blog.likecount"></text> </view> </view> </view></template><script> exportdefault{ data(){ return{ blogId:0, blog:{}, }; }, onLoad(options){ //此處獲取博文的id//調(diào)用getBlogInfo()方法 }, methods:{ getBlogInfo(blogid){ uni.request({ url:`http://localhost:8000/blog/getBlogInfo?id=${blogid}`, method:"GET", success:(res)=>{ this.blog=res.data.message; //console.log("ingetBlogInfo...",res.data); } }); }, }//endofmethods }</script><stylelang="scss"scoped>.bloginfo{ .title{ font-size:46rpx; text-align:center; margin-bottom:20rpx; } .subtitle{ display:flex; justify-content:space-between; background-color:#F6F6F6; color:#666; padding:20rpx24rpx; .author{ font-size:32rpx; color:#0199FE; } .posttime{ font-size:26rpx; }; } .content{ font-size:38rpx; padding:30rpx; line-height:50rpx; border-bottom:1pxgainsborosolid; } .likeviewfavinfo{ display:flex; flex-direction:row; justify-content:space-between; align-items:center; padding:30rpx50rpx0rpx50rpx; .views,.favo,.like{ display:flex; align-items:center; .icon{ font-size:50rpx; color:#666; margin-right:6rpx; } .num{ font-size:36rpx; color:#0199FE } } }}</style> 這個頁面所設(shè)計到的功能比前面的頁面都偏多，所調(diào)用的后端接口不少。<template> <viewclass="bloginfo"> <viewclass="title"> {{blog.title}} </view> <viewclass="subtitle"> <view> <text>發(fā)布者：</text><textclass="author">{{blog.nickname}}</text> </view> <viewclass="posttime"> {{blog.posttime}} </view> </view> <viewclass="content"v-html="blog.content"> </view> <viewclass="likeviewfavinfo"> <viewclass="views"> <textclass="iconfonticon-a-27-liulanicon"></text> <textclass="num"v-text="blog.viewcount"></text> </view> <viewclass="favo"> <textclass="iconfonticon":class="isFavo?'icon-collection-fill':'icon-collection'"@tap="gotoFavo"></text> <textclass="num"v-text="blog.favoritecount"></text> </view> <viewclass="like"> <textclass="iconfonticon":class="isLike?'icon-good-fill':'icon-a-106-xihuan'"@tap="gotoLike"></text> <textclass="num"v-text="blog.likecount"></text> </view> </view> </view></template><script> import{getUserid,hasLogin}from"@/store/index.js" exportdefault{ data(){ return{ blogId:0, blog:{}, isFavo:false, isLike:false }; }, onLoad(options){ this.blogId=options.id; this.userId=getUserid(); this.getBlogInfo(this.blogId); this.increaseBlogView(this.blogId); if(hasLogin()){ //console.log('judge',this.userId,this.blogId); this.judgeUserFavoBlog(this.userId,this.blogId); this.judgeUserLikeBlog(this.userId,this.blogId); } }, methods:{ getBlogInfo(blogid){ uni.request({ url:`http://localhost:8000/blog/getBlogInfo?id=${blogid}`, method:"GET", success:(res)=>{ this.blog=res.data.message; //console.log("ingetBlogInfo...",res.data); } }); }, //將博文的瀏覽次數(shù)加1 increaseBlogView(blogid){ uni.request({ url:`http://localhost:8000/blog/increaseBlogView?id=${blogid}`, success:(res)=>{ //console.log(res.data.describe); } }) }, //判斷用戶是否收藏了該博文 judgeUserFavoBlog(userId,blogId){ uni.request({ url:`http://localhost:8000/favorite/isUserFavoBlog?userid=${this.userId}&blogid