一个vue加egg.js的博客 -凯发k8官方网

之前自己的博客是用hexo做的，后面想做一个有后台的博客就打算用vue加node来试试，于是就有了这个博客。 项目地址

w-blog

w-blog是一个基于vue和node的小小小博客 前端用vue，后端用egg.js

快速入门

技术栈

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

功能特性

• 轻量级markdown编辑器，图片上传七牛
• 支持标签、分类、搜索草稿箱等功能
• 标签云

线上地址

煌哥哥的博客

图片演示

前台

• 凯发k8官方网首页浏览
• 文章详情浏览及目录导航
• 可根据分类和标签搜索文章
• 输入关键词搜索
• 标签云及搜索

后台

• 后台登录
• 文章列表
• 文章搜索
• 文章编辑
• 增加分类
• 增加标签
• 标签修改（分类一样）
• 文章修改
• 文章删除，支持垃圾箱草稿箱

目录结构

│ .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 来访问前台和后台

总结

以上是凯发k8官方网为你收集整理的一个vue加egg.js的博客的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。