之前自己的博客是用hexo做的，后面想做一個(gè)有后臺(tái)的博客就打算用vue加node來(lái)試試，于是就有了這個(gè)博客。 項(xiàng)目地址

W-Blog

W-Blog是一個(gè)基于vue和node的小小小博客 前端用vue，后端用egg.js

快速入門(mén)

技術(shù)棧

• 前端：
  • 用戶端：vue、iview
  • admin端：vue、d2admin、element
• 后端: egg.js、mongodb

功能特性

• 輕量級(jí)Markdown編輯器，圖片上傳七牛
• 支持標(biāo)簽、分類、搜索草稿箱等功能
• 標(biāo)簽云

線上地址

煌哥哥的博客

圖片演示

前臺(tái)

• 首頁(yè)瀏覽
• 文章詳情瀏覽及目錄導(dǎo)航
• 可根據(jù)分類和標(biāo)簽搜索文章
• 輸入關(guān)鍵詞搜索
• 標(biāo)簽云及搜索

后臺(tái)

• 后臺(tái)登錄
• 文章列表
• 文章搜索
• 文章編輯
• 增加分類
• 增加標(biāo)簽
• 標(biāo)簽修改（分類一樣）
• 文章修改
• 文章刪除，支持垃圾箱草稿箱

目錄結(jié)構(gòu)

│ .autod.conf.js │ .eslintignore │ .eslintrc │ .gitignore │ .travis.yml │ app.js // 項(xiàng)目啟動(dòng)前執(zhí)行，比如寫(xiě)入管理員 │ appveyor.yml │ package.json │ README.md │ ├─app │ │ router.js // 服務(wù)端路由 │ │ │ ├─controller │ │ admin.js // 后臺(tái)相關(guān)controller │ │ client.js // 前臺(tái)相關(guān)controller │ │ login.js // 登錄相關(guān)controller │ │ page.js // 頁(yè)面相關(guān)controller │ │ │ ├─extend │ │ helper.js │ │ │ ├─middleware │ │ auth.js // 登錄驗(yàn)證中間件 │ │ │ ├─model │ │ Article.js // 文章model │ │ Category.js // 分類model │ │ Tag.js // 標(biāo)簽model │ │ User.js // 用戶model │ │ │ ├─public │ │ │ │ │ ├─admin // admin端 │ │ │ ├─dist // 打包生成后的目錄 │ │ │ └─src // admin端源文件 │ │ │ │ │ └─client // 用戶端 │ │ ├─dist // 打包生成后的目錄 │ │ └─src // 用戶端源文件 │ │ │ └─service // service部分用來(lái)執(zhí)行具體的操作 │ admin.js │ client.js │ login.js │ ├─config │ config.default.js // 項(xiàng)目配置相關(guān) │ plugin.js │ └─test // 測(cè)試相關(guān)└─app└─controllerhome.test.js

全局配置

module.exports = appInfo => {return {keys: appInfo.name '_1432030565447_3632',mongoose: {clients: {blog: {url: 'mongodb://127.0.0.1/blog',options: {user: 'test', // 數(shù)據(jù)庫(kù)的用戶名 pass: 'test' // 數(shù)據(jù)庫(kù)的密碼},}}},// 初始化管理員信息user: {userName: 'admin',password: 'admin',},session: {maxAge: 3600 * 1000,},jwt: {cert: 'jsonwebtoken' // jwt秘鑰},/*** markdown編輯器的圖片上傳用的是七牛存儲(chǔ)* 所以需要配置七牛的key*/qiniu: { // 這里填寫(xiě)你七牛的Access Key和Secret Keyak: '',sk: ''}} };

本地運(yùn)行

安裝MongoDB數(shù)據(jù)庫(kù)和Node.js環(huán)境。

# 安裝服務(wù)端依賴 npm install # 開(kāi)啟mongodb mongod --dbpath '你數(shù)據(jù)庫(kù)的目錄' # --auth 如果開(kāi)啟密碼，要加上這個(gè)命令 # 運(yùn)行服務(wù) npm run dev# 進(jìn)入前臺(tái)目錄 cd ./app/public/client/src # 安裝前臺(tái)依賴 npm install # 運(yùn)行前臺(tái)項(xiàng)目 npm run dev# 進(jìn)入后臺(tái)目錄 cd ./app/public/admin/src # 安裝后臺(tái)依賴 npm install # 運(yùn)行后臺(tái)項(xiàng)目 npm run dev# 即可通過(guò) http://127.0.0.1:8080訪問(wèn) # 開(kāi)發(fā)階段直接通過(guò)webpack的devserver訪問(wèn) # 代理請(qǐng)求已經(jīng)配置好，可在config下配置proxyTable更改

打包

# 在前臺(tái)和后臺(tái)目錄分別 npm run build # 在項(xiàng)目根目錄 npm install --production # 啟動(dòng) npm start # 打包后可以通過(guò) # http://127.0.0.1:7001/ 和 http://127.0.0.1:7001/admin 來(lái)訪問(wèn)前臺(tái)和后臺(tái)

總結(jié)

以上是生活随笔為你收集整理的一个vue加egg.js的博客的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。