Giter Club home page Giter Club logo

vue-ssr-blog's Introduction

vue-ssr-blog

vue vue-router vuex express mongodb nodejs

home

介绍

这是一个使用 vue2.x 开发的,记录学习与生活的 个人博客。 整站选用 ssr 技术进行服务端渲染,具备良好的 SEO 和首屏性能。
同时,我为它配备了一个使用 vue3.xtypescriptvite 开发的管理系统,详情请移步 这里 查看。

技术栈

  • vue2.x ssr
  • vue-router
  • vuex
  • nodejs
  • mongodb
  • mongoose
  • express
  • pm2
  • lazyload

主要功能

  • 首页
    • 最新文章
  • 文章搜索(高亮关键词)
  • 导航
    • 文章归档
    • 文章标签
    • 文章分类
  • 娱乐
    • 电影(爬虫获取豆瓣的观影记录)
      • 看过的影视
      • 想看的影视
      • 在看的影视
  • 留言板
    • 留言
    • 相互回复
    • 点赞、取消赞(ip统计)
  • 支持 QQ、Github 第三方登录,以支持评论及留言
  • 文章筛选
    • 按标签
    • 按分类
    • 按归档时间
  • 文章相关
    • 评论
    • 回复评论
    • 文章/评论的赞、取消赞(ip统计)
    • pv、评论、点赞统计
    • 文档目录自动生成
    • 分享
  • 快捷看板
    • 本站简介
    • 最新文章
    • 最新评论
    • 标签统计
    • 文章分类
    • 文章归档
  • 响应式
  • 图片懒加载
  • 友链(留坑,待开发)
  • 首页名言管理(留坑,待开发)
  • 换肤(留坑,待开发)

fork后必读

在fork项目后,请务必仔细阅读以下说明:

配置文件

preinstall hook中,系统将为你自动生成一份默认的配置文件至 /server/db/secret.js,它涵盖了数据库、管理系统、三方登录、七牛云等重要配置信息,以确保本项目正常启动,此文件进行了详细注释,因此你可以在项目启动前根据自己的实际情况进行修改。

依赖

  1. 安装mongodb,推荐5.x版本
  2. mongodb中创建名为/server/db/secret.js[db.db](默认配置为 “blog”)的数据库
  3. mongodb中创建用户为/server/db/secret.js[db.user/pwd](默认配置为 “admin 12345”)
  4. 运行时node版本推荐 14.x,实测16.x安装依赖会失败,初步观察为node-sass版本兼容问题,因时间原因目前不打算排查升级,建议直接安装nvm管理工具对node版本进行灵活切换。

Build Setup

关于部署至生产环境的详细教程,请查看这篇文章

# install dependencies

npm install

# serve with hot reload at localhost:6180

npm run dev

# build for production with minification

# 注意,此命令输出生产包至 dist 目录,部署时将 dist 下 的所有目录上传至你的静态服务目录,例如 /usr/local/nginx/htmls

npm run build

# serve for production
# 注意,如果你想在本地试运行生产包,请运行以下命令:

cd dist
npm run start:local

# 在生产服务器的静态服务目录中

npm i

# 直接使用node启动

npm run start

# 使用pm2启动

npm i pm2 -g
npm run pm2:prod

# 查看部署相关信息

pm2 show mapblog

预览

首页

home

搜索

home

文章详情

article-1

article-2

留言板

leavewords

leavewords

电影

movies

movies

归档

archives

archives

标签

tag

分类

category

其它

  1. 文章、评论、留言的点赞按照客户端ip进行统计
  2. 评论、留言具备一定的频率限制
  3. 爬虫固定每天凌晨一点开始同步豆瓣上的相关数据
  4. 爬虫获取的数据以json格式存储至 /server/files/movies
  5. Github登录有时会失败,😌 ~ 墙你太高
  6. 搁置开发:友链功能
  7. 搁置开发:首页名言功能的后端管控
  8. 搁置开发:主题切换

特别致谢

本站前台展示端的UI风格参考自 hexo 博客 的 butterfly 主题,特此致谢。

最后的最后,如果你喜欢这个项目,不妨star鼓励一下~

vue-ssr-blog's People

Contributors

justjokee avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-ssr-blog's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.