V部落是一個(gè)多用戶博客管理平臺(tái)，采用Vue+SpringBoot開發(fā)。

演示地址： http://45.77.146.32:8081/index.html

項(xiàng)目地址: https://github.com/lenve/VBlog 

登陸頁面

文章列表

發(fā)表文章

用戶管理

欄目管理

數(shù)據(jù)統(tǒng)計(jì)

技術(shù)棧

后端技術(shù)棧

后端主要采用了：

1.SpringBoot

2.SpringSecurity

3.MyBatis

4.部分接口遵循Restful風(fēng)格

5.MySQL

前端技術(shù)棧

前端主要采用了：

1.Vue

2.axios

3.ElementUI

4.vue-echarts

5.mavon-editor

6.vue-router

還有其他一些瑣碎的技術(shù)我就不在這里一一列舉了。

快速運(yùn)行

1.克隆本項(xiàng)目到本地

git@github.com:lenve/VBlog.git

2.找到blogserver項(xiàng)目中resources目錄下的vueblog.sql文件，在MySQL數(shù)據(jù)庫中執(zhí)行

3.根據(jù)自己本地情況修改數(shù)據(jù)庫配置，數(shù)據(jù)庫配置在SpringBoot項(xiàng)目的application.properties中

4.在IntelliJ IDEA中運(yùn)行blogserver項(xiàng)目

OK，至此，服務(wù)端就啟動(dòng)成功了，此時(shí)我們直接在地址欄輸入 http://localhost:8081/index.html 即可訪問我們的項(xiàng)目，如果要做二次開發(fā)，請(qǐng)繼續(xù)看第五、六步。

5.進(jìn)入到vueblog目錄中，在控制臺(tái)依次輸入如下命令：

# 安裝依賴
npm install
# 在 localhost:8080 啟動(dòng)項(xiàng)目
npm run dev

由于我在vueblog項(xiàng)目中已經(jīng)配置了端口轉(zhuǎn)發(fā)，將數(shù)據(jù)轉(zhuǎn)發(fā)到SpringBoot上，因此項(xiàng)目啟動(dòng)之后，在瀏覽器中輸入 http://localhost:8080 就可以訪問我們的前端項(xiàng)目了，所有的請(qǐng)求通過端口轉(zhuǎn)發(fā)將數(shù)據(jù)傳到SpringBoot中（注意此時(shí)不要關(guān)閉SpringBoot項(xiàng)目）。

6.最后可以用WebStorm等工具打開vueblog項(xiàng)目，繼續(xù)開發(fā)，開發(fā)完成后，當(dāng)項(xiàng)目要上線時(shí)，依然進(jìn)入到vueblog目錄，然后執(zhí)行如下命令：

npm run build

該命令執(zhí)行成功之后，vueblog目錄下生成一個(gè)dist文件夾，將該文件夾中的兩個(gè)文件static和index.html拷貝到SpringBoot項(xiàng)目中resources/static/目錄下，然后就可以像第4步那樣直接訪問了。

步驟5中需要大家對(duì)NodeJS、NPM等有一定的使用經(jīng)驗(yàn)，不熟悉的小伙伴可以先自行搜索學(xué)習(xí)下，推薦Vue 官方教程 。

項(xiàng)目依賴

1. vue-echarts

2. mavonEditor

總結(jié)

以上所述是小編給大家介紹的Vue+SpringBoot開發(fā)V部落博客管理平臺(tái)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論