一个vue加egg.js的博客
之前自己的博客是用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的博客相关推荐
- 使用 ThinkJS + Vue.js 开发博客系统
编者注:ThinkJS 作为一款 Node.js 高性能企业级 Web 框架,收到了越来越多的用户的喜爱.今天我们请来了 ThinkJS 用户 @lscho 同学为我们分享他基于 ThinkJS 开发 ...
- 基于 Vue 和 SpringBoot 实现的博客系统(附源码)
今天给大家分享一个基于 Vue 和 SpringBoot 实现的博客系统! 源码在文章结尾处,大家自行下载即可,我设置的免积分下载! 一.主要功能 1.前端 后台管理系统采用Vue开发. 文章模块,支 ...
- 如何零基础零费用的在30分钟内用hugo+github pages创建一个专属于你的个人博客 - 简单快捷到建议人手一个
写这篇文章的原因是在网上看了很多的教程,踩了不少的坑,更多的白费了很多功夫,也没找到一篇从头到尾完整有效的个人建站方法. 有些教程年代久远,有些教程极为繁琐,有些教程压根跑不通. 为了方便自己,做个记 ...
- ajax自动加载blogjava和博客园的rss
自动加载blogjava和博客园的rss <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "h ...
- 推荐!一个简单而又精致的博客系统
前言 写这个博客系统的初衷是为了给那些不愿自己维护一个个人博客,但又觉得市面主流博客网站广告多.不够简洁等.所以我写这个系统的时候也是尽力让它尽量的简洁,但又带一点个人风格.目前自定义主题功能还没上线 ...
- hexo加Github搭建个人博客(一、二)
hexo加Github搭建个人博客(一) 在这之前,我们先介绍一下hexo加Github搭建博客的有关事项 1.hexo搭建的是静态网页,每次修改后都要执行静态生成,然后再执行部署 2.Github仓 ...
- 利用GitHub搭建一个酷炫免费的个人博客
转载自公众号:python_shequ 由于公众号的文章不易后续整理阅读,于是小吴昨天上午花了半个小时使用 GitHub + Hexo 搭建了一下个人博客,打算将公众号的文章搬过去,支持关键字搜索.分 ...
- 一个 WordPress 安装,多个博客
是否有多个博客,每个博客都是使用多个 WordPress 博客?那么你是否厌烦了重复多次的升级,重复多次的安装插件?如果是的,你是否尝试过一个 WordPress 安装,就能给多个博客使用呢?下面我就 ...
- bulma.css_如何建立一个? Bulma CSS的自适应博客设计
bulma.css by ZAYDEK 由ZAYDEK oo (Ooooooh) 如何建立一个? Bulma CSS的自适应博客设计 (How To Build A ? Responsive Blog ...
最新文章
- 递归--练习4--noi666放苹果
- Leetcode861翻转矩阵后的得分(C++题解):贪心
- 【Python 必会技巧】lambda 表达式(匿名函数)及其在内置函数中的应用
- esp8266 扫描wifi_基于ESP8266与QT的智能家居控制系统设计
- 实验六 团队作业2—团队项目评审与团队项目选题报告
- Flash Media Server 4.5 序列号
- 台式计算机屏幕出现数字模拟,电脑显示器黑屏左上角显示数字模拟什么回事
- 什么是等保三级?基本流程是什么样的?
- 【Python】Pymyql模块的execute()总结
- JAVA :一张纸厚0.5mm //0.0005m,折叠多少次,厚度会超过珠穆朗玛峰?(8848.43m)
- Java-springboot生鲜电商项目(一)数据设计与项目初始化
- 华三路由引入配置实验
- 直线拟合c语言程序,ax+by+c=0 型直线拟合算法
- onmouseover 事件
- 60个国外免费3D模型下载网站
- 速卖通小伙伴们,关于欧盟VAT税改最全面解读,杭州海赢科技分享!
- 相信吗?你的电脑也能和外星文明实现接触
- HDU 2681 MM Programming Club(miaos的线段树维护+ycy的暴力贪心)
- google独立站哪家做得好?
- MS Visio软件的XML文档结构
热门文章
- Java常用类(4)--System类
- 求100以内质数或者更多
- java扫描指定package注解_java获取包下被指定注解的类
- 单机最大负载_分布式高可靠之负载均衡,今天看了你肯定会
- php中$_post怎么用,php – 如何在$_POST []中使用变量
- ASP.NET Core IdentityServer4 新手上路
- linux下如何安装配置redis及主从配置
- 将数据流链接到加密转换的流CryptoStream 类
- 借助opencv将unsigned char数组显示为图像
- 手把手教你用EVO工具评估SLAM数据集TUM、KITTI、EuRoC(附代码)