一个vue加egg.js的博客

newtrek 发布于2019-06-26 17:47 / 615人阅读

摘要：之前自己的博客是用做的，后面想做一个有后台的博客就打算用加来试试，于是就有了这个博客。

之前自己的博客是用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加速

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/19342.html

一个vue加egg.js的博客

摘要：之前自己的博客是用做的，后面想做一个有后台的博客就打算用加来试试，于是就有了这个博客。之前自己的博客是用hexo做的，后面想做一个有后台的博客就打算用vue加node来试试，于是就有了这个博客。项目地址 W-Blog W-Blog是一个基于vue和node的小小小博客前端用vue，后端用egg.js 快速入门技术栈前端：用户端：vue、iview admin端：vue、...

Warren 2019-08-26 12:12 评论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