前言
博客1.0是在2021年6月大学毕业进入公司后，利用上下班空余时间开发的博客网站(2021.8.27开始)，直至2022.09.13，博客上线已有一年，在此期间不断地开发完善相关功能，没有后端、没有UI、没有测试，前后端一人梭哈，网站布局设计灵感来自互联网多个网站的结合，觉得哪个布局好看抄哪个，这一年来，开发过程中也遇到大大小小的问题，还好一切都还顺利，这顺利的背后只因有一个强大的老师(百度)陪伴在我身边，我的良师益友百度陪我度过了最艰难的时刻。
在2022.09.13日晚，打开vscode准备给博客开发封面上传功能时，看着屏幕前曾经编写的代码，陷入了沉思，明明一行代码就能解决，竟然写了三行，明明代码可以抽取封装公共方法，还乐此不疲地写者重复的代码，明明复杂的界面可以拆分组件来实现，却一把梭哈写在一个文件里，明明...，在这"明明"之中的安排下，我决定重构该项目，因此博客2.0诞生了。
计划
博客2.0将对部分UI进行更改，添加更多功能，更好的交互体验，前后端代码优化，组件拆分，封装公共组件等
是否开源
博客2.0刚开始，暂时不公开仓库，后续是看情况决定是否开源，博客1.0已经开源，感兴趣的小伙伴们，可以下载博客1.0
博客2.0开发过程
- 开发日期：2022.09.14 - 2022.09.15
一、重写Mian.vue页面，组件拆分，博客列表拆分为组件(BlogList)，博客列表使用display布局，在屏幕宽度大于1200px时一行展示4个，小于1200px展示3个，850px展示2个，650px展示1个。
二、前端后台管理页面Container.vue, 添加图片上传封面，图片资源管理页面(ResourceImges.vue), 重写分页组件
三、后端：数据库 blog_container表格添加cover字段，用于保存封面图片Url连接，图片资源管理分页优化。优化查询接口：博客1.0在获取文章列表时隐藏的文章通过前端判断字段来隐藏的, 2.0博客sql过滤，通过前端多传一个参数，来判断是否过滤具有隐藏标识的帖子。因为和后台文章管理共用一个接口，后台管理需要正常获取隐藏贴子，所以通过传递参数决定是否获取。
- 开发日期：2022.09.16 - 2022.09.17
一、重写评论列表，调整评论列表布局，拆分为CommentList组件，解决插入代码内容，换行导致挤一起的问题。
二、优化列表主页、博客内容展示页面各种大小屏幕适配显示效果
- 开发日期：2022.09.17 - 2022.09.18
一、重写导航栏，背景图，分别拆分为Navigation和BackgroundImg组件。
- 开发日期： 2022.09.20
新增公共加载动画组件(Animation.vue)、目录别名设置，部分css代码优化
公共加载动画Animate.vue 组件，在需要使用的界面引入即可，共设置三个参数，如下
/*
加载动画组件
animation: 为 true时展示动画, false关闭动画
bagColor: 动画元素背景颜色, 以及生成动画元素个数
duration: 值越小, 动得越快, 反之越慢
*/
export default {
props: {
animation: {
type: Boolean,
required: true,
default: () => true,
},
bagColor: {
type: Array,
default: () => {
return ['#2ecc71','#3f1893','#820d41','#137b3e','#c0b711', '#b44d19'];
},
},
duration: {
type: Number,
default: 1.2,
},
},加载动画设计灵感来自酷我音乐app的加载动画
该加载动画组件已经打包发布到npm平台(2022-10-08)，感兴趣的可以下载到你的项目使用，点击查看cxy-loading-animation插件包，使用教程
- 开发日期： 2022.09.22
资源压缩
一、使用 image-webpack-loader 对图片资源进行压缩
安装 image-webpack-loader
cnpm i image-webpack-loader -D在vue.config.js里面配置， 写入如下代码
module.exports = {
chainWebpack: (config) => {
// 图片资源压缩
config.module
.rule('images')
.use('image-webpack-loader')
.loader('image-webpack-loader')
.options({
bypassOnDebug: true,
}).end()
}
}
二、JS压缩 安装， terser-webpack-plugin
我的webpack是4.x版本，所有安装4.x的terser-webpack-plugin，4.2.3 是 terser-webpack-plugin 4.x最后一个版本
cnpm i [email protected] -D
注意：webpack4中用到terser-webpack-plugin压缩插件，不能使用最新的版本，而是[email protected]版本；webpack5对应的使用[email protected]版本，否则会报错误
在vue.config.js里面配置， 写入如下代码
configureWebpack: (config) => {
config['optimization'] = {
minimize: process.env.NODE_ENV === 'production' ? true : false, // 生产模式下执行
minimizer: [
new TerserPlugin({
parallel: true, //使用多进程并发运行以提高构建速度 Boolean|Number 默认值： true
terserOptions: {
compress: {
drop_console: true, //移除所有console相关代码；
drop_debugger: true, //移除自动断点功能；
pure_funcs: ["console.log", "console.error"], //配置移除指定的指令，如console.log,alert等
},
format: {
comments: false, //删除注释
},
},
extractComments: false, //是否将注释剥离到单独的文件中
})
]
}
},配置后打包资源大小对比
感觉图片压缩效果挺明显的，js压缩不太明显。
CSND引入详细教程==>CSND引入详细教程
经过SCND引入vue,vue-router,element,echarts后，首次加载总耗时由原来的3.7秒降至1.4秒
网络好的情况下，打开网页，基本都在1秒以内
- 开发日期： 2022.09.23
封装分页组件，由于多处地方使用到分页组件，因此封装分页组件为公共组件(Pagination)， 封装的参数如下
props: {
//每页显示个数选择器的选项设置
pageSizes: {
type: Array,
default: () => {
return [20, 30, 40, 50]
}
},
// 是否使用小型分页
small: {
type: Boolean,
default: () => false,
},
// 每页显示条目个数
queryInfo: {
type: Object,
required: true,
default: () => ({}),
},
// 页码按钮的数量，当总页数超过该值时会折叠,只能是(5-21之间的奇数)
pagerCount: {
type: Number,
default: 7,
},
// 总条目数
total: {
type: Number,
required: true,
default: 0,
},
// 对齐方式
direction: {
type: String,
default: 'flex-start',
},
// 设置margin外边距
margin: {
type: String,
default: '0px 0px 0px 0px'
},
// 设置padding内边距
padding: {
type: String,
default: '0px 0px 0px 0px'
},
},- 开发日期： 2022.09.24
重写关于页面, 调整关于页面布局，增加分页组件