吕小布の博客

教程来源 1.NoSQL数据库简介2. Redis概述安装2.1. 应用场景2.1.1.配合关系型数据库做高速缓存 高频次，热门访问的数据，降低数据库IO 分布式架构，做session共享 2.1.2.多样的数据结构存储持久化数据 最新N个数据：通过List实现按自然时间排序的数据 排行榜，TopN：利用zset（有序集合） 时效性的数据，比如手机验证码：Expire过期 计数器、秒杀：原子性，自增方法：INCR、DECR 去除大量数据中的重复数据：利用Set集合 构建队列：利用list集合 发布订阅消息系统：pub/sub模式 2.2. Redis安装2.2.1. 安装版本redis官网 下载官网最新稳定版本 不考虑windows环境下对redis的支持 2.2.2. 安装步骤准备工作：下载安装最新版的gcc编译器 安装C语言的编译环境 123yum install centos-release-scl scl-utils-buildyum install -y devtoolset-8-toolchainscl enable devtoolset-8 bash 测试 ...

vue-cli中自定义配置webpack加入自己的配置 说明配置参考 | Vue CLI configureWebpack ： 如果是对象则会合并到 webpack 中（相同的会覆盖），如果是函数则可以通过参数直接修改添加配置，其他配置直接写在 module.exports 最外层即可 vue add和npm install区别创建的项目依赖： vue add 是什么方法？1、vue add可能会改变现有的项目结构，但是npm install仅仅是安装包而不会改变项目的结构。 2、add如果你下载的库, 特别是 Ui 库, 希望对脚手架结构产生影响,那就选择vue add xxx 3、npm如果不希望对脚手架结构产生影响, 只是单纯的使用, 比如 axios 这个插件，那就选择npm install xxx vue add 除了會 npm install 之外，還會幫你配置好一個範例文件。需要注意的是這個指令會更改你現有的文件內容。特別的是使用 vue add router 或是 vue add vuex，他們雖然不是插件，但Vue CLI會幫你配置好文件，例如 vue add ro ...

前端工程化ACG前端工程化:体系设计与实践 - 简书 (jianshu.com) 背景及现状从本质上讲，所有Web应用，都是一种运行在网页浏览器中的软件，这些软件的图形用户界面（Graphical User Interface，简称GUI）即为前端。 如此复杂的Web应用，动辄几十上百人共同开发维护，其前端界面通常也颇具规模，工程量不亚于一般的传统GUI软件： 我们希望能在日常开发中制订一个规范化的前端工作流，很好地规范统一项目的模块化开发和前端资源，让代码的维护和互相协作更加容易更加方便，令前端开发自动化成为一种习惯。同时，让大家能够释放生产力，提高开发效率，更好更快地完成团队开发以及项目后期维护和扩展。 前端工程本质上是软件工程的一种。软件工程化关注的是性能、稳定性、可用性、可维护性等方面，注重基本的开发效率、运行效率的同时，思考维护效率。一切以这些为目标的工作都是”前端工程化”。工程化是一种思想而不是某种技术。 框架和构建工具的选型现在的前端开发倒也并非一无所有，回顾一下曾经经历过或听闻过的项目，为了提升其前端开发效率和运行性能，前端团队的工程建设大致会经历三个阶段： 库&#x ...

技术架构： vue2 + webpack + vuex + vuerouter + axios + less 功能模块： 封装通用组件 登录注册 token 守卫 购物车 支付 项目性能优化… 项目初始化及相关配置项目创建如果有成熟的项目，可以配一套自己的脚手架配置 前置条件：node环境 安装vue-cli 12npm i vue-cli -Dnpx vue create 项目名 选择vue2 备注：下载慢可以配置淘宝镜像，但2022年了，基本不慢 项目目录项目目录及文件介绍： node_modules 项目依赖文件夹 public 一般放置一些静态资源（图片） webpack进行打包时，会原封不动的打包到dist目录 该目录中新建axios.config.js，该文件中导出ip和port，这样无论是开发还是生产，更改环境就很方便，否则生产环境下，服务器信息就被写死在代码里了（低版本的vue-cli是static文件夹） public/axios.config.js 1234const Config= { ip: '1.13.**.**& ...

Bootstrap中文网 (bootcss.com) 版本：Versions · Bootstrap v5.3 (getbootstrap.cn) V5安装Bootstrap基础box-sizing为了避免内边距影响盒子大小，计算盒子尺寸的方式被设置为了border-box; 123* { box-sizing: border-box;} 流体容器 .container-fluid流体容器，width：auto;加padding会向里缩，不会撑开盒子（盒子模型的公式） 备注：width:100%;加padding会撑开盒子 123456.container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;} 固定容器 .container固定容器的底层是媒体查询 12345678910111213141516171819@media (min-width: 1200px).containe ...

[TOC] CSSCSS工程化原文链接：https://mp.weixin.qq.com/s/ghTj7uREeYrsbZhdEvWc1A 大家好，我是皮汤。最近业务调整，组内开启了前端工程化方面的基建，我主要负责 CSS 技术选型这一块，针对目前业界主流的几套方案进行了比较完善的调研与比较，分享给大家。 目前整个 CSS 工具链、工程化领域的主要方案如下： 而我们技术选型的标准如下： 开发速度快 开发体验友好 调试体验友好 可维护性友好 扩展性友好 可协作性友好 体积小 有最佳实践指导 目前主要需要对比的三套方案： Less/Sass + PostCSS 的纯 CSS c侧方案 styled-components / emotion 的纯 CSS-in-JS 侧方案 TailwindCSS 的以写辅助类为主的 HTML 侧方案 纯 CSS 侧方案介绍与优点 维护状态：一般 Star 数：16.7K 支持框架：无框架限制 项目地址：https://github.com/less/less.js Less/Sass + PostCS ...

参阅MDN CSS第一步什么是CSS 基于HTML，对CSS有一个概念性的认识 CSS是一门基于规则的语言，通过各种规则，让浏览器将HTML元素渲染出自定义的样式 CSS (层叠样式表) 让你可以创建好看的网页，但是它具体是怎么工作的呢？ 这篇文章通过一些很简单的例子，告诉我们什么是 CSS，同时还会涉及一些和 CSS 相关的专业术语。 在 HTML 概述 模块我们学习了 HTML 是什么，以及如何使用它来组成页面。 浏览器能够解析这些页面。标题部分看起来会比正常文本更大，段落则会另起一行，并且相互之间会有一定间隔。链接通过下划线和不同的颜色与其他文本区分开来。 这些都是浏览器的默认样式——当开发者没有指定样式时，浏览器通过这些最简单的样式使页面具有基本可读性。 如果所有网站都像上图那样，互联网就会非常枯燥。但是使用 CSS 就可以完全控制浏览器如何显示 HTML 元素，从而充分展示你喜欢的设计样式。 CSS用来干什么前文提到过，CSS 是用来指定文档如何展示给用户的一门语言——如网页的样式、布局、等等。 CSS 可以用于给文档添加样式 比如改变标题和链接的颜色及大小。 ...

LessLess 快速入门 | Less.js 中文文档 - Less 中文网 (bootcss.com) Less 入门教程 - 开发文档 安装脚手架中安装vue3-cli在配置项中可以直接选中less语言或者sass语言，2里面还得安装 一、安装开发依赖，安装如果有问题，可以指定版本的less-loader 1npm install less less-loader --save-dev 二、打开 build / webpack.base.conf.js ，配置rule属性 1234{ test: /\.less$/, loader: "style-loader!css-loader!less-loader" } 三：在组件页面内部用 lang='less' 123456<style scoped lang='less'>.a{ .b{}} </style> 如果使用的是vue-cli5 此时自己下载的vue-cli ...

Sass常见问题 | Sass中文网 Sass: Syntactically Awesome Style Sheets (sass-lang.com) 基本概念什么是Sass/ScssSCSS - 掘金 (juejin.cn) SCSS 是Sass 3引入新的语法，其语法完全兼容 CSS3，并且继承了Sass的强大功能。 Sass 和SCSS其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。 Sass 支持两种不同的语法。两种语法可以互相加载。 什么是Ruby-sass?继往开来的 sass 三代编译器：ruby sass、node-sass、dart-sass - 掘金 (juejin.cn) ...

技术架构：vue + webpack + vuex + vuerouter + axios + scss + elementUI 功能模块： 菜单权限、按钮权限 数据可视化 echarts数据可视化开源库 canvas画布 svg矢量图