Hi-Sun-CSDN博客

效果如下图所示：import { FC, useState } from 'react';import { Button } from 'antd-mobile';export interface LocationCityType { cityId: string; cityName: string;}//城市列表const activityCityList = [{ cityId: "110100", cityName: "北京"}, { cityId: "310

2021-11-24 15:26:55 593

原创 react函数组件+antd实现多选框全选取消全选单选功能

import React, {FC,useState} from “react”;import { Checkbox, Divider, Form} from “antd”;const newPortrait: FC = () => {const [chooseLabel, setChooseLabel] = useState<Array>([]) // 选择的多选标签const [checkAll, switchCheckAll] = useState(false); // 全选

2021-09-27 18:55:25 2027

原创针对antd的多级多选框Checkbox只有第一个勾选有效的问题原因之一

如下图所示的一层嵌套一层的多选框，需要在Checkbox外包裹一层Checkbox.Group，否则每次点击选中，尽管checked属性已经变为了true，但是页面上只对第一次点击勾选的选项有效，后面点击的均无效，即都没有勾选上...

2021-09-27 16:15:52 1138

原创 react函数组件+ts+antd实现基本表单

使用React函数组件以及antd实现基本的表单，实现效果如下图所示，具有基本的表单校验功能import React, { FC, useState } from "react";import { Button, Checkbox, Form, Input } from "antd";const Test: FC = () => { const [profileNameLength, setProfileNameLength] = useState<number>(0)

2021-09-27 16:02:31 1339

原创 Vue项目部署到Linux服务器

首先用到两个软件，一个是Xshell，一个为Xftp，下面是我的百度网盘文件，永久有效嗷。链接：https://pan.baidu.com/s/1ZkasG_HzgIEdUqdIgCBPaw提取码：s1r1其中Xshell为终端连接工具，我们连接Linux服务器用的就是它，而Xftp则帮助我们在windows系统下和Linux系统进行文件传输,首先我们安装下载完两个软件以后，先打开Xshell,点击左上角新建，输入Linux服务器的主机号，端口号密码等，连接服务器，然后再打开Xftp，点击窗.

2020-06-16 21:04:21 2093 3

原创 vue实现登录界面

使用Vue实现简单的用户登录界面，登录成功以后查询账号用户类型进行相应的页面路由跳转，效果如下图所示：HTML部分： <div class="loginbody"> <div class="login"> <div class="mylogin" align="center"> <h4>登录</h4> <el-form :model="loginForm"

2020-06-16 20:37:46 52678 10

原创 axios请求拦截器和响应拦截器

vue实现用户登录页面，登录成功后，需在所有请求头中添加sessiontoken，值为登陆成功的返回值uuid，响应头 “sessiontoken”，需要作为登陆后每次请求的“sessiontoken”请求头，建议放置到Cookie或localStorage中。同时，前端需要生成一个PageToken放置到sessionstorage中，作为登陆后每次请求的“PageToken”请求头，用于验证当前标签页是否属于当前用户。响应头中的SessionStatus值用户判断用户登录状态 ...

2020-06-16 20:27:14 1132

原创 gitee的简单使用

如果gitee上的远程仓库为空的，那么此时的推送方式为:初始化一个本地仓库（【git init】）连接远程仓库（【git remote add origin +仓库】）将文件保存到缓冲区（【git add .】）添加注释（【git commit -m "注释"】）将本地仓库的工作推送到远程仓库（【git push -u origin master】）如果gitee上的远程仓库中已经有内容了，那么此时正确的推送过程应该是：建立本地仓库（【git init】）关联本地仓库和.

2020-06-16 19:56:36 651

转载解析vue2.0的diff算法

目录前言virtual dom分析diff源码分析patchVnodeupdateChildren具体的diff分析总结前言vue2.0加入了virtual dom，有向react靠拢的意思。vue的diff位于patch.js文件中，我的一个小框架aoy也同样使用此算法，该算法来源于snabbdom，复杂度为O(n)。了解diff过程可以让我们更高...

2020-03-29 15:05:13 185

原创 Vue+elementUI实现逻辑分页和物理分页

首先呢，分页分为两种方式，一种是逻辑分页，一种是物理分页。逻辑分页是指后端完成分页操作，而前端通过参数page(第几页)、rows(每页条数)去向数据库查询当前页的数据；物理分页是指前端从数据库把所有数据都取过来，然后在前端完成分页。所以两者相比较而言，物理分页占用的内存更高，但效率更快。当数据量不多时，物理分页可以满足功能要求，但当数据量很大时，则需要采用逻辑分页，然而我一开始使用的是物理分页，...

2020-03-29 13:29:18 1232

原创 Vue项目部署到windows服务器上遇到的几个问题和解决方法

Vue-cli项目的简单部署到阿里云服务器：1)使用npm run build编译项目，得到编译后的文件dist2)win+R打开控制面板，输入matsc打开远程连接3)输入账号（购买的阿里云服务器的公网IP）、用户名、密码，进入远程服务器4)将编译好的dist文件放在Tomcat/webapps内5)在Tomcat的webapps中新建文件夹WEB_INF，在其中新建文件we...

2020-03-29 12:23:34 2227

原创 UDP和TCP

目录UDP编程服务器端实现步骤：客户端实现步骤：TCP编程Socket通信服务器端实现步骤客户端实现步骤UDP编程UDP协议是无连接的、不可靠的、无序的，传输速度会比较快，以数据报为传输载体。也就是说，进行数据传输时，首先需要将要传输的数据定义为数据报（Datagram），在数据报中指明数据所要达到的主机地址和端口号（Socket),然后再将数据报发送出去。...

2020-03-27 15:19:36 119

原创使用JS对时间格式的更改

格式一：项目中完成一个标签的历史轨迹回放功能，即用户在页面通过elementUI时间选择器选定一个时间段，将用户选取的起始时间和终止时间作为axios两个参数，通过axios.get获取后台数据。项目中使用的是influxDB存储数据，influxdb里面解析的时候，会将你发给他的时间当成UTC时间，通过axios收到的数据格式为GMT，首先将GMT时间转换为本地时间，再将本地时间转为UTC时间。...

2020-03-27 15:02:48 585

原创使用Vue遇到的的小问题和解决办法

问题1：问题描述：(同一组件下的方法之间的调用)同一个组件下方法A使用this.$options.methods.B调用方法B,然后方法B又使用this.$options.methods.C调用方法C，方法B中报错typeError: Cannot read property 'methods' of undefined；且再将方法写在方法B中以后，报错：typeError: Cannot...

2020-03-27 13:09:26 965

原创项目中关于leaflet遇到的问题及解决方案总结

1、如何去除container右下角的leaflet链接在node_modules\leaflet\dist\leaflet-src.js中改变两个布朗值，更改为autoPan:false autoClose:true2、如何更改线条的样式，包括加箭头颜色等使用leaflet-polylinedecorator，在GitHub上有该插件的详细描述，安装以后有一个example.j...

2020-03-25 13:15:24 1728

原创 vue-cli的安装

vue-cli的安装在安装vue-cli之前，首先需要保证电脑中已经安装了node.js和npm，node.js的安装直接到其官网上面下载安装即可。cmd打开命令行窗口，输入node -v得到node的版本号，再输入npm -v得到npm的版本号，如果两条命令都可以正常运行，则说明电脑中已经安装好了node和npm，接着就可以正式安装vue-cli了。全局安装vue-cli在命令行窗口输...

2019-11-06 16:20:04 164 1

Hi-Sun的博客

原创 TS实现排序算法之选择排序

原创 React实现插入变量输入框

原创 TS实现排序算法之选择排序

原创 TS实现排序算法之插入排序

原创 TS实现排序算法之冒泡排序

原创 TS实现原生数组方法之pop()、push()、shift()、unshift()

原创 TS实现原生数组方法之遍历：filter()

原创 TS实现原生数组方法之遍历：reduce()

原创 TS实现原生数组方法之遍历：every()、some()

原创 TS实现原生数组方法之遍历：forEach()、map()

原创 TS实现原生数组方法之slice()

原创 TS实现原生数组查找方法：find()、findIndex()、includes()、indexOf()、lastIndexOf()

原创 TS实现数组原生方法之flat()

原创使用React Hooks实现三列选择对话框