|
txbo4i5mllk64018793225.gif (60.41 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
txbo4i5mllk64018793225.gif
2024-9-11 09:52 上傳
) J: F- g; O% ?
點(diǎn)擊上方藍(lán)色字體,關(guān)注我們1 x; J9 H, @ ?% @6 U$ s
很多計(jì)算機(jī)專業(yè)大學(xué)生經(jīng)常和我交流:畢業(yè)設(shè)計(jì)沒(méi)思路、不會(huì)做、論文不會(huì)寫(xiě)、太難了......, b/ t1 Y( U; T( ~& y& b
. O" ^9 N) r$ I+ f8 e, G" D' n
針對(duì)這些問(wèn)題,決定分享一些軟、硬件項(xiàng)目的設(shè)計(jì)思路和實(shí)施方法,希望可以幫助大家,也祝愿各位學(xué)子,順利畢業(yè)!! \7 `2 W/ r1 f2 w- G$ N
7 `9 D' C* K, S& c
whf4oczz5yb64018793325.png (178.92 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
whf4oczz5yb64018793325.png
2024-9-11 09:52 上傳
) H, g" n1 c2 U- D5 O
. C$ k# s0 b6 s- R: ^- G
0 G6 u: e) n2 o- S% T8 g8 P' n; B, w對(duì)計(jì)算機(jī)技術(shù)感興趣的小伙伴請(qǐng)關(guān)注公眾號(hào):美男子玩編程,公眾號(hào)優(yōu)先推送最新技術(shù)博文,創(chuàng)作不易,請(qǐng)各位朋友多多點(diǎn)贊、收藏、關(guān)注支持~2 d8 U2 x+ F3 h
' d/ S- _. U. O: h4 ?- p1 r9 c
項(xiàng)目專欄:https://blog.csdn.net/m0_38106923/category_11085518.html
, `- P1 x2 ]. _! o" k/ n( f博客是互聯(lián)網(wǎng)的一種分享類型的技術(shù)產(chǎn)物,但是如何留著用戶才是重要的,并不都是所有的功能都會(huì)涉及到“高并發(fā)”,博客的功能多樣性會(huì)增強(qiáng)用戶的體驗(yàn),讓用戶對(duì)博客的使用產(chǎn)生依賴性,利用從眾心態(tài)合理地開(kāi)發(fā)增值功能。9 m3 }+ Q; s/ t0 P
, F7 s# `8 p5 F4 u; j
本次系統(tǒng)的開(kāi)發(fā)采用了主流的微服務(wù)架構(gòu)方式,所以把控每個(gè)微服務(wù)的功能相互獨(dú)立和完整是“微服務(wù)”系統(tǒng)的關(guān)鍵。由于博客的實(shí)現(xiàn)比較簡(jiǎn)單,所以只有涉及到“高并發(fā)”的時(shí)候需要斷點(diǎn)分析即可,下面將介紹博客系統(tǒng)的一些功能。' x: ~+ w: V7 S. Q( }* \- X
8 m# u x; V- w" x
項(xiàng)目工程資源請(qǐng)參見(jiàn):https://download.csdn.net/download/m0_38106923/87849577
; o% t4 |9 f; D1- @. h! w) L; ?& U5 n" b$ N1 t' P
項(xiàng)目功能
) T3 E2 _+ Y4 n% N# s! P% n博客基本的功都具備,例如博客的核心功能:博客的發(fā)表,刪除,瀏覽,評(píng)論,點(diǎn)贊等。除了這些,還可以每天定時(shí)簽到提升博客的等級(jí),充值會(huì)員提升使用體驗(yàn)。: ?$ N8 Q& Y$ J {0 p4 j
# e: q1 V7 j/ E& z# ~4 I# _個(gè)人的安全信息也非常重要,所以我單獨(dú)劃分一個(gè)微服務(wù)中心來(lái)實(shí)現(xiàn)。同樣我在每行重要的代碼上都增加了明顯的注釋,這對(duì)于我以后的維護(hù)和擴(kuò)充博客功能可以打下堅(jiān)實(shí)的基礎(chǔ),盡可能地符合軟件設(shè)計(jì)開(kāi)發(fā)原則。. q0 ?7 T9 O7 s- O1 Y6 K8 U+ J
: q4 b% R, O* X, p" K關(guān)于博客的功能一共涉及到8個(gè)微服務(wù)中心:用戶的個(gè)人中心:包含登錄、注冊(cè)、智能驗(yàn)證。用戶的安全中心:安全信息、手機(jī)與郵箱的基本功能和安全認(rèn)證的接口。用戶的博客中心:發(fā)表和管理個(gè)人的博客,游客可以瀏覽公開(kāi)的博客。用戶的文件中心:發(fā)表博客需要用到的圖片和個(gè)人用戶的頭像。用戶的簽到中心:博客的簽到累計(jì)的經(jīng)驗(yàn)值和簽到獎(jiǎng)勵(lì)。用戶的會(huì)員中心:包含普通會(huì)員和超級(jí)會(huì)員。用戶的支付中心:VIP的充值功能,個(gè)人錢(qián)包功能,賬單等。用戶的搜索中心:根據(jù)摘要或者文章標(biāo)題的關(guān)鍵字搜索指定的博客。5 Y) a% O3 U' g5 h
[/ol]" n" m; G) m3 y
25 }' c! D. _8 C1 |
項(xiàng)目架構(gòu)設(shè)計(jì)+ e) E E9 j8 C8 m, L- D( @ U# O
ynra5ov3as264018793425.png (35.19 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
ynra5ov3as264018793425.png
2024-9-11 09:52 上傳
! x P/ f. V4 W! S4 y$ M+ c$ R) I
1 M5 Z- b, n1 i. {* U從宏觀設(shè)計(jì)來(lái)說(shuō),各個(gè)微服務(wù)中心都是一個(gè)moudle,需要注冊(cè)到一個(gè)高可用的微服務(wù)注冊(cè)中心上保證機(jī)器信息的正確性。; h* D+ \0 ^+ M, A
2 w% Z2 j. H8 l4 @9 s
從微觀運(yùn)行來(lái)說(shuō),用戶的請(qǐng)求API都經(jīng)過(guò)Zuul,再由Zuul負(fù)載均衡分配給需要的微服務(wù)中心,所以Zuul也需要高可用保證用戶流量可以得到回應(yīng)。通過(guò)zuul網(wǎng)關(guān)后,請(qǐng)求通過(guò)Feign實(shí)現(xiàn)微服務(wù)之間數(shù)據(jù)的交互。1 G$ B5 T2 C5 O: F1 {+ K' g6 I8 l
) T7 }( @6 d( \/ ~& a( H: f( W
當(dāng)發(fā)生錯(cuò)誤運(yùn)行時(shí),利用Hystrix的回退機(jī)制保護(hù)系統(tǒng)的穩(wěn)定運(yùn)行,不會(huì)發(fā)生級(jí)聯(lián)占用效應(yīng),保證每一個(gè)請(qǐng)求API都可以得到響應(yīng)。當(dāng)發(fā)生網(wǎng)絡(luò)不可用的情況下,需要觸發(fā)用戶的補(bǔ)償機(jī)制,當(dāng)出現(xiàn)不可知的錯(cuò)誤時(shí),也可以直接管理機(jī)器的集群來(lái)維護(hù)系統(tǒng)的穩(wěn)定運(yùn)行。
4 \# u! l% |" f: E; j0 _. @) A0 c7 p3
3 M- o/ V: W2 Q7 D: M3 B0 j項(xiàng)目數(shù)據(jù)庫(kù)設(shè)計(jì)" S, s7 |" ]# W0 N
對(duì)于用戶來(lái)說(shuō),需要輸入賬號(hào)和密碼,若是不存在可以注冊(cè)自己的賬號(hào)和密碼。注冊(cè)的時(shí)候提供30分鐘填寫(xiě)博客信息的有效時(shí)間,不填寫(xiě)則直接登錄。需要設(shè)置個(gè)人的手機(jī)和郵箱來(lái)綁定安全認(rèn)證,若想要開(kāi)通我的錢(qián)包則需要實(shí)名注冊(cè),同樣也包含校園認(rèn)證。丟失了個(gè)人信息,則可以用身份證申訴。每天凌晨開(kāi)始可以開(kāi)始簽到,根據(jù)會(huì)員的不同增益不同,簽到的持續(xù)天數(shù)不同經(jīng)驗(yàn)值累加也不同。會(huì)員的開(kāi)通只包含支付寶,賬單是每筆消費(fèi)的記錄。核心表是用戶博客之類的表,文章均存在數(shù)據(jù)庫(kù),不過(guò)ElasticSearch也保存了文章的標(biāo)題和摘要。每個(gè)用戶可以評(píng)論他人的文章,私密的文章不會(huì)出現(xiàn),會(huì)員的文章會(huì)出現(xiàn)在會(huì)員專區(qū)。
) R# S: p, D0 V( F( a& ]9 ?4 W9 N1 f# N: n/ U
博客一共含有8個(gè)主功能,所以一共涉及用戶表,用戶信息表,安全表,頭像表,簽到表,簽到獎(jiǎng)勵(lì)表(兩種獎(jiǎng)勵(lì)),會(huì)員表,錢(qián)包表,訂單表,博客表,博客分類表,博客標(biāo)簽表,博客圖片表,博客的評(píng)論表,點(diǎn)贊表和收藏表17個(gè)表。: D* ?+ m4 A! X7 Z2 v( r
! e. T+ ?; j. b0 u0 L+ `- r
wtnzpfcfiqm64018793525.png (196.76 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
wtnzpfcfiqm64018793525.png
2024-9-11 09:52 上傳
* O7 d0 j3 q) d/ q4 A
8 A9 x& X# f5 L/ s _ {4( `% R3 F1 O4 W
項(xiàng)目架構(gòu)實(shí)現(xiàn)
. |8 ^0 p! _" P$ r2 P4.1、Vue架構(gòu)的實(shí)現(xiàn)8 L# k2 ~# g" B+ e
前端IDE采用的是WebStorm,博客的Vue主要分布如下圖所示:
6 |- I3 \' X7 ~/ c1 L2 ^ t* W& b2 X" s! A L% c
jwf0nutreui64018793626.png (20.62 KB, 下載次數(shù): 1)
下載附件
保存到相冊(cè)
jwf0nutreui64018793626.png
2024-9-11 09:52 上傳
& w/ w4 ]. t: u; x0 }( j0 p% Z2 y5 j- W' e1 e: g% ^
Alert.js是自定義重構(gòu)代碼的漂亮提示框。axios.js是封裝好的axios請(qǐng)求HTTP函數(shù),components是Vue文件存儲(chǔ)位置,也是Vue的組件,index.js是管理前端路由url的跳轉(zhuǎn),利用components組件與url的控制。store.js是組件狀態(tài)管理的文件,由于采用的LocalStorage本地存儲(chǔ)所以并不是主用。main.js是全局文件也是最重要的文件,管理Vue的全局配置。static/img中保存的是博客所用的圖片。
* v/ G) M6 S z不管是用IDE創(chuàng)建的項(xiàng)目還是采用常規(guī)腳手架創(chuàng)建的vue項(xiàng)目,其項(xiàng)目都會(huì)在根目錄生成一個(gè)package.json文件,這個(gè)文件與后端的“pom”相似,這個(gè)文件包含所需要的各種包,還包含項(xiàng)目的配置的名稱與版本對(duì)應(yīng)。1 Z( x6 g" H; Z0 v+ ?8 y
6 _. S; m7 _5 |$ A% [3 C
博客項(xiàng)目中的package的完整dependencies代碼如以下所示:4 K3 j: t3 |+ L5 j* M) A
: }2 z9 N. f" f) G. |
"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" }
# ~, X6 f# I; G$ p4.2、SpringCloud架構(gòu)的實(shí)現(xiàn)" p6 A1 [ e) T. @5 i5 R) L
博客Maven的整體微服務(wù)中心實(shí)現(xiàn)的結(jié)構(gòu)圖如下所示:: ]: o; G4 t1 y0 c
4 @! S* U9 Z1 {+ Z9 y d
nh23jw5qhse64018793726.png (57.48 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
nh23jw5qhse64018793726.png
2024-9-11 09:52 上傳
5 u7 \- e- b9 u" k
; R& P/ P. z9 G0 j! V7 Y1 G! t" lSpringCloud是基于Java語(yǔ)言的工具集,SpringCloud具備拿來(lái)就用的特性,可以節(jié)省開(kāi)發(fā)的配置時(shí)間,它可以在Docker等云環(huán)境中開(kāi)發(fā)和部署。SpringCloud的組件比較豐富,博客使用了Eureka,Zuul,F(xiàn)eign,Htsrrix,trubine,Zipkin微服務(wù)組件。組件可以自由地選擇,不過(guò)需要解決SpringBoot與SpringCloud之間的版本依賴才能使用。博客涉及到的Java的JDK版本是1.8,SpringBoot的版本是Spring Boot 1.5.9.RELEASE,SpringCloud的版本是Edgware SR4。后端的IDE采用的是IDEA,Maven的版本為3.6.1,任何一個(gè)版本的更改都可能會(huì)導(dǎo)致兼容不一致。
' c! y3 [: H2 J! r; M* o8 e) [
4 r8 @# S5 x+ B/ l% t; I! W' A4.3、博客的高可用的實(shí)現(xiàn)
5 G) x( q2 M1 J) W2 y% @博客使用了兩個(gè)Zuul并且注冊(cè)到高可用的服務(wù)發(fā)現(xiàn)中心來(lái)構(gòu)造Zuul高可用集群。Eureka是所有微服務(wù)的注冊(cè)中心,并且自己本身也是微服務(wù)不過(guò)需要禁止自我注冊(cè)。Eureka注冊(cè)中心包含每個(gè)微服務(wù)的名稱,IP,端口等,由于因?yàn)榈膯蝹(gè)節(jié)點(diǎn)的微服務(wù)可能會(huì)發(fā)生不可用的情況下導(dǎo)致系統(tǒng)發(fā)生停機(jī),所以采用高可用的微服務(wù)注冊(cè)中心。讓兩個(gè)(多個(gè))服務(wù)發(fā)現(xiàn)組件相互注冊(cè)以達(dá)到可以保持其它微服務(wù)的調(diào)用,維持整個(gè)系統(tǒng)的高可用性,整個(gè)博客的Eureka服務(wù)注冊(cè)中心圖如下圖所示:
3 o! ^* Q3 k: k9 n, b$ s! |' E1 |) E; D; c
dbi5bnn4slp64018793826.png (147.53 KB, 下載次數(shù): 1)
下載附件
保存到相冊(cè)
dbi5bnn4slp64018793826.png
2024-9-11 09:52 上傳
: E! {5 T: A* n9 y _8 j
1 { f3 K7 Q9 ZDS Replicas代表兩個(gè)模塊加載模擬單機(jī)代替高可用的實(shí)現(xiàn),不過(guò)需要修改本地Host來(lái)模擬真實(shí)多機(jī)高可用的效果。每個(gè)微服務(wù)都具有自己的虛擬主機(jī)名以及狀態(tài)來(lái)描繪微服務(wù)的顯示情況。每個(gè)微服務(wù)之間通過(guò)與服務(wù)注冊(cè)中心每30S心跳傳遞保證服務(wù)可用性。默認(rèn)90S沒(méi)有收到心跳則會(huì)注銷該微服務(wù)。EurekaServerOne與EurekaServerTwo為兩個(gè)微服務(wù)注冊(cè)中心,兩者相互注冊(cè)到對(duì)方的服務(wù)中心上來(lái)保證Eureka的高可用穩(wěn)定,從而使每一個(gè)博客的請(qǐng)求都可以得到響應(yīng)。6 h/ y" p+ t6 H+ L9 D: B
k! a a" o% [5$ N* C. w! b& _+ S% W. ?8 P* ]
用戶的個(gè)人中心
& \. k" m7 M: e" V$ |用戶的個(gè)人中心相當(dāng)于博客的大門(mén),用戶的首次流量都經(jīng)過(guò)此處,首次負(fù)載均衡調(diào)用也是基于這個(gè)中心開(kāi)始,主要涉及到用戶的登錄與注冊(cè)的基本功能,在登錄上排除惡意的攻擊與干擾,保證博客登錄的穩(wěn)定,從而保證系統(tǒng)的穩(wěn)定。這個(gè)中心核心功能就是權(quán)限驗(yàn)證,保持登錄的標(biāo)志,它是保持業(yè)務(wù)穩(wěn)定的重要因素,后續(xù)的實(shí)現(xiàn)會(huì)在以上所述的三個(gè)重要功能展開(kāi)來(lái)講。, M7 @, P7 Q3 m4 d7 y) S4 W6 `8 Y
5 n) v, ^* J+ @5 x; L0 c
5.1、登錄的智能驗(yàn)證( y" v7 W& a( y
Vue整合阿里云智能驗(yàn)證時(shí),需要注冊(cè)布局組件來(lái)動(dòng)態(tài)加載JavaScript文件,不然無(wú)法使用阿里云的智能組件,前端登錄智能驗(yàn)證的核心代碼如以下所示:$ [% i1 {0 @/ G9 l0 ]
# y0 ~, |, ^( L6 O//動(dòng)態(tài)加載阿里云的JavaScript文件src="//g.alicdn.com/sd/nvc/1.1.112/guide.js" @loaded="initCaptcha">
# |: k: c. E' R3 h; J//注冊(cè)局部組件來(lái)加載阿里云的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 } } } },) U- e0 X' T/ o* b
//點(diǎn)擊智能驗(yàn)證的封裝函數(shù) initCaptcha() { let _this=this; let ic = new smartCaptcha({ renderTo: '#sc', width: 350, height: 42, default_txt: "請(qǐng)點(diǎn)擊驗(yàn)證按鈕", success_txt: "博客登錄驗(yàn)證成功", fail_txt: "點(diǎn)擊按鈕重新刷新登錄驗(yàn)證", scaning_txt: "智能檢測(cè)中", 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, A* U* P U5 f! F/ F$ i% T& t3 z% C
5.2、博客的登錄注冊(cè)
0 P1 b: I! P9 O& d% Q+ l登錄是一個(gè)系統(tǒng)的重要的功能,也是個(gè)人隱私的重要體現(xiàn),拿常見(jiàn)的登錄有郵箱,手機(jī),賬號(hào)或,語(yǔ)音或者二維碼登錄,不過(guò)不管通過(guò)哪種登錄,個(gè)人信息的安全都應(yīng)該得到保護(hù),保護(hù)個(gè)人隱私重要的是從個(gè)人做起,拒絕非法點(diǎn)擊與輸入。/ z( P) _- U/ ?( b% W
; ^7 v) V0 u$ h2 \拿本次博客的登錄來(lái)說(shuō)只需要驗(yàn)證賬號(hào)和密碼就行,個(gè)人登錄是不會(huì)進(jìn)行權(quán)限驗(yàn)證。注冊(cè)成功會(huì)保持30分鐘的權(quán)限驗(yàn)證,關(guān)于權(quán)限驗(yàn)證會(huì)在標(biāo)題5-2-3中提到,以便后面的博客信息的操作,超過(guò)則需要重新登錄去博客的個(gè)人中心填寫(xiě)博客信息。( C F0 c# X3 R+ A
博客的登錄與注冊(cè)的頁(yè)面如下圖所示:
2 J- A0 D _( Q$ P
; I3 f- j; n0 ^) S) G
blja33oei1t64018793926.png (470.66 KB, 下載次數(shù): 1)
下載附件
保存到相冊(cè)
blja33oei1t64018793926.png
2024-9-11 09:52 上傳
" o; l4 q. ^6 `& S# g( W$ b7 E) w% q$ R$ e% f" B( a
博客登錄的用戶名需要以英文子母開(kāi)頭,用戶名和密碼均不可以超過(guò)16位,注冊(cè)保證兩次登錄密碼正確就可,在此不再貼出圖片累述。% b' J5 ]3 L5 h
F0 w8 b* N, r2 {, q( T5.3、登錄的權(quán)限驗(yàn)證5 ~ z$ Q2 v( d( f4 I, K$ p5 z# ?
登陸權(quán)限控制是每個(gè)系統(tǒng)都應(yīng)必備的功能,是保持登錄狀態(tài)的重要實(shí)現(xiàn)。微服務(wù)所有的權(quán)限驗(yàn)證均在一個(gè)module上,Token消時(shí)則直接回退給前端status 404失敗碼,成功則是執(zhí)行對(duì)應(yīng)的業(yè)務(wù)邏輯,注意登錄的博客是不需要權(quán)限驗(yàn)證。
# N/ C3 \1 w7 g" y% }6 K" I6 B7 G( B/ ]. H; u
博客使用了前后端攔截器攔截Token(登錄成功的認(rèn)證碼),所以后端需要定義一個(gè)token驗(yàn)證注解,用攔截器攔截系統(tǒng)的url請(qǐng)求,再進(jìn)行攔截用戶的API請(qǐng)求,最后再驗(yàn)證傳過(guò)來(lái)的token與Redis中token值是否一致,效驗(yàn)通過(guò)才可以正常訪問(wèn)。當(dāng)用戶登錄成功博客后,后端返回token數(shù)據(jù)。token具有存在時(shí)間,如果用戶一段時(shí)間后不在線或者操作的話,則token會(huì)失效,用戶保持登錄時(shí),則不會(huì)過(guò)期。) A2 U7 n2 u& b% ~2 [ D' T
. u7 q! B' f& }+ q: Q: ARedis中會(huì)以用戶的登錄賬號(hào)作為與token關(guān)聯(lián)的認(rèn)證,有效的token碼可以取出用戶的賬號(hào),然后再進(jìn)行業(yè)務(wù)邏輯。這些redis中的key都可以自行設(shè)置一些時(shí)間,不過(guò)前端只保存token值,二次登錄會(huì)覆蓋Redis中的token值。( b m' D h* ]/ Y
+ S; j. N( L$ |6 \. N/ r, _
pqee2mnpg5s64018794026.png (26.16 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
pqee2mnpg5s64018794026.png
2024-9-11 09:52 上傳
% ]5 g* W. r) p( a9 o, ]
# g! ^1 O8 C Q2 A3 [權(quán)限驗(yàn)證相當(dāng)于系統(tǒng)的第一道大門(mén),如今的安全框架越來(lái)越豐富,例如SpringSecurity,Shiro,OAuth等,shiro->security->oauth的上手難度逐漸提升。若是需要對(duì)密碼加密的,可以需根據(jù)個(gè)人開(kāi)發(fā)自行配置使用對(duì)應(yīng)的安全框架。
8 v5 h) l: L* X- s9 h1 V+ R6, }) Q& y2 a, Q& C0 l
用戶的安全中心
3 O! |/ L' ]& B: r* p7 E, G8 B4 k, s6.1、用戶的安全布局
6 x3 v) T% A5 i L, c8 h安全中心包含郵箱,手機(jī),身份證,校園認(rèn)證和其它微服務(wù)中心需要用到的認(rèn)證接口。郵箱采用QQ郵箱,開(kāi)啟smtP 587端口發(fā)送郵箱驗(yàn)證碼。手機(jī)采用阿里云短信API服務(wù)。兩者的驗(yàn)證碼存在的時(shí)間均為1次失效且存在10分鐘。身份證需要手機(jī)號(hào)的驗(yàn)證。校園認(rèn)證的名字需要和身份證的名字一致。除了綁定一些安全的服務(wù),還包括三種修改密碼的方式,原始密碼修改新密碼,郵箱重置密碼,手機(jī)重置密碼,身份證重置密碼。個(gè)人申述包括手機(jī)號(hào)重置郵箱,舊手機(jī)更換新手機(jī),身份證重置手機(jī)。- x. B, s2 I5 J2 ~# v, ~
5 k% p8 |( J- Q7 U- `/ k4 E
u3mbr3h1glz64018794126.png (66.53 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
u3mbr3h1glz64018794126.png
2024-9-11 09:52 上傳
, d# z3 M: E3 y. Q$ k, G! X8 z' G8 k
安全中心包括用戶的規(guī)則規(guī)章,博客旨在分享自己的動(dòng)態(tài)和經(jīng)驗(yàn)給他人,不可以辱罵他人,以及不遵守國(guó)家的法律法規(guī)。本次博客的其它微服務(wù)中心所需要的手機(jī)認(rèn)證接口均由這個(gè)微服務(wù)中心提供。- ^3 o- Y: Y' V o, H: X
7 Q) x5 u# E2 o# U& u2 J
6.2、用戶的郵箱注冊(cè)
' s: G; f9 i! O& `' d博客采用的是免費(fèi)的QQ郵箱,郵箱的yml配置如下:
* J6 V/ _$ R- n, o2 o! Z
- k' P* Q8 } f% C5 zmail: host: smtp.qq.com port: 465或587 protocol: smtp username: 個(gè)人的郵箱 password: 郵箱的SMTP的密碼,可在郵箱的賬戶中開(kāi)啟SMTP服務(wù) default-encoding: UTF-8 properties: mail: debug: true #控制臺(tái)開(kāi)啟運(yùn)行日志
! n4 K: j% I2 r( z& c8 ]QQ郵箱(郵箱與手機(jī)的六位驗(yàn)證碼共用)發(fā)送驗(yàn)證碼按鈕的原代碼如以下所示:! Z+ Y) ]0 ~" S, O; B' t
7 R% q- }1 b/ M& D. m: P8 G
//自動(dòng)生成的驗(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();}
0 n8 n9 Y4 O9 w& i! v* N綁定QQ郵箱JavaScript的代碼如以下所示:
7 F& ?0 v, b2 }9 J$ ~# l$ E8 m- i5 A- y
//綁定郵箱的發(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); } }) } }8 b- z7 G" F" ~+ A9 y+ u
后端發(fā)送QQ郵箱注冊(cè)的驗(yàn)證碼如以下所示:" C( k% _, w. b2 U, K* r' G( B
) `; F( h8 _& }3 l1 C
//后端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);# } e- V! S& }* V1 u
//From-to,主題和信息. SimpleMailMessage simpleMailMessage = new SimpleMailMessage(); simpleMailMessage.setFrom(FORM); simpleMailMessage.setTo(email); simpleMailMessage.setSubject(SUBJECT); simpleMailMessage.setText("你的郵箱驗(yàn)證碼是: "+emailYzm+"本次驗(yàn)證碼 會(huì)在10分鐘后失效,請(qǐng)立馬使用。"); //發(fā)送郵箱驗(yàn)證碼 javaMailSender.send(simpleMailMessage);2 N& g4 J3 G7 O' v6 m, x
//開(kāi)啟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);}* y M/ L0 `9 v @# E c: m
6.3、用戶的手機(jī)注冊(cè)# V% h: u9 i1 K9 `2 G' I
發(fā)動(dòng)短信的前端JavaScript的代碼如以下所示:
& L( Q5 D$ G( ~ C//前端綁定手機(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);}})}}) ^) ?7 k- d4 }: ~
2 g ^) F3 {: J1 h# n3 P) g后端發(fā)送驗(yàn)證碼的代碼如以下所示:
* F( H2 _9 D2 Y: y* E) a) [: c# T8 O! g6 o5 Z( n
//生成手機(jī)的驗(yàn)證碼 String phoneYzm= generateVerifyCode(6, EMAIL_CODES); //阿里云發(fā)送短信的API DefaultProfile profile = DefaultProfile.getProfile("cn-hangzhou", "個(gè)人隱私", "個(gè)人隱私"); 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", "個(gè)人隱私"); request.putQueryParameter("TemplateCode", "個(gè)人隱私"); request.putQueryParameter("TemplateParam", "{\"codeab\":\""+phoneYzm+"\"}"); //發(fā)送注冊(cè)手機(jī)的驗(yàn)證碼 try { CommonResponse response = client.getCommonResponse(request); System.out.println(response.getData()); } catch (ServerException e) { e.printStackTrace(); } catch (ClientException e) { e.printStackTrace();} //開(kāi)啟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);}
3 }/ q, Z" F1 M; U1 i4 w) p6.4、用戶的安全認(rèn)證, M! j- c. y' Q/ C2 Z/ D
提供安全的認(rèn)證有身份認(rèn)證與校園認(rèn)證,當(dāng)然只是表單的提交,真實(shí)的認(rèn)證需要有關(guān)部門(mén)的配合,在此只是用來(lái)模擬,校園認(rèn)證需要與身份證的名字保持一致,否則無(wú)法通過(guò)。7 K l3 `+ C# K$ M7 ^$ m* b
1 n$ w+ M+ Z0 q5 [) G- R) ~6 ~
ooxpuy4qb5g64018794226.png (41.52 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
ooxpuy4qb5g64018794226.png
2024-9-11 09:52 上傳
" D. r" g; O' [& p1 V. K @" ?
0 m) S ~$ L" y7 h: j
( ^9 C9 B4 c8 w! I( v7 M& A1 C
532oqb3wuxz64018794327.png (36.37 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
532oqb3wuxz64018794327.png
2024-9-11 09:52 上傳
/ \! q9 d% K, A! `
; Q& S9 B4 q I6.5、用戶的密碼安全
6 y0 j4 `9 y4 M# Q8 H當(dāng)個(gè)人安全賬號(hào)發(fā)生異常,可以提供修改密碼,也可以重置密碼。
7 S4 U* M" w6 D# a( i
' p, G3 O3 r* k9 S6 W/ b
jyheg4gx3kp64018794427.png (34.75 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
jyheg4gx3kp64018794427.png
2024-9-11 09:52 上傳
4 p& N6 L0 A7 G8 G+ i9 W; v" |) t1 T
+ o. _ o* [7 Q+ I' q0 T
* ~( x$ |' Z& t- s" s" k
lkwcv2yg4e464018794527.png (45.41 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
lkwcv2yg4e464018794527.png
2024-9-11 09:52 上傳
# E2 u+ _& J( K3 W# n
( C( j; r" X# j6 t0 N6.6、用戶的賬號(hào)申訴5 ^6 j: I2 i6 J# ^! S' O5 e- A
可以使用手機(jī)號(hào)重置郵箱,也可以使用舊手機(jī)號(hào)更換新手機(jī)號(hào)。如果個(gè)人博客的手機(jī)號(hào)安全信息被盜取,手機(jī)號(hào)也可以被重置,但是需要借助身份證申訴,不過(guò)一天只可以成功申訴一次。
, t2 J1 |4 G' H" ~. K. T: M4 p; m \% k8 i" Q. b
ufy2cu1e5dv64018794627.png (48.97 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
ufy2cu1e5dv64018794627.png
2024-9-11 09:52 上傳
. x" B! M+ W" ~7 ~7 B, V6 |6 k3 C' x7 K) P' L6 p' j8 T
7. l! ?$ |! r5 S: S/ X$ U
用戶的文件中心4 ^2 H5 ^* |, L3 s9 y
7.1、用戶的頭像存儲(chǔ)/ V, @! t8 S" n2 o
當(dāng)用戶注冊(cè)的時(shí)會(huì)需要選擇個(gè)人的頭像,上傳的頭像只能是JPG格式且大小不能超過(guò)2MB,且上傳前會(huì)先查詢數(shù)據(jù)庫(kù)中的頭像圖片名是否已經(jīng)存在,存在的話直接會(huì)先刪除OSS中舊圖片,再插入新圖片,如果不存在的話,直接插入到OSS文件服務(wù)器中。頭像的存儲(chǔ)流程由前端發(fā)起file傳給后端,后端接受file頭像,利用二進(jìn)制傳給OSS文件服務(wù)器。服務(wù)器再傳過(guò)來(lái)頭像的外網(wǎng)URL地址,此時(shí)修改顯示時(shí)間為10年再返還給用戶,最后把頭像外網(wǎng)URL地址保存到自己的LocalStorage本地。5 P& v- h& y5 C9 L
) N9 [/ T) B6 M' _: B; t% b3 R; p
flrfy0zfido64018794727.png (190.48 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
flrfy0zfido64018794727.png
2024-9-11 09:52 上傳
* q( w+ y' u$ E$ B4 c3 Z# @/ A3 R, F
7.2、博客的圖片存儲(chǔ)# O* J2 b4 B) N+ g! N: V
發(fā)表博客時(shí)文章中會(huì)包含圖片,前端獲取后端的博客圖片url綁定在前端文章中顯示,同樣url也在文章內(nèi)容中一起保存到數(shù)據(jù)庫(kù)中。上傳圖片和上傳頭像不同,文章需要用到的圖片可以有多張,不存在覆蓋問(wèn)題。需要根據(jù)個(gè)人的文件服務(wù)器的存儲(chǔ)量來(lái)權(quán)衡上傳圖片大小。5 b( v" R* H% p# l# k9 I7 Q$ q2 `
4 S) d1 S" k' X2 A" Z% u
4jtcmiy23r264018794827.png (234.2 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
4jtcmiy23r264018794827.png
2024-9-11 09:52 上傳
9 c0 K/ j; r5 T: F, Y- p( _
# s; n! Y# Q. _+ |# ^/ G) ?4 E/ L+ u
8 V. w) B, ?1 L! b% n- O* c: E
用戶的簽到中心
; M1 ?+ c" I$ F4 w用戶的簽到等級(jí)代表用的可以使用的權(quán)限,當(dāng)簽到累計(jì)天數(shù)和連續(xù)天數(shù)達(dá)到獎(jiǎng)勵(lì)階段時(shí)觸發(fā)一鍵領(lǐng)取獎(jiǎng)勵(lì)按鈕,每次獎(jiǎng)勵(lì)每個(gè)賬號(hào)只可以領(lǐng)取一次。整個(gè)簽到的等級(jí)由經(jīng)驗(yàn)值決定,但是每天獲得經(jīng)驗(yàn)值為1500。簽到的經(jīng)驗(yàn)值還會(huì)進(jìn)行快速排序排名返還給前端,提升競(jìng)爭(zhēng)效果,同時(shí)會(huì)員增益機(jī)制也會(huì)導(dǎo)致不同的疊加效果。
; C+ ?' O, s: F+ z+ y+ {% Z! p& @
每天0點(diǎn)之前只能簽到一次,過(guò)完0點(diǎn)后Redis中限時(shí)憑證失效既可以再次簽到,簽到的經(jīng)驗(yàn)值采用二分查找和快速排序算法進(jìn)行計(jì)算最后的排名返還給用戶。4 O$ H1 k% |1 [0 ^
: e; B1 m) \0 a9 v" t0 s
簽到按鈕的計(jì)算代碼如以下所示:& m1 a! H$ L; k9 u: a
7 [+ h. ]0 s! E" E. e) u
//先判定是否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(); //控制臺(tái)觀看 logger.info(tomorrow + "/n" + now + "/n" + total); //設(shè)置redis中的簽到過(guò)期時(shí)間 jedis.set(id.toString(), "今天簽到已經(jīng)完成!"); jedis.expire(id.toString(), total); return SUCCESS; } catch (ParseException e) { e.printStackTrace();} } return FAILED;
9 R( ^" Y/ G' f" B8 q經(jīng)驗(yàn)值的排名的代碼如以下所示:
- V/ H& X$ K7 }1 X b9 ?
# y$ b& f5 ~$ H" n; G6 \4 e//先查詢所有的經(jīng)驗(yàn)值 ListexAll=userSignMapper.selectExperience(); //先將List集合轉(zhuǎn)為L(zhǎng)ong[]數(shù)組 Long[] a=exAll.stream().toArray(Long[]::new); //可以使用轉(zhuǎn)換工具類,也可以自己動(dòng)手寫(xiě)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;
$ {# x, z- D* l* |$ m8 e, {" Z. x/ T9
; z: @- k, e: R- L9 A1 H) ?用戶的會(huì)員中心
) f G+ ~0 A0 K# h- h由于會(huì)員中心與支付中心聯(lián)系比較密切,所以兩者的中心可以結(jié)合起來(lái)看作一個(gè)中心來(lái)觀看。用戶的會(huì)員中心包括普通會(huì)員和超級(jí)會(huì)員,每種方式存在三種收益方式,年費(fèi)季費(fèi)和月費(fèi),支付成功后均由負(fù)載均衡執(zhí)行業(yè)務(wù)邏輯。由于支付不屬于這個(gè)module中,所以這個(gè)module只是由其它微服務(wù)調(diào)用直接完成業(yè)務(wù)邏輯。5 X& E! W; D' g; f* v: \
) I% B _. A% M, z$ C
sjw3ktakcps64018794928.png (27.71 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
sjw3ktakcps64018794928.png
2024-9-11 09:52 上傳
9 Z4 P# E) ]7 N
+ T" W, e+ c- L10
# r) J4 o5 V) \$ M& _7 t用戶的支付中心! _+ l! z; O/ n4 w' A+ O
未完成實(shí)名認(rèn)證時(shí)頁(yè)面會(huì)轉(zhuǎn)到實(shí)名認(rèn)證中,當(dāng)完成實(shí)名認(rèn)證時(shí),首次進(jìn)入我的錢(qián)包中心會(huì)觸發(fā)設(shè)置支付密碼,當(dāng)設(shè)置成功后,支付以及綁定個(gè)人銀行卡均需要用到支付密碼?梢杂门f支付密碼修改新密碼,也可以手機(jī)重置手機(jī)密碼。還可以綁定自己的銀行卡,需要有關(guān)部門(mén)的配合。本次博客只允許建設(shè)銀行,工商銀行和中國(guó)銀行,且每張銀行卡只允許綁定一張。利用v-charts組件把個(gè)人的時(shí)間段的消費(fèi)情況以條形圖展現(xiàn)給用戶觀看。- e. S2 j. @0 G! H% a7 `
, n* t# ~' ~/ F8 D; C
2s5rezz2weg64018795028.png (104.62 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
2s5rezz2weg64018795028.png
2024-9-11 09:52 上傳
0 n/ W2 X% Y: Z0 R$ C; h W, E4 j6 e* ~* f
: V6 u( y. B8 {/ k2 j
5ptql0qg4da64018795128.png (40.64 KB, 下載次數(shù): 0)
下載附件
保存到相冊(cè)
5ptql0qg4da64018795128.png
2024-9-11 09:52 上傳
+ d* s. M4 u; u3 c) E, W4 V1 O8 T% g. M6 s9 v- q% y" |2 ^* i
當(dāng)用戶開(kāi)通了我的錢(qián)包后,可以選擇是否進(jìn)行余額充值,賬戶余額暫時(shí)只可以用支付寶充值。所有關(guān)于金額的操作均需要在后端安全操作,前端只用來(lái)顯示數(shù)據(jù),必須使用數(shù)據(jù)庫(kù)中的金額。
' p4 w5 H0 ~ E1 S8 `
/ I1 ~" `9 j, v* _3 ^0 @
% v0 l# b3 }6 n% A0 r3 l* v2 d# C# N# T4 W9 \' S Q. S
9 C4 G. ?# U* u5 @* M. C1 X# R
9 x9 e+ A% d7 G6 q/ v% G7 A) s
密碼為6位有效數(shù)字,可以使用原密碼更換新支付密碼。) B2 L9 I6 g4 Q( s/ [! M' p
) V3 Z7 h) y6 f7 a2 E: ]* ~! J" I0 r' }! ~+ P7 V
1 p# \3 i/ g Z9 K1 b% [
+ X' L. N% ~ [/ v: N+ w. B
/ ]4 H8 E5 F, r- D
8 T5 L% L! Y; B3 d, Z銀行卡姓名需要與實(shí)名認(rèn)證的姓名一致。$ g3 W9 B" ]& D0 L
e, p: |: u2 n# k
- ^$ H8 P- N0 O \
9 G o/ B4 m& w: A x+ Y( C4 b0 s, \3 w& b
" O( M* B9 A+ M h* A! E
- G9 ?. p, @: B+ m$ c
L0 z, Q) I1 i, X. C
) m( B8 S/ j/ k' S+ g, R$ B
" ~8 [6 A; k! i# C
支付中心包含普通會(huì)員和超級(jí)會(huì)員,由于普通會(huì)員采用支付寶原始的方式,而超級(jí)會(huì)員采用支付寶的二維碼方式,所以兩者會(huì)在調(diào)用的時(shí)候會(huì)有所不用。
5 b6 G: `5 H7 @6 F. v8 ~# J8 b* b4 v3 p1 X0 J' L# f+ n1 Z
& A! m- y- k/ u
* k* \' j- c( ]0 q0 [/ w& R+ X2 b2 i賬單中心是分頁(yè)展示給用戶觀看,提供當(dāng)前頁(yè)面,月份和全部的賬單打印Csv。前端可以直接把后端的數(shù)據(jù)直接打包Csv,也可以自行后端打包Csv數(shù)據(jù)到本地。. q2 l" @) T; p- g
, T! y& `% Y9 e; s% m! a- N5 T+ S) T d$ \. b
. ? }: }: {8 K' ~/ J
+ `! V1 P, h% \: ^1 b/ f, n% d/ K, P( N! r5 s! J6 n& w
" d/ z* P. Y5 A" T$ P) Z% D$ L# M' g
11
, ?# e$ g. b( e$ D* M用戶的博客中心
2 r* t' S7 o$ c Y4 [4 G. s6 w11.1、用戶的訪問(wèn)主頁(yè)
8 ?" J# F. [1 n$ E; _編寫(xiě)博客是一個(gè)展示自我的機(jī)會(huì),通過(guò)這個(gè)機(jī)會(huì),可以增強(qiáng)個(gè)人的表達(dá)能力,還會(huì)結(jié)識(shí)一些五湖四海的博友。通過(guò)他人文章的學(xué)習(xí),我們還可以增強(qiáng)個(gè)人的知識(shí)度和眼界。綜上所述,用戶的博客中心是博客系統(tǒng)的最核心功能。
; G, ]) x1 d7 `+ W% N" L' M% P! y/ L$ Z' Y
用戶可以分享自己的博客動(dòng)態(tài),博客旨在分享自己所學(xué)所知給他人,或者解決他人的困難。博客中心包含發(fā)表博客,查看個(gè)人博客,刪除博客,更新個(gè)人博客。非本人也可以觀看他人的博客,也可以評(píng)論他人的博客,所以需要用到分頁(yè)功能和輪滑加載功能配合前端展示不是私密的博客給他人觀看。每個(gè)用戶所看到的博客都是最新發(fā)的博客,可以與他人進(jìn)行學(xué)習(xí)交流。每個(gè)發(fā)表者要尊重他人的知識(shí)勞動(dòng)成果,切勿抄襲并且發(fā)表不適當(dāng)?shù)奈恼,做一名合格的博友?br />
# B/ _/ {$ v2 x, A+ f! {
, O) c5 m. i" W* s* \& X7 W當(dāng)用戶輸入賬號(hào)密碼登錄后,可以看到博客的主頁(yè)如下圖所示,主頁(yè)面可以看到發(fā)表人和發(fā)表的文章,點(diǎn)擊文章可以進(jìn)入文章的主頁(yè)面進(jìn)行學(xué)習(xí)交流。
, W3 d' S% Y, {! I- k7 X$ w) Y4 T
! I2 f# f. x8 n0 b! t& `& m1 K, ~
7 f3 H! V* |9 f- p
! H- H; Y7 m {$ z7 G11.2、用戶的文章中心7 o1 x3 G2 I1 b7 S
用戶的文章微服務(wù)中心的功能包含發(fā)表,查看,修改,刪除,用戶可以控制自己發(fā)表過(guò)的每一篇文章。
) s0 v* M( ?% J0 b+ m
0 X% w4 j: `0 c, X0 P2 I/ q1 [* c" _( g1 R( z
7 L7 H8 h9 Q: J
關(guān)于文章的增刪改會(huì)在后續(xù)標(biāo)題中得到詳解,在此只放出用戶的個(gè)人文章中心由圖可以看出是用戶發(fā)表過(guò)的全部文章,后端利用的是先分頁(yè)后List方式,最終傳送前端進(jìn)行ListItem遍歷顯示即可。
# k7 B. \! F' n' _; Y4 m1 z, q- c- N
由于也使用了Elasticsearch把文章分類作為存儲(chǔ)索引,但是重要的文章信息均放在數(shù)據(jù)庫(kù)中,在此只提一下,到后續(xù)的分類搜索中會(huì)詳細(xì)說(shuō)明。
" k8 [+ N) o1 C* n, N- ?+ P7 Y
$ W( ?+ s4 ^# C3 z4 J+ y' `, R11.3、發(fā)表個(gè)人的博客
K9 O b( }9 y" G s: K文章的的發(fā)布有許多選擇,自己可以選擇文章的分類和文章的標(biāo)簽,同樣也可以設(shè)置文章的可見(jiàn)性。用戶可以設(shè)置文章的標(biāo)簽,標(biāo)簽用來(lái)顯示給游客看,用來(lái)文章的標(biāo)識(shí)認(rèn)證,還可以設(shè)置文章的分類,類型和保密性,每種文章的分類會(huì)發(fā)布到那個(gè)分類的專區(qū)。文章類型有三種,若是轉(zhuǎn)載和翻譯他人的文章需要著名地址,保護(hù)他人的知識(shí)勞動(dòng)成果。只有具備會(huì)員資格才可以發(fā)送到會(huì)員專區(qū),但是轉(zhuǎn)載的文章不可以發(fā)送到會(huì)員專區(qū),發(fā)表文章時(shí)可參考紅字注意事項(xiàng)。
& p* T0 q; p s. e' X9 d4 e/ g& C3 M( ^7 W. }/ f" u
; S, r4 d1 o$ C& e( T: ~# r7 f8 r$ C8 m1 [ v
博客的發(fā)表的核心原代碼如以下所示:
3 G9 e6 D+ |# P" S) X; b- X- {. ]& v0 H/ X7 p, ^5 Q
//獲取文章的摘要markdown格式-html-summaryString words= StringFromHtmlUtil.getString(MDTool.markdown2Html(blogFrontPublish.getArticleContent()));//獲取文章的摘要且摘要長(zhǎng)度為255個(gè)字符String summary = words.length() > 240 ? words.substring(0, 240) + "......" : words;//去除轉(zhuǎn)換后存在的空格String tagTar = blogFrontPublish.getArticleTag().replaceAll(" ", "");//將文章的分類寫(xiě)入分類表然后再插入整篇文章UserArticleCategory userArticleCategory=userArticleCategoryMapper.findAllByCategoryName(blogFrontPublish.getArticleCategory());if (userArticleCategory==null){ userArticleCategory=new UserArticleCategory(); userArticleCategory.setCategoryArticles(""); userArticleCategory.setCategoryName(blogFrontPublish.getArticleCategory());//返回獲取到的自增ID userArticleCategoryMapper.insert(userArticleCategory);}//把標(biāo)簽寫(xiě)入數(shù)據(jù)庫(kù)for (String tag :tagTar.split(",")) { if (tag.replaceAll(" ", "").length() == 0) { //單個(gè)標(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());}' O4 a' M& P% j# ?
11.4、修改個(gè)人的博客6 H) q; q, U: E Y* z; _
若是需要修改個(gè)人的博客,需要進(jìn)入圖5-33的個(gè)人博客中心,查看發(fā)表的指定文章進(jìn)入到指定文章的頁(yè)面,點(diǎn)擊編輯按鈕,不是本人的文章不會(huì)出現(xiàn)編輯按鈕,博客的編輯按鈕效果圖如下圖所示:
4 M& P9 I1 q R8 s, I. L* N$ N
4 j( B2 b7 K& ?2 \- S6 H9 ]" o2 t
. r2 F& L- u& L+ G- x: B4 a: m* M( u7 Y9 U& M' l0 a _: v% y
可以修改文章的所有的條件與內(nèi)容。+ [1 J$ H7 w! H; y6 r
+ m9 I$ [ q2 [4 g/ x; w9 X
3 y" M% i$ f2 x
/ W' u1 f8 \& q文章的發(fā)表與修改的源碼不同在于要?jiǎng)h除之前的原屬文章的分類Id與標(biāo)簽Id的關(guān)聯(lián),再進(jìn)入文章的插入,不過(guò)文章的修改也會(huì)觸發(fā)在搜索引擎上的文章信息修改,搜索引擎上的文章信息也會(huì)跟著更新,保持搜索到最新的數(shù)據(jù)。
2 Q3 w+ m( h1 k% X# J6 G$ K" A, n" K( d! P+ h) K. T4 F+ A5 ^! Z
11.5、刪除個(gè)人的博客9 f6 j4 U. s% ~/ f
刪除個(gè)人的博客需要?jiǎng)h除數(shù)據(jù)庫(kù)和搜索引擎上的文章,刪除文章后不可恢復(fù)。
3 ^: |; z' E; v0 F+ n, v
# C; h! Q; C- @) k
7 c1 S8 V& O8 W* ~! ]; F5 U
6 o: S- S; {: y* X9 n* T11.6、用戶的文章布局6 m# ~. n4 K+ y# y4 e, A* w
完整博客的顯示方式是采用GitHub的代碼高亮布局,可以是用戶看到自己的博客是嵌入式的面板,可以給予人一種清爽的感覺(jué)。由于采用Vue,可以不用動(dòng)態(tài)渲染html,使用v-html命令就可以把后端傳過(guò)來(lái)的數(shù)據(jù)利用showdown轉(zhuǎn)換器轉(zhuǎn)換給html直接顯示給用戶看。
# r7 n) l- y: A* Z; R- V. i& e5 z3 D
' }+ K. }. K% e; Z) y0 j8 ]. g* O \1 Y3 g# g! R) z
" d8 C6 q$ t0 z; x: Z. t) Q4 P
11.7、點(diǎn)贊用戶的文章
/ N6 l2 g) `; N( X6 s' [& |8 ^互聯(lián)網(wǎng)時(shí)代每個(gè)人都或許都點(diǎn)贊過(guò)他人分享的文章,本次設(shè)計(jì)是博客所以會(huì)涉及到點(diǎn)贊,當(dāng)用戶太多時(shí)需要考慮到高并發(fā)的情況。正常情況的點(diǎn)贊并不會(huì)給后端造成多大的負(fù)載壓力,如果是熱門(mén)的文章博客,用戶點(diǎn)贊與取消點(diǎn)贊,評(píng)論,分享等,對(duì)于后端來(lái)說(shuō)這些都會(huì)帶來(lái)巨大的流量,如果后端接口支撐不住,前端得不到響應(yīng),前端無(wú)法響應(yīng)就會(huì)返回404,會(huì)導(dǎo)致用戶體驗(yàn)極差。
/ D, W) s6 S2 T* m4 I1 b: v6 w$ r' @: t1 g0 s% L. s! @
3 {2 a- t7 p( \; ~2 t" c$ t2 E/ ^; Y" ?) b: i. S: |2 Q
由上圖可知,核心的模塊就是點(diǎn)贊與取消點(diǎn)贊,利用Redisson把多個(gè)用戶的請(qǐng)求利用分布式鎖分開(kāi)請(qǐng)求,利用“緩存”保護(hù)數(shù)據(jù)庫(kù)。若用戶點(diǎn)贊微博,則后端會(huì)先查詢是否存在點(diǎn)贊記錄,當(dāng)存在點(diǎn)贊記錄時(shí),分析是否是完成點(diǎn)贊還是已經(jīng)取消了點(diǎn)贊。若沒(méi)存在點(diǎn)贊記錄,則完成數(shù)據(jù)庫(kù)中的點(diǎn)贊記錄更新,再把點(diǎn)贊結(jié)果“緩存”到Redis中,若是取消點(diǎn)贊,則直接會(huì)在“緩存”中刪除,更新數(shù)據(jù)庫(kù)中的結(jié)果。每一篇文章的點(diǎn)贊總數(shù)都是利用“緩存”計(jì)算得到一篇文章的結(jié)果發(fā)送給前端顯示。前面的操作都是利用Redisson操作的,所以當(dāng)高并發(fā)多線程請(qǐng)求時(shí),分布式鎖就會(huì)控制資源的并發(fā)訪問(wèn),避免出現(xiàn)文章數(shù)據(jù)不一致的情況。) y9 q4 }9 g; i5 A1 L% C0 |
1 o; u: k4 |9 T* t" q$ T
11.8、收藏用戶的文章
* F8 {; x2 F4 c6 k/ _用戶允許收藏自己的文章,收藏的功能也借用了Redisson的分布鎖來(lái)控制收藏的緩存,收藏與博客的點(diǎn)贊功能相似。
! Z0 W0 H: y7 p6 x/ ^5 I# q
! _0 A* D6 s) ~, d5 F, S' D3 @; l& h$ f; a
% Z" i1 z* |( q+ M' d4 d1 n3 W
8 P! A8 [7 Q5 s
2 y6 V3 S' ^, E# u7 w, V3 t. Q8 i; V- W4 q4 F; N# G8 b8 b8 c0 m0 i
11.9、評(píng)論用戶的文章
+ p6 y3 {( l$ d0 t! r( f評(píng)論的實(shí)現(xiàn)比較簡(jiǎn)單,一級(jí)評(píng)論的用戶的Id為父Id,只含有一級(jí)評(píng)論與二級(jí)評(píng)論,分頁(yè)直接查看文章的所有評(píng)論。) |/ k2 u! J5 T* V5 u, O
5 S2 E% [3 W/ c2 D
) E/ o6 F7 u9 a5 R$ b
+ }6 U [" G/ O
11.10、博客的文章排行榜
4 ?0 P, n$ j' A文章排行榜采依舊是利用了Redisson,排行榜與標(biāo)題3-7-4的點(diǎn)贊關(guān)聯(lián)緊密,“點(diǎn)贊”會(huì)導(dǎo)致熱流,形成短時(shí)間內(nèi)的超高人氣,把文章的排行榜放給用戶看,可以增強(qiáng)用戶的體驗(yàn)。不是所有的功能都要用分布式鎖,排行榜不需要用到分布式鎖,也不需要控制非常高的高并發(fā)流量,對(duì)于后端來(lái)說(shuō)控制排行榜比較簡(jiǎn)單。& Y3 i. g+ q9 b; N3 n8 E
; k9 p h1 U7 w) p
3 i" ]3 \, P( y+ ]3 A* a' |* m# y2 Q( ?9 Y5 i% q2 v; w3 x
排行榜需要保證查詢數(shù)據(jù)庫(kù)的點(diǎn)贊表的SQL正確,SQL錯(cuò)誤之后的所有操作都是白費(fèi)力氣,這個(gè)要設(shè)置一定的范圍與時(shí)間差來(lái)確保文章的間斷實(shí)時(shí)性,最后要把數(shù)據(jù)庫(kù)中的數(shù)據(jù)放到緩存中。對(duì)于緩存的操作,用戶的點(diǎn)贊與取消點(diǎn)贊都會(huì)觸發(fā)緩存中的排行榜排序。用戶請(qǐng)求后,會(huì)查到緩存中的排行榜點(diǎn)贊數(shù)最多的前10篇文章,利用List的文章Id找到文章的信息,最后打包傳給前端顯示。排行榜算是一種實(shí)時(shí)性要求不算很高的,可以使用定時(shí)的方式主動(dòng)更新緩存中排行榜記錄。
( w9 {4 M$ P. {9 K! W; |6 K+ K) o8 H4 ~2 F
' g; m6 l$ S, c: d4 d2 j( N. s; [6 h4 O" e. `' \% Q! L( T
" H7 h9 C# T2 @* [ o1 N( P; }12
5 u& s$ s# T' O& t博客的搜索中心
; w" v& e, T, d* d( i12.1、搜索引擎的應(yīng)用
+ t" f7 T) |- S當(dāng)微服務(wù)整合Zipkin時(shí),運(yùn)行系統(tǒng)會(huì)產(chǎn)生大量的API運(yùn)行指標(biāo),而Elasticsearch(ES)作為一種存儲(chǔ)方式,可以把那些運(yùn)行API指標(biāo)存儲(chǔ)到ES中。( k* \/ I/ H4 z/ j# ]
) `7 f, i% Q; |8 N) L6 V* D
! d, ^" z J* H
% G. g8 A1 B( KElasticsearch的index是文檔索引,與數(shù)據(jù)庫(kù)的“庫(kù)”相似,type是文檔類型,與數(shù)據(jù)庫(kù)中的“表”相似,id是一個(gè)字段作為主鍵。7 b; {/ N9 A i1 L8 s
+ L- D7 J1 y' i* W12.2、博客的分類搜索
* P- q8 ~) ?' S博客的搜索中心包含文章的顯示的信息,例如標(biāo)題和文章內(nèi)容的摘要,由于把文章的整篇內(nèi)容均放到數(shù)據(jù)庫(kù)中,所以搜素引擎上的文章是負(fù)載均衡保存提示的信息,用戶可以根據(jù)搜索界面的搜索框查詢Elasticsearch上文章,根據(jù)的是文章的分類的區(qū)域和關(guān)鍵字,后端判關(guān)鍵字是否符合且存在,然后把結(jié)果傳給前端顯示。! z- y4 W+ U" f
# a7 w2 k* i5 i
7 w- m& p e, C; O7 O! G6 t+ u q) P( R1 m
; r6 W( Y; u( h4 k1 b- A
+ _! _2 S5 ?. F
) D5 ]7 ^' E* y% r8 q! F
12.3、博客的分類主頁(yè)
1 y) V! _" _& a" O博客的分類主頁(yè)是利用Elasticsearch上的文章信息進(jìn)行遍歷,用戶發(fā)表的博客時(shí)候選擇的分類作為Elasticsearch索引的名負(fù)載均衡到Elasticsearch,分類中心的文章每次選擇20篇最新的文章傳給給用戶觀看。! G& n. o' y6 Q& B
" h5 E; ?$ O& x- N6 i
# r' Q6 K+ u4 \* Q0 E2 A$ A4 A! W$ S5 E5 P5 O- F! h
13
4 w7 E7 |1 G$ I/ X. C博客的測(cè)試分析! A4 _6 ^2 N2 f
13.1、博客的請(qǐng)求抗壓性分析
/ a7 ~; @* ^ x/ V7 y4 ~0 h* K: J博客采用的是前后端的分離模式,所以對(duì)于前端傳過(guò)來(lái)的Token,后端只要鑒定Redis中存在Token即放行API的請(qǐng)求,同時(shí)前端可以防止表單的多次提交,前端可以增加JS監(jiān)聽(tīng)Button的提交,也可以使用session鑒定請(qǐng)求的時(shí)間間隔。不過(guò)博客大多采用Axios的異步提交,http成功時(shí)可以把Button設(shè)置為true或者直接局部刷新網(wǎng)頁(yè)重置數(shù)據(jù)。對(duì)于博客中的支付中心,另起線程中需要防止出現(xiàn)業(yè)務(wù)出現(xiàn)錯(cuò)誤,或者網(wǎng)絡(luò)錯(cuò)誤導(dǎo)致負(fù)載均衡出現(xiàn)中斷錯(cuò)誤,所以需要catch防止程序出現(xiàn)錯(cuò)誤,同樣還必須保存支付寶異步通知的結(jié)果防止另起線程中出現(xiàn)異常。對(duì)于每個(gè)用戶的請(qǐng)求,可以采用服務(wù)器的限制流量,限制的方向可由個(gè)人選擇,需要在服務(wù)器的圖形化界面中可以設(shè)置。
1 B, R) I+ R: y0 ]9 V2 E) t
; k a' @. u# ]1 t6 n7 S% |6 a3 ^5 a
7 e' L2 b" o, B$ I
13.2、博客的功能擴(kuò)展性分析, a: z9 k8 I0 ]! B# x/ F7 m6 p
博客的前端容易擴(kuò)展,由于Vue本身具有的實(shí)用的數(shù)據(jù)綁定優(yōu)勢(shì),所以前端只要時(shí)間充足就可以隨意擴(kuò)展,還有一個(gè)很重要的原因是安全是后端來(lái)控制的。博客后端的每一個(gè)微服務(wù)的中心承擔(dān)著一個(gè)功能模塊,若是發(fā)生不同功能的擴(kuò)充則需要多添加一個(gè)微服務(wù)的中心。當(dāng)功能相同只是擴(kuò)展當(dāng)前的功能,則可以直接在某個(gè)微服務(wù)中心增加代碼即可。編寫(xiě)博客時(shí)遵守了Java代碼的規(guī)范,為以后的擴(kuò)充打下堅(jiān)實(shí)的基礎(chǔ)。本次博客各個(gè)中心均遵守了Java的代碼規(guī)范,微服務(wù)中的module劃分清晰,功能擴(kuò)充方便。
) x. K! O+ r- A& {& o" \% h9 l( H( e$ F, _ V1 Y
Pom文件中的module劃分如下圖所示:7 H# }1 U$ n1 |, C
2 f7 n6 c, N3 w7 m
5 J1 F# U! ~$ h* Q9 q; e; c H& Q. k- a& a/ f& v2 r" ?, Y2 o) m6 u
項(xiàng)目工程資源請(qǐng)參見(jiàn):https://download.csdn.net/download/m0_38106923/87849577
2 N5 v8 a1 f6 m
3 b- A% ~9 z1 |& d7 M) R& ?0 [( F
* f4 t& a" [- M$ w) v% V往期推薦畢業(yè)設(shè)計(jì)So Easy:Java MySQL智能報(bào)紙閱讀器APP應(yīng)用
% D1 j. U+ x f \* D6 k5 ^5 B7 T畢業(yè)設(shè)計(jì)So Easy:基于C++實(shí)現(xiàn)網(wǎng)絡(luò)掃描器3 n4 E7 a) W0 F* B+ y
畢業(yè)設(shè)計(jì)So Easy:基于Java Web學(xué)生選課系統(tǒng)
5 O/ m1 c% ~! y畢業(yè)設(shè)計(jì)So Easy:基于Java語(yǔ)言西餐廳點(diǎn)餐系統(tǒng)- }8 A& m. b) ^! r' g/ d. J
畢業(yè)設(shè)計(jì)So Easy:珠穆朗瑪FM音頻電臺(tái)APP
8 i! I! V* R1 o, u. m4 M( c% }% E" [; x i4 @8 E( d
\, B2 N) }. A; Z
0 s5 n: C$ d6 |4 c點(diǎn)擊閱讀原文,更精彩~ |
|