1. 首页

Vue、Node全栈项目~面向小白的博客系统~

• 2020年12月15日 07:45 • 未分类 • 阅读 710

个人博客系统

Hello,大家好呀，我叫漆黑之牙。

不知道给我点赞的是帅气的小哥哥还是美丽的小姐姐呢~

感谢掘金这个平台，大佬们的知识分享，让我学到了很多东西！

前言

❝

代码质量问题轻点喷(去年才学的前端),有啥建议欢迎联系我,联系方式见最下方,感谢！

页面有啥bug也可以反馈给我，感谢！ 这是一套包含前后端代码的个人博客系统，欢迎各位提出建议，本来打算用nuxt来书写，但是想学了react之后用next来写，后面会用reactSSR来重构！

❞

博客该有的功能都有，可以写文章，可以评论，可以留言，甚至可以玩游戏(虽然还没完善),等等让你来发现。

这是一个小型的全栈项目，主要是检验并记录一下自己的学习成果

运用的技术Vue、Vue-Cli、Element-Ui、后端NodeJs、数据库MySql等各种技术

看到这里了，请你们不要白嫖，点个star(O(∩_∩)O)

前台页面

  • 页面设计 借鉴开源项目「白茶」

「支持PC端和移动端，响应式页面，更多页面戏节让你去发掘」

1. 主页

2. 文章列表

3. 听雨

4. Demo

5. 关于我

6. 留言板

页面详情看这里

后台页面

  1. 主页

  2. 发布文章

  3. 关于我

  4. 评论列表

  5. 设置

其他的例如文章列表等我后面会别补上，「主要是想让你们研究透代码，自己去写,因为真的很简单(手动狗头)」

页面详情看这里

后端相关

  1. 数据库操作使用 sequelize

  2. 后端框架使用 koa

「sequelize」和「koa」在此项目中的使用有机会我会写成对应的文章出来

❝

数据库表结构

❞

「这个博客里本来打算实现文章分类功能，后面感觉不需要，就没用到这个表了」

  1. 用户表 ID 用户名 用户账号 用户密码 生日 头像 创建时间

  2. 文章表 ID 用户ID 文章标题 文章图片 文章music 文章内容 分类ID(外键) 文章摘要 发布时间 浏览人数 喜欢人数 评论数(通过文章留言板去查) 分类ID

  3. 文章留言表 ID 留言文章ID 留言用户ID 留言内容 留言时间

  4. 分类表 ID 分类名称

  5. 留言表 ID 留言用户ID 留言内容

  6. 用户是否喜欢文章表 ID 用户ID 文章ID (通过多对多关系生产)

❝

表关系

❞

  1. 一个分类有多个文章(一对多)

  2. 一篇文章可以有多个评论(一对多)

  3. 一个用户可以评论多篇文章（一对多）

  4. 一个用户可以留言多次(一对多)

  5. 一篇文章可以被多个用户喜欢，一个用户可以喜欢多个文章(多对多)

代码目录介绍及运行介绍

后端代码采用三层架构模式

❝

models 是表现层

services 是业务逻辑层

routes 是数据访问层

❞

  1. 「backstage」 是后台管理系统

  2. 「client」 是前端

「拉取代码后先在根目录和client文件夹里面和backstage都执行 npm install安装依赖」

「之后首先要在跟目录创建public和encrypt文件夹」

「public文件夹里面要创建upload文件夹，上传文件需要，打包前端代码也是打包到这个目录」

「encrypt里面要创建dbEncrypt.js和ossEncrypt.js」

可随时在models/tables/db.js里面切换
本地开发就用localDbInfo里面的，注意要在db.js切换
——————————数据库请自行安装————————————
dbEncrypt.js
module.exports = {
localDbInfo: {
dbName: 'XXX', // 数据库名称
userName: 'XXX', // 数据库用户名
password: 'XXX', // 数据库密码
host: {
host: 'localhost',
dialect: 'mysql'
}
},
aliDbInfo: { // 服务器上的数据库信息,同上
dbName: 'XXX',
userName: 'XXX',
password: 'XXX',
host: {
host: 'XXX',
dialect: 'mysql'
}
}
} 复制代码

如果没有服务器，本地开发的话就不需要这个了
我写了两个上传文件的接口，/upload和/ossUpload，没有服务器就切换成/upload就行了
ossEncrypt.js
module.exports = {
region: 'XXX', // OSS region
accessKeyId: 'XXXXXX', OSS accessKeyId
accessKeySecret: 'XXXXXX', OSS accessKeySecret
bucket: 'XXXX', // OSS bucket名
} 复制代码

接下来就可以愉快的玩耍了

「确保数据库信息填写正确之后 在根目录输入在 npm run sync 同步数据库，提示同步完成即可」 「然后输入npm start 开启服务，这样本地服务就跑起来了」 「接下来就跟平时开发一样跑前端就行了，进入client或者backstage 输入 npm run dev 进入开发模式」

部署

首先你得有一个自己的服务器，我用的是阿里云

这里推荐一个我用的服务器工具 xShell和xFtp

然后点击右边的「免费授权页面」填写相应资料即可下载

  1. 首先需要安装「nodeJs」，百度安装方式很多，请自选其一，安装完成后node -v，能打印出版本代表安装完成, 安装完成后设置为淘宝镜像：「npm config set registry https://registry.npm.taobao.org」

    ❝

    选装[「nvm」(node管理工具), 「git」]

    ❞

  2. 「nginx」 安装可以看这里，或者百度教程很多

  3. 「mysql」 百度一下，你就知道

  4. 「navicat」(数据库操作工具), 可以使用「navicat注册机」破解，教程点此

  5. 「打开navicat连接上服务器的数据库，连接成功即可」

  6. 「pm2」(PM2是node进程管理工具，可以利用它来简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等，而且使用非常简单)

    ❝

    安装命令：npm install pm2@latest -g

    ❞

    ❝

    pm2 -v打印版本即安装成功

    ❞

  7. 打开服务器和阿里云上相应的端口(3306,5008,80)

  8. 「nginx配置」

    为什么是5008，因为我koa监听的是5008端口

    ❝

    这里给出我的nginx配置

    ❞

    user root root;
    worker_processes auto;
    error_log /www/logs/nginx_error.log crit;
    pid /www/server/nginx/logs/nginx.pid;
    worker_rlimit_nofile 51200;
    events
    {
    use epoll;
    worker_connections 51200;
    multi_accept on;
    }
    http
    {
    include mime.types;
    #include luawaf.conf;
    # 设置缓存路径并且使用一块最大100M的共享内存，用于硬盘上的文件索引，包括文件名和请求次数，每个文件在1天内若不活跃（无请求）则从硬盘上淘汰，硬盘缓存最大10G，满了则根据LRU算法自动清除缓存。
    proxy_cache_path /var/cache/nginx/cache levels=1:2 keys_zone=imgcache:100m inactive=1d max_size=10g;
    include proxy.conf;
    default_type application/octet-stream;
    server_names_hash_bucket_size 512;
    client_header_buffer_size 32k;
    large_client_header_buffers 4 32k;
    client_max_body_size 100m;
    sendfile on;
    tcp_nopush on;
    keepalive_timeout 60;
    tcp_nodelay on;
    fastcgi_connect_timeout 300;
    fastcgi_send_timeout 300;
    fastcgi_read_timeout 300;
    fastcgi_buffer_size 64k;
    fastcgi_buffers 4 64k;
    fastcgi_busy_buffers_size 128k;
    fastcgi_temp_file_write_size 256k;
    fastcgi_intercept_errors on;
    #开启和关闭gzip模式
    gzip on;
    #gizp压缩起点，文件大于1k才进行压缩
    gzip_min_length 1k;
    # 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区
    gzip_buffers 4 16k;
    #nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
    gzip_static on;
    # 识别http协议的版本,早起浏览器可能不支持gzip自解压,用户会看到乱码
    gzip_http_version 1.1;
    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
    gzip_comp_level 1;
    # 进行压缩的文件类型。
    gzip_types text/plain application/json application/javascript application/x-javascript text/javascript text/css application/xml image/jpeg image/gif image/png video/mpeg audio/x-pn-realaudio audio/x-midi audio/basic audio/mpeg audio/ogg audio/* video/mp4;
    # 启用应答头"Vary: Accept-Encoding"
    gzip_vary on;
    # nginx做为反向代理时启用,off(关闭所有代理结果的数据的压缩),expired(启用压缩,如果header头中包括"Expires"头信息),no-cache(启用压缩,header头中包含"Cache-Control:no-cache"),no-store(启用压缩,header头中包含"Cache-Control:no-store"),private(启用压缩,header头中包含"Cache-Control:private"),no_last_modefied(启用压缩,header头中不包含"Last-Modified"),no_etag(启用压缩,如果header头中不包含"Etag"头信息),auth(启用压缩,如果header头中包含"Authorization"头信息)
    gzip_proxied expired no-cache no-store private auth;
    # (IE5.5和IE6 SP1使用msie6参数来禁止gzip压缩 )指定哪些不需要gzip压缩的浏览器(将和User-Agents进行匹配),依赖于PCRE库
    gzip_disable "MSIE [1-6]\.";
    limit_conn_zone $binary_remote_addr zone=perip:10m;
    limit_conn_zone $server_name zone=perserver:10m;
    server_tokens off;
    access_log off;
    # 是否启用在on-the-fly方式压缩文件，启用后，将会在响应时对文件进行压缩并返回。
    brotli on;
    # 启用后将会检查是否存在带有br扩展的预先压缩过的文件。如果值为always，则总是使用压缩过的文件，而不判断浏览器是否支持。
    brotli_static always;
    # 设置压缩质量等级。取值范围是0到11.
    brotli_comp_level 6;
    # 设置缓冲的数量和大小。大小默认为一个内存页的大小，也就是4k或者8k。
    brotli_buffers 16 8k;
    # 设置需要进行压缩的最小响应大小。
    brotli_min_length 20;
    # 指定对哪些内容编码类型进行压缩。text/html内容总是会被进行压缩
    brotli_types text/plain application/json application/javascript application/x-javascript text/javascript text/css application/xml image/jpeg image/gif image/png video/mpeg audio/x-pn-realaudio audio/x-midi audio/basic audio/mpeg audio/ogg audio/* video/mp4;
    server {
    listen 80;
    # 您的域名
    server_name xxxxxx.xxx;
    location ^~ / {
    proxy_cache imgcache;
    proxy_cache_key $scheme$proxy_host$uri$is_args$args;
    proxy_cache_valid 200 304 302 24h;
    proxy_pass http://www.域名:5008;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_redirect off;
    rewrite ^.+(?<!js|css|png|map)$ /index.html break;
    autoindex on;
    index index.htm index.html;
    set $fallback_uri /index.html;
    if ($http_accept !~ text/html) {
    set $fallback_uri /null;
    }
    try_files $uri $uri/ $fallback_uri = 404;
    }
    location ^~ /pc {
    proxy_pass http://www.域名:5008/back;
    index index.htm index.html;
    }
    }
    include /www/server/panel/vhost/nginx/*.conf;
    } 复制代码

一切准备工作已就绪，可以把项目部署到服务器上了

「执行 npm run build 命令分别打包前台和后台」 执行打包后的结构是这样的

Vue、Node全栈项目~面向小白的博客系统~

接下来把项目(除client和backstage和node_modules以外)放置到服务器的dist文件夹中(然后打该目录执行「npm i」下载依赖)

Vue、Node全栈项目~面向小白的博客系统~

由于对nginx不熟悉，所以我这里public文件放置得做一些改动，熟悉的可以自行配置(顺便教下我。。)

Vue、Node全栈项目~面向小白的博客系统~

就是把pc文件夹里面的放置放到同级

然后进入到dist中，用pm2运行程序。执行「pm2 start index.js」即可

皆大欢喜，做到这里就完成了。接下使用 域名就能访问啦

例如我的博客

日志记录

放置到服务器后，出了问题，肯定不像本地开发调试一样方便，所以我们需要「日志记录」，来定位问题

我采用的库是 log4js打不开就得翻墙，我只记录了接口调用记录，需要sql调用记录的可以自行加上 npm i koa-log4

const log4js = require('koa-log4')
const path = require('path')
log4js.configure({
appenders: {
api: {
type: 'dateFile',
filename: path.resolve(__dirname, 'logs', 'api', 'logging.log'),
maxLogSize: 1024 * 1024, // 配置文件的最大字节数
keepFileExt: 3, // 最多保存3天
layout: {
type: 'pattern',
pattern: '%c [%d{yyyy-MM-dd hh:mm:ss}] [%p]：%m%n'
}
},
default: {
type: 'stdout'
}
},
categories: {
api: {
appenders: ['api'],
level: 'all'
},
default: {
appenders: ['default'],
level: 'all'
}
}
})
process.on("exit", () => {
log4js.shutdown()
})
const apiLogger = log4js.getLogger("api")
exports.apiLogger = apiLogger 复制代码

然后创建一个中间件

// apiLoggerMiddleware.js
const { apiLogger } = require('../logger')
// 处理错误的中间件
module.exports = async (ctx, next) => {
try {
await next();
}
finally {
apiLogger.debug(`${ctx.method} ${ctx.path} ${JSON.stringify(ctx.body)}`)
}
};
//init.js
app.use(require('./apiLoggerMiddleware')) // API请求日志 复制代码

首页加载速度优化

由于掘金字数限制，请前往github查看

「完整配置请自行看client中的vue.config.js」

优化前：1M带宽才首屏加载「10多秒」

优化后：正常情况下首屏加载「1，2秒」

最后

不知不觉写的太多了

项目无模板，纯手写

分享自己的一个全栈简单项目给大家，有什么建议/bug/优化可以提一下，感谢！！。

如果看到这里，就请帮忙点个[star](https://github.com/qiheizhiya/myBlog)吧！！

喜欢技术的也可以加我，一起进步。

联系邮箱: 953136447@qq.com

本文使用 mdnice 排版

作者：漆黑之牙_
链接：https://juejin.im/post/6890757905352491021

看完两件小事

如果你觉得这篇文章对你挺有启发，我想请你帮我两个小忙：

  1. 关注我们的 GitHub 博客，让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群，让更多的人看到，一起进步，一起成长！
  3. 关注公众号 「画漫画的程序员」，公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区，目前已经覆盖和服务了超过 300 万开发者，你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有，如若转载，请注明出处

转载请注明：文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题：Vue、Node全栈项目~面向小白的博客系统~

链接：https://www.javascriptc.com/4545.html

赞 (0)
打赏 微信扫一扫 微信扫一扫
0
« 前端音视频的那些名词
一个菜鸟是如何让接口提速60%的优化技巧»
Flutter 中文教程资源

相关推荐

QR code