畢業(yè)設(shè)計So Easy：Java Vue SpringCloud實現(xiàn)博客系統(tǒng)

電子設(shè)計聯(lián)盟

5 |4 A. M( v4 C2 f* z點擊上方藍色字體，關(guān)注我們
很多計算機專業(yè)大學(xué)生經(jīng)常和我交流：畢業(yè)設(shè)計沒思路、不會做、論文不會寫、太難了......

針對這些問題，決定分享一些軟、硬件項目的設(shè)計思路和實施方法，希望可以幫助大家，也祝愿各位學(xué)子，順利畢業(yè)！


! d: z' |7 e# ~1 |. f

對計算機技術(shù)感興趣的小伙伴請關(guān)注公眾號：美男子玩編程，公眾號優(yōu)先推送最新技術(shù)博文，創(chuàng)作不易，請各位朋友多多點贊、收藏、關(guān)注支持~

# b3 [. [0 O7 p4 i+ Z' g- k1 Y項目專欄：https://blog.csdn.net/m0_38106923/category_11085518.html
- q4 T1 ]. N. S4 d% m) _+ `博客是互聯(lián)網(wǎng)的一種分享類型的技術(shù)產(chǎn)物，但是如何留著用戶才是重要的，并不都是所有的功能都會涉及到“高并發(fā)”，博客的功能多樣性會增強用戶的體驗，讓用戶對博客的使用產(chǎn)生依賴性，利用從眾心態(tài)合理地開發(fā)增值功能。
1 H* G6 u7 {6 r# J- c
本次系統(tǒng)的開發(fā)采用了主流的微服務(wù)架構(gòu)方式，所以把控每個微服務(wù)的功能相互獨立和完整是“微服務(wù)”系統(tǒng)的關(guān)鍵。由于博客的實現(xiàn)比較簡單，所以只有涉及到“高并發(fā)”的時候需要斷點分析即可，下面將介紹博客系統(tǒng)的一些功能。
7 o, B1 ]' O3 u* S7 g
: M% r. ?4 m+ r$ Z項目工程資源請參見：https://download.csdn.net/download/m0_38106923/87849577
! k' A" j- ]  n! G- W; @: N1
  D% }* e0 m/ U: D/ v項目功能
博客基本的功都具備，例如博客的核心功能：博客的發(fā)表，刪除，瀏覽，評論，點贊等。除了這些，還可以每天定時簽到提升博客的等級，充值會員提升使用體驗。
+ @2 ^* d; L$ ?, i4 l) |& z
個人的安全信息也非常重要，所以我單獨劃分一個微服務(wù)中心來實現(xiàn)。同樣我在每行重要的代碼上都增加了明顯的注釋，這對于我以后的維護和擴充博客功能可以打下堅實的基礎(chǔ)，盡可能地符合軟件設(shè)計開發(fā)原則。
, i% i/ q: |8 ~2 j4 f( N
關(guān)于博客的功能一共涉及到8個微服務(wù)中心：

用戶的個人中心：包含登錄、注冊、智能驗證。

用戶的安全中心：安全信息、手機與郵箱的基本功能和安全認證的接口。

用戶的博客中心：發(fā)表和管理個人的博客，游客可以瀏覽公開的博客。

用戶的文件中心：發(fā)表博客需要用到的圖片和個人用戶的頭像。

用戶的簽到中心：博客的簽到累計的經(jīng)驗值和簽到獎勵。

用戶的會員中心：包含普通會員和超級會員。

用戶的支付中心：VIP的充值功能，個人錢包功能，賬單等。

用戶的搜索中心：根據(jù)摘要或者文章標(biāo)題的關(guān)鍵字搜索指定的博客。
2 [+ D5 J' Y$ {' c1 ^[/ol]
2
項目架構(gòu)設(shè)計


從宏觀設(shè)計來說，各個微服務(wù)中心都是一個moudle，需要注冊到一個高可用的微服務(wù)注冊中心上保證機器信息的正確性。

從微觀運行來說，用戶的請求API都經(jīng)過Zuul，再由Zuul負載均衡分配給需要的微服務(wù)中心，所以Zuul也需要高可用保證用戶流量可以得到回應(yīng)。通過zuul網(wǎng)關(guān)后，請求通過Feign實現(xiàn)微服務(wù)之間數(shù)據(jù)的交互。
$ D# K+ V; }* p7 ]5 b3 ~4 _) ^, o
) }$ n/ r4 e' N當(dāng)發(fā)生錯誤運行時，利用Hystrix的回退機制保護系統(tǒng)的穩(wěn)定運行，不會發(fā)生級聯(lián)占用效應(yīng)，保證每一個請求API都可以得到響應(yīng)。當(dāng)發(fā)生網(wǎng)絡(luò)不可用的情況下，需要觸發(fā)用戶的補償機制，當(dāng)出現(xiàn)不可知的錯誤時，也可以直接管理機器的集群來維護系統(tǒng)的穩(wěn)定運行。
8 r# n0 t( n+ M0 z4 P* x- s' M/ k3
項目數(shù)據(jù)庫設(shè)計
對于用戶來說，需要輸入賬號和密碼，若是不存在可以注冊自己的賬號和密碼。注冊的時候提供30分鐘填寫博客信息的有效時間，不填寫則直接登錄。需要設(shè)置個人的手機和郵箱來綁定安全認證，若想要開通我的錢包則需要實名注冊，同樣也包含校園認證。丟失了個人信息，則可以用身份證申訴。每天凌晨開始可以開始簽到，根據(jù)會員的不同增益不同，簽到的持續(xù)天數(shù)不同經(jīng)驗值累加也不同。會員的開通只包含支付寶，賬單是每筆消費的記錄。核心表是用戶博客之類的表，文章均存在數(shù)據(jù)庫，不過ElasticSearch也保存了文章的標(biāo)題和摘要。每個用戶可以評論他人的文章，私密的文章不會出現(xiàn)，會員的文章會出現(xiàn)在會員專區(qū)。
1 p* E+ A% C4 b3 U5 ~1 G2 ^( g
博客一共含有8個主功能，所以一共涉及用戶表，用戶信息表，安全表，頭像表，簽到表，簽到獎勵表（兩種獎勵），會員表，錢包表，訂單表，博客表，博客分類表，博客標(biāo)簽表，博客圖片表，博客的評論表，點贊表和收藏表17個表。
6 z$ T- T- h. E" J5 [+ D1 B
- a8 ^/ w: G$ A0 r4 n  V

( s) A& R- F5 a9 ]5 W+ R' |' Q0 c4
, @" e/ t6 p$ ^& ^項目架構(gòu)實現(xiàn)
  S" }2 \! `. S4.1、Vue架構(gòu)的實現(xiàn)
前端IDE采用的是WebStorm，博客的Vue主要分布如下圖所示：

, L* X1 V# q/ U8 G, a
+ x) C1 p- B9 F4 i* H* J5 n( p* G
Alert.js是自定義重構(gòu)代碼的漂亮提示框。axios.js是封裝好的axios請求HTTP函數(shù)，components是Vue文件存儲位置，也是Vue的組件，index.js是管理前端路由url的跳轉(zhuǎn)，利用components組件與url的控制。store.js是組件狀態(tài)管理的文件，由于采用的LocalStorage本地存儲所以并不是主用。main.js是全局文件也是最重要的文件，管理Vue的全局配置。static/img中保存的是博客所用的圖片。
不管是用IDE創(chuàng)建的項目還是采用常規(guī)腳手架創(chuàng)建的vue項目，其項目都會在根目錄生成一個package.json文件，這個文件與后端的“pom”相似，這個文件包含所需要的各種包，還包含項目的配置的名稱與版本對應(yīng)。

博客項目中的package的完整dependencies代碼如以下所示：
$ @! X; `0 j1 {- T) V
( H% P& a: e+ T- U

"dependencies": {    "axios": "^0.19.0",    "bootstrap": "^3.3.7",    "echarts": "^4.6.0",    "element-ui": "^2.12.0",    "font-awesome": "^4.7.0",    "github-markdown-css": "^4.0.0",    "highlight.js": "^9.18.1",    "jquery": "^3.4.1",    "marked": "^0.8.0",    "mavon-editor": "^2.7.7",    "popper.js": "^1.12.5",    "showdown": "^1.9.1",    "v-charts": "^1.19.0",    "view-design": "^4.0.2",    "vue": "^2.5.2",    "vue-drag-verify": "^1.0.6",    "vue-nocaptcha": "^0.2.8",    "vue-puzzle-vcode": "^1.1.2",    "vue-qr": "^2.2.1",    "vue-router": "^3.0.1",    "vue-schart": "^2.0.0",    "vue-splitpane": "^1.0.6",    "vuex": "^3.1.2" }
4.2、SpringCloud架構(gòu)的實現(xiàn)
" F7 O0 v+ j, Y* o+ w博客Maven的整體微服務(wù)中心實現(xiàn)的結(jié)構(gòu)圖如下所示：
# E, g) c! o6 V1 n5 E5 [1 p

  T- H) o/ ~: A/ g2 ]9 s% @
+ K1 R9 {8 j" E% F! {; P" b* |SpringCloud是基于Java語言的工具集，SpringCloud具備拿來就用的特性，可以節(jié)省開發(fā)的配置時間，它可以在Docker等云環(huán)境中開發(fā)和部署。SpringCloud的組件比較豐富，博客使用了Eureka，Zuul，F(xiàn)eign，Htsrrix，trubine，Zipkin微服務(wù)組件。組件可以自由地選擇，不過需要解決SpringBoot與SpringCloud之間的版本依賴才能使用。博客涉及到的Java的JDK版本是1.8，SpringBoot的版本是Spring Boot 1.5.9.RELEASE，SpringCloud的版本是Edgware SR4。后端的IDE采用的是IDEA，Maven的版本為3.6.1，任何一個版本的更改都可能會導(dǎo)致兼容不一致。
; d% L$ O1 }6 t+ w: a* U, j1 L
% o) g2 G7 [* n4.3、博客的高可用的實現(xiàn)
' R6 k4 G8 \0 a; {/ \; D博客使用了兩個Zuul并且注冊到高可用的服務(wù)發(fā)現(xiàn)中心來構(gòu)造Zuul高可用集群。Eureka是所有微服務(wù)的注冊中心，并且自己本身也是微服務(wù)不過需要禁止自我注冊。Eureka注冊中心包含每個微服務(wù)的名稱，IP，端口等，由于因為的單個節(jié)點的微服務(wù)可能會發(fā)生不可用的情況下導(dǎo)致系統(tǒng)發(fā)生停機，所以采用高可用的微服務(wù)注冊中心。讓兩個(多個)服務(wù)發(fā)現(xiàn)組件相互注冊以達到可以保持其它微服務(wù)的調(diào)用，維持整個系統(tǒng)的高可用性，整個博客的Eureka服務(wù)注冊中心圖如下圖所示：



DS Replicas代表兩個模塊加載模擬單機代替高可用的實現(xiàn)，不過需要修改本地Host來模擬真實多機高可用的效果。每個微服務(wù)都具有自己的虛擬主機名以及狀態(tài)來描繪微服務(wù)的顯示情況。每個微服務(wù)之間通過與服務(wù)注冊中心每30S心跳傳遞保證服務(wù)可用性。默認90S沒有收到心跳則會注銷該微服務(wù)。EurekaServerOne與EurekaServerTwo為兩個微服務(wù)注冊中心，兩者相互注冊到對方的服務(wù)中心上來保證Eureka的高可用穩(wěn)定，從而使每一個博客的請求都可以得到響應(yīng)。

3 ?( G* |9 G6 k/ Z  @: B* n3 ^' O5
用戶的個人中心
  t" y2 q7 J  w0 M# g2 v- Q用戶的個人中心相當(dāng)于博客的大門，用戶的首次流量都經(jīng)過此處，首次負載均衡調(diào)用也是基于這個中心開始，主要涉及到用戶的登錄與注冊的基本功能，在登錄上排除惡意的攻擊與干擾，保證博客登錄的穩(wěn)定，從而保證系統(tǒng)的穩(wěn)定。這個中心核心功能就是權(quán)限驗證，保持登錄的標(biāo)志，它是保持業(yè)務(wù)穩(wěn)定的重要因素，后續(xù)的實現(xiàn)會在以上所述的三個重要功能展開來講。
! g: O: C( v' x1 s) l% `
* i- [) `9 y1 G+ b3 O5.1、登錄的智能驗證
" {" U' x9 {' {$ `Vue整合阿里云智能驗證時，需要注冊布局組件來動態(tài)加載JavaScript文件，不然無法使用阿里云的智能組件，前端登錄智能驗證的核心代碼如以下所示：
6 C+ Z" Z2 \+ Q* h% l7 ~* w1 Y* U- ^
' f' p  q. S. N/ F

//動態(tài)加載阿里云的JavaScript文件src="//g.alicdn.com/sd/nvc/1.1.112/guide.js" @loaded="initCaptcha">
//注冊局部組件來加載阿里云的JavaScript文件components: {            "remote-js": {                render(createElement) {                    const self = this;                    return createElement("script", {                        attrs: { type: "text/javascript", src: this.src },                        on: {                            load() {                                self.$emit("loaded");                            }                        }                    });                },                props: {                    src: { type: String, required: true }                }            }        },
7 @, ]5 l8 q+ N! _//點擊智能驗證的封裝函數(shù)            initCaptcha() {                let _this=this;                let ic = new smartCaptcha({                    renderTo: '#sc',                    width: 350,                    height: 42,                    default_txt: "請點擊驗證按鈕",                    success_txt: "博客登錄驗證成功",                    fail_txt: "點擊按鈕重新刷新登錄驗證",                    scaning_txt: "智能檢測中",                    success: function (data) {                        console.log(NVC_Opt.token);                        console.log(data.sessionId);                        console.log(data.sig);                        _this.aliToken=NVC_Opt.token;                        _this.sessionId=data.sessionId;                        _this.sig=data.sig;                    },                });                ic.init(); },/remote-js
5.2、博客的登錄注冊
0 j' ?6 i1 P# N) J3 n登錄是一個系統(tǒng)的重要的功能，也是個人隱私的重要體現(xiàn)，拿常見的登錄有郵箱，手機，賬號或，語音或者二維碼登錄，不過不管通過哪種登錄，個人信息的安全都應(yīng)該得到保護，保護個人隱私重要的是從個人做起，拒絕非法點擊與輸入。

拿本次博客的登錄來說只需要驗證賬號和密碼就行，個人登錄是不會進行權(quán)限驗證。注冊成功會保持30分鐘的權(quán)限驗證，關(guān)于權(quán)限驗證會在標(biāo)題5-2-3中提到，以便后面的博客信息的操作，超過則需要重新登錄去博客的個人中心填寫博客信息。
% n. @$ W. H# d, s博客的登錄與注冊的頁面如下圖所示：
: ?8 I! Y0 R, y$ f9 A  J

5 J4 h/ Z, p1 L
% q: m3 ^- W5 g( O4 P5 k; ^博客登錄的用戶名需要以英文子母開頭，用戶名和密碼均不可以超過16位，注冊保證兩次登錄密碼正確就可，在此不再貼出圖片累述。
9 R0 {% o. v7 g1 M0 u" o0 C
3 n5 j, L6 _! o8 Z6 O2 D! _1 _5.3、登錄的權(quán)限驗證
! s9 H, c  S/ e. o  |  Z( r登陸權(quán)限控制是每個系統(tǒng)都應(yīng)必備的功能，是保持登錄狀態(tài)的重要實現(xiàn)。微服務(wù)所有的權(quán)限驗證均在一個module上，Token消時則直接回退給前端status 404失敗碼，成功則是執(zhí)行對應(yīng)的業(yè)務(wù)邏輯，注意登錄的博客是不需要權(quán)限驗證。
' K; Z) W3 `9 U0 X
博客使用了前后端攔截器攔截Token(登錄成功的認證碼)，所以后端需要定義一個token驗證注解，用攔截器攔截系統(tǒng)的url請求，再進行攔截用戶的API請求，最后再驗證傳過來的token與Redis中token值是否一致，效驗通過才可以正常訪問。當(dāng)用戶登錄成功博客后，后端返回token數(shù)據(jù)。token具有存在時間，如果用戶一段時間后不在線或者操作的話，則token會失效，用戶保持登錄時，則不會過期。

8 V9 ~9 X9 i* `  mRedis中會以用戶的登錄賬號作為與token關(guān)聯(lián)的認證，有效的token碼可以取出用戶的賬號，然后再進行業(yè)務(wù)邏輯。這些redis中的key都可以自行設(shè)置一些時間，不過前端只保存token值，二次登錄會覆蓋Redis中的token值。
. P0 p  Q, L+ k2 I1 }

5 N% g/ o  }' ^8 e
3 N" ]& I) |2 d0 g! [6 M5 j權(quán)限驗證相當(dāng)于系統(tǒng)的第一道大門，如今的安全框架越來越豐富，例如SpringSecurity，Shiro，OAuth等，shiro->security->oauth的上手難度逐漸提升。若是需要對密碼加密的，可以需根據(jù)個人開發(fā)自行配置使用對應(yīng)的安全框架。
6
8 k3 [/ Z1 [7 [' `/ O用戶的安全中心
6 Z, C, S" O! q& s# a6 g6.1、用戶的安全布局
安全中心包含郵箱，手機，身份證，校園認證和其它微服務(wù)中心需要用到的認證接口。郵箱采用QQ郵箱，開啟smtP 587端口發(fā)送郵箱驗證碼。手機采用阿里云短信API服務(wù)。兩者的驗證碼存在的時間均為1次失效且存在10分鐘。身份證需要手機號的驗證。校園認證的名字需要和身份證的名字一致。除了綁定一些安全的服務(wù)，還包括三種修改密碼的方式，原始密碼修改新密碼，郵箱重置密碼，手機重置密碼，身份證重置密碼。個人申述包括手機號重置郵箱，舊手機更換新手機，身份證重置手機。



安全中心包括用戶的規(guī)則規(guī)章，博客旨在分享自己的動態(tài)和經(jīng)驗給他人，不可以辱罵他人，以及不遵守國家的法律法規(guī)。本次博客的其它微服務(wù)中心所需要的手機認證接口均由這個微服務(wù)中心提供。

6.2、用戶的郵箱注冊
博客采用的是免費的QQ郵箱，郵箱的yml配置如下：
  }5 @9 z$ Z: Z- V/ j4 q

mail:    host: smtp.qq.com    port: 465或587    protocol: smtp    username: 個人的郵箱    password: 郵箱的SMTP的密碼，可在郵箱的賬戶中開啟SMTP服務(wù)    default-encoding: UTF-8    properties:      mail:       debug: true   #控制臺開啟運行日志
QQ郵箱(郵箱與手機的六位驗證碼共用)發(fā)送驗證碼按鈕的原代碼如以下所示：
, S3 k# h% t; ?2 s2 C
) V- ^; Y4 C$ A! Y

//自動生成的驗證碼,驗證碼的位數(shù)可以自己設(shè)定    public static String generateVerifyCode(int verifySize, String sources){        if(sources == null || sources.length() == 0){            sources = EMAIL_CODES;}        int codesLen = sources.length();        Random rand = new Random(System.currentTimeMillis());        StringBuilder verifyCode = new StringBuilder(verifySize);        for(int i = 0; i             verifyCode.append(sources.charAt(rand.nextInt(codesLen - 1)));}        return verifyCode.toString();}
# W% ]3 r: ~0 r" J* I, f4 w* X綁定QQ郵箱JavaScript的代碼如以下所示：

! s- ^: N1 M0 W, \& r

//綁定郵箱的發(fā)送registerEmail(){let emailPatter=/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;if (this.email=== '' || !emailPatter.test(this.email) || this.emailYzm === ''){this.$message.error('輸入內(nèi)容不能為空且郵箱要符合格式')              }else {      this.$http.post('/whc/blog-customer-user/emailButtonRegister',{                      email: this.email,                      emailYzm: this.emailYzm,                  }).then(res=>{                      console.log(res);                      if (res.data.success === true){                          this.$notify({                              title: '成功',                              message: '郵箱綁定成功',                              type: 'success',                          });                  window.localStorage.setItem('myEmail',res.data.message);                          this.reload();                          //this.$router.go(0);                      }else {                          this.$message.error(res.data.message);                      }                  })              }          }
) H9 J$ I# _, ^+ R后端發(fā)送QQ郵箱注冊的驗證碼如以下所示：

//后端QQ郵箱發(fā)送驗證碼的按鈕服務(wù)@Override@Transactional(isolation = Isolation.READ_COMMITTED, propagation = Propagation.REQUIRED)public void sendEmailCode(String email) {    //生成郵箱隨機的6位驗證碼    String emailYzm= generateVerifyCode(6, EMAIL_CODES);
; J7 `' f6 X& K  G# P//From-to,主題和信息.    SimpleMailMessage simpleMailMessage = new SimpleMailMessage();    simpleMailMessage.setFrom(FORM);    simpleMailMessage.setTo(email);    simpleMailMessage.setSubject(SUBJECT);    simpleMailMessage.setText("你的郵箱驗證碼是: "+emailYzm+"本次驗證碼    會在10分鐘后失效，請立馬使用。");    //發(fā)送郵箱驗證碼       javaMailSender.send(simpleMailMessage);
$ e0 K; e) ~3 p, d/ C% {3 C    //開啟Redis存入email和yzm    Jedis jedisEmail = new Jedis("localhost", 6379);    //設(shè)置郵箱(key)-驗證碼(value)的綁定，秒為單位，存在時間為10分鐘。    jedisEmail.set(email,emailYzm);    jedisEmail.expire(email,600);    //設(shè)置驗證碼(key)-郵箱(value)的綁定，秒為單位，存在時間為10分鐘。(雙向綁定可以判斷失敗存入的驗證碼,雙向保險)    jedisEmail.set(emailYzm,email);    jedisEmail.expire(emailYzm,600);}
+ c3 t& N3 Z0 v1 I( z6.3、用戶的手機注冊
發(fā)動短信的前端JavaScript的代碼如以下所示：

//前端綁定手機phoneRegister(){ let phonePatterRegister=/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;             if (this.phone === '' || this.phoneYzm === '' || !phonePatterRegister.test(this.phone)){                  this.$message.error('手機或者驗證碼不符合規(guī)則');              }else {                  this.$http.post('/whc/blog-customer-user/phoneRegisterButton',{                      phone: this.phone,                      phoneYzm: this.phoneYzm,                  }).then(res =>{                      console.log(res);                      if (res.data.success === true){                          this.$notify({                              title: '成功',                              message: '手機綁定成功',                              type: 'success',});                         window.localStorage.setItem('myPhone',res.data.message);                          this.reload();                          //this.$router.go(0);                      }else {                          this.$message.error(res.data.message);}})}}

/ g3 P4 h1 u) Z# W" _3 H$ c( @后端發(fā)送驗證碼的代碼如以下所示：
1 m0 P! U/ ~% R; A: u0 L. P/ {

//生成手機的驗證碼        String phoneYzm= generateVerifyCode(6, EMAIL_CODES);        //阿里云發(fā)送短信的API        DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "個人隱私",                "個人隱私");        IAcsClient client = new DefaultAcsClient(profile);        CommonRequest request = new CommonRequest();        request.setMethod(MethodType.POST);        request.setDomain("dysmsapi.aliyuncs.com");        request.setVersion("2017-05-25");        request.setAction("SendSms");        request.putQueryParameter("RegionId", "cn-hangzhou");        request.putQueryParameter("PhoneNumbers", phone);        request.putQueryParameter("SignName", "個人隱私");        request.putQueryParameter("TemplateCode", "個人隱私");        request.putQueryParameter("TemplateParam", "{\"codeab\":\""+phoneYzm+"\"}");        //發(fā)送注冊手機的驗證碼        try { CommonResponse response = client.getCommonResponse(request);            System.out.println(response.getData());        } catch (ServerException e) {            e.printStackTrace();        } catch (ClientException e) {            e.printStackTrace();}        //開啟Redis存入phone和yzm        Jedis jedisPhone = new Jedis("localhost", 6379);        //設(shè)置手機(key)-驗證碼(value)的綁定，秒為單位，存在時間為10分鐘。        jedisPhone.set(phone,phoneYzm);        jedisPhone.expire(phone,600);        //設(shè)置驗證碼(key)-手機(value)的綁定,秒為單位，存在時間為10分鐘。(雙向綁定可以判斷失敗存入的驗證碼,雙向保險)        jedisPhone.set(phoneYzm,phone);        jedisPhone.expire(phoneYzm,600);}
6.4、用戶的安全認證
% J. ?2 V- m- q6 `1 o- J提供安全的認證有身份認證與校園認證，當(dāng)然只是表單的提交，真實的認證需要有關(guān)部門的配合，在此只是用來模擬，校園認證需要與身份證的名字保持一致，否則無法通過。
2 ?. M1 k' ^. o! m3 i
) X; _3 z9 e3 T$ V. B+ U6 e  i* k9 V
1 H, Y+ o' f8 l; j2 @: L5 J8 N

! @* A) j7 c! }; [
  w9 A# K% ~, U
$ Y8 U+ K' b, `* M& O6.5、用戶的密碼安全
, L# o9 p, u* ]9 Y% _6 p( B當(dāng)個人安全賬號發(fā)生異常，可以提供修改密碼，也可以重置密碼。

1 l( F$ @" r% r, k5 m( x& |

. q/ }, l( [( I) T% c# G
0 q) y% Q# g4 t5 j0 s: e& w8 e

6.6、用戶的賬號申訴
( s  `* |1 [! P可以使用手機號重置郵箱，也可以使用舊手機號更換新手機號。如果個人博客的手機號安全信息被盜取，手機號也可以被重置，但是需要借助身份證申訴，不過一天只可以成功申訴一次。
, _7 b' H7 Z+ u/ J
3 A2 h! O2 h9 d5 S' d' V1 H, r$ T
6 O9 m- H  Y) r: }1 h
, e1 }1 j$ ]$ ?+ m7
用戶的文件中心
7.1、用戶的頭像存儲
當(dāng)用戶注冊的時會需要選擇個人的頭像，上傳的頭像只能是JPG格式且大小不能超過2MB，且上傳前會先查詢數(shù)據(jù)庫中的頭像圖片名是否已經(jīng)存在，存在的話直接會先刪除OSS中舊圖片，再插入新圖片，如果不存在的話，直接插入到OSS文件服務(wù)器中。頭像的存儲流程由前端發(fā)起file傳給后端，后端接受file頭像，利用二進制傳給OSS文件服務(wù)器。服務(wù)器再傳過來頭像的外網(wǎng)URL地址，此時修改顯示時間為10年再返還給用戶，最后把頭像外網(wǎng)URL地址保存到自己的LocalStorage本地。
; D% f: r% @8 [


- V' i  Y' Z6 X, ^& B7 r7.2、博客的圖片存儲
* ~: K" n$ X6 w9 K' i發(fā)表博客時文章中會包含圖片，前端獲取后端的博客圖片url綁定在前端文章中顯示，同樣url也在文章內(nèi)容中一起保存到數(shù)據(jù)庫中。上傳圖片和上傳頭像不同，文章需要用到的圖片可以有多張，不存在覆蓋問題。需要根據(jù)個人的文件服務(wù)器的存儲量來權(quán)衡上傳圖片大小。

, N4 ?% q8 m7 b+ ^, g" W
) A; r* m4 L9 w
: Z, l7 X5 a% P. J' z
8
" ^  W+ P, y+ O) b+ a: L; x5 S# r用戶的簽到中心
! N. C/ i/ U7 o$ d用戶的簽到等級代表用的可以使用的權(quán)限，當(dāng)簽到累計天數(shù)和連續(xù)天數(shù)達到獎勵階段時觸發(fā)一鍵領(lǐng)取獎勵按鈕，每次獎勵每個賬號只可以領(lǐng)取一次。整個簽到的等級由經(jīng)驗值決定，但是每天獲得經(jīng)驗值為1500。簽到的經(jīng)驗值還會進行快速排序排名返還給前端，提升競爭效果，同時會員增益機制也會導(dǎo)致不同的疊加效果。

# o7 N4 ~1 @8 S9 Q7 c  y; `每天0點之前只能簽到一次，過完0點后Redis中限時憑證失效既可以再次簽到，簽到的經(jīng)驗值采用二分查找和快速排序算法進行計算最后的排名返還給用戶。

簽到按鈕的計算代碼如以下所示：
) u; }& C$ M; C1 y
( Z$ p+ l6 U$ {  S# r

//先判定是否redis中是否存在限時憑證        Jedis jedis = new Jedis("localhost", 6379);        if (jedis.get(id.toString()) == null) {            //獲取明天0點的時間并且設(shè)置限時憑證            try {                SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//設(shè)置日期格式                Calendar cal = Calendar.getInstance();                cal.add(Calendar.DATE, 1);//這里改為1                Date time = cal.getTime();                String tomorrow = new SimpleDateFormat("yyyy-MM-dd 00:00:00").format(time);                String now = df.format(new Date());                Date d1 = df.parse(now);                Date d2 = df.parse(tomorrow);                //小時和分鐘和秒相減                Long hour = ((d2.getTime() - d1.getTime()) / (60 * 60 * 1000));                Long minute = ((d2.getTime() - d1.getTime()) / (1000 * 60));                Long second = ((d2.getTime() - d1.getTime()) / 1000);                //最后存在的秒時間        int total = (hour.intValue()) * 3600 + (minute.intValue()) * 60 + second.intValue();                //控制臺觀看                logger.info(tomorrow + "/n" + now + "/n" + total);                //設(shè)置redis中的簽到過期時間                jedis.set(id.toString(), "今天簽到已經(jīng)完成!");                jedis.expire(id.toString(), total);                return SUCCESS;            } catch (ParseException e) {                e.printStackTrace();}        }        return FAILED;
經(jīng)驗值的排名的代碼如以下所示：

3 H4 `+ d; S( S5 L

//先查詢所有的經(jīng)驗值        ListexAll=userSignMapper.selectExperience();        //先將List集合轉(zhuǎn)為Long[]數(shù)組        Long[] a=exAll.stream().toArray(Long[]::new);        //可以使用轉(zhuǎn)換工具類，也可以自己動手寫Long數(shù)組的轉(zhuǎn)換        long[] quickSort = ArrayUtils.toPrimitive(a);        //快速排序排序成從小到大的順序        sortService.quickSort(quickSort,0,quickSort.length-1);        //利用二分查找算法查找經(jīng)驗值所在的索引位置        int position=sortService.binarySearch(quickSort,myExperience);        //最終排名，倒序輸出。        int lastPosition=quickSort.length-position;        //控制條輸出你的排名        logger.info("你在經(jīng)驗值排行榜中的名次是:"+lastPosition);        //返回給前端的排名        return lastPosition;
9
用戶的會員中心
由于會員中心與支付中心聯(lián)系比較密切，所以兩者的中心可以結(jié)合起來看作一個中心來觀看。用戶的會員中心包括普通會員和超級會員，每種方式存在三種收益方式，年費季費和月費，支付成功后均由負載均衡執(zhí)行業(yè)務(wù)邏輯。由于支付不屬于這個module中，所以這個module只是由其它微服務(wù)調(diào)用直接完成業(yè)務(wù)邏輯。
, o( V$ }" r; r# B2 `( `
1 E$ _8 s- A% m" i6 O+ x" `6 A
$ v( A( L+ f2 V
10
6 _" E0 q+ V3 }: ]. m用戶的支付中心
未完成實名認證時頁面會轉(zhuǎn)到實名認證中，當(dāng)完成實名認證時，首次進入我的錢包中心會觸發(fā)設(shè)置支付密碼，當(dāng)設(shè)置成功后，支付以及綁定個人銀行卡均需要用到支付密碼�？梢杂门f支付密碼修改新密碼，也可以手機重置手機密碼。還可以綁定自己的銀行卡，需要有關(guān)部門的配合。本次博客只允許建設(shè)銀行，工商銀行和中國銀行，且每張銀行卡只允許綁定一張。利用v-charts組件把個人的時間段的消費情況以條形圖展現(xiàn)給用戶觀看。
& J' v( H: J, ?; k3 ^( @

2 F3 r2 e2 n8 n9 Y" w& c! `3 P! k
( _% T' U3 s* E6 I4 ]
9 o7 P* {6 s& r! r& `
5 ]+ ~6 r7 J! O/ a& G, ^  G4 T
) b- z3 M- R4 Y1 T. w- R當(dāng)用戶開通了我的錢包后，可以選擇是否進行余額充值，賬戶余額暫時只可以用支付寶充值。所有關(guān)于金額的操作均需要在后端安全操作，前端只用來顯示數(shù)據(jù)，必須使用數(shù)據(jù)庫中的金額。
% e8 i: C) g1 T2 n0 l+ C1 c: Y! o$ C
+ {. R) C& n4 q8 h/ x3 J4 s3 e
# v; b) h5 o, U* W9 e$ X$ c% ]3 u$ y# r
( ~8 W, b- P9 K# a# i/ k
& ?  }& B4 R  J  G
密碼為6位有效數(shù)字，可以使用原密碼更換新支付密碼。
# Q2 N& _, u! K( |0 d* C& Q4 \* x
) g& a  y* W# C" t( h
9 s! N3 m1 o$ x% J# l, C9 Q" I
$ u- L) E" M. m; F) y& O& G
: M6 n9 o% `) F5 e
; ?( z: G& [% }( G  U
" I" ?( S: M) w8 @7 v8 `銀行卡姓名需要與實名認證的姓名一致。

' n1 R. S$ \; s+ J% Y' G

+ S9 K) M9 {1 k) z, F
- E3 I7 s" o. A/ d8 @2 W

5 f3 i1 k( v- c" ]1 o+ P* i
) T% T& Z+ p& H4 z0 A- ~2 r
& n2 t: |0 [+ {4 s* X1 p+ w$ x
支付中心包含普通會員和超級會員，由于普通會員采用支付寶原始的方式，而超級會員采用支付寶的二維碼方式，所以兩者會在調(diào)用的時候會有所不用。
& ^: x$ K. V  k% N  L* K/ D& z
" y; x4 j% b& ?4 T! b9 u7 a

賬單中心是分頁展示給用戶觀看，提供當(dāng)前頁面，月份和全部的賬單打印Csv。前端可以直接把后端的數(shù)據(jù)直接打包Csv，也可以自行后端打包Csv數(shù)據(jù)到本地。
" {& K! e8 c7 z$ [5 t  ?# x


6 d+ R: ^6 Z% X
; q8 h5 m: ~! j6 ?( l1 s1 j# P! C

11
! ]( T( [% f) S$ d7 s0 c用戶的博客中心
11.1、用戶的訪問主頁
1 u$ s3 ]3 m, f% X編寫博客是一個展示自我的機會，通過這個機會，可以增強個人的表達能力，還會結(jié)識一些五湖四海的博友。通過他人文章的學(xué)習(xí)，我們還可以增強個人的知識度和眼界。綜上所述，用戶的博客中心是博客系統(tǒng)的最核心功能。

用戶可以分享自己的博客動態(tài)，博客旨在分享自己所學(xué)所知給他人，或者解決他人的困難。博客中心包含發(fā)表博客，查看個人博客，刪除博客，更新個人博客。非本人也可以觀看他人的博客，也可以評論他人的博客，所以需要用到分頁功能和輪滑加載功能配合前端展示不是私密的博客給他人觀看。每個用戶所看到的博客都是最新發(fā)的博客，可以與他人進行學(xué)習(xí)交流。每個發(fā)表者要尊重他人的知識勞動成果，切勿抄襲并且發(fā)表不適當(dāng)?shù)奈恼�，做一名合格的博友�?br />   U( x+ A* C8 K# U( _
當(dāng)用戶輸入賬號密碼登錄后，可以看到博客的主頁如下圖所示，主頁面可以看到發(fā)表人和發(fā)表的文章，點擊文章可以進入文章的主頁面進行學(xué)習(xí)交流。
5 C, b0 o, o8 g

1 n/ |- P9 g& X( q8 ]5 o1 [
11.2、用戶的文章中心
' A) z0 r' Q1 g; q用戶的文章微服務(wù)中心的功能包含發(fā)表，查看，修改，刪除，用戶可以控制自己發(fā)表過的每一篇文章。



關(guān)于文章的增刪改會在后續(xù)標(biāo)題中得到詳解，在此只放出用戶的個人文章中心由圖可以看出是用戶發(fā)表過的全部文章，后端利用的是先分頁后List方式，最終傳送前端進行ListItem遍歷顯示即可。
$ e/ n$ T5 j* q$ _% J- l, c5 S
+ o% }8 ~0 r9 c. e1 K1 \由于也使用了Elasticsearch把文章分類作為存儲索引，但是重要的文章信息均放在數(shù)據(jù)庫中，在此只提一下，到后續(xù)的分類搜索中會詳細說明。
! P8 i5 y: x* I# R
11.3、發(fā)表個人的博客
文章的的發(fā)布有許多選擇，自己可以選擇文章的分類和文章的標(biāo)簽，同樣也可以設(shè)置文章的可見性。用戶可以設(shè)置文章的標(biāo)簽，標(biāo)簽用來顯示給游客看，用來文章的標(biāo)識認證，還可以設(shè)置文章的分類，類型和保密性，每種文章的分類會發(fā)布到那個分類的專區(qū)。文章類型有三種，若是轉(zhuǎn)載和翻譯他人的文章需要著名地址，保護他人的知識勞動成果。只有具備會員資格才可以發(fā)送到會員專區(qū)，但是轉(zhuǎn)載的文章不可以發(fā)送到會員專區(qū)，發(fā)表文章時可參考紅字注意事項。



博客的發(fā)表的核心原代碼如以下所示：
/ y' \0 W( e+ O" |# r$ [

//獲取文章的摘要markdown格式-html-summaryString words= StringFromHtmlUtil.getString(MDTool.markdown2Html(blogFrontPublish.getArticleContent()));//獲取文章的摘要且摘要長度為255個字符String summary = words.length() > 240 ? words.substring(0, 240) + "......" : words;//去除轉(zhuǎn)換后存在的空格String tagTar = blogFrontPublish.getArticleTag().replaceAll(" ", "");//將文章的分類寫入分類表然后再插入整篇文章UserArticleCategory userArticleCategory=userArticleCategoryMapper.findAllByCategoryName(blogFrontPublish.getArticleCategory());if (userArticleCategory==null){    userArticleCategory=new UserArticleCategory();    userArticleCategory.setCategoryArticles("");  userArticleCategory.setCategoryName(blogFrontPublish.getArticleCategory());//返回獲取到的自增ID    userArticleCategoryMapper.insert(userArticleCategory);}//把標(biāo)簽寫入數(shù)據(jù)庫for (String tag :tagTar.split(",")) {    if (tag.replaceAll(" ", "").length() == 0) {        //單個標(biāo)簽只含空格        continue;}    UserArticleTag userArticleTag = userArticleTagMapper.findAllByTagName(tag);    if (userArticleTag==null){        userArticleTag=new UserArticleTag();        userArticleTag.setTagName(tag);        userArticleTag.setTagArticles("");        userArticleTagMapper.insert(userArticleTag);}//轉(zhuǎn)換后的值再更新得到文章表的主鍵   userArticleTag.setTagArticles(userArticleTag.getTagArticles()+userArticle.getId()+",");  userArticle.setArticleTagsId(userArticle.getArticleTagsId()+userArticleTag.getId()+",");   userArticleTagMapper.updateTagNameAndTagArticlesById(userArticleTag.getTagName(),userArticleTag.getTagArticles(),userArticleTag.getId());}
11.4、修改個人的博客
若是需要修改個人的博客，需要進入圖5-33的個人博客中心，查看發(fā)表的指定文章進入到指定文章的頁面，點擊編輯按鈕，不是本人的文章不會出現(xiàn)編輯按鈕，博客的編輯按鈕效果圖如下圖所示：

/ n0 ~/ _& I$ O7 Q

可以修改文章的所有的條件與內(nèi)容。
3 d( X$ |) g: O* e


& l- V0 W+ U, l/ f) z4 y1 N% Z文章的發(fā)表與修改的源碼不同在于要刪除之前的原屬文章的分類Id與標(biāo)簽Id的關(guān)聯(lián)，再進入文章的插入，不過文章的修改也會觸發(fā)在搜索引擎上的文章信息修改，搜索引擎上的文章信息也會跟著更新，保持搜索到最新的數(shù)據(jù)。
$ w" G+ f4 P, e  Y
11.5、刪除個人的博客
% a1 E( T! ]! \3 `- D& S( F刪除個人的博客需要刪除數(shù)據(jù)庫和搜索引擎上的文章，刪除文章后不可恢復(fù)。
& r( m5 z9 e$ K( u

7 g7 t# o" j) o5 V2 ~% O& O/ n
1 S. ]7 p8 O9 x% X11.6、用戶的文章布局
完整博客的顯示方式是采用GitHub的代碼高亮布局，可以是用戶看到自己的博客是嵌入式的面板，可以給予人一種清爽的感覺。由于采用Vue，可以不用動態(tài)渲染html，使用v-html命令就可以把后端傳過來的數(shù)據(jù)利用showdown轉(zhuǎn)換器轉(zhuǎn)換給html直接顯示給用戶看。



11.7、點贊用戶的文章
互聯(lián)網(wǎng)時代每個人都或許都點贊過他人分享的文章，本次設(shè)計是博客所以會涉及到點贊，當(dāng)用戶太多時需要考慮到高并發(fā)的情況。正常情況的點贊并不會給后端造成多大的負載壓力，如果是熱門的文章博客，用戶點贊與取消點贊，評論，分享等，對于后端來說這些都會帶來巨大的流量，如果后端接口支撐不住，前端得不到響應(yīng)，前端無法響應(yīng)就會返回404，會導(dǎo)致用戶體驗極差。
- Y) b7 r# y/ V


- B8 U! y. D+ k8 r由上圖可知，核心的模塊就是點贊與取消點贊，利用Redisson把多個用戶的請求利用分布式鎖分開請求，利用“緩存”保護數(shù)據(jù)庫。若用戶點贊微博，則后端會先查詢是否存在點贊記錄，當(dāng)存在點贊記錄時，分析是否是完成點贊還是已經(jīng)取消了點贊。若沒存在點贊記錄，則完成數(shù)據(jù)庫中的點贊記錄更新，再把點贊結(jié)果“緩存”到Redis中，若是取消點贊，則直接會在“緩存”中刪除，更新數(shù)據(jù)庫中的結(jié)果。每一篇文章的點贊總數(shù)都是利用“緩存”計算得到一篇文章的結(jié)果發(fā)送給前端顯示。前面的操作都是利用Redisson操作的，所以當(dāng)高并發(fā)多線程請求時，分布式鎖就會控制資源的并發(fā)訪問，避免出現(xiàn)文章數(shù)據(jù)不一致的情況。

( u  B* Q  ^& d3 ^11.8、收藏用戶的文章
  w1 Q) v7 A# W0 ?用戶允許收藏自己的文章，收藏的功能也借用了Redisson的分布鎖來控制收藏的緩存，收藏與博客的點贊功能相似。




+ w7 b* I2 [, T& E: n( f5 z

0 O! {! j2 w( J. U& ?9 _5 d11.9、評論用戶的文章
評論的實現(xiàn)比較簡單，一級評論的用戶的Id為父Id，只含有一級評論與二級評論，分頁直接查看文章的所有評論。



11.10、博客的文章排行榜
文章排行榜采依舊是利用了Redisson，排行榜與標(biāo)題3-7-4的點贊關(guān)聯(lián)緊密，“點贊”會導(dǎo)致熱流，形成短時間內(nèi)的超高人氣，把文章的排行榜放給用戶看，可以增強用戶的體驗。不是所有的功能都要用分布式鎖，排行榜不需要用到分布式鎖，也不需要控制非常高的高并發(fā)流量，對于后端來說控制排行榜比較簡單。

/ i0 P( {6 b; h3 z" s! i

2 m% z3 |. d4 g+ S排行榜需要保證查詢數(shù)據(jù)庫的點贊表的SQL正確，SQL錯誤之后的所有操作都是白費力氣，這個要設(shè)置一定的范圍與時間差來確保文章的間斷實時性，最后要把數(shù)據(jù)庫中的數(shù)據(jù)放到緩存中。對于緩存的操作，用戶的點贊與取消點贊都會觸發(fā)緩存中的排行榜排序。用戶請求后，會查到緩存中的排行榜點贊數(shù)最多的前10篇文章，利用List的文章Id找到文章的信息，最后打包傳給前端顯示。排行榜算是一種實時性要求不算很高的，可以使用定時的方式主動更新緩存中排行榜記錄。
8 ]9 h  t" F( o7 C  M
2 W$ L' n5 f3 p$ {

5 Y2 K1 H5 o* ^9 K* W: t
; U# z! B1 a  X) V, _4 X  c& F: x12
博客的搜索中心
12.1、搜索引擎的應(yīng)用
. t6 T, e: t! h+ V* W1 J當(dāng)微服務(wù)整合Zipkin時，運行系統(tǒng)會產(chǎn)生大量的API運行指標(biāo)，而Elasticsearch（ES）作為一種存儲方式，可以把那些運行API指標(biāo)存儲到ES中。


' ?, R0 {$ L* v1 {! a2 J
0 @: c3 r7 Q1 E. wElasticsearch的index是文檔索引，與數(shù)據(jù)庫的“庫”相似，type是文檔類型，與數(shù)據(jù)庫中的“表”相似，id是一個字段作為主鍵。

12.2、博客的分類搜索
% A& g- n# W. p" t2 ]) E博客的搜索中心包含文章的顯示的信息，例如標(biāo)題和文章內(nèi)容的摘要，由于把文章的整篇內(nèi)容均放到數(shù)據(jù)庫中，所以搜素引擎上的文章是負載均衡保存提示的信息，用戶可以根據(jù)搜索界面的搜索框查詢Elasticsearch上文章，根據(jù)的是文章的分類的區(qū)域和關(guān)鍵字，后端判關(guān)鍵字是否符合且存在，然后把結(jié)果傳給前端顯示。
2 b% l3 X4 ?# {" x' b" M
) h2 u' H& ?8 G. ^+ V$ }+ F



' j7 A2 z1 j7 H2 O+ G1 Q
12.3、博客的分類主頁
博客的分類主頁是利用Elasticsearch上的文章信息進行遍歷，用戶發(fā)表的博客時候選擇的分類作為Elasticsearch索引的名負載均衡到Elasticsearch，分類中心的文章每次選擇20篇最新的文章傳給給用戶觀看。



/ B3 I* Y+ e, p! A13
博客的測試分析
13.1、博客的請求抗壓性分析
博客采用的是前后端的分離模式，所以對于前端傳過來的Token，后端只要鑒定Redis中存在Token即放行API的請求，同時前端可以防止表單的多次提交，前端可以增加JS監(jiān)聽Button的提交，也可以使用session鑒定請求的時間間隔。不過博客大多采用Axios的異步提交，http成功時可以把Button設(shè)置為true或者直接局部刷新網(wǎng)頁重置數(shù)據(jù)。對于博客中的支付中心，另起線程中需要防止出現(xiàn)業(yè)務(wù)出現(xiàn)錯誤，或者網(wǎng)絡(luò)錯誤導(dǎo)致負載均衡出現(xiàn)中斷錯誤，所以需要catch防止程序出現(xiàn)錯誤，同樣還必須保存支付寶異步通知的結(jié)果防止另起線程中出現(xiàn)異常。對于每個用戶的請求，可以采用服務(wù)器的限制流量，限制的方向可由個人選擇，需要在服務(wù)器的圖形化界面中可以設(shè)置。



13.2、博客的功能擴展性分析
博客的前端容易擴展，由于Vue本身具有的實用的數(shù)據(jù)綁定優(yōu)勢，所以前端只要時間充足就可以隨意擴展，還有一個很重要的原因是安全是后端來控制的。博客后端的每一個微服務(wù)的中心承擔(dān)著一個功能模塊，若是發(fā)生不同功能的擴充則需要多添加一個微服務(wù)的中心。當(dāng)功能相同只是擴展當(dāng)前的功能，則可以直接在某個微服務(wù)中心增加代碼即可。編寫博客時遵守了Java代碼的規(guī)范，為以后的擴充打下堅實的基礎(chǔ)。本次博客各個中心均遵守了Java的代碼規(guī)范，微服務(wù)中的module劃分清晰，功能擴充方便。
' M* m: k# o- J3 f& Y7 v  |
Pom文件中的module劃分如下圖所示：



項目工程資源請參見：https://download.csdn.net/download/m0_38106923/87849577

% G6 U- l9 f& u9 Q
往期推薦畢業(yè)設(shè)計So Easy：Java MySQL智能報紙閱讀器APP應(yīng)用
; s- r6 W# z' Y5 b4 O0 q" U畢業(yè)設(shè)計So Easy：基于C++實現(xiàn)網(wǎng)絡(luò)掃描器
畢業(yè)設(shè)計So Easy：基于Java Web學(xué)生選課系統(tǒng)
畢業(yè)設(shè)計So Easy：基于Java語言西餐廳點餐系統(tǒng)
畢業(yè)設(shè)計So Easy：珠穆朗瑪FM音頻電臺APP
' ~& J4 \& e7 x


點擊閱讀原文，更精彩~