一款基于vue.js 和node构建个人博客项目

前言

本项目是一款个人学习的博客项目,主要是为了学习vue2 和 node.js。另外涉及到MySQL redis nginx 等技术栈知识 项目地址

预览地址 (PC或者手机)

> 注意:PC端支持markdown编辑博客,但是手机端不支持编辑,仅支持查看博客内容

博客预览地址:node后台版本

预览账号

账号:test
密码:123

技术栈

前端:html、css、sass、ES6、webpack、vue-cli、vue2、vuex、vue-router、axios、element-ui

后端:Node、Mysql、redis、nginx

目标功能

目标很简单 基本的增删改就满足于学习 node 和 vue 实现前后端分离 另外还有redis 的session保存 、ngnix的反向代理、 pm2的进程守护

  • [x] 登录 退出(100%) (个人博客没有增加注册项,很好实现)
  • [x] 个人博客(100%)
  • [x] 推荐博客(100%)
  • [x] 添加博客(100%)
  • [x] 博客访问量(100%)
  • [x] 删除博客(100%)
  • [x] 编辑博客(100%)
  • [x] 移动端适应(100%)
  • [x] php后台(100%)
  • [x] express后台(100%)
  • [x] koa后台(100%)

项目截图

首页

查看博客

markdown写博客

移动端首页

移动端查看博客

原文地址:https://www.cnblogs.com/hunterxing/p/11725602.html

时间: 2024-10-08 07:27:38

一款基于vue.js 和node构建个人博客项目的相关文章

Vue.js 创建多人共享博客

多人共享博客 上一个项目:仿 CNODE 社区 刚完成,感觉有点意犹未尽,对于 登录 这一块老师并没有展开,我先是用了 localStorage 自己瞎搞,跑通之后想了下,vuex 不是专门做全局状态管理的么?那么用 vuex 做登录是最合适不过的呀.于是又搜了些别人用 vuex 做登录状态管理的案例,算是搞明白了. 现在选择了若愚老师的这个项目,主要是巩固一下对 vue 的认识,同时对 vuex 做个更详细的了解. 本项目做一款多人共享博客,包含首页.用户文章列表.登录.注册.个人管理.编辑.

node+mysql简单博客项目

1.搭建开发环境 使用nodemon监听文件变化,自动重启node 使用cros-env设置环境变量,兼容mac linux 和windowns 原文地址:https://www.cnblogs.com/huanhuan55/p/12348544.html

基于VUE.JS的移动端框架Mint UI

Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库.自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本.本文介绍如何从零开始构建一个使用 Mint UI 的 Vu

《基于Vue.js的Web前端应用研究》文献阅读(十五)

一.基本信息 标题:基于Vue.js的Web前端应用研究 时间:2017 来源:科技与创新 关键词:Web前端:Vue.js:JavaScript组件:Vue框架 二.研究内容 1.主要内容: 随着互联网的迅猛发展,用户对Web前端的使用体验.交互操作流程.外观有了更高的要求.特别是Web系统中越来越多的数据处理和业务逻辑开始偏向前端,导致Web前端工作量扩大,代码量增加.如果仍然采用传统的方式开发设计Web前端,会导致前期开发度和后期维护难度增大,可扩展性变差.为了提高开发效率和代码复用率,越

基于Vue.js 2.x系列的后台管理系统解决方案

基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案. github地址:https://github.com/lin-xin/manage-systemdemo地址:http://work.fengdb.com功能包括:Element UI登录/注销表格表单图表富文本编辑器markdown编辑器图片拖拽/裁剪上传支持切换主题色

基于vue.js的简单用户管理

功能描述:添加.修改.搜索过滤 效果图: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title>简单用户管理</title> 5 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"

基于vue.js的图片预览组件2.0.1

基于vue.js的图片预览组件 Github github 安装 npm install enlargeimg --save-dev import enlargeimg from 'enlargeimg'; 基础用法 <enlargeImg :data="files"></enlargeImg> export default { name: 'hello', data () { return { msg: 'Welcome to Your Vue.js App'

基于MEAN全栈架构的多用户博客系统(Angular2+Node+MongoDB)

基于MEAN全栈架构的多用户博客系统(Angular2+Node+MongoDB)课程学习地址:http://www.xuetuwuyou.com/course/223课程出自学途无忧网:http://www.xuetuwuyou.com 课程介绍一.课程简介MEAN是一个Javascript平台的现代Web开发框架总称,它是MongoDB + Express +AngularJS + NodeJS 四个框架的第一个字母组合.它与传统LAMP一样是一种全套开发工具的简称.本课程结合项目全面系统的

Node.js 从零开发 web server博客项目

第1章 课程介绍 包括课程概述.核心模块.核心技术.课程安排.课程收获.讲授方式.学习前提等方面的介绍,让同学们对课程项目有一个直观的了解. 1-1 课程导读 试看第2章 nodejs 介绍 本章主要为了照顾尚未入门或者刚刚入门 nodejs 的同学,介绍 nodejs 的下载.安装和基本使用,以及 nodejs 和前端 javascript 的区别.另外,重点介绍了服务端开发和前端开发思路上的区别,为后续的开发做一个基础的铺垫. 2-1 下载和安装 2-2 nodejs和js的区别 2-3 c