一個vue加egg.js的博客

Warren 發布于2019-08-26 12:12 / 3050人閱讀

摘要：之前自己的博客是用做的，后面想做一個有后臺的博客就打算用加來試試，于是就有了這個博客。

之前自己的博客是用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
        └─controller
                home.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 Key
      ak: "",
      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 來訪問前臺和后臺

GPU云服務器云服務器 egg.js 視頻一個云服務器怎么加多個應用 vue的計算屬性 vue的cdn加速

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108212.html

一個vue加egg.js的博客

摘要：之前自己的博客是用做的，后面想做一個有后臺的博客就打算用加來試試，于是就有了這個博客。之前自己的博客是用hexo做的，后面想做一個有后臺的博客就打算用vue加node來試試，于是就有了這個博客。項目地址 W-Blog W-Blog是一個基于vue和node的小小小博客前端用vue，后端用egg.js 快速入門技術棧前端：用戶端：vue、iview admin端：vue、...

newtrek 2019-06-26 17:47 評論0 收藏0
EggBorn.js：一款頂級Javascript全棧開發框架

摘要：是什么是一款頂級全棧開發框架。漸進式開發由于模塊的高度內聚，可以將業務以模塊的形式沉淀，在多個項目中重復使用，既可貢獻到開源社區，也可部署到公司內部私有倉庫。模塊發布當項目中的模塊代碼穩定后，可以將模塊公開發布，貢獻到開源社區。 EggBorn.js是什么 EggBorn.js是一款頂級Javascript全棧開發框架。 EggBorn.js是采用Javascript進行全棧開發的最佳...

dayday_up 2019-08-21 17:17 評論0 收藏0
TeanBlog - 基于 Egg.js 的簡約博客

摘要：基于的簡約博客文檔文檔反饋點擊這里來開啟一個新的特別感謝開放資源 showImg(https://segmentfault.com/img/bV372u?w=287&h=306); TeanBlog 基于 Egg.js 的簡約博客 ? 文檔 TeanBlog 文檔 ?? 反饋點擊這里來開啟一個新的 Issue ? 特別感謝 Egg.js gitalk LeanCloud 開放資...

vincent_xyb 2019-08-26 11:48 評論0 收藏0