前言

最近在寫自己的項(xiàng)目，發(fā)現(xiàn)腳注不知道寫什么好。思來(lái)想去，反正是自己的寫著玩的項(xiàng)目，沒(méi)必要搞什么備案號(hào)之類的。倒不如每次加載頁(yè)面的時(shí)候，隨機(jī)生成一句名言或者勵(lì)志的話激勵(lì)自己。

代碼實(shí)現(xiàn)

關(guān)于這種的功能實(shí)現(xiàn)，其實(shí)有很多種。我舉兩個(gè)很經(jīng)典的實(shí)現(xiàn)方式

請(qǐng)求開源接口(網(wǎng)站)

比說(shuō)每次請(qǐng)求開源的接口或者API,現(xiàn)在有很多類似的接口。我們?cè)L問(wèn)該url就會(huì)隨機(jī)生成一句話

比如這個(gè)：

這種的雖然簡(jiǎn)單方便，但是也有一個(gè)致命的缺點(diǎn)，那就是雖然是開源的，但是保不準(zhǔn)那天這個(gè)接口或者url就不能訪問(wèn)了，比如我之前收藏的這類網(wǎng)址：

我之前記得明明是可以用的，過(guò)了一個(gè)月再看已經(jīng)不行了，所以大家選擇的時(shí)候盡量選擇一些正軌的或者知名的網(wǎng)站。這樣才能保證穩(wěn)定性。

這里我順便給大家提供一些我個(gè)人覺(jué)得好使類似的網(wǎng)站吧：

https://developer.hitokoto.cn/sentence/demo.html

https://api.quotable.io/random

封裝數(shù)組

這種方式稍微有點(diǎn)笨重，但是精度更高，我們可以創(chuàng)建一個(gè)數(shù)組。然后里面放的都是我們自己喜歡的一些名言詩(shī)句，這樣不管隨機(jī)出哪個(gè)，都符合我們的口味。

代碼實(shí)現(xiàn)

代碼實(shí)現(xiàn)起來(lái)特別簡(jiǎn)單

文本占位符(插值語(yǔ)法)

首先給要展示的地方做一個(gè)占位符，方便我們使用插值語(yǔ)法替換成我們隨機(jī)生成的句子。

創(chuàng)建數(shù)組

然后創(chuàng)建數(shù)組，并且塞進(jìn)自己喜歡的句子，這里我為了方便區(qū)分多少條句子，每條句子都是開始用了序號(hào)。結(jié)束則是用了句號(hào)。這樣的設(shè)計(jì)是為了我方便使用隨機(jī)數(shù)區(qū)分每條句子

var footerContextList = "0.條條大路通羅馬。1.有得有失，才是人生，切忌忿忿不平。2.你為了愛(ài)所做的一切，不應(yīng)該只是單方面的犧牲；而是你也要發(fā)自內(nèi)心地快樂(lè)，因?yàn)檎嬲龕?ài)你的人，一定會(huì)想辦法讓你過(guò)得更快樂(lè)。3.我從不擔(dān)心我努力了不優(yōu)秀，只擔(dān)心優(yōu)秀的人都比我更努力。4.人都有自己的做人之志和生存之道，最終歸結(jié)為道德底線。5.我覺(jué)得坦途在前，人又何必因了一點(diǎn)小障礙而不走路呢。6.如果有一天他們不能在一起，不是他太壞，而是她太好。7.凡是有良好教養(yǎng)的人有一禁誡：勿發(fā)脾氣。8.志在山頂?shù)娜?，不?huì)貪念山腰的風(fēng)景。9.今天應(yīng)做的事沒(méi)有做，明天再早也是耽誤了。10.如果人沒(méi)有錯(cuò)誤，那鉛筆還用橡皮干什么。11.孤獨(dú)不是給別人機(jī)會(huì)來(lái)可憐你，而是給你機(jī)會(huì)發(fā)現(xiàn)更強(qiáng)大的自己。12.自信是成功的第一秘訣。13.富人靠資本賺錢，窮人靠知識(shí)致富。14.只要充分相信自己，沒(méi)有什么困難可以足夠持久。15.生活壞到一定程度就會(huì)好起來(lái)，因?yàn)樗鼰o(wú)法更壞。16.寬恕節(jié)省了生氣的開支，憎恨的代價(jià)，以及能量的浪費(fèi)。17.擁有青春，就擁有了一份瀟灑和風(fēng)流；擁有青春，就擁有了一份燦爛和微笑。18.你應(yīng)感謝每位讓你蛻變的人無(wú)論方式的好壞。19.誠(chéng)實(shí)是成功者最珍貴的品格。20.世界上沒(méi)有強(qiáng)大的敵人，只有不夠強(qiáng)大的自己。21.知識(shí)是上帝付與給你去雕琢的寶石。22.當(dāng)你說(shuō)離開是為了不讓對(duì)方受到傷害的時(shí)候，你已經(jīng)給對(duì)方造成了最大的傷害。23.死亡教會(huì)人一切，如同考試之后公布的結(jié)果――雖然恍然大悟，但為時(shí)晚矣。24.時(shí)刻回想自己有什么，想要什么，自己為此做了什么。25.我一無(wú)所有，這意味著我擁有無(wú)限可能。26.親愛(ài)的，請(qǐng)給這段愛(ài)一個(gè)開始，我會(huì)用心去寫下屬于我們的故事。27.勝利是不會(huì)向我們走來(lái)的，我必須自己走向勝利。28.把一切平凡的事做好就不平凡；把一切簡(jiǎn)單的事做好就不簡(jiǎn)單。29.劉翔永遠(yuǎn)是我們心目中的飛人，中國(guó)的驕傲，真正的贏家，支持劉翔的送鮮花。30.白天對(duì)于懶惰者等于黑夜，黑夜對(duì)于勤奮者來(lái)說(shuō)等于白天。31.人只要不失去方向，就不會(huì)失去自己。32.小提琴即使斷了一根弦，其余的三根弦還是要繼續(xù)演奏,這就是人生。33.生活就像一杯濃酒，不經(jīng)三番五次的提煉，就不會(huì)這樣可口！34.路在自己腳下，沒(méi)有人可以決定你的方向。35.現(xiàn)實(shí)的城市猶如霧中的風(fēng)景，隱隱地散發(fā)著憂郁的美，承載著沒(méi)有承諾的夢(mèng)。36.也許所謂的幸福結(jié)局，就是抱著永不放棄的希望，繼續(xù)前行。37.莎士比亞說(shuō)：我們這個(gè)年紀(jì)有愛(ài)卻沒(méi)有未來(lái)。38.一切幸福都并非沒(méi)有煩惱，而一切逆境也絕非沒(méi)有希望。39.不嫉妒別人，不封閉自己，人才會(huì)大氣,人大氣了，天地才會(huì)變得寬廣。40.每一種取舍都有不同的終局，就如走不同的路就會(huì)有不同的景致,所以，假如想看殘酷的風(fēng)景，不妨沉思片刻再做決定。";

然后就可以使用隨機(jī)數(shù)分割句子，提取出每一個(gè)單獨(dú)的句子了

 //生成隨機(jī)勵(lì)志句 
        getOneGreatWord(){ 
          var footerContextList = "xxx";
          //生成隨機(jī)數(shù) 0-40 
          var $num = Math.round(Math.random()*40);
          var $rows = footerContextList.split("。"); 
          var start = $rows[$num-1].indexOf('.'); 
          var result = $rows[$num-1].substring(start+1); 
          return  result; 
        },

調(diào)用函數(shù)，替換占位符

我們把上述邏輯封裝成函數(shù)，然后在頁(yè)面加載的事宜被調(diào)用，并且把結(jié)果賦給變量即可

完整代碼如下：

<template>
   <div>
     <p class="footer">{{footerContext}}</p>
   </div>
</template>

<script>
export default {
    name:'Footer',
    data() {
      return {
        footerContext:'', // 隨機(jī)生成的句子
        styleObj:{
          marginTop:'2px'
        }
      }
   },
    methods:{
      //生成隨機(jī)勵(lì)志句 
        getOneGreatWord(){ 
          var footerContextList = "xxxx";
          //生成隨機(jī)數(shù) 0-40 
          var $num = Math.round(Math.random()*40);
          var $rows = footerContextList.split("。"); 
          var start = $rows[$num-1].indexOf('.'); 
          var result = $rows[$num-1].substring(start+1); 
          return  result; 
        },
    },
    mounted() {
      this.footerContext=this.getOneGreatWord()
    },    
}
</script>

<style>
  .footer{
    margin-top: -2px;
    color: rgb(255, 0, 119);
  }
</style>

簡(jiǎn)寫形式

差個(gè)題外話，其實(shí)可以簡(jiǎn)寫，不需要專門生命變量在頁(yè)面加載的時(shí)候使用鉤子函數(shù)綁定，可以直接使用插值語(yǔ)法對(duì)應(yīng)函數(shù)：

這樣簡(jiǎn)化后的代碼就是這樣的：

<template>
   <div>
     <p class="footer">{{getOneGreatWord()}}</p>
   </div>
</template>

<script>
export default {
    name:'Footer',
    methods:{
      //生成隨機(jī)勵(lì)志句 
        getOneGreatWord(){ 
          var footerContextList = "xxx";
          //生成隨機(jī)數(shù) 0-40 
          var $num = Math.round(Math.random()*40);
          var $rows = footerContextList.split("。"); 
          var start = $rows[$num-1].indexOf('.'); 
          var result = $rows[$num-1].substring(start+1); 
          return  result; 
        },
    },
}
</script>

<style>
  .footer{
    margin-top: -2px;
    color: rgb(255, 0, 119);
  }
</style>

查看效果

這樣代碼就寫完了，自己加點(diǎn)小樣式，就了可以查看效果

刷新頁(yè)面

這樣就實(shí)現(xiàn)了我的需求

總結(jié)

這樣的小功能實(shí)現(xiàn)起來(lái)還挺有意思的,如果您有更好的方式實(shí)現(xiàn),歡迎留下評(píng)論文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-464441.html

到了這里，關(guān)于Vue頁(yè)面功能設(shè)計(jì)：隨機(jī)生成一句名言或者勵(lì)志的話的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！