react-native-基础
React-native - 基础主要讲解以下React的基础知识,方便同学们更好的学习项目的知识。 React Native 介绍 文件目录结构 JSX RN样式 基本标签 插值表达式 调试 事件 生命周期 mobx React Native 介绍 文件目录结构1234567│ App.js --- 项目的根组件│ index.js --- 项目的入口文件 │ package.json --- 项目的描述文件 │ .eslintrc.js --- eslint的配置文件 │ .prettierrc.js --- 格式化配置文件 │ android --- 编译安卓相关 │ ios --- 编译ios相关 老师的vs code的插件 JSX React中写组件的代码格式 全称是 JavaScript xml 12345678import React from ...
hadoop,hive搭建使用
hadoop1. hadoop概述Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下,开发分布式程序。充分利用集群的威力进行高速运算和存储。Hadoop实现了一个分布式文件系统( Distributed File System),其中一个组件是HDFS(Hadoop Distributed File System)。HDFS有高容错性的特点,并且设计用来部署在低廉的(low-cost)硬件上;而且它提供高吞吐量(high throughput)来访问应用程序的数据,适合那些有着超大数据集(large data set)的应用程序。HDFS放宽了(relax)POSIX的要求,可以以流的形式访问(streaming access)文件系统中的数据。Hadoop的框架最核心的设计就是:HDFS和MapReduce。HDFS为海量的数据提供了存储,而MapReduce则为海量的数据提供了计算 1.hadoop搭建 [待记录]hive1.hive概述 hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并 ...
react-native-环境搭建
环境搭建概述react-native 的环境搭建相比较于普通的web项目(vue、react)来说要繁琐不少,但是通过以下的方式基本都可以得到解决。 笔记的文档 RN的官网文档 百度+谷歌 安装环境介绍 操作系统:win10专业版 手机:安卓手机真机一部或夜神模拟器 必须安装的依赖有:Node、JDK、Yarn、Android SDK、Python2 Node的安装 先到 官网 去下载node版本(使用 nvm 工具来安装也可以) 老师当前是用的 12.16.3 版本 以 管理员 身份安装 然后一直点击下一步即可 Yarn的安装Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载 1npm install yarn -g // 使用npm全局安装yarn 检查是否安装成功 1yarn -v 效果如下: JDK的安装与配置 Java SE Development Kit 安卓系统的APP离不开JAVA环境,因此需要下载安装JDK(1.8版本)。到该网站下载JDK 需要注意的是单击下载之后,会跳转到一个Oracler的登陆页面,得登陆之后才可以下载 ...
flex布局
移动web开发——flex布局1.0传统布局和flex布局对比1.1传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 1.3 建议 如果是pc端页面布局,还是采用传统方式 如果是移动端或者是不考虑兼容的pc则采用flex 2.0 flex布局原理 flex 是 flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。 当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。 flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局 采用 Flex 布局的元素,称为 Flex 容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为 Flex 项目(flexitem),简称”项目”。 总结:就是通过给父盒子添加flex属性,来控制子盒子的位置和排列方式 3 ...
Vue3快速上手
Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址:https://github.com/vuejs/vue-next/releases/tag/v3.0.0 2.Vue3带来了什么1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% …… 2.源码的升级 使用Proxy代替defineProperty实现响应式 重写虚拟DOM的实现和Tree-Shaking …… 3.拥抱TypeScript Vue3可以更好的支持TypeScript 4.新的特性 Composition API(组合API) setup配置 ref与reactive watch与watchEffect provide与inject …… 新的内置组件 Fragment Teleport Suspense 其他改变 新的生命周期钩子 data 选项应始终被声明为一 ...
Vue2快速上手
Vue3移步到此链接:https://24kcs.github.io/vue3_study/chapter1/01_%E5%88%9D%E8%AF%86TS.html#typescript-%E7%9A%84%E4%BB%8B%E7%BB%8D ES61.1块级作用域 ES6之前没有块级作用域,ES5的var没有块级作用域的概念,只有function有作用域的概念,ES6的let、const引入了块级作用域。 ES5之前if和for都没有作用域,所以很多时候需要使用function的作用域,比如闭包。 1.1.1 什么是变量作用域 变量在什么范围内可用,类似Java的全局变量和局部变量的概念,全局变量,全局都可用,局部变量只在范围内可用。ES5之前的var是没有块级作用域的概念,使用var声明的变量就是全局的。 123456{ var name = 'zzz'; console.log(name);}//可以打印出 zzzconsole.log(name); 上述代码中{}外的console.log(name)可以获取到name值并打 ...
CentOS8安装nginx,mysql8,redis6
常用命令 进行相关 123#查看当前端口运行状态lsof -i:6379 格式:lsof -i:端口号kill -9 2200093 格式:lsof -i:pid CentOS8 安装Nginx首先,介绍一下 Linux 的安装方式,可以是 yum 安装,也可以是源码包安装。 yum 安装:简单方便,不易出错。 源码包安装:有点繁琐,但是服务性能好。 yum 安装 1. 安装 Nginxyum 安装 nginx 非常简单,就输入一条命令即可。 12$ sudo yum -y install nginx # 安装 nginx$ sudo yum remove nginx # 卸载 nginx 使用 yum 进行 Nginx 安装时,Nginx 配置文件在 /etc/nginx 目录下。 2. 配置 Nginx 服务12345$ sudo systemctl enable nginx # 设置开机启动 $ sudo service nginx start # 启动 nginx 服务$ sudo service nginx stop # 停止 nginx 服务$ sudo ...
TypeScript
TypeScript中的基本类型TypeScript中的基本类型: 类型声明 类型声明是TS非常重要的一个特点; 通过类型声明可以指定TS中变量(参数、形参)的类型; 指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错; 简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值; 语法: 自动类型判断 1234567let 变量: 类型;let 变量: 类型 = 值;function fn(参数: 类型, 参数: 类型): 类型{ ...} TS拥有自动的类型判断机制 当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型 所以如果你的变量的声明和赋值时同时进行的,可以省略掉类型声明 类型: 类型 例子 描述 number 1, -33, 2.5 任意数字 string ‘hi’, “hi”, hi 任意字符串 boolean true、false 布尔值true或false 字面量 其本身 限制变量的值就是该字面量的值 any * 任意类 ...
CSS层叠样式(四)
思维导图 [一] 传统布局和flex布局对比传统布局特点兼容性好 布局繁琐 局限性,不能再移动端很好的布局 flex布局特点操作方便,布局极其简单,移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或更低版本不支持flex或仅支持部分 建议移动端 或者 PC端不需要兼容低版本浏览器 就可以使用用flex布局 flex布局原理给父盒子设置display:flex;来控制子元素的排列方式 flex布局注意事项使用flex布局就不要使用浮动、vertical-align,这两个样式会失效 flex布局中没有X轴和Y轴的概念 主轴和交叉轴是相对的,可以变换的。主轴方向是横的,交叉轴方向就是竖的。主轴方向是竖的,交叉轴方向就是横的 主轴相关配置注意事项1.主轴侧轴相关配置要写到父盒子中 flex-direction功能和注意事项功能:设置主轴的方向 注意事项:主轴和交叉轴是相对的,可以变换的。主轴是横的,交叉轴就是竖的,主轴是竖的,交叉轴就是横的 取值范围 值 说明 row(默认) 主轴为横轴,子元素横着排列(默认,常用) column 主轴为纵轴,子元素竖着排列 fle ...
CSS层叠样式(三)
本章介绍精灵图、字体图标、CSS三角形、鼠标样式、输入框轮廓、图片和文本居中、溢出文本省略号、PC端CSS初始化样式 思维导图 [一] 精灵图(重点)为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。 为什么使用精灵图(目的): 为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称 CSS Sprites、CSS 雪碧)。 核心原理: 将网页中的一些小背景图像整合到一张大图中 ,这样服务器只需要一次请求就可以了。 精灵图举例: 1.2 精灵图(sprites)的使用使用精灵图核心: 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。 这个大图片也称为 sprites 精灵图 或者 雪碧图 移动背景图片位置, 此时可以使用 background-position 。 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同 因为一般情况下都是往上往左移动,所以数值是负值。 使用 ...