记录我的博客2.0开发过程

最新推荐文章于 2024-01-12 10:10:59 发布

软件聚导航

最新推荐文章于 2024-01-12 10:10:59 发布

阅读量225

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42100033/article/details/128258969

版权

前言

博客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 terser-webpack-plugin@4.2.3 -D

注意：webpack4中用到terser-webpack-plugin压缩插件，不能使用最新的版本，而是terser-webpack-plugin@4.x版本；webpack5对应的使用terser-webpack-plugin@5.x版本，否则会报错误

在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'
    },
  },