- 博客(91)
- 资源 (5)
- 收藏
- 关注
RSS订阅
1原创 前端页面适配（rem适配）方案
如果选 100，设计稿中某个元素标注的尺寸是 375px，我们可以很快速的计算出 3.75rem。如果 html 的 font-size 设置为 50*屏幕宽度/设计稿宽度，那么 div 的宽度就应该是 7.5rem了。换算起来没那么直观。假设 html 的 font size = 1px 的话，就可以写 28 rem 了，更方便了，但是浏览器对字体大小有限制，设为 1px 的话，在浏览器中是失效的，会以 12px（或者其他值） 做一个计算 , 就会得到一个很夸张的结果，所以可以把 html 写的大一些。
2024-05-28 10:19:38
456
原创 前端文件上传/异步上传/切片上传/断点续传
首先构建文件上传的表单，并指定表单的提交内容类型为enctype=“multipart/form-data”，表明表单需要上传二进制数据，同时设置上传接口：</form表单上传大文件时，很容易遇见服务器超时的问题。第一个思路是将文件进行编码，然后在服务端进行解码，比如说将图片转换成然后调用接口上传，在服务端需要做的事情也比较简单，首先解码base64，然后保存图片即可。
2024-05-23 16:55:24
1168
原创 前端黑暗模式实现实例
当然，一个功能的实现方法有很多种，在具体开发中，可以根据具体情况来，这个只是一个简单示例，具体的对应主题的变量颜色根据实际进行调整。黑暗模式是现在很多网站页面为满足用户体验而设计的一个功能，下面是一个简单实现实例。
2024-05-21 16:05:46
252
原创 SpringBoot3+MySQL+Mybatis-Plus+Redis后端服务框架实现
项目结构清晰，适合初学者入门。GET/POST/PUT/DELETE请求接口均有实现，同时实现了单文件/多文件上传，文件下载，数据库sql脚本都保存在。文件夹，部署脚本都有写windows和Linux两种平台。项目仓库地址：AmSuperKing/spring-boot-server。
2024-05-16 17:23:49
624
原创 ElementUI实现Dialog弹窗拖拽
在 ElementUI 2.0 样式框架库中 el-dialog 弹窗并不能实现拖拽，虽然这个问题在 Element-Plus 中已经实现。但是对于框架库中使用ElementUI的用户，拖拽的效果则需要自行实现。自定义组件二次封装el-dialog，在自定义封装的组件中设置props（如draggable），当属性值为 true 时，将。中监听拖拽的逻辑进行实现。
2023-10-11 17:11:58
1278
原创 React17中对react-router-dom v6的使用
App.jsimport React, { Component } from 'react';import { Provider } from 'react-redux';import { BrowserRouter, Routes, Route } from 'react-router-dom';import store from './store';import Home from './pages/home';import Detail from './pages/detail';
2022-03-01 14:24:57
798
原创 React系列知识——redux及redux中间件的使用
Redux概念Redux用于存储各个组件的数据，将数据存到一个公共的store进行管理， Redux = Reducer + Flux。Redux 的工作流程 dispatch(actions) (previousState, action)Action Creators ----------------> Store ------------------------> Reducers ↑ ...
2022-03-01 14:17:24
829
原创 React系列知识——ref、生命周期函数、transition动画的使用
React中ref的使用import React, { Component, Fragment } from "react";import TodoItem from './TodoItem';import './TodoList.css'; class TodoList extends Component { constructor(props) { super(props) this.state = { inputValue: '', list...
2022-03-01 14:04:08
514
原创 React系列知识——几个概念点
props，state与render函数的关系当组件的 state 或者 props 发生改变的时候，render函数就会重新执行。当父组件的 render 函数被运行时，它的子组件的render函数都将被重新运行。React中的虚拟DOM方式一：1.state 数据2.JSX 模板3.数据 + 模板 结合，生成真实的DOM，来显示4.state 发生改变5.数据 + 模板 结合，生成真实的DOM，替换掉原先的DOM缺陷：第一次生成了一个完整的DOM片段第
2022-03-01 13:57:15
508
原创 React系列知识——PropTypes与DefaultProps的应用
PropTypes 提供一系列验证器，可用于组件接收到的数据类型是有效的。当传入的 prop值类型不正确时，JavaScript 控制台将会显示警告，propTypes仅在开发模式下进行检查。PropTypes使用不同验证器的例子：import PropTypes from 'prop-types';MyComponent.propTypes = { // 你可以将属性声明为 JS 原生类型，默认情况下 // 这些属性都是可选的。 optionalArray: PropType
2022-03-01 13:55:32
698
原创 React系列知识——React基础
React.js 使用起来相对更加灵活，用户可配置性更高；Vue.js 使用起来相对简洁，因为Vue 开放了许多API，但是因为诸多API在灵活性上被限制。React开发环境准备使用 React 的方式1.通过<script>标签引入 .js 文件来使用2.通过 create-react-app 脚手架工具安装npxnpx create-react-app my-appnpx 是 npm 5.2+ 及更高版本附带的包运行工具npmnpm init re
2022-01-18 14:54:25
910
原创 Webpack系列——一个Bundler的编写
Bundler 源码编写模块分析在项目 src 文件夹下建立下面三个文件：word.jsexport const word = 'hello';message.jsimport { word } from './word.js';const message = `say ${word}`;export default message;index.jsimport message from './message.js';console.log(messa
2022-01-18 14:44:33
242
原创 Webpack系列——如何编写一个 Plugin
webpack.config.jsconst path = require('path')const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin')module.exports = { mode: 'development', entry: { main: './src/index.js' }, plugins: [ new Copyri...
2022-01-18 14:44:20
360
原创 Webpack系列——如何编写一个 Loader
index.jsconsole.log('hello webpack')replaceLoader.js// 不能写成箭头函数，只能写显示的 function 声明函数，不然会有 this 指向问题module.exports = function(source) { return source.replace('loader', 'compiler loader')}replaceLoaderAsync.js// 在 webpack.config.js 配置的 opt..
2022-01-18 14:44:09
453
原创 Webpack系列——多页面打包的配置
webpack.config.jsconst path = require('path');const fs = require('fs');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');const AddAssetHtmlWebpackPlugin = require('add-asset-html-web.
2022-01-18 14:43:56
474
原创 Webpack系列——打包的性能优化
1.跟上技术的迭代（Node, Npm, Yarn）对Webpack、Node、Npm、Yarn等技术进行版本的升级，相关技术的版本更新，官网都会做出优化，升级技术可以一定程度的提高打包的性能2.在模块上尽可能少的应用 Loader合理的使用 exclude / include 可以降低使用 loader 的频率从而提高打包速度，如 exclude: /node_modules/ 因为 node_modules 中的代码是已经被转换过的代码，可以不必使用 loader 做二次转换。也即尽可能的让
2022-01-18 14:43:40
1323
原创 Webpack系列——EsLint 在 Webpack 中的配置
项目中安装 EsLint ：npm install eslint -S快速生成 EsLint 的配置文件：npx eslint --init运行命令后根据相关选项进行设定，成功操作后会在 src 下看到名为 .eslintrc.js的配置文件，在配置文件中可进行相关语法规范规则的编写。.eslintrc.jsmodule.exports = { "extends": "airbnb", "parser": "babel-eslint"}babel-esli...
2022-01-14 10:40:25
1183
原创 Webpack系列——WebpackDevServer 解决单页面应用路由问题
使用 HTML5 History API 时，可能必须提供 index.html 页面来代替任何 404 响应。通过设置devServer.historyApiFallback 为 true 来启用 ：webpack.config.jsmodule.exports = { // ... devServer: { historyApiFallback: true }}可以通过提供一个对象，对 rewrites这样的配置项进一步控制：module.e
2022-01-14 10:40:15
538
原创 Webpack系列——使用WebpackDevServer实现请求转发
webpack.config.jsmodule.exports = { // ... devServer: { proxy: { '/api': 'http://localhost:3000' } }}对路径 /api/users的请求将会被代理到 http://localhost:3000/api/users。如果不希望传递 /api ，可以进行重写路径：webpack.config.jsmodule...
2022-01-14 10:40:00
734
原创 Webpack系列——TypeScript 的打包配置
一、TypeScriptTypeScript 是 JavaScript 类型的超集，它能够被转换为普通的 JavaScript。为了在 webpack cli 中使用 ts ，需要安装特定的 loader 来转换 ts 语法。1.1 依赖安装npm install typescript ts-loader -D1.2 webpack.config.jsconst path = require('path')module.exports = { mode: 'develo..
2022-01-14 10:39:37
517
原创 Webpack系列——PWA的打包配置
安装 http-server:npm install http-server -D使用 http-server可以模拟实现服务器效果package.json中配置命令，在 dist 目录下开启一个 http-server{ ... "scripts": { "start": "http-server dist" ... }}PWA(Progressive Web Application)，当客户端第一次成功访问成功网页后，服务...
2022-01-14 10:39:26
724
原创 Webpack系列——库的打包
webpack 除了能够打包项目应用以外，还可以用来打包 JS 库。当其他人安装我们的库时，他们可能会在不同的环境中去引入，例如：import lib from 'lib' // ESM 的引入方式const lib = require('lib') // CommonJS 的引入方式require(['lib'], function () {}) // AMD 的引入方式二、步骤2.1 库代码假设设计了一个这样一个简单的库：// math.jsconst add.
2022-01-14 10:39:10
486
原创 Webpack系列——环境变量的使用
webpack 命令行 环境配置 的 --env 参数，可以允许你传入任意数量的环境变量。而在 webpack.config.js 中可以访问到这些环境变量。例如，--env.production 或 --env.NODE_ENV=local（NODE_ENV 通常约定用于定义环境类型）。webpack --env.NODE_ENV=local --env.production --progresspackage.json{ ... "scripts": { "bundle"...
2022-01-14 10:38:54
1645
原创 Webpack系列——浏览器缓存和Shimming的使用
webpack与浏览器缓存(caching)我们使用 webpack 来打包我们的模块化后的应用程序，webpack 会生成一个可部署的 /dist 目录，然后把打包后的内容放置在此目录中。只要 /dist 目录中的内容部署到 server 上，client（通常是浏览器）就能够访问此 server 的网站及其资源。而最后一步获取资源是比较耗费时间的，这就是为什么浏览器使用一种名为 缓存 的技术。可以通过命中缓存，以降低网络流量，使网站加载速度更快，然而，如果我们在部署新版本时不更改资源的文件名，浏览器
2022-01-14 10:38:40
360
原创 Webpack系列——CSS代码的分离
CSS 也可以从主文件中分离出来，默认情况下CSS打包后会被添加在 html 的 style 标签中。如果 CSS 代码有很多行，那么直接嵌入在 html 文件中是不合适的，我们希望它是以 <link>标签的形式去插入到 head 标签中，也就是外部引入 CSS 文件的形式。首先安装插件：npm install --save-dev mini-css-extract-plugin注意： 它要配合 css-loader 使用, 之前使用的 style-loader 去掉，此项配置
2022-01-14 10:37:46
742
原创 Webpack系列——预获取 / 预加载模块
预获取 prefetch: 在浏览器加载完必要的资源后，空闲时就会去获取可能需要的资源。预加载 preload: 预先加载当前页面可能需要的资源， 它会与必要资源并行请求。import(/* webpackPrefetch: true */ './asets/js/click')上述代码会在所有必要资源加载完成后，网络空闲就预先获取添加了魔法注释的异步模块。import(/* webpackPreload: true */ 'ChartingLibrary');module
2022-01-14 10:37:35
998
原创 Webpack系列——打包分析
可以通过运行 webpack --profile --json > stats.json 来生成此工具所需的 JSON 文件{ ... "scripts": { "bundle": "webpack", "watch": "webpack --watch", "dev": "webpack-dev-server --config ./build/webpack.dev.config.js", "build": "webpack --config ....
2022-01-13 08:33:40
634
原创 Webpack系列——代码分离(Code Splitting)
代码分离(Code Splitting)// index.jsimport _ from 'lodash';const ele = document.createElement('div');ele.innerHTML = _.join(['Code', 'Splitting'], '---');document.body.appendChild(ele);以上代码中，在开头同步引入了 lodash ，这没什么问题，但是一旦这个 index.js 文件很大，只要 index.js 中代码一
2022-01-12 15:54:07
548
原创 Webpack系列——不同模式的打包
Development 和 Production 模式的区分打包在不同模式下的配置上，存在着大量相同的代码，对于这些重复代码可以将它们分离出来共用，提高代码效率。1.webpack-merge插件安装：npm install webpack-merge -D这个插件可以将不同配置合并在一起，也就是可以将共用的配置和不同模式下的配置进行合并，这样就可以节约大量代码的书写。(1)共用配置新建一个文件 webpack.common.config.js （文件名可以自己起），用于编写共
2022-01-12 15:50:16
377
原创 Webpack系列——Tree Shaking
Tree Shaking在文件或者在组件文件中引入其他模块中的代码，但实际上我们只用到其中的一部分，剩下的代码则不需要引入，然而在默认情况下，webpack仍然是全部引入并打包的。这时，为了把多余部分剔除出去，就要用到 “ Tree Shaking ” 了，也就是摇树。经过 Tree Shaking，不该留在代码中的多余代码，则会被摇掉，这样能减轻代码量，提高性能。Tree Shaking 只支持 ESM 的引入方式，不支持 Common JS 的引入方式。 ESM: export +
2022-01-12 15:45:24
652
原创 Webpack系列——使用 Babel 处理 ES6 语法
有一些版本的浏览器对于JS新的语法(例如 ES6+)的支持不好，这时就需要将新的语法转换成 ES5 标准的语法，让浏览器正常识别它们，保证程序的稳定运行。1.依赖安装npm install -D babel-loader @babel/core @babel/preset-env2.Loader设置webpack.config.jsmodule: { rules: [ { test: /\.m?js$/, exclude: /node_module...
2022-01-12 15:41:06
515
原创 Webpack系列——热模块更新HRM
热模块更新HRM(Hot Module Replacement)运行 npm run start，此时，我们尝试对文件进行修改，然后回到页面，你会发现终端内 webpack 帮我们重新编译了代码，然后它会自动刷新，刷新后的页面被重置，之前在页面上的操作不见了，又要重新开始。我们想要的效果是，当文件修改重新编译后，页面不要全部刷新，只是响应发生变化的那一部分。这时候就要用到 HMR，热模块替换。注意：HMR 相当于 dev Server 的辅助，同样只用在开发环境，不要用在生产环境中！！！
2022-01-12 15:37:47
487
聊天室程序Java课程设计.docx
2019-11-14
数据库课程设计——库房管理系统.docx
2019-11-14
ATM机Java课程设计.doc
2019-05-14
图书管理系统课程设计报告(基于JAVA和SQLServer)
2018-11-25
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人