之前自己的博客是用hexo做的，后面想做一個有后臺的博客就打算用vue加node來試試，于是就有了這個博客。 項目地址

W-Blog

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

快速入門

技術棧

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

功能特性

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

線上地址

煌哥哥的博客

圖片演示

前臺

• 首頁瀏覽
• 文章詳情瀏覽及目錄導航
• 可根據分類和標簽搜索文章
• 輸入關鍵詞搜索
• 標簽云及搜索

后臺

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

目錄結構

│ .autod.conf.js │ .eslintignore │ .eslintrc │ .gitignore │ .travis.yml │ app.js // 項目啟動前執行，比如寫入管理員 │ appveyor.yml │ package.json │ README.md │ ├─app │ │ router.js // 服務端路由 │ │ │ ├─controller │ │ admin.js // 后臺相關controller │ │ client.js // 前臺相關controller │ │ login.js // 登錄相關controller │ │ page.js // 頁面相關controller │ │ │ ├─extend │ │ helper.js │ │ │ ├─middleware │ │ auth.js // 登錄驗證中間件 │ │ │ ├─model │ │ Article.js // 文章model │ │ Category.js // 分類model │ │ Tag.js // 標簽model │ │ User.js // 用戶model │ │ │ ├─public │ │ │ │ │ ├─admin // admin端 │ │ │ ├─dist // 打包生成后的目錄 │ │ │ └─src // admin端源文件 │ │ │ │ │ └─client // 用戶端 │ │ ├─dist // 打包生成后的目錄 │ │ └─src // 用戶端源文件 │ │ │ └─service // service部分用來執行具體的操作 │ admin.js │ client.js │ login.js │ ├─config │ config.default.js // 項目配置相關 │ plugin.js │ └─test // 測試相關└─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', // 數據庫的用戶名 pass: 'test' // 數據庫的密碼},}}},// 初始化管理員信息user: {userName: 'admin',password: 'admin',},session: {maxAge: 3600 * 1000,},jwt: {cert: 'jsonwebtoken' // jwt秘鑰},/*** markdown編輯器的圖片上傳用的是七牛存儲* 所以需要配置七牛的key*/qiniu: { // 這里填寫你七牛的Access Key和Secret Keyak: '',sk: ''}} };

本地運行

安裝MongoDB數據庫和Node.js環境。

# 安裝服務端依賴 npm install # 開啟mongodb mongod --dbpath '你數據庫的目錄' # --auth 如果開啟密碼，要加上這個命令 # 運行服務 npm run dev# 進入前臺目錄 cd ./app/public/client/src # 安裝前臺依賴 npm install # 運行前臺項目 npm run dev# 進入后臺目錄 cd ./app/public/admin/src # 安裝后臺依賴 npm install # 運行后臺項目 npm run dev# 即可通過 http://127.0.0.1:8080訪問 # 開發階段直接通過webpack的devserver訪問 # 代理請求已經配置好，可在config下配置proxyTable更改

打包

# 在前臺和后臺目錄分別 npm run build # 在項目根目錄 npm install --production # 啟動 npm start # 打包后可以通過 # http://127.0.0.1:7001/ 和 http://127.0.0.1:7001/admin 來訪問前臺和后臺

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。