小康博客

说明 由于webpack5正式版刚发布不久，仍有插件不支持webpack5，因此此文以webpack4为例进行撰写。 webpack@4.44.1 webpack-cli@3.3.12 提取CSS成单独文件 安装插件 1yarn add mini-css-extract-plugin -D 配置文件：将MiniCssExtractPlugin.loader替换曾经的style-loader 123456789101112131415161718192021222324252627282930313233343536/** * @description: * @author: 小康 * @url: https://xiaokang.me * @Date: 2020-12-31 19:32:48 * @LastEditTime: 2020-12-31 19:32:48 * @LastEditors: 小康 */const { resolve } = require('path')const HtmlWebpackPlugin = requir ...

webpack五个核心概念 Entry 入口(Entry)指示webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 output 输出(Output)指示webpack 打包后的资源bundles 输出到哪里去，以及如何命名。 loader Loader 让webpack 能够去处理那些非JavaScript 文件(webpack 自身只理解JavaScript) plugins 插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。 mode 模式(Mode)指示webpack 使用相应模式的配置。 选项 描述 特点 development 会将DefinePlugin中process.env.NODE_ENV的值设置为development。启用NamedChunksPlugin和NamedModulesPlugin。 能让代码本地调试运行的环境 production 会将DefinePlugin中process.env.NODE_ENV的值设置为production。 ...

尺寸适配 只需要将viewport width等于设计稿的宽度即可。 1<meta name='viewport' content='width=750,user-scalable=no'> less与rem适配 less文件 123456@font-size: 设计稿的宽度 / 10rem;#box{ width: 200/@font-size; height: 100/@font-size;} 使用js做根元素的调整 12345document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';window.onresize = function () { document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'p ...

视口控制 1234<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no, maximum-scale=1.0, minimum-scale=1.0" /> 事件 123456789101112131415var box = document.querySelector('#box')// 元素上触摸开始时触发box.addEventListener('touchstart', function () { box.style.backgroundColor = 'red'})// 元素上触摸移动时触发box.addEventListener('touchmove', function () { box.style.backgroundColor = 'yell ...

简介 gulp是前端自动化打包构建工具，所谓打包可以理解为把文件压缩, 整合, 移动, 混淆。gulp是一种基于流的打包构建工具。 文档：https://www.gulpjs.com.cn/docs/api/concepts/ 使用gulp，首先要全局安装gulp，全局安装只是可以使用其命令 123456# 安装npm install --global gulp# 卸载npm uninstall --global gulp# 查看版本gulp -v 也可以局部安装，通过scripts运行。 常用API task() 创建一个基于流的任务 123gulp.task('htmlHandler', function () { // 找到 html 源文件, 进行压缩, 打包, 放入指定目录}) src() 找到源文件 1234567891011121314// 找到指定一个文件gulp.src('./a/b.html')// 找到指定目录下, 指定后缀的文件gulp.src('./a/*.html ...

代码仓库：https://github.com/changeclass/koa2-weibo 修改数据模型 1234567891011121314151617181920212223242526272829303132/** * @description: 微博艾特用户的关系 * @author: 小康 * @url: https://xiaokang.me * @Date: 2020-12-20 11:10:05 * @LastEditTime: 2020-12-20 11:10:05 * @LastEditors: 小康 */const seq = require('../seq')const { INTEGER, BOOLEAN } = require('../type')const AtRelation = seq.define('atRelation', { userId: { type: INTEGER, allowNull: false, commen ...

代码仓库：https://github.com/changeclass/koa2-weibo 艾特功能 艾特功能使用at.js库。 实现接口 12345678910// 获取 at 列表router.get('/getAtList', loginCheck, async (ctx, next) => { const { id: userId } = ctx.session.userInfo const result = await getFollowers(userId) const { followersList } = result.data const list = followersList.map((user) => { return `${user.nickName}-${user.userName}` }) ctx.body = list}) 艾特用户转为链接 在格式化微博时将@符号转为链接 123 ...

代码仓库：https://github.com/changeclass/koa2-weibo 数据关联 1234Blog.belongsTo(UserRelation, { foreignKey: 'userId', targetKey: 'followerId'}) 此关系不会建立成功，因为此关系在数据库中已经被使用了，但是作为sequlize是可以使用此关系的。 自己关注自己 创建完用户就应该自己关注自己，为了方便获取数据。 在创建用户时只需要调用addFollow函数即可。但是为了在首页不显示自己。还需要在获取关注/粉丝列表时进行限制 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364const Sequelize = require('sequelize')/** * @author: 小康 * @ur ...

代码仓库：https://github.com/changeclass/koa2-weibo 数据模型 模型 123456789101112131415161718192021222324/** * @description:用户关注关系 * @author: 小康 * @url: https://xiaokang.me * @Date: 2020-12-19 15:31:54 * @LastEditTime: 2020-12-19 15:31:55 * @LastEditors: 小康 */const seq = require('../seq')const { INTEGER } = require('../type')const UserRelation = seq.define('userRelation', { userId: { type: INTEGER, allowNull: false, comment: '用户ID' & ...