2 Star 56 Fork 11

噗哧先生 / 噗噗博客

Create your Gitee Account
Explore and code with more than 8 million developers,Free private repositories !:)
Sign up
Clone or Download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

pupublog(vue2+koa2+mysql)

前言

一直想拥有一个属于自己的博客网站,用来总结自己的学习心得,因为发现自己记性不好,知识学完就忘,并且学到的知识不成体系,东一块西一块,这样就导致了,当每次间隔一段时间不用某个技术时,都需要重学一遍(其实学习就是个重复的过程,这种现象也很正常)。

那么既然有了想法,就开始行动起来...

  • 项目调研

    当在githubgitee搜索使用express或者koa开发的博客项目时,发现都只是很简单的一些demo,并且年代很久远,所以最终决定参考一个java的博客项目:蘑菇博客,(PS:文档写的简直是太nice了,并且作者非常励志和耐心,在蘑菇博客的交流群里问了很多问题都帮忙解决了,很是感谢,java方向的可以学习一下。)

    另外在实现管理端时,还参考了另外一个项目,smart-admin,是由1024实验室团队开发的一套互联网企业级的通用型中后台解决方案,后端也是用java写的,不过我主要参考的是前端代码(PS:写的是太好了,各种vue2的高级用法,非常推荐学前端的同学好好学习一下这个项目)。

    当把所有的运行环境在本地安装好,项目成功跑起后,就开始了我的改造之旅...

    最终目标:前端和后台管理端参考蘑菇博客的UI,代码书写风格参考smart-admin,自己重零设计实现一遍;将java写的后台服务改造为node,使用koa2来自己搭建后台,数据库使用mysql;

  • 技术选型

    最终的技术选型为:

    名称 技术选型
    前台和管理端vue-blog-web``vue-blog-amdin vue2
    后台服务koa-blog-service koa2
    数据库 mysql

    于是就有了pupublog,一个vue2+koa2+mysql实现的单人博客项目

    具体的项目细节文档,正在补充,敬请期待

    (PS:前端无论是使用react还是vue,后端无论是express或者koa2或者egg等等,其实都是可以的,选择一个做下去就行了,做来做去发现前端最重要的还是基础。做这样一个项目也是为了体验一下从零开发一个项目的感受,然后部署上线、写文档,开源,这样一个过程,虽然花费了很多时间,但是最后也收获了很多,后期会继续完善的,欢迎大家提issure和留言评论,如哪里有错误的地方,也欢迎指正,让我们共同进步💪)

项目亮点

  • 博客参考蘑菇博客的UI,重构前后台页面,前端代码编写风格以及目录结构参考smart-admin

    基于vue2-cli脚手架,从零构建项目。对axios进行二次封装,使用mixin对公共模块代码抽离,使用keep-alive组件对路由进行缓存,优化性能,使用路由守卫对错误地址进行拦截,使用vuex对全局状态管理,合理的使用cookie、localStorage、indexDb本地缓存实现功能开发,遵循高内聚低耦合的特点封装组件,模块与路由命名达到见名知意,复杂页面逻辑都有注释。

  • 仿照Gitee,重写了留言和评论组件。

    支持emoji回复,留言审核,留言举报,留言点赞,留言删除(管理员对所有留言具有删除权限)。当留言审核未通过时,仅自己可见(避免非法输入)。

  • 仿照掘金,重写了文章目录组件。

    根据HTML文章文档,自动生成文章目录,支持点击标题目录跳转到指定位置处,并高亮显示。支持滑动高亮 (会判断当前滑动位置,高亮对应标题)

  • 仿照现代JavaScript教程的目录样式,重写了专题模块。

  • 仿照掘金登录,重写了登录模块,现已支持Gitee登录和QQ登录。

    点击按钮会在页面新打开窗口,当登录成功后,窗口自动关闭。通过window.opener.postMessage实现跨窗口通信,获取token。

  • 为了满足业务需求,使用koa2重写了后台接口,从零搭建后台项目工程。

    良好的目录结构,目录层级为,router(后端路由)->controller(参数接收和返回前台数据)->validation(参数校验)->service(业务逻辑)->dao(操作数据库)->sql(各模块的sql语句)

  • 为了提高接口和后台页面开发效率,自定义代码生成器

    用代码去写代码,减少重复工作,提高准确率,只需编写关键逻辑代码即可。开发效率大幅度提高,从三天一个模块(增删改查+分页,前台页面和后台接口),缩短为十分钟。

    代码生成器执行逻辑如下:

    1. 在package.json编写script脚本,npm run add 执行生成器入口文件。
    2. 通过fs.readline,逐行解析导出的数据库文件xxx.sql,解析成json对象。
    3. 通过第三方包inquirer,从控制台接收输入参数,与解析器交互。输入包括:新创建的模块名称,需要操作的数据表,前台代码生成位置
    4. 读取定义好的模板,通过输入的参数和基础数据,将模板替换成正确的代码,然后分别写入各自的文件目录下
  • 支持Markdown编辑,使用的vditor第三方库

  • 支持文档的导入导出(md格式)

  • 支持图片上传

  • 等等等等

技术使用

演示环境

阿里云:CentOS 7.9 64位 2核 2 GB 40GB云盘 2MB带宽

演示前端:http://8.141.57.223:20518/

演示后端:http://8.141.57.223:20519/

演示账号admin,密码123123

线上地址

http://bnbiye.cn

目录说明

|-pupublog 仓库克隆下来的跟目录
	|-code-build  代码生成器,一键生成接口代码和管理端代码
	|-koa-blog-service 服务端
	|-vue-blog-admin 博客后台管理端
	|-vue-blog-web 博客前端

环境搭建

开发工具

工具 说明 官网
Visual Studio Code 前端和node服务端开发工具 https://code.visualstudio.com/
Webstorm 前端和node服务端开发工具 https://www.jetbrains.com/webstorm/
Navicat 数据库连接工具 https://www.navicat.com.cn/
SQLyog 数据库连接工具 https://webyog.com/

tip:Vscode或者Webstorm用哪个都行,看个人习惯,NavicatSQLyog也是一样,选择一个自己喜欢的使用

Vscode或者Webstorm我都会用,数据库连接工具我比较习惯Navicat

开发环境

工具 版本号 下载
nodejs 14.16.1 https://nodejs.org/en/
mysql 5.7.19 https://downloads.mysql.com/archives/community/

本地运行

  1. 克隆仓库git clone https://gitee.com/hrbust_cheny/pupu_blog.git

  2. 本地安装mysql数据库

  3. 使用Navicat连接本地数据库,新建数据库pupublog,然后导入数据库文件pupublog.sql(tip:数据库文件存放在/koa-blog-service/目录下)

  4. 执行下面的sql语句,新建管理员用户

    delete from t_admin_user where uid = '-1';
    insert into t_admin_user( uid, user_name, user_password, order_num, create_time, update_time ) values ('-1','admin','$2a$10$2veC0JLAmmOavUlyyDN25.3vRix0nyH9Vf5lAcI8DRyQgKGnQBKVG',-1,localtime(),localtime());
    -- 创建了一个账号为admin的用户,密码是123123
  5. 运行服务端koa-blog-service

    ## 进入到 koa-blog-service 目录下,安装依赖 /pupublog/koa-blog-service
    npm install --registry=https://registry.npm.taobao.org
    ## 全局安装 supervisor,文件变更会自动重启node服务
    npm install -g supervisor
    ## 启动node服务
    npm run dev

    记得更改/koa-blog-service/src/constant/config.js文件中的配置

    // /koa-blog-service/src/constant/config.js
    // mysql配置
    const database = {
        host: 'localhost', // 连接的服务器
        port: 3306, // mysql服务运行的端口
        database: 'pupublog', // 连接的数据库
        user: 'root', // 你数据库的用户名
        password: 'xxx' //数据库密码
    }
    /**
     * 1、如果是本地运行
     *  http://localhost:20517
     * 2、如果是部署到服务器,正式生产环境
     *  http://你的ip:20517 或者是你的域名
     * 
     */
    const baseUrl = 'http://localhost:20517'
    /**
     * Gitee第三方登录的相关参数
     */
    const giteeLogin = {
        client_id: '你自己申请的客户id',
        client_secret: '你自己申请的密钥',
        expires: 3600, // token默认过期时间,单位是秒 3600s就是一小时
    }
  6. 运行管理端vue-blog-admin

    ## 进入到 vue-blog-admin 目录下,安装依赖 /pupublog/vue-blog-admin
    npm install --registry=https://registry.npm.taobao.org
    ## 启动管理端项目
    npm run dev
  7. 运行前端vue-blog-web

    ## 进入到 vue-blog-web 目录下,安装依赖 /pupublog/vue-blog-web
    npm install --registry=https://registry.npm.taobao.org
    ## 启动管理端项目
    npm run dev

最后

本人是一年开发经验的小前端,项目是在空闲时间完成的,后期还会慢慢完善功能,目前先暂停一阵,备战面试,加油加油💪

网站部分截图

image-20211019151848001

image-20211019151910556

image-20211019151928688

image-20211019151939859

image-20211019151951221

image-20211019152005304

image-20211019152012305

image-20211019152055054

image-20211019152132390

image-20211019152141653

image-20211019152200418

image-20211019152212758

image-20211019152225550

image-20211019152247541

image-20211019152309534

image-20211019152334933

image-20211019153033135

Repository Comments ( 33 )

Sign in to post a comment

About

一款基于vue2+elementui+koa2+mysql前后端分离的个人博客系统。 线上地址:http://bnbiye.cn 1. 支持第三方登录,gitee、qq 2. 支持文章留言评论 3. 自定义文章贡献度模块(高仿gitee) 4. 自定义文章目录模块(高仿掘金) 5. 后台支持Markdown格式编写文章 6. 支持文章导入导出,图文上传 7. 自定义代码生成器,一件生成业务接口代码 expand collapse
Cancel

Releases

No release

噗噗博客

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/hrbust_cheny/pupu_blog.git
git@gitee.com:hrbust_cheny/pupu_blog.git
hrbust_cheny
pupu_blog
噗噗博客
master

Search

113223 674803ea 1850385 170725 2838fb2a 1850385