電子產(chǎn)業(yè)一站式賦能平臺

PCB聯(lián)盟網(wǎng)

搜索
查看: 38|回復(fù): 0
收起左側(cè)

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

[復(fù)制鏈接]

601

主題

601

帖子

4762

積分

四級會員

Rank: 4

積分
4762
跳轉(zhuǎn)到指定樓層
樓主
發(fā)表于 2023-6-28 12:00:00 | 只看該作者 |只看大圖 回帖獎勵 |倒序?yàn)g覽 |閱讀模式

6 ?" S# a6 @7 h1 U/ U* k( e點(diǎn)擊上方藍(lán)色字體,關(guān)注我們
7 \  h, R6 N; ?0 d" a4 C+ O很多計(jì)算機(jī)專業(yè)大學(xué)生經(jīng)常和我交流:畢業(yè)設(shè)計(jì)沒思路、不會做、論文不會寫、太難了......
. o: w: B: u2 }1 }, D6 \) s  z, C8 S; e6 i0 {7 j- V
針對這些問題,決定分享一些軟、硬件項(xiàng)目的設(shè)計(jì)思路和實(shí)施方法,希望可以幫助大家,也祝愿各位學(xué)子,順利畢業(yè)!
* y+ p1 q& O) H8 P9 O/ V  b! y) s5 c: }" C) V; e! |  F1 n, I& F

3 F% m4 R* G8 z" T5 f5 a& q' t
. A0 n2 k5 _3 S0 j
0 b9 L- J4 p( D0 R- f: ?  m. _對計(jì)算機(jī)技術(shù)感興趣的小伙伴請關(guān)注公眾號:美男子玩編程,公眾號優(yōu)先推送最新技術(shù)博文,創(chuàng)作不易,請各位朋友多多點(diǎn)贊、收藏、關(guān)注支持~
2 A/ U* E% }, o8 F& ^0 L* g5 B& u8 Y, p8 C+ P: y
項(xiàng)目專欄:https://blog.csdn.net/m0_38106923/category_11085518.html/ U$ R- e4 H, Q. j4 m
博客是互聯(lián)網(wǎng)的一種分享類型的技術(shù)產(chǎn)物,但是如何留著用戶才是重要的,并不都是所有的功能都會涉及到“高并發(fā)”,博客的功能多樣性會增強(qiáng)用戶的體驗(yàn),讓用戶對博客的使用產(chǎn)生依賴性,利用從眾心態(tài)合理地開發(fā)增值功能。7 V" w. ?% R3 _4 K$ K$ }* S

* k5 T. g9 b4 g' k本次系統(tǒng)的開發(fā)采用了主流的微服務(wù)架構(gòu)方式,所以把控每個微服務(wù)的功能相互獨(dú)立和完整是“微服務(wù)”系統(tǒng)的關(guān)鍵。由于博客的實(shí)現(xiàn)比較簡單,所以只有涉及到“高并發(fā)”的時(shí)候需要斷點(diǎn)分析即可,下面將介紹博客系統(tǒng)的一些功能。8 d* D2 [8 x( w7 N) _- P3 j: N$ T6 j

+ a2 `% n/ h# Y% M: S3 r" l0 Z7 J項(xiàng)目工程資源請參見:https://download.csdn.net/download/m0_38106923/87849577
" y: L9 E8 ^, P# B" F5 ~1
; M  v# L" z) z" a, h# a: _項(xiàng)目功能
6 x7 `* p, @% z+ S9 ~4 h博客基本的功都具備,例如博客的核心功能:博客的發(fā)表,刪除,瀏覽,評論,點(diǎn)贊等。除了這些,還可以每天定時(shí)簽到提升博客的等級,充值會員提升使用體驗(yàn)。7 C) r" }) U; k8 J  h
3 r1 T5 i) j# L/ S4 f
個人的安全信息也非常重要,所以我單獨(dú)劃分一個微服務(wù)中心來實(shí)現(xiàn)。同樣我在每行重要的代碼上都增加了明顯的注釋,這對于我以后的維護(hù)和擴(kuò)充博客功能可以打下堅(jiān)實(shí)的基礎(chǔ),盡可能地符合軟件設(shè)計(jì)開發(fā)原則。
! q( }& M7 w' u9 U$ h) V8 o/ h, }' E
關(guān)于博客的功能一共涉及到8個微服務(wù)中心:
  • 用戶的個人中心:包含登錄、注冊、智能驗(yàn)證。
  • 用戶的安全中心:安全信息、手機(jī)與郵箱的基本功能和安全認(rèn)證的接口。
  • 用戶的博客中心:發(fā)表和管理個人的博客,游客可以瀏覽公開的博客。
  • 用戶的文件中心:發(fā)表博客需要用到的圖片和個人用戶的頭像。
  • 用戶的簽到中心:博客的簽到累計(jì)的經(jīng)驗(yàn)值和簽到獎勵。
  • 用戶的會員中心:包含普通會員和超級會員。
  • 用戶的支付中心:VIP的充值功能,個人錢包功能,賬單等。
  • 用戶的搜索中心:根據(jù)摘要或者文章標(biāo)題的關(guān)鍵字搜索指定的博客。8 ^+ \7 v$ q& A! r' `
    [/ol]
    ! Q0 r; S, k3 m6 E0 T5 q25 M6 v* _# o* g9 j9 g
    項(xiàng)目架構(gòu)設(shè)計(jì)9 E5 j, ~  L2 X) d; R4 G: v

    6 `1 I' x( c) `: U' h
    1 r& |) L2 J  X$ h從宏觀設(shè)計(jì)來說,各個微服務(wù)中心都是一個moudle,需要注冊到一個高可用的微服務(wù)注冊中心上保證機(jī)器信息的正確性。
    6 Y" V! q1 h2 Q
    % p$ z2 Q3 @; _" s' q8 Y7 c) Y8 I從微觀運(yùn)行來說,用戶的請求API都經(jīng)過Zuul,再由Zuul負(fù)載均衡分配給需要的微服務(wù)中心,所以Zuul也需要高可用保證用戶流量可以得到回應(yīng)。通過zuul網(wǎng)關(guān)后,請求通過Feign實(shí)現(xiàn)微服務(wù)之間數(shù)據(jù)的交互。
    3 H- o, Z  n" \8 k) M. U6 v( u4 W+ m9 x( j' e1 _
    當(dāng)發(fā)生錯誤運(yùn)行時(shí),利用Hystrix的回退機(jī)制保護(hù)系統(tǒng)的穩(wěn)定運(yùn)行,不會發(fā)生級聯(lián)占用效應(yīng),保證每一個請求API都可以得到響應(yīng)。當(dāng)發(fā)生網(wǎng)絡(luò)不可用的情況下,需要觸發(fā)用戶的補(bǔ)償機(jī)制,當(dāng)出現(xiàn)不可知的錯誤時(shí),也可以直接管理機(jī)器的集群來維護(hù)系統(tǒng)的穩(wěn)定運(yùn)行。
    5 p( B+ O7 x8 W$ m6 l8 ^2 L3( _& R# ]4 i% J4 P
    項(xiàng)目數(shù)據(jù)庫設(shè)計(jì)
    1 ^9 f4 h0 \/ T  |對于用戶來說,需要輸入賬號和密碼,若是不存在可以注冊自己的賬號和密碼。注冊的時(shí)候提供30分鐘填寫博客信息的有效時(shí)間,不填寫則直接登錄。需要設(shè)置個人的手機(jī)和郵箱來綁定安全認(rèn)證,若想要開通我的錢包則需要實(shí)名注冊,同樣也包含校園認(rèn)證。丟失了個人信息,則可以用身份證申訴。每天凌晨開始可以開始簽到,根據(jù)會員的不同增益不同,簽到的持續(xù)天數(shù)不同經(jīng)驗(yàn)值累加也不同。會員的開通只包含支付寶,賬單是每筆消費(fèi)的記錄。核心表是用戶博客之類的表,文章均存在數(shù)據(jù)庫,不過ElasticSearch也保存了文章的標(biāo)題和摘要。每個用戶可以評論他人的文章,私密的文章不會出現(xiàn),會員的文章會出現(xiàn)在會員專區(qū)。# `* I5 K0 H3 o5 D
    5 R  T6 u5 K% _: r+ [$ B
    博客一共含有8個主功能,所以一共涉及用戶表,用戶信息表,安全表,頭像表,簽到表,簽到獎勵表(兩種獎勵),會員表,錢包表,訂單表,博客表,博客分類表,博客標(biāo)簽表,博客圖片表,博客的評論表,點(diǎn)贊表和收藏表17個表。* c4 {& A7 `. B/ K9 D

    ; |0 p+ n2 d/ e
    ( S4 i' |: D' S
    . A( h2 `) O- ~$ A  l1 L; ]: U$ `4
    2 H; C$ j5 v4 z8 ^* L項(xiàng)目架構(gòu)實(shí)現(xiàn)
    7 v+ U3 ]4 Y/ O4 ]4.1、Vue架構(gòu)的實(shí)現(xiàn)3 T: U* j6 N) Z# Z0 T% U- k
    前端IDE采用的是WebStorm,博客的Vue主要分布如下圖所示:
    1 l! U0 a4 u0 s9 k4 V, D( a4 }* l
    4 t, G- v$ |3 E" e# ~1 `! Y9 y  m% s
    0 y' [9 y  h* x/ ~" s8 F6 m6 m2 C& E
    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中保存的是博客所用的圖片。) `! G4 ~) S8 H% p
    不管是用IDE創(chuàng)建的項(xiàng)目還是采用常規(guī)腳手架創(chuàng)建的vue項(xiàng)目,其項(xiàng)目都會在根目錄生成一個package.json文件,這個文件與后端的“pom”相似,這個文件包含所需要的各種包,還包含項(xiàng)目的配置的名稱與版本對應(yīng)。5 a- Q0 [+ e# [
    0 V9 V9 e: q& i* L1 a9 \
    博客項(xiàng)目中的package的完整dependencies代碼如以下所示:! U# R6 L) X9 [9 N0 P* F

    9 P2 l+ P6 w* r. L
  • "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" }( q! `# ^  ?1 W
    4.2、SpringCloud架構(gòu)的實(shí)現(xiàn)
    8 D0 ^! b( I3 X) Y博客Maven的整體微服務(wù)中心實(shí)現(xiàn)的結(jié)構(gòu)圖如下所示:
    + P: z4 E1 D: s  c' o
    1 H+ b, W7 E0 Z# p8 R
    6 [; E0 {- S3 ^/ u+ N5 n
    . ^$ ^" Z4 ?/ _7 J% M' zSpringCloud是基于Java語言的工具集,SpringCloud具備拿來就用的特性,可以節(jié)省開發(fā)的配置時(shí)間,它可以在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)致兼容不一致。
    3 t7 B0 @* d* J- ]  k$ T; }! ]1 m5 E
    4.3、博客的高可用的實(shí)現(xiàn)8 b! I2 H3 x# h, A' o& ]
    博客使用了兩個Zuul并且注冊到高可用的服務(wù)發(fā)現(xiàn)中心來構(gòu)造Zuul高可用集群。Eureka是所有微服務(wù)的注冊中心,并且自己本身也是微服務(wù)不過需要禁止自我注冊。Eureka注冊中心包含每個微服務(wù)的名稱,IP,端口等,由于因?yàn)榈膯蝹節(jié)點(diǎn)的微服務(wù)可能會發(fā)生不可用的情況下導(dǎo)致系統(tǒng)發(fā)生停機(jī),所以采用高可用的微服務(wù)注冊中心。讓兩個(多個)服務(wù)發(fā)現(xiàn)組件相互注冊以達(dá)到可以保持其它微服務(wù)的調(diào)用,維持整個系統(tǒng)的高可用性,整個博客的Eureka服務(wù)注冊中心圖如下圖所示:
    9 ^1 u$ ]$ `9 l. Z6 H. n7 X
    / l: B8 F) d4 o # o" N( `' O: _  e* c
    $ ]3 t+ `6 O; t/ _* i, l
    DS Replicas代表兩個模塊加載模擬單機(jī)代替高可用的實(shí)現(xiàn),不過需要修改本地Host來模擬真實(shí)多機(jī)高可用的效果。每個微服務(wù)都具有自己的虛擬主機(jī)名以及狀態(tài)來描繪微服務(wù)的顯示情況。每個微服務(wù)之間通過與服務(wù)注冊中心每30S心跳傳遞保證服務(wù)可用性。默認(rèn)90S沒有收到心跳則會注銷該微服務(wù)。EurekaServerOne與EurekaServerTwo為兩個微服務(wù)注冊中心,兩者相互注冊到對方的服務(wù)中心上來保證Eureka的高可用穩(wěn)定,從而使每一個博客的請求都可以得到響應(yīng)。& `4 q$ W9 @) C) r; s
    / ]$ J9 \. n( ^8 _
    5
    6 y& y* F6 x1 w# P用戶的個人中心) k. P: B. A  i. \( V  E
    用戶的個人中心相當(dāng)于博客的大門,用戶的首次流量都經(jīng)過此處,首次負(fù)載均衡調(diào)用也是基于這個中心開始,主要涉及到用戶的登錄與注冊的基本功能,在登錄上排除惡意的攻擊與干擾,保證博客登錄的穩(wěn)定,從而保證系統(tǒng)的穩(wěn)定。這個中心核心功能就是權(quán)限驗(yàn)證,保持登錄的標(biāo)志,它是保持業(yè)務(wù)穩(wěn)定的重要因素,后續(xù)的實(shí)現(xiàn)會在以上所述的三個重要功能展開來講。& s' N# p7 M2 U$ r
    * o2 Z- L1 {" g4 z( _
    5.1、登錄的智能驗(yàn)證
    ( o; a& _; X2 i" P1 A! kVue整合阿里云智能驗(yàn)證時(shí),需要注冊布局組件來動態(tài)加載JavaScript文件,不然無法使用阿里云的智能組件,前端登錄智能驗(yàn)證的核心代碼如以下所示:2 W. N$ T& \; x/ M% f7 F) i6 \

    8 D) p9 ~8 }5 Z6 t
  • //動態(tài)加載阿里云的JavaScript文件src="//g.alicdn.com/sd/nvc/1.1.112/guide.js" @loaded="initCaptcha">1 T; [$ r, l" b( W
    //注冊局部組件來加載阿里云的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 }                }            }        },& V, \2 ~6 U. b$ s$ @: ^8 B
    //點(diǎn)擊智能驗(yàn)證的封裝函數(shù)            initCaptcha() {                let _this=this;                let ic = new smartCaptcha({                    renderTo: '#sc',                    width: 350,                    height: 42,                    default_txt: "請點(diǎn)擊驗(yàn)證按鈕",                    success_txt: "博客登錄驗(yàn)證成功",                    fail_txt: "點(diǎn)擊按鈕重新刷新登錄驗(yàn)證",                    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-js8 s6 W- N! S6 G7 S* n, _- E& i
    5.2、博客的登錄注冊
    3 [/ B1 |. }3 M( T( q" m登錄是一個系統(tǒng)的重要的功能,也是個人隱私的重要體現(xiàn),拿常見的登錄有郵箱,手機(jī),賬號或,語音或者二維碼登錄,不過不管通過哪種登錄,個人信息的安全都應(yīng)該得到保護(hù),保護(hù)個人隱私重要的是從個人做起,拒絕非法點(diǎn)擊與輸入。
    ! I4 y5 ~' b0 J4 S! C/ E& f  X* x0 A2 h7 c: d7 G
    拿本次博客的登錄來說只需要驗(yàn)證賬號和密碼就行,個人登錄是不會進(jìn)行權(quán)限驗(yàn)證。注冊成功會保持30分鐘的權(quán)限驗(yàn)證,關(guān)于權(quán)限驗(yàn)證會在標(biāo)題5-2-3中提到,以便后面的博客信息的操作,超過則需要重新登錄去博客的個人中心填寫博客信息。
    4 ^6 h1 b* e- M博客的登錄與注冊的頁面如下圖所示:- F- H7 x9 d/ |

    - H  L# ?: X7 A - E& Q" Z# z. w7 R6 H1 ^4 J

    : s0 _. h& E- c2 b+ @博客登錄的用戶名需要以英文子母開頭,用戶名和密碼均不可以超過16位,注冊保證兩次登錄密碼正確就可,在此不再貼出圖片累述。: g* F3 ^2 d: y0 X. r8 f

    * {0 s2 {( A. s% [* s8 K; ?: S. @5.3、登錄的權(quán)限驗(yàn)證
    8 n; J. L6 z* m0 C$ V, F8 X登陸權(quán)限控制是每個系統(tǒng)都應(yīng)必備的功能,是保持登錄狀態(tài)的重要實(shí)現(xiàn)。微服務(wù)所有的權(quán)限驗(yàn)證均在一個module上,Token消時(shí)則直接回退給前端status 404失敗碼,成功則是執(zhí)行對應(yīng)的業(yè)務(wù)邏輯,注意登錄的博客是不需要權(quán)限驗(yàn)證。
    5 J6 e* P9 j9 B' M; C: ^) c: w( W) F3 N# b# g3 s
    博客使用了前后端攔截器攔截Token(登錄成功的認(rèn)證碼),所以后端需要定義一個token驗(yàn)證注解,用攔截器攔截系統(tǒng)的url請求,再進(jìn)行攔截用戶的API請求,最后再驗(yàn)證傳過來的token與Redis中token值是否一致,效驗(yàn)通過才可以正常訪問。當(dāng)用戶登錄成功博客后,后端返回token數(shù)據(jù)。token具有存在時(shí)間,如果用戶一段時(shí)間后不在線或者操作的話,則token會失效,用戶保持登錄時(shí),則不會過期。
    ' W. r* n$ T- x$ T& O9 `# N. ?' w8 P9 e
    Redis中會以用戶的登錄賬號作為與token關(guān)聯(lián)的認(rèn)證,有效的token碼可以取出用戶的賬號,然后再進(jìn)行業(yè)務(wù)邏輯。這些redis中的key都可以自行設(shè)置一些時(shí)間,不過前端只保存token值,二次登錄會覆蓋Redis中的token值。
    " s. [# L- H  ~! j5 y4 N
    / a6 c4 a4 P7 S! t) ]3 }) @
    # }! d# f! F/ I2 s) Q' I: D5 O, p
    , D$ B# B& z/ I( K權(quán)限驗(yàn)證相當(dāng)于系統(tǒng)的第一道大門,如今的安全框架越來越豐富,例如SpringSecurity,Shiro,OAuth等,shiro->security->oauth的上手難度逐漸提升。若是需要對密碼加密的,可以需根據(jù)個人開發(fā)自行配置使用對應(yīng)的安全框架。
    ) ~6 ?: P1 L" w: }0 w1 x: l6
      [, S/ l' K5 I8 S用戶的安全中心
    5 Y7 s* N- |( b0 o9 ?+ w6.1、用戶的安全布局& D; e4 A& Q& J8 D. }- _9 f
    安全中心包含郵箱,手機(jī),身份證,校園認(rèn)證和其它微服務(wù)中心需要用到的認(rèn)證接口。郵箱采用QQ郵箱,開啟smtP 587端口發(fā)送郵箱驗(yàn)證碼。手機(jī)采用阿里云短信API服務(wù)。兩者的驗(yàn)證碼存在的時(shí)間均為1次失效且存在10分鐘。身份證需要手機(jī)號的驗(yàn)證。校園認(rèn)證的名字需要和身份證的名字一致。除了綁定一些安全的服務(wù),還包括三種修改密碼的方式,原始密碼修改新密碼,郵箱重置密碼,手機(jī)重置密碼,身份證重置密碼。個人申述包括手機(jī)號重置郵箱,舊手機(jī)更換新手機(jī),身份證重置手機(jī)。
    ; x' [" o. u8 f* w1 q7 k0 C3 C8 d1 J! p) R: ~+ h! @) W

    5 E' k  B  f2 u
    ! `  |, Y/ ?, w; d: z安全中心包括用戶的規(guī)則規(guī)章,博客旨在分享自己的動態(tài)和經(jīng)驗(yàn)給他人,不可以辱罵他人,以及不遵守國家的法律法規(guī)。本次博客的其它微服務(wù)中心所需要的手機(jī)認(rèn)證接口均由這個微服務(wù)中心提供。
    * G5 Z! {$ H. v" k  B+ R9 x1 y( X# W* g
    6.2、用戶的郵箱注冊
    " I1 I2 K$ X, O* }8 y5 N博客采用的是免費(fèi)的QQ郵箱,郵箱的yml配置如下:- P4 W: `# z/ T0 U+ |
    * A% E. w/ K7 O
  • mail:    host: smtp.qq.com    port: 465或587    protocol: smtp    username: 個人的郵箱    password: 郵箱的SMTP的密碼,可在郵箱的賬戶中開啟SMTP服務(wù)    default-encoding: UTF-8    properties:      mail:       debug: true   #控制臺開啟運(yùn)行日志
    # X  {) `+ q' X; G* KQQ郵箱(郵箱與手機(jī)的六位驗(yàn)證碼共用)發(fā)送驗(yàn)證碼按鈕的原代碼如以下所示:
    ; |) j9 K' p1 ^
    5 X# a7 `0 @( I) w- j3 m0 I
  • //自動生成的驗(yàn)證碼,驗(yàn)證碼的位數(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();}! [. j, _* E+ P5 h1 W3 V) @
    綁定QQ郵箱JavaScript的代碼如以下所示:. q- A- q# b2 N$ ~
    $ p1 U, O) C6 d, o/ P
  • //綁定郵箱的發(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);                      }                  })              }          }" q( d0 y* z, u
    后端發(fā)送QQ郵箱注冊的驗(yàn)證碼如以下所示:
      t& _9 B) h' z7 C& s% ~. r3 H* S4 B) K* I1 L4 {
  • //后端QQ郵箱發(fā)送驗(yàn)證碼的按鈕服務(wù)@Override@Transactional(isolation = Isolation.READ_COMMITTED, propagation = Propagation.REQUIRED)public void sendEmailCode(String email) {    //生成郵箱隨機(jī)的6位驗(yàn)證碼    String emailYzm= generateVerifyCode(6, EMAIL_CODES);: ~- g" u# T% `. p
    //From-to,主題和信息.    SimpleMailMessage simpleMailMessage = new SimpleMailMessage();    simpleMailMessage.setFrom(FORM);    simpleMailMessage.setTo(email);    simpleMailMessage.setSubject(SUBJECT);    simpleMailMessage.setText("你的郵箱驗(yàn)證碼是: "+emailYzm+"本次驗(yàn)證碼    會在10分鐘后失效,請立馬使用。");    //發(fā)送郵箱驗(yàn)證碼       javaMailSender.send(simpleMailMessage);. x: ^2 f6 l. M( [+ w* c/ r
        //開啟Redis存入email和yzm    Jedis jedisEmail = new Jedis("localhost", 6379);    //設(shè)置郵箱(key)-驗(yàn)證碼(value)的綁定,秒為單位,存在時(shí)間為10分鐘。    jedisEmail.set(email,emailYzm);    jedisEmail.expire(email,600);    //設(shè)置驗(yàn)證碼(key)-郵箱(value)的綁定,秒為單位,存在時(shí)間為10分鐘。(雙向綁定可以判斷失敗存入的驗(yàn)證碼,雙向保險(xiǎn))    jedisEmail.set(emailYzm,email);    jedisEmail.expire(emailYzm,600);}
    : |5 J* l' A- n) l5 m# [& O6.3、用戶的手機(jī)注冊
    ; x1 m6 Q  T: ^1 n3 [/ G發(fā)動短信的前端JavaScript的代碼如以下所示:
      s9 ^5 T1 F, Z, G/ X4 j
  • //前端綁定手機(jī)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('手機(jī)或者驗(yàn)證碼不符合規(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: '手機(jī)綁定成功',                              type: 'success',});                         window.localStorage.setItem('myPhone',res.data.message);                          this.reload();                          //this.$router.go(0);                      }else {                          this.$message.error(res.data.message);}})}}
    : U( K! ?9 z: K3 G' B  r; T
    : ~- R( d0 Y2 t; }, |9 ]后端發(fā)送驗(yàn)證碼的代碼如以下所示:
    - r; X7 d, r3 T: C" f7 L
    + h% t7 Q5 z8 c
  • //生成手機(jī)的驗(yàn)證碼        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ā)送注冊手機(jī)的驗(yàn)證碼        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è)置手機(jī)(key)-驗(yàn)證碼(value)的綁定,秒為單位,存在時(shí)間為10分鐘。        jedisPhone.set(phone,phoneYzm);        jedisPhone.expire(phone,600);        //設(shè)置驗(yàn)證碼(key)-手機(jī)(value)的綁定,秒為單位,存在時(shí)間為10分鐘。(雙向綁定可以判斷失敗存入的驗(yàn)證碼,雙向保險(xiǎn))        jedisPhone.set(phoneYzm,phone);        jedisPhone.expire(phoneYzm,600);}5 Z* W" S8 _& P0 E  g# }: c" }% ]
    6.4、用戶的安全認(rèn)證1 `1 E% q8 _# ~5 }# ^9 C
    提供安全的認(rèn)證有身份認(rèn)證與校園認(rèn)證,當(dāng)然只是表單的提交,真實(shí)的認(rèn)證需要有關(guān)部門的配合,在此只是用來模擬,校園認(rèn)證需要與身份證的名字保持一致,否則無法通過。; W6 J8 _" m) s4 p; S2 i5 h. t
    % s' z2 o4 d  _( q" P' K* R2 z

    ) o' u& [, E! n- S  c3 n1 z3 b
    ) c3 O! _3 q0 O, q
    1 x) j# l0 x8 o
    ) p: V0 p+ @  E/ g- n( Z8 {4 K# a: _( B/ h0 m! m: c
    6.5、用戶的密碼安全$ m$ K" h) i) Y- V
    當(dāng)個人安全賬號發(fā)生異常,可以提供修改密碼,也可以重置密碼。8 N5 E- b1 L) Z8 l  f7 D' N% I# h

    3 i" D! N- O: y+ ~( T# G2 \ 2 _' y6 Y4 S0 z6 E

    # Q( L8 c- p- I( V( N! J' R  S, S% _, O* C' s5 A8 W4 o

    - `2 M" Q3 i3 D9 `: k
    3 e4 G" l; P/ I7 u( o0 x% F: H9 m6.6、用戶的賬號申訴
    ; t5 C0 A0 `8 n( s  c可以使用手機(jī)號重置郵箱,也可以使用舊手機(jī)號更換新手機(jī)號。如果個人博客的手機(jī)號安全信息被盜取,手機(jī)號也可以被重置,但是需要借助身份證申訴,不過一天只可以成功申訴一次。: r4 E! r0 Y( p' x3 g5 V% F. e' Z
    " u2 ?% M. n/ c5 G. e0 b( e
    * C1 m: i6 S& X; S, Y9 `8 A7 Q' [
    & J8 n: m4 F+ O
    7
    4 F% l  q! I& G9 G7 N8 q1 ~' `用戶的文件中心% c2 [- K$ \3 o+ l* i
    7.1、用戶的頭像存儲
    3 O( }& u0 f, q3 o當(dāng)用戶注冊的時(shí)會需要選擇個人的頭像,上傳的頭像只能是JPG格式且大小不能超過2MB,且上傳前會先查詢數(shù)據(jù)庫中的頭像圖片名是否已經(jīng)存在,存在的話直接會先刪除OSS中舊圖片,再插入新圖片,如果不存在的話,直接插入到OSS文件服務(wù)器中。頭像的存儲流程由前端發(fā)起file傳給后端,后端接受file頭像,利用二進(jìn)制傳給OSS文件服務(wù)器。服務(wù)器再傳過來頭像的外網(wǎng)URL地址,此時(shí)修改顯示時(shí)間為10年再返還給用戶,最后把頭像外網(wǎng)URL地址保存到自己的LocalStorage本地。
    9 x  n! c1 ], N9 E7 {' k$ _' x/ m3 Y
    $ x" T7 N. k7 r0 v$ X. E0 P9 M, v

    8 P. c6 b/ z$ I/ s* U1 `* s7.2、博客的圖片存儲5 `7 f# k; f4 N/ ]+ [# F- f
    發(fā)表博客時(shí)文章中會包含圖片,前端獲取后端的博客圖片url綁定在前端文章中顯示,同樣url也在文章內(nèi)容中一起保存到數(shù)據(jù)庫中。上傳圖片和上傳頭像不同,文章需要用到的圖片可以有多張,不存在覆蓋問題。需要根據(jù)個人的文件服務(wù)器的存儲量來權(quán)衡上傳圖片大小。
    2 [1 z. v/ p- r. @* s3 `( ~
    ) d5 g+ \- b! L1 E1 t
    . Y; p4 t5 Z, j8 s6 G4 f
    & m- C/ _0 n  _2 J, T7 U, G" l6 E+ K; N9 p% D3 ^. W) N5 o
    8$ }5 m9 D, K6 w
    用戶的簽到中心8 A* N) {; j0 w6 G6 Q: U) O
    用戶的簽到等級代表用的可以使用的權(quán)限,當(dāng)簽到累計(jì)天數(shù)和連續(xù)天數(shù)達(dá)到獎勵階段時(shí)觸發(fā)一鍵領(lǐng)取獎勵按鈕,每次獎勵每個賬號只可以領(lǐng)取一次。整個簽到的等級由經(jīng)驗(yàn)值決定,但是每天獲得經(jīng)驗(yàn)值為1500。簽到的經(jīng)驗(yàn)值還會進(jìn)行快速排序排名返還給前端,提升競爭效果,同時(shí)會員增益機(jī)制也會導(dǎo)致不同的疊加效果。
    : `1 D- X% u! X
    / @8 ^5 Z$ |5 Q% a: U; b& G3 D每天0點(diǎn)之前只能簽到一次,過完0點(diǎn)后Redis中限時(shí)憑證失效既可以再次簽到,簽到的經(jīng)驗(yàn)值采用二分查找和快速排序算法進(jìn)行計(jì)算最后的排名返還給用戶。
    . j1 I, u2 ]' K( T$ B0 c. _( p$ i/ ]0 ~2 \5 a4 s& r  e8 @9 ?
    簽到按鈕的計(jì)算代碼如以下所示:
    7 V) k4 l2 d4 S* u& m0 S+ ?
    & Q! v8 ~- C1 R5 o$ O
  • //先判定是否redis中是否存在限時(shí)憑證        Jedis jedis = new Jedis("localhost", 6379);        if (jedis.get(id.toString()) == null) {            //獲取明天0點(diǎn)的時(shí)間并且設(shè)置限時(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);                //小時(shí)和分鐘和秒相減                Long hour = ((d2.getTime() - d1.getTime()) / (60 * 60 * 1000));                Long minute = ((d2.getTime() - d1.getTime()) / (1000 * 60));                Long second = ((d2.getTime() - d1.getTime()) / 1000);                //最后存在的秒時(shí)間        int total = (hour.intValue()) * 3600 + (minute.intValue()) * 60 + second.intValue();                //控制臺觀看                logger.info(tomorrow + "/n" + now + "/n" + total);                //設(shè)置redis中的簽到過期時(shí)間                jedis.set(id.toString(), "今天簽到已經(jīng)完成!");                jedis.expire(id.toString(), total);                return SUCCESS;            } catch (ParseException e) {                e.printStackTrace();}        }        return FAILED;
    ( y2 R! `; {/ u. U3 O經(jīng)驗(yàn)值的排名的代碼如以下所示:
    % Y# s# H# s. Q6 N6 p5 x( x  G; h2 x: M4 z/ Z, T: V% F( Q
  • //先查詢所有的經(jīng)驗(yàn)值        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)驗(yàn)值所在的索引位置        int position=sortService.binarySearch(quickSort,myExperience);        //最終排名,倒序輸出。        int lastPosition=quickSort.length-position;        //控制條輸出你的排名        logger.info("你在經(jīng)驗(yàn)值排行榜中的名次是:"+lastPosition);        //返回給前端的排名        return lastPosition;
    ( I/ ~2 E# [9 v7 s, y9
    % r! u" y/ m+ `1 e5 {) J( G8 R2 {# P用戶的會員中心3 ~/ |; _$ U& Z" c! |
    由于會員中心與支付中心聯(lián)系比較密切,所以兩者的中心可以結(jié)合起來看作一個中心來觀看。用戶的會員中心包括普通會員和超級會員,每種方式存在三種收益方式,年費(fèi)季費(fèi)和月費(fèi),支付成功后均由負(fù)載均衡執(zhí)行業(yè)務(wù)邏輯。由于支付不屬于這個module中,所以這個module只是由其它微服務(wù)調(diào)用直接完成業(yè)務(wù)邏輯。
    , y7 ]$ \* g, @! r
    # \) w7 H3 F: A, n7 R. k' d& L1 B; p ( W6 F( L  X' Y4 y! a% E( V
    : o5 f" r! y+ p% _& g8 l
    10
    : h, s/ g; O1 \用戶的支付中心
    6 \6 n. c. J+ a未完成實(shí)名認(rèn)證時(shí)頁面會轉(zhuǎn)到實(shí)名認(rèn)證中,當(dāng)完成實(shí)名認(rèn)證時(shí),首次進(jìn)入我的錢包中心會觸發(fā)設(shè)置支付密碼,當(dāng)設(shè)置成功后,支付以及綁定個人銀行卡均需要用到支付密碼?梢杂门f支付密碼修改新密碼,也可以手機(jī)重置手機(jī)密碼。還可以綁定自己的銀行卡,需要有關(guān)部門的配合。本次博客只允許建設(shè)銀行,工商銀行和中國銀行,且每張銀行卡只允許綁定一張。利用v-charts組件把個人的時(shí)間段的消費(fèi)情況以條形圖展現(xiàn)給用戶觀看。! I' w. B: i+ k+ d2 \5 G: d4 ]! c

    8 q: _4 B* b/ n
      j/ E/ f. e1 J, |, U. y. k! X* e9 K% I8 l
    " A- E% \! z& ?5 D  u& o

    0 \6 u# m: V$ G" Q) M" ^2 k5 h' m7 K* {+ |5 G7 V
    當(dāng)用戶開通了我的錢包后,可以選擇是否進(jìn)行余額充值,賬戶余額暫時(shí)只可以用支付寶充值。所有關(guān)于金額的操作均需要在后端安全操作,前端只用來顯示數(shù)據(jù),必須使用數(shù)據(jù)庫中的金額。
    : u+ D' p' P+ R: ^5 C& t3 p: W1 v) k, N; E  @( c* [4 B
    ) ]7 J3 W+ ?2 C+ L- B& a
    , Q  x* C! O  ]" @% S

    $ |- P9 i+ ^8 y  ]/ c+ s" o/ Z
    8 G& s" |8 J& X密碼為6位有效數(shù)字,可以使用原密碼更換新支付密碼。4 z" Q' |+ M/ N, {
    % G/ n0 p; u1 f4 M; `! b
    : u5 D) }7 R% z2 |1 O

    8 I4 @3 o* D2 ?, v, \! c- @* O, f8 ^/ p- m4 x" b

    5 u) h( C, H* d& A# f* t) G8 n1 P% x: d9 O% |& T. F
    銀行卡姓名需要與實(shí)名認(rèn)證的姓名一致。1 q% `2 n, X2 }% a3 y
    , c; l- c. v3 S0 }
    1 e9 g+ t" ^  |* m/ |  v
      f/ W+ r0 }  j3 }% p

    8 P, i" F1 }9 U
    2 l, I* o7 |2 I1 }/ S; k6 l
    / d! E1 a! l& e& t& H* k
    - R- W% @6 Z( z; s; Z( _- e+ S( P; e4 [: K6 E0 i- [
    ) I1 m; b' t- j0 s# D
    支付中心包含普通會員和超級會員,由于普通會員采用支付寶原始的方式,而超級會員采用支付寶的二維碼方式,所以兩者會在調(diào)用的時(shí)候會有所不用。
    5 O& z! m( m( G4 K+ Z8 f- Z
    0 r# j  j! C3 o, h& D6 r. L( p$ r  _/ j6 M5 S9 I. A
      F: i( o4 f" U) Y1 u( ]) f
    賬單中心是分頁展示給用戶觀看,提供當(dāng)前頁面,月份和全部的賬單打印Csv。前端可以直接把后端的數(shù)據(jù)直接打包Csv,也可以自行后端打包Csv數(shù)據(jù)到本地。" d' k/ x8 [) ?+ O, }3 I( ^% l, ^: A
    2 \2 _, @. ?# ^5 n: s
    3 N5 L/ V* f) \! c$ O4 `6 g7 w

    4 s& Q8 s  v; n+ L, Q' r
    ' x" i+ ~9 w% m' k; W8 i
    : V* G: I& W, V5 p* u' {$ }! @, e/ d6 r: ~; D, ]
    11
    & i5 J* l: z1 U) W2 o/ m$ O7 W用戶的博客中心
    ( H9 f' x- d6 N11.1、用戶的訪問主頁3 q* i: U4 T% j
    編寫博客是一個展示自我的機(jī)會,通過這個機(jī)會,可以增強(qiáng)個人的表達(dá)能力,還會結(jié)識一些五湖四海的博友。通過他人文章的學(xué)習(xí),我們還可以增強(qiáng)個人的知識度和眼界。綜上所述,用戶的博客中心是博客系統(tǒng)的最核心功能。% w$ }4 b$ v: f1 V
    1 h8 i8 F) R" C8 ]/ c0 B+ L
    用戶可以分享自己的博客動態(tài),博客旨在分享自己所學(xué)所知給他人,或者解決他人的困難。博客中心包含發(fā)表博客,查看個人博客,刪除博客,更新個人博客。非本人也可以觀看他人的博客,也可以評論他人的博客,所以需要用到分頁功能和輪滑加載功能配合前端展示不是私密的博客給他人觀看。每個用戶所看到的博客都是最新發(fā)的博客,可以與他人進(jìn)行學(xué)習(xí)交流。每個發(fā)表者要尊重他人的知識勞動成果,切勿抄襲并且發(fā)表不適當(dāng)?shù)奈恼,做一名合格的博友?font class="jammer">: v' m: ]5 ~8 y; [
    & @# X; g, ~) Q
    當(dāng)用戶輸入賬號密碼登錄后,可以看到博客的主頁如下圖所示,主頁面可以看到發(fā)表人和發(fā)表的文章,點(diǎn)擊文章可以進(jìn)入文章的主頁面進(jìn)行學(xué)習(xí)交流。& F5 S6 v5 t. r0 Z# C
    * ^0 a  p" e) F! V" c) p  B

    ! A7 p6 a; |# y
    9 M2 w: M- `; Q8 W3 Q2 d0 S* V' B6 r11.2、用戶的文章中心2 p; Q1 s, C2 U5 V: e5 [8 h8 T+ k/ J; s
    用戶的文章微服務(wù)中心的功能包含發(fā)表,查看,修改,刪除,用戶可以控制自己發(fā)表過的每一篇文章。2 N3 ^; P* ^' @; X
    & z, ?* u3 a$ V- v

    ) U- P# s2 ^8 R% N+ n
    : p! Q3 x4 n# r關(guān)于文章的增刪改會在后續(xù)標(biāo)題中得到詳解,在此只放出用戶的個人文章中心由圖可以看出是用戶發(fā)表過的全部文章,后端利用的是先分頁后List方式,最終傳送前端進(jìn)行ListItem遍歷顯示即可。, l. ~1 U$ a2 I- Z" {- |8 T
    ( \1 q- K6 ?7 \5 o
    由于也使用了Elasticsearch把文章分類作為存儲索引,但是重要的文章信息均放在數(shù)據(jù)庫中,在此只提一下,到后續(xù)的分類搜索中會詳細(xì)說明。
    ! D/ W3 u' M+ Q
    1 o9 f4 {9 p2 V9 ^" b2 }11.3、發(fā)表個人的博客' h  m! ?/ c9 [) p* V9 {: c
    文章的的發(fā)布有許多選擇,自己可以選擇文章的分類和文章的標(biāo)簽,同樣也可以設(shè)置文章的可見性。用戶可以設(shè)置文章的標(biāo)簽,標(biāo)簽用來顯示給游客看,用來文章的標(biāo)識認(rèn)證,還可以設(shè)置文章的分類,類型和保密性,每種文章的分類會發(fā)布到那個分類的專區(qū)。文章類型有三種,若是轉(zhuǎn)載和翻譯他人的文章需要著名地址,保護(hù)他人的知識勞動成果。只有具備會員資格才可以發(fā)送到會員專區(qū),但是轉(zhuǎn)載的文章不可以發(fā)送到會員專區(qū),發(fā)表文章時(shí)可參考紅字注意事項(xiàng)。4 K, L" S0 p1 J% [; H5 I

    . u- s7 z2 i( \0 n7 b4 Z
    1 _: Q' F- M, }
    . @& L2 N- g5 A/ G4 z' y博客的發(fā)表的核心原代碼如以下所示:4 B0 {" s1 D& |0 Q) j, h1 ?% u0 i

    2 }& Z0 E2 D# ], ?' U$ Y
  • //獲取文章的摘要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());}/ Y" v1 K! s' K7 Q
    11.4、修改個人的博客: @' U7 a: ^" W$ ^! M2 T
    若是需要修改個人的博客,需要進(jìn)入圖5-33的個人博客中心,查看發(fā)表的指定文章進(jìn)入到指定文章的頁面,點(diǎn)擊編輯按鈕,不是本人的文章不會出現(xiàn)編輯按鈕,博客的編輯按鈕效果圖如下圖所示:& d% Z# I% }: \( @5 R& {# j: i; M

    % n  I! L! B6 [2 ~; i9 P, u3 t3 z/ Y% m0 c# ?
    ( U3 j" g1 G) ^) V
    可以修改文章的所有的條件與內(nèi)容。& [! Q7 `) T: H# a
    2 ?1 p$ g0 J$ R

    , V$ p# x1 i- t! v; P- A$ X. ^2 m6 |! `! M, a3 w5 I5 x/ I6 ]/ D
    文章的發(fā)表與修改的源碼不同在于要刪除之前的原屬文章的分類Id與標(biāo)簽Id的關(guān)聯(lián),再進(jìn)入文章的插入,不過文章的修改也會觸發(fā)在搜索引擎上的文章信息修改,搜索引擎上的文章信息也會跟著更新,保持搜索到最新的數(shù)據(jù)。
    5 |8 u% ?9 Z1 T! `- \
    : Z5 y4 I5 O, K11.5、刪除個人的博客! ]9 ~7 J, C4 \& ?7 y
    刪除個人的博客需要刪除數(shù)據(jù)庫和搜索引擎上的文章,刪除文章后不可恢復(fù)。
    0 P7 X1 L4 S, s5 K8 p; C- u. R5 ?6 `  E; Q1 f: V$ P2 o
    6 K+ n. N; O  c8 I# K4 [' j8 _

    / U( j: Q% {4 W# c0 h, f8 `0 @11.6、用戶的文章布局) ~$ A$ _, {, l
    完整博客的顯示方式是采用GitHub的代碼高亮布局,可以是用戶看到自己的博客是嵌入式的面板,可以給予人一種清爽的感覺。由于采用Vue,可以不用動態(tài)渲染html,使用v-html命令就可以把后端傳過來的數(shù)據(jù)利用showdown轉(zhuǎn)換器轉(zhuǎn)換給html直接顯示給用戶看。
    : t' q  S3 l3 W( w. D, `
    5 _1 Q7 q- V3 h7 d6 p! n+ p' w* H0 |3 u, d! Q4 s

    ) V. V. g8 M' d11.7、點(diǎn)贊用戶的文章
    0 J6 ^; H- V3 @# k* b9 q互聯(lián)網(wǎng)時(shí)代每個人都或許都點(diǎn)贊過他人分享的文章,本次設(shè)計(jì)是博客所以會涉及到點(diǎn)贊,當(dāng)用戶太多時(shí)需要考慮到高并發(fā)的情況。正常情況的點(diǎn)贊并不會給后端造成多大的負(fù)載壓力,如果是熱門的文章博客,用戶點(diǎn)贊與取消點(diǎn)贊,評論,分享等,對于后端來說這些都會帶來巨大的流量,如果后端接口支撐不住,前端得不到響應(yīng),前端無法響應(yīng)就會返回404,會導(dǎo)致用戶體驗(yàn)極差。$ k& T* x0 l: M0 W+ ]' f8 Y
    ' k; u% x/ W' o5 c

    / ]- \8 {8 e! ]& W
    2 {7 V* m& |0 |# z由上圖可知,核心的模塊就是點(diǎn)贊與取消點(diǎn)贊,利用Redisson把多個用戶的請求利用分布式鎖分開請求,利用“緩存”保護(hù)數(shù)據(jù)庫。若用戶點(diǎn)贊微博,則后端會先查詢是否存在點(diǎn)贊記錄,當(dāng)存在點(diǎn)贊記錄時(shí),分析是否是完成點(diǎn)贊還是已經(jīng)取消了點(diǎn)贊。若沒存在點(diǎn)贊記錄,則完成數(shù)據(jù)庫中的點(diǎn)贊記錄更新,再把點(diǎn)贊結(jié)果“緩存”到Redis中,若是取消點(diǎn)贊,則直接會在“緩存”中刪除,更新數(shù)據(jù)庫中的結(jié)果。每一篇文章的點(diǎn)贊總數(shù)都是利用“緩存”計(jì)算得到一篇文章的結(jié)果發(fā)送給前端顯示。前面的操作都是利用Redisson操作的,所以當(dāng)高并發(fā)多線程請求時(shí),分布式鎖就會控制資源的并發(fā)訪問,避免出現(xiàn)文章數(shù)據(jù)不一致的情況。; r: r) h8 `; P3 V- i4 _0 p

    - F/ s1 \2 f  t5 c, g( R0 ^+ P11.8、收藏用戶的文章& L6 G/ i5 n( s
    用戶允許收藏自己的文章,收藏的功能也借用了Redisson的分布鎖來控制收藏的緩存,收藏與博客的點(diǎn)贊功能相似。
    3 e* N4 R, V, f8 S; x4 t/ h( q0 |5 j9 F& [1 O

    - M4 a) e/ L8 i+ m" G9 Z9 Z/ c1 u: ]# R# y0 ]; H, v# T- [

    2 c2 s+ ?) K& |3 Q' A
    - v: c* }. C2 w2 f: H1 a
    ) k% R0 ^8 g$ N) C- D11.9、評論用戶的文章
    ; M1 S1 w" M$ i評論的實(shí)現(xiàn)比較簡單,一級評論的用戶的Id為父Id,只含有一級評論與二級評論,分頁直接查看文章的所有評論。6 V8 m% [6 q; |$ M
    ) E+ H; b! a! \4 |& J

    1 w9 r, R8 s/ O& v' {( \4 ?4 f- \6 Z
    11.10、博客的文章排行榜6 j. ^" M) `" s9 @( U+ M
    文章排行榜采依舊是利用了Redisson,排行榜與標(biāo)題3-7-4的點(diǎn)贊關(guān)聯(lián)緊密,“點(diǎn)贊”會導(dǎo)致熱流,形成短時(shí)間內(nèi)的超高人氣,把文章的排行榜放給用戶看,可以增強(qiáng)用戶的體驗(yàn)。不是所有的功能都要用分布式鎖,排行榜不需要用到分布式鎖,也不需要控制非常高的高并發(fā)流量,對于后端來說控制排行榜比較簡單。) [4 n7 F$ @; _5 w

    % Z4 c: ~; c* H9 I1 Z7 y! y7 b3 {4 Q; b4 W. N
    : q- v2 x9 K3 j! @' s' E4 `
    排行榜需要保證查詢數(shù)據(jù)庫的點(diǎn)贊表的SQL正確,SQL錯誤之后的所有操作都是白費(fèi)力氣,這個要設(shè)置一定的范圍與時(shí)間差來確保文章的間斷實(shí)時(shí)性,最后要把數(shù)據(jù)庫中的數(shù)據(jù)放到緩存中。對于緩存的操作,用戶的點(diǎn)贊與取消點(diǎn)贊都會觸發(fā)緩存中的排行榜排序。用戶請求后,會查到緩存中的排行榜點(diǎn)贊數(shù)最多的前10篇文章,利用List的文章Id找到文章的信息,最后打包傳給前端顯示。排行榜算是一種實(shí)時(shí)性要求不算很高的,可以使用定時(shí)的方式主動更新緩存中排行榜記錄。
    5 v+ F& \: d/ q
    ) ~/ g6 |7 f9 R2 _, t# E3 l' c6 g: }4 c2 r4 o8 U
    5 q8 n$ F) {6 R' v+ t! d

    0 |5 G& ~! f, y1 W12
    # n) h8 l7 W% j" x4 b& p博客的搜索中心4 Q; [, O( x8 X5 y) j* H  B
    12.1、搜索引擎的應(yīng)用; C& b# e& x" q/ m! d
    當(dāng)微服務(wù)整合Zipkin時(shí),運(yùn)行系統(tǒng)會產(chǎn)生大量的API運(yùn)行指標(biāo),而Elasticsearch(ES)作為一種存儲方式,可以把那些運(yùn)行API指標(biāo)存儲到ES中。
    9 b5 |# }/ ]4 @# q0 d1 T) `! X0 h$ {: ]
    / a3 U; X8 A  h* _+ b

    ' G6 z3 ]# p! P% h8 A, NElasticsearch的index是文檔索引,與數(shù)據(jù)庫的“庫”相似,type是文檔類型,與數(shù)據(jù)庫中的“表”相似,id是一個字段作為主鍵。  t/ Y! `: F. I( Q2 y6 I
    $ e8 y& I4 d. w; F
    12.2、博客的分類搜索
    5 o' V+ n( r) [* R  a2 J7 T博客的搜索中心包含文章的顯示的信息,例如標(biāo)題和文章內(nèi)容的摘要,由于把文章的整篇內(nèi)容均放到數(shù)據(jù)庫中,所以搜素引擎上的文章是負(fù)載均衡保存提示的信息,用戶可以根據(jù)搜索界面的搜索框查詢Elasticsearch上文章,根據(jù)的是文章的分類的區(qū)域和關(guān)鍵字,后端判關(guān)鍵字是否符合且存在,然后把結(jié)果傳給前端顯示。
    0 s9 j( _$ Y/ u& }, k' n) q7 m; s+ B2 n3 l8 E
    7 [- n- G% y6 t) ?* `

    0 A0 ]7 h9 Z. V6 r, C% z% c2 r6 h7 i1 c* Q
    $ ]( x$ g% F- T9 F5 J' V) S

    " ?8 j2 z4 c9 r2 a  T12.3、博客的分類主頁
    ( {2 H: v, \" w5 R博客的分類主頁是利用Elasticsearch上的文章信息進(jìn)行遍歷,用戶發(fā)表的博客時(shí)候選擇的分類作為Elasticsearch索引的名負(fù)載均衡到Elasticsearch,分類中心的文章每次選擇20篇最新的文章傳給給用戶觀看。/ t: }: c7 x8 O( R3 \/ Z: D3 v# h

    3 \# v/ H3 [4 U  _  d7 V/ q; H6 c$ Y, Q: P" Y+ Q
    3 C- Y8 O$ e" X
    13
    / c! i7 v. B  H1 A博客的測試分析3 C- g8 F1 x) E- A
    13.1、博客的請求抗壓性分析  C6 O, z; A! }' e# M
    博客采用的是前后端的分離模式,所以對于前端傳過來的Token,后端只要鑒定Redis中存在Token即放行API的請求,同時(shí)前端可以防止表單的多次提交,前端可以增加JS監(jiān)聽Button的提交,也可以使用session鑒定請求的時(shí)間間隔。不過博客大多采用Axios的異步提交,http成功時(shí)可以把Button設(shè)置為true或者直接局部刷新網(wǎng)頁重置數(shù)據(jù)。對于博客中的支付中心,另起線程中需要防止出現(xiàn)業(yè)務(wù)出現(xiàn)錯誤,或者網(wǎng)絡(luò)錯誤導(dǎo)致負(fù)載均衡出現(xiàn)中斷錯誤,所以需要catch防止程序出現(xiàn)錯誤,同樣還必須保存支付寶異步通知的結(jié)果防止另起線程中出現(xiàn)異常。對于每個用戶的請求,可以采用服務(wù)器的限制流量,限制的方向可由個人選擇,需要在服務(wù)器的圖形化界面中可以設(shè)置。7 [: s2 ?. \& N

    # j/ Y2 X% H  ~+ s9 F8 Q! _: ]8 Y
    ' a: ^! E" m6 s+ Y+ S; G
    * O0 g( k% Z* R9 c, R7 `( M13.2、博客的功能擴(kuò)展性分析
    , \7 i. X0 @9 A7 X博客的前端容易擴(kuò)展,由于Vue本身具有的實(shí)用的數(shù)據(jù)綁定優(yōu)勢,所以前端只要時(shí)間充足就可以隨意擴(kuò)展,還有一個很重要的原因是安全是后端來控制的。博客后端的每一個微服務(wù)的中心承擔(dān)著一個功能模塊,若是發(fā)生不同功能的擴(kuò)充則需要多添加一個微服務(wù)的中心。當(dāng)功能相同只是擴(kuò)展當(dāng)前的功能,則可以直接在某個微服務(wù)中心增加代碼即可。編寫博客時(shí)遵守了Java代碼的規(guī)范,為以后的擴(kuò)充打下堅(jiān)實(shí)的基礎(chǔ)。本次博客各個中心均遵守了Java的代碼規(guī)范,微服務(wù)中的module劃分清晰,功能擴(kuò)充方便。
      z0 [+ i$ k, w0 z6 ~$ q$ O, z- W1 k' \! }$ [7 X
    Pom文件中的module劃分如下圖所示:
    9 `: U1 m5 K% I" K% n0 N7 e9 `- A* k

    * {% p' \( {0 b2 l) Q% J# l) |( V2 s, n( d: h
    項(xiàng)目工程資源請參見:https://download.csdn.net/download/m0_38106923/87849577
    , i8 e) N6 N* _7 g& ?; U% I" V6 o* |+ A; Z4 T; `; h
    / A4 p0 Q3 N8 c% J- V8 L+ x3 o
    往期推薦畢業(yè)設(shè)計(jì)So Easy:Java MySQL智能報(bào)紙閱讀器APP應(yīng)用
    2 D  l" n' u( y, m9 W9 t畢業(yè)設(shè)計(jì)So Easy:基于C++實(shí)現(xiàn)網(wǎng)絡(luò)掃描器
      z% [- c5 H- {* v) b1 Y  M畢業(yè)設(shè)計(jì)So Easy:基于Java Web學(xué)生選課系統(tǒng)
    7 N- r1 Z- ^* H1 S畢業(yè)設(shè)計(jì)So Easy:基于Java語言西餐廳點(diǎn)餐系統(tǒng)
    : B5 l, p3 u- U( `/ X) ]. C畢業(yè)設(shè)計(jì)So Easy:珠穆朗瑪FM音頻電臺APP" o  \8 G: b1 a$ C
    / o4 z: |/ B  d
    / Q& ~" v' m* L- p$ F) |

    4 H) I) n. q$ S點(diǎn)擊閱讀原文,更精彩~
  • 發(fā)表回復(fù)

    您需要登錄后才可以回帖 登錄 | 立即注冊

    本版積分規(guī)則


    聯(lián)系客服 關(guān)注微信 下載APP 返回頂部 返回列表