全栈式开发,前端工程化,以nodejs,eggjs为服务器语言,mysql为数据库,vue,vuex,wangeditor,i18n,webpack前端架构服务器端渲染ssr支持seo的博客网站

痛定思痛。 2022-01-27 19:13 134阅读 0赞

## 前言 ##

下面介绍本人开发的个人博客，希望通过开源的方式一起学习和进步！  
[源码地址][Link 1]  
[网站首页-钢琴家][-]

## 1. 背景 ##

该项目为一个学习型的博客网站案例，毕竟每个it工程师都想有一个自己的博客嘛，适合初中级前端工程师；项目已经部署在阿里云上，已经比较完整了，本地下载代码和安装好对应的环境，运行即可以获得线上的效果。由于项目涉及到服务器端而且用了数据库作为存储工具，架构用了eggjs和easywebpack所以首次运行的步骤比较繁琐，还希望你有点耐心；仔细研读项目我相信你肯定会有进步的。

1.1 技术栈  
mysql、nodejs、eggjs、vue、vuex、webpack  
1.2 文件发布图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]

## 2.效果 ##

[网站首页-钢琴家][-]

首页效果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 3]  
后台  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 5]

## 3. 使用 ##

3.1 环境要求(版本号没有强制要求)  
nodejs(v8.15.0)  
mysql(5.6)  
3.2 数据库引入  
数据库配置文件在config/config.default.js中，数据库名称是blog,密码默认是123456

启动数据库(不同环境启动方式有所不同)

mysql.server start

进入数据库

mysql -u root -p

在mysql中创建blog数据库:

create database blog

导入数据库：(项目目录下已经有了数据库blog.sql文件，将它放到某个路由再导入即可)

use blog
    source  /Users/zhenhua/Desktop/blog.sql;

3.3 安装依赖

npm install

3.4 本地开发启动应用

sudo npm run dev # sudo只是mac下的权限命令，其他系统并不需要

3.5 发布模式启动应用  
首先在本地或者ci构建好jsbundle文件(简称打包)

sudo npm run build

启动数据库

mysql.server start

然后,启动应用(由于用了–daemon所以这个进程一旦启动就不会自动关闭，需要手动)

sudo npm start

## 4. 工具文档 ##

nodejs  
eggjs  
vue  
vuex  
easywebpack  
webpack

## 5. 声明 ##

项目用于学习，不适合商业活动  
项目会持续更新优化  
由于项目是在别人的开源框架上快速开发的如果有什么问题可以提issue，求别喷  
项目已在本人的博客gqj.cn上上线了，代码是同一份，所以请不要恶意破解或破坏gqj.cn这个项目

[Link 1]: https://github.com/adminadmin1234/gqj
[-]: http://gqj.cn
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70]: /images/20220126/8fbab6c578344970b4b0e4e7713fe938.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 1]: /images/20220126/3ac4698a49514473a7e1ab15f45c32f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 2]: /images/20220126/d80bfd95568d43bb9591ccc7d9b2b2c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 3]: /images/20220126/eae3deaf651d45f78a6d2a679e741749.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 4]: /images/20220126/7c16ac735ad241b3b45e81fc3094ee55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E0MTk0MTk_size_16_color_FFFFFF_t_70 5]: /images/20220126/d2c32d8ebd734498b4457be7f5992f1e.png