在powershell里安装依赖 (直接npm i mobx或者npm i mobx-react是会报错的)  npm i mobx mobx-react --save   save是下载到"dependencies"里  npm i mobx-react-lite   lite是配合hook使用的   添加store.ts文件(在此附上全部文件列表)   store.ts  import {  makeAutoObservable } from 'mobx' class Store {  // 颜色列表 colorList = ['#0099CC', '#CC9966',...

yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1，因为在此系统上禁止运行脚本。 解决方案:  搜索powershell   当你找不到搜索框时,右键底部任务栏空白部分,选择搜索,显示搜索框    执行以下指令:  set-ExecutionPolicy RemoteSigned   出现选项选择y   查看执行策略  get-ExecutionPolicy   4.此时再去yarn start就不会报错了

配色网站:https://www.chinavid.com/color.html  配色表:https://www.chinavid.com/webcolor.html

在React Hook里使用history.push跳转  react hook里用不了this.props.history的解决方法   首先引入  import {  useHistory } from 'react-router-dom'   使用  let history = useHistory() function OnFinish(values: any) {  console.log('Success:', values) history.push('/main', {  dust: 20 }) }

在 react 里使用 antd  在 powershell 里npm i antd 引入方式:  import '../node_modules/antd/dist/antd.css'

响应式布局  选择屏幕断点：  一般来说我们主要考虑 5 种类型的设备屏幕，各自对应的分辨率通常为： mobile portrait：竖屏移动设备，< 640px mobile landscape：横屏移动设备，> 640px tablet portrait：竖屏平板设备，> 768px tablet landscape：横屏平板设备，> 1024px  laptop：PC 电脑，> 1280px  注意优先级的问题，用 min-width 就从小到大，不然容易不生效

flex 用法：    flex 可以在浏览器里点击就有~  设置了 display: flex 的父元素被称之为 flex 容器（flex container），它的子元素都会以 flex 布局。  flex-direction: column; 竖直排列  flex-wrap: wrap; 换行  flex: 1; 用于设置动态尺寸，表示占比，和 grid-template-columns 类似，只不过需要去一个个设置（这就体现出 grid 的优越性了不是？）  水平和垂直对齐：   align-items 控制 flex 项在交叉轴上的位置。 默认的值是 stretch，其会使所有 fl...

溢出显示省略号的代码：其中 1 是行数。  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;

动效制作：   opacity: 0.2 模糊设置     transform: scale(1.07)放大到 1.07 倍     transition: all 0.5s 动画效果     让图片放大不溢出的方法：在图片外套一个 div（注意以后图片不要直接放上去，用一个 div 把它框起来！）当 hover 到外 div 时，将图片放大，对外面的 div 设置 overflow: hidden;     将播放按钮居中的方法：将播放按钮放在图片外 div 里，div 的 position 属性为 relative，播放按钮的属性为 absolute，calc(50% - 35px);就可...

grid 的用法  加三个宽度为 200px 的列。  .container {  display: grid; grid-template-columns: 200px 200px 200px; }    用 fr 这个单位来灵活地定义网格的行与列的大小。grid-template-columns: 2fr 1fr 1fr; > grid-template-columns: 300px 2fr 1fr，那么第一列宽度是 300px，剩下的两列会根据除去 300px 后的可用空间按比例分配。 grid-column-gap 属性来定义列间隙；使用 grid-row-gap 来定义行间隙；...

写在前面 确认框，顾名思义，就是对用户的关键行为进行确认。比如在Windows操作系统中，删除某个文件的时候，都会询问“确实要把此文件放入回收站吗？”，用户可以选择“是”或“否”。 大家对于确认框的感觉大抵如此，觉得非常多余，打断了我的操作。这就像我着急上厕所，却被告知要先收费一样让人不爽。不能否认，确认框是一种打断，有时甚至是打扰。 所以这里要把握住一个原则：能不用确认框就尽量不要用。除非用户的操作具有很大的风险，一定需要他来确认一下。  确认在左，取消在右？ 根据windows多年培养的用户习惯，大家都已经默认一个原则，就是确认在左，取消在右。但是，这样做是否真的合理呢？我们今天就来探讨一...

正则式的使用:  替换/删除  let cont = 'Hello,World!' const pattern = /[`~!@#$^\-&*()=|{}':;',\\\[\]\.<>\/?~！@#￥……&*（）——|{}【】'；：""'。，、？\s]/g cont = cont.replace(pattern, '') //HelloWorld

安装安装JDK 启动Idea → 新建项目 → 选择Java → 在Project SDK中选择下载JDK   配置Maven 启动Idea → Customize → All Settings… → 查看Maven配置   配置maven仓库镜像 在 .m2 文件夹中新建 settings.xml 文件：  使用阿里云maven仓库镜像来添加依赖  <?xml version="1.0" encoding="UTF-8"?> <settings xmlns="http://maven.apache.org/SETTINGS/...

使用Postman测试接口  HelloController.java  package com.example.demo.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.HashMap; import java.util.Map; @RestController public class HelloController {  @Req...