An_s-CSDN博客

原创 react-umi-2.8使用umi块(umi ui)部署首页

效果图：umi2.x版本之前安装都是这样安装的可是umi3.x版本之后你会发现文档没有块这文档，反而只有一个使用 umi UI哈哈哈，没错如果我们要使用umi提供的块模板，只能通过umi UI 来进行安装，下面开始介绍umi ui如何安装yarn add @umijs/preset-ui -D耐心等待一段时间...安装完成之后，你肯定会一头雾水文档写的是执行 UMI_UI=1 umi dev哈哈哈，其实这时候我们直接执行 yarn start 或者 ..

2020-12-08 10:29:08 1940 2

原创 react-umi-2-7.权限管理之角色列表

效果图：pages - authority - adminRoleindex.tsximport React, { useState } from 'react';import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Button, Tag, Popconfirm, message, Badge, Modal, Tree } from 'antd';import { PlusOutlined, Ed

2020-12-08 10:01:22 551

原创 react-umi-2-6.权限管理之管理员列表

效果图：pages - authority - adminUserindex.tsximport React, { useState } from 'react';import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Button, Tag, Popconfirm, message, Badge } from 'antd';import { PlusOutlined, EditOutlined,

2020-12-08 09:52:44 473

原创 react-umi-2-5.菜单列表

index.tsximport React, { useState } from 'react';import { PageHeaderWrapper } from '@ant-design/pro-layout';import { Button, Tooltip, Tag, Popconfirm, message, Badge, Modal, Tree } from 'antd';import { QuestionCircleOutlined, HomeOutlined, PlusOut..

2020-12-07 17:45:36 492

原创 react-umi-2-4.登录页

(⊙o⊙)…也确实没有设计天赋。。。登录页有点丑。index.tsximport React from 'react';import { history } from 'umi';import { message } from 'antd';import ProForm, { ProFormText } from '@ant-design/pro-form';import { UserOutlined, LockOutlined } from '@ant-design/icons';

2020-12-07 17:31:45 566

原创 react-umi-2-3.高复用组件介绍

讲登录页实现之前，我们可以先了解阿里提供的强大高复用组件ProLayout组件，我们之前就用过了，主要去了解的是ProForm组件、ProTable组件这两个是用得最多的默认umi是没有安装我们来安装一下ProForm组件、ProTable组件yarn add @ant-design/pro-formyarn add @ant-design/pro-table安装完成，我们开始写登录页...

2020-12-07 17:25:53 315

原创 react-umi-2-2.多菜单以及登陆页

我们上篇都介绍了如何设置layout布局，这时候我要多个页面呢，还有登陆页是没有layout的咋弄？难道要跟之前一样在layout组件里面写个判断啥的？no no no 用了umi3框架也是几行代码搞定.umirc.tsimport { defineConfig } from 'umi';export default defineConfig({ nodeModulesTransform: { type: 'none', }, layout: { name: '

2020-12-07 17:13:24 931

原创 react-umi-2-1.layout快速布局

ps：如果对umi框架不是很熟的小伙伴，我建议你先过文档，然后在来继续学会有非常好的效果，主要过一遍目录结构、配置、运行时配置即可。上篇我们运行起项目，效果是这样的这可不是我们想要的，常见的后端管理系统，基本都是分三大部分：头部导航栏、左边导航栏、内容。可能我们之前常做的操作就是新建一个layout组件，然后各种写各种封装...可是你使用umi3框架之后，就是几行代码就可以搞定了。.umirc.tsimport { defineConfig } from 'umi';expor

2020-12-07 16:55:11 1425

原创 react-umi-1.安装环境

ps：要先确保你自身环境以安装node、yarn环境node -vyarn -v如果没有请自行移步去安装node、yarn开始安装umi框架可自行去官网安装小提示：执行之后会直接下载到当前目录，所以安装的时候最好新建好目录yarn create @umijs/umi-app耐心等待一段时间...然后安装依赖yarn install耐心等待一段时间...nice！umi框架就安装好了然后让我运行看看yarn start开始

2020-12-07 16:07:04 487

原创谷歌插件开发总结

前几天刚刚写了一个谷歌浏览器插件开发，现在总结一下。1.谷歌浏览器插件模式chrome://extensions/小提示：下面谷歌浏览器设置需要你把插件项目建立好开启之后会有加载已解压的扩展程序这个是导入你写好的插件目录然后就可以在谷歌浏览器进行运行了然后把你写的插件开启图中1是开启状态，图中2是刷新（比较你修改了插件代码要刷新一下，如果是配合网页调试也刷新一下网页），图中3是打开插件控制台（跟谷歌浏览器控制台一样）。好了谷歌浏览器设置我们就介绍到这里...

2020-10-16 14:46:37 1019

原创微信小程序input组件键盘遮住问题（或者modal里面的input遮住）

微信小程序已经帮我们解决了，只需要在input里面添加cursor-spacing属性即可 <input cursor-spacing="200" type="text" />

2020-09-09 12:02:35 1630

原创记录一下今天接手工作的坑（2020-08-26）

环境：@vue/cli 4.2.21.打包遇到的坑[VUE ERROR] Invalid options in vue.config.js: "publicPath" is not allowed具体原因是因为版本支持的问题，publicPath 属性到 vue-cli 3.2.0 之后才支持，所以将 publicPaht 改成 baseUrl 即可，或者升级你的 vue-cli 。可是我的vue-cli版本是4点多。。。还是不行最后是使用了 baseUrl2.在pack...

2020-08-26 10:47:54 232

原创总结笔记（2017-2020）

今天2020-08-25情人节。。。。刚刚好总结一下前些年的学习情况跟自己记录一下，需要未来几年在回头看的时候进步很大。目前掌握的技术栈：熟练程度就不说了。。。。反正就是菜，基本面试一问三不知。因为初中就选择了读中专所以目前在弄学历，专科成考主要考语文、数学、英语（高中知识），所以目前就在补错。。。不过学习数学的话，可以下载洋葱学院进行学习。10月份专科成考，然后就开始自考之路~~~~~~~...

2020-08-25 14:03:46 271

原创 react-keep-alive 返回上一页页面报错

该问题也在github有目前也没有啥解决方法，目前唯一解决方法就是不使用disabled属性<KeepAlive name={route.path} disabled={route.disabled}> <Test></Test></KeepAlive>// 修改成<KeepAlive name={route.path}> <Test></Test></KeepAlive>...

2020-08-04 15:10:00 447 5

原创 js转进制大全

object.toString([radix])object 转换对象，radix 要转换为的进制parseInt(object, [radix])object 必选项，转换对象radix 可选项，表示 object 的进制，范围为 2 - 36；如果缺少 radix，则以 0x 开头的字符串转换为十六进制，以 0 开头的字符串转换为八进制，其它字符串都转换十进制。2进制2进制转16进制let code = 10111100;console.log(code.toS..

2020-07-28 09:29:23 336

原创前端框架通识：Virtual DOM（虚拟 DOM）

众所周知，操作 DOM 是很耗费性能的一件事情，既然如此，我们可以考虑通过 JS 对象来模拟 DOM 对象。什么是虚拟DOMvdom是虚拟DOM(Virtual DOM)的简称，指的是用JS模拟的DOM结构，将DOM变化的对比放在JS层来做。换而言之，vdom就是JS对象如下DOM结构：<ul class='list'> <li>1</li></ul>映射成虚拟DOM就是这样：const ul = { tag: 'ul

2020-07-14 11:16:36 851 1

原创前端框架通识：路由原理

前端路由是现代单页面（SPA）应用必备的功能，每个现代前端框架都有对应的实现，例如vue-router、react-router。我们不想探究vue-router或者react-router们的实现，因为不管是哪种路由无外乎用兼容性更好的hash实现或者是H5 History实现，与框架几个只需要做相应的封装即可。前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单（SPA）页面使用的路由就只有两种实现方式：hash模式 histor

2020-07-13 15:09:25 355

原创前端框架通识：MVVM是什么？

可能很多人面试会被问到MVVM是什么？MVVM 由以下三个内容组成：view：页面（视图） model：数据模型（模型） viewModel：作为桥梁负责沟通view和model（视图模型）第一阶段（原生阶段），直接用JavaScript操作DOM节点，使用浏览器提供的原生API：var dom = document.getElementById('name');dom.innerHTML = 'an';dom.style.color = 'red';第二阶段，由于原生API不好

2020-07-10 11:15:44 824

原创深入javascript计划八：深入浅出模块化

传统方法HTML 网页中，浏览器通过<script>标签加载 JavaScript 脚本。页面内嵌脚本：<script type="application/javascript"> // module code</script>由于浏览器脚本的默认语言是 JavaScript，因此type="application/javascript"可以省略。外部脚本：<script type="application/javascript"

2020-07-06 15:29:26 171

原创深入javascript计划七：深入浅出Event loop

为什么javascript是单线程？因为最初javascript就是为了和浏览器交互而诞生的，如果 JS 是门多线程的语言话，我们在多个线程中处理 DOM 就可能会发生问题（一个线程中新加节点，另一个线程中删除节点），当然可以引入读写锁解决这个问题，为了避免复杂性，设计者还是把它设计成单线程模式。后来，HTML5提出Web Worker标准, 允许JavaScript脚本创建多个线程，但是子线程完全受主线程控制，且不得操作DOM，所以这个新标准并没有改变JavaScript单线程本质。Event

2020-07-03 16:02:49 230

原创深入javascript计划六：深入浅出异步

回调函数（Callback）回调函数应该是大家经常使用到的，以下代码就是一个回调函数的例子：ajax(url, () => { // 处理逻辑})但是回调函数有一个致命的弱点，就是容易写出回调地狱（Callback hell）。假设多个请求存在依赖性，你可能就会写出如下代码：ajax(url, () => { // 处理逻辑 ajax(url1, () => { // 处理逻辑 ajax(url2, () =&g

2020-07-02 10:24:35 244

原创深入javascript计划五：深入浅出原型

看例子：函数：function test() {}console.dir(test)对象：let test = {}console.dir(test)从上面例子可以看得出，只有函数才有原型（prototype）属性，它们都有__proto__属性（下文会讲解）。prototype只有函数才会产生prototype，但是也有一个例外：let fun = Function.prototype.bind()这个创建函数是没有prototype属性的（下文会讲.

2020-06-29 11:10:07 282

原创深入javascript计划四：深入浅出this

这篇我们来深入了解this，this关键字是javascript中最复杂的机制之一，它是一个很特别的关键字，被自动定义在所有函数的作用域中（网上翻到几位大佬写的文章，写得很完善我就直接抄过来整合一下~）。什么是this?1.this是javascript中的关键字。它是对象自动生成的一个内部对象，只能在对象内部使用。随着函数使用场合不同，this的值会发生变化。2.this指向什么？完全取决于什么地方以什么方式调用，而不是创建时（this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能

2020-06-23 11:24:59 249

原创深入javascript计划三：javascript编译器、引擎、作用域介绍

如果有问题，请大家麻烦指出来。javascript我们通常把它归类为"动态"或"解释执行"语言，但事实上它是一门编译语言。它与传统编译语言（C语言等）不同，它不是提前编译，而且并不会产生可移植的编译结果。(传统编译语言)编译器工作流程通常分为三个步骤： 1.分词/词法分析（Tokennizing/Lexing）这个过程会将由字符组成的字符串分解成有意义的代码块（把输入的字符串分解为一些对编程语言有意义的代码块），这些代码块被称为"词法单元"（token）。 2...

2020-06-19 15:39:07 627 2

原创深入javascript计划二：数据类型检测与数据类型抽象转换

上篇刚刚介绍完Javascript数据类型，这篇就写写数据类型检测跟数据类型转换。在Javascript中多数都是使用typeof来判断数据类型，typeof是否能正确判断数据类型？1.typeof判断数据类型let a = "a"console.log(typeof a) // stringa = 1console.log(typeof a) // numbera = falseconsole.log(typeof a) // booleana = Symbol()consol

2020-06-17 12:20:54 277

原创深入javascript计划一：数据类型深入介绍

javascript有几种数据类型？答：javascript有两种数据类型基本数据类型：string、boolean、number、null、undefined、symbol引用数据类型：对象Object（包括普通对象-object、数组对象-array、正则对象-regexp、日期对象-date、数学对象-math、函数对象-function）小知识：&代表取址、*代表取值，不过JavaScript中是没有的，我们以go来做例子基本数据类型JavaScriptl.

2020-06-16 00:33:41 261

原创手动实现代理服务器(仿nginx)

效果如下（还有缺陷）目录分类：src /config init.go 解析配置目录 env 配置目录 /util httpChecker.go 检查当前服务状态 loadBalance.go 实现轮询/web web服务器 web1.go web2.go web3.gomain.go 代理服务器项目地址：...

2020-06-05 11:38:29 491

原创 go gin学习

在我的github上：https://github.com/Aliceco/go-gin-study/tree/master/topic

2020-06-01 08:57:01 213

原创 win10 docker 安装portainer

win10启动docker之后会显示创建好默认主机ip（要记住下面要用到）docker pull portainer/portainerdocker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock --restart=always --name prtainer portainer/portainer浏览器http://ip:9000创建admin用户选择本地环境..

2020-05-29 15:40:03 3318

原创 vue 上拉刷新（scroll、IntersectionObserver）

注意：this.$publicFunction.debounce(this.sayDebounce, 800) （如果没有封装防抖函数---了解防抖点击）可以直接改为 this.sayDebounce()1.scroll实现你要先了解clientHeight、scrollTop<style>.testList { height: 100px; margin: 10px 0; background-color: red;}#test1...

2020-05-29 14:39:47 775

原创 HTTP协议

先看图需要配合抓包工具（我比较懒。。。就上网扣下来了）请求报文例子：响应报文例子：后续会补充。。。。。（写了草稿）参考：http1.1请求和响应报文格式(https://baijiahao.baidu.com/s?id=1662842929861521073&wfr=spider&for=pc)（建议精读）HTTP灵魂之问，巩固你的 HTTP 知识体系（https://juejin.im/post/5e76bd516fb9a07cce750746.

2020-05-25 16:35:58 216

原创 TCP和UDP的区别

TCP：是一个面向连接的、可靠的、基于字节流的传输层协议（比如对网络通讯质量有要求，需要保证数据准确性时，就需要TCP协议了，比如HTTP、FTP等文件传输、或者一些邮箱传输协议（SMTP、POP））UDP：是一个面向无连接的传输协议（UDP通信并不需要建立连接，它只是把数据尽可能快的发送出来，简单粗暴，并且不可靠，在一些对数据准确性要求不高的场景使用，比如QQ语音、QQ视频）1.面向连接（所谓的连接，就是指客户端和服务端的连接，在双方互相通信之前）TCP需要三次握手建立连接UDP没有相

2020-05-23 16:10:33 239

原创 TCP协议

1.要先了解TCP头部数据16位（各自8位）端口号：表示该报文来自哪里（源端口），以及要传给哪个应用程序或者上层协议（目的端口）进行TCP通信时，一般client是通过系统自动选择的临时端口号，而服务器一般都是使用知名的端口号或者直接指定端口号32位序列号（sequence number）：TCP连接中传输的字节流中的每个字节都按顺序编号例如，一段报文的序号字段值是 301 ，而携带的数据共有100字段，显然下一个报文段（如果还有的话）的数据序号应该从401开始序列号在T...

2020-05-23 15:58:28 506

原创 DNS域名解析过程

什么是DNS域名解析？它的流程是咋样的？DNS（Domain Name System）是域名系统的英文缩写，提供的服务是用于将主机名和域名转换为IP的工作比如请求http://qq.com 会先请求DNS服务然后把这个域名对应的ip地址取出来然后在进行网络访问地址http://qq.com ------ DNS ------- IP 58.247.214.471.浏览器根据URL先在自身（浏览器）缓存查找DNS（域名服务器）中的解析记录如果存在（命中），直接返

2020-05-19 16:55:00 1058

原创浏览器解析文档资源并渲染

浏览器是这么解析文档资源并渲染页面的流程是咋样？1.浏览器通过HTMLParser（HTML解析器）根据深度遍历的原则把HTML解析成DOM Tree（dom树） || 将HTML解析出DOM Tree2.浏览器通过CSS Parser（CSS解析器）将CSS解析成CSS Rule Tree（CSSOM Tree --- css规则树） || 将CSS解析出CSS Tree3.浏览器将JavaScript通过DOM API或者CSSOM API 将JS代码解析并应用到布局中，按要求呈现响应的结果

2020-05-19 11:50:29 263

原创浏览器输入 URL 到渲染成功的过程中，发生了什么？

这时候你要先了解重绘、回流(重排)（可以看看我的文章）浏览器输入 URL 到渲染成功的过程中，发生了什么？1.用户输入URL2.对URL进行DNS域名解析3.建立TCP连接4.浏览器发起HTTP报文请求5.服务器返回HTTP响应请求6.浏览器解析文档资源并渲染...

2020-05-19 11:47:47 274

原创重绘与回流(重排)

这时候你要先了解防抖、节流（可以看看我的文章）防抖任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行（比如说我们一直点击按钮只有不点击按钮之后1秒才会触发）节流指定时间间隔内只会执行一次任务（比如说我们一直点击按钮 1秒之后会触发一次然后1秒之后又会触发一次......）重绘与回流重绘（repaint）：当元素样式的改变不影响布局时，浏览器将使用重绘对元素进行更新，此时由于只需要 UI 层面的重新像素绘制，因此损耗较少（元素背景颜色，字体颜色等的改变...

2020-05-19 11:41:08 538

原创 js防抖跟节流

主要记录于5.18事件，砥砺前行，不忘初心。App.vue<template> <div id="app_content"> <Debounce /> <Throttle /> </div></template><script>import Debounce from './components/Debounce'import Throttle from './components

2020-05-19 08:52:42 521

原创 uniapp实现设备对接wifi功能

微信SDKwifi功能还在完善。。。。微信小程序的是完善好了<style>page { background-color: #FFFFFF !important;}</style><template> <view> <cu-custom bgColor="bg-blue" :isLeft="true" @hea...

2020-04-27 15:22:30 7339

原创 vue 配置微信SDK wifi功能

// 自行去微信sdk配置configWXDeviceWiFiwx.config({ .... jsApiList: [ ... 'configWXDeviceWiFi' ]})created() { setTimeout(() => { this.wxInvoke() }, 1000)},methods: {...

2020-04-27 15:10:52 2275 7

空空如也

空空如也