react-native学习笔记(1) - 内置组件的基本使用以及推荐的第三方组件
stylesheet语法
stylesheet是rn中的样式表属性,我们可以认为是Vue组件中的style标签里面的内容
//定义样式var styles = StyleSheet.create({ container:{ marginTop:25, marginLeft:30, backgroundColor:"red", width:300, height:400 }, top:{ backgroundColor:"green", height:250, margin:10, }, bottom:{ backgroundColor:"yellow", height:110, margin:10, }, border:{ borderWidth:3, borderColor:"black", }});
响应 ...
node学习笔记(27) - MongoDB(2) :MongoDB结合node使用
MongoDB结合node使用
我们学习数据库最终都是运用到项目当中的,且一般作用于后端,这里以node为例,结合express框架来操作mongodb数据库实现数据的增删改查操作
安装mongoose模块 官方文档// 安装mongoosenpm i -S mongoose//导入模块const mongoose = require('mongoose')//连接数据库 返回promise对象mongoose.connect('mongodb://localhost:27017/mydb', { useNewUrlParser: true, useUnifiedTopology: true })/* connect方法参2在新版本需添加,否则会有警告提示 useNewUrlParser: 当前URL字符串分析器已弃用,将在将来的版本中删除。要使用新的解析器, 请将选项{usenewurlparser:true}传递给mongoclient.connect。 useUnifie ...
node学习笔记(26) - MongoDB(1) :MongoDB初识
MongoDB初识
官方网站 [安装](Install MongoDB Community Edition — MongoDB Manual)
mongodb是一个基于文档的强大、灵活、易于扩展的通用型数据库。是基于分布式文件存储的数据库。其由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。它是一种非关系型数据库,这也就意味着它不像mysql这些关系型数据库一样有着外键约束(一个表中的键值可以关联另一张表)等功能, 更加的自由高效
特点:
数据文件存储格式为 BSON (JSON 的扩展,可以认为是二进制的json)。{“name”:“joe”}这是 BSON 的例子,其中"name"是键,"joe"是值。键值对组成了 BSON 格式。
面向集合存储,易于存储对象类型和 JSON 形式的数据。所谓集合(collection)有点类似一张表格,区别在于集合没有固定的表头。
模式自由。一个集合中可以存储一个键值对的文档,也可以存储多个键值对的文档,还可以存储键不一样的文档,而且在生产环境下可以轻松增减字段而不影响 ...
node学习笔记(25) - buffer缓存区的讲解
Buffer缓存区
Buffer是内存区域,它表示在V8引擎外部分配置的固定大小的内存区块(无法调整大小); 理论上来讲,前端的JavaScript是无法从代码层面上直接操控内存的,但是在nodejs环境中,我们可以控制一段数据的内存的大小,就是调控Buffer的大小。我们可以将Buffer数据视为一个数组,每一个整数就代表一个数据字节
Buffer在node中被引入用以帮助开发者操纵处理二进制数据; 对于前端来讲,对于二进制数据的操作的需求是比较少的,大部分情况下,前端只需要处理字符串就可以了,使用JavaScript提供的string对象完全可以应对,但是后端不一样,在后端,我们通常需要读取或操作一些长文本,或者处理前端传过来的图片和大文件等,这些对象都是二进制的, 在这些应用场景中,string就显得力不从心了! 由此引出Buffer!
使用官方网站提供的应用场景就是: 当我们在观看YouTube视频时,红线超过了观看点,也就是下载数据的速度比查看数据的速度快,浏览器就会对数据进行缓冲!
Buffer对比string
下面展示一个案例: 将一段文本的第一个字符变成大写
...
在开发工具中使用git
企业中简单的使用git操作使用软件webstorm1. 首先是克隆代码(拉取远端仓库的代码)
拉取远端代码指令如下:
git clone git@github.com:xxxxxx/xxx.git
操作步骤如下: 菜单栏下的VCS —> Git —> Clone… ,点击 Clone 按钮后显示如下,URL : 输入你的仓库地址, Directory:选择存放你仓库的本地目录,最后点击clone即可拉取github上的代码……
2. 本地创建分支,推送分支及切换分支(自己修改业务)
远程新建分支(一般不推荐使用)
本地新建分支(推荐使用)
新建分支后将其推送到远程仓库(同步)
上图的test2分支即是我刚刚新建的分支,这里我就不另外新建了!
此时我们就可以看到远程仓库中有我们刚刚推送的分支了!
切换分支
3. 本地分支修改项目成功后推送到远程仓库!
首先先提交我们修改好了的代码!
在将修改后的项目源码推送到远程仓库!
4. 更新本地仓库
git是一个很好的版本控制工具,而且能让我们进 ...
react学习笔记(35) - React知识补充
1. Portal
官方解释:Portals 提供了一个最好的在父组件包含的DOM结构层级外的DOM节点渲染组件的方法。其实它的作用我们可以认为是传送门, 它能够帮助我们在父组件的外部渲染出子组件,应用场景例如:当子组件需要从视觉上“跳出”其容器时,譬如对话框、悬浮卡、提示框等。
例如antUI组件库中的弹出框:(在点击的瞬间干组件下弹出一个新的div)
我们也许会说,使用css样式中的定位就可以实现,但其实这种方法是存在弊端的,因为在使用css样式的过程中必然会存在父子之间的层级关系,那么此时当父组件的dom元素有 overflow:hidden 或者z-inde 样式,子层级就会受到它的影响从而出现问题,但是Portal不会有这种问题,因为他是可以指定位置的渲染html结构,也就是所可以避免出现父子层级结构的出现!
案例展示:
使用Portal创建一个遮罩层!
APP.js(根组件)/* ----------------- 根组件 ---------------------- */import React, { Component } from ...
react学习笔记(34) - Redux-Saga(2):的基本使用
Redux-Saga
中文文档, 英文文档
我们之前学习过Redux-promise,Redux-thunk等处理异步操作的Redux中间件, 这里的redux-saga同样是redux的一个中间件, 与前两个不同的是,redux-saga 是一个用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等)的 中间件,它的目标是让副作用管理更容易,执行更高效,测试更简单,在处理故障时更容易。前两者在redux中的使用都有不同程度的破坏redux中的action(redux-thunk将其变成一个函数, redux-promise将其变成一个promise对象),但是redux-saga不一样,它能非侵入式的结合redux进行开发,即不修改action的前提上实现异步操作。
可以想像为,一个 saga 就像是应用程序中一个单独的线程,它独自负责处理副作用。 redux-saga 是一个redux中间件,意味着这个线程可以通过正常的 redux action 从主应用程序启动,暂停和取消,它能访问完整的 redux state,也可以 dispatch red ...
react学习笔记(33) - Redux-Saga(1):了解生成器函数
生成器函数
generator(生成器)是ES6标准引入的新的数据类型。我们可以认为是它是一个批量制造 函数 的工厂, 在实际应用中常用于处理异步操作,但究其用法过于繁琐,在ES2017后用更为简便的async await来替代了生成器函数用于处理异步操作! 但是这篇博客讲到的Redux-Saga是基于生成器函数来实现的,因此需要讲解一下它(生成器函数)的基本使用
基本使用:
生成器函数
/* ---------------------------------- 生成器函数 ----------------------------------------- *//* 可以配合 yield 来使用, 暂停或者回复函数的执行, 有点类似 return 但是又不完全一致, yield 可以让函数反复执行,当然在生成器函数里面 也是可以使用 return 的,不过他会直接终止函数的运行罢了!*/// 1. 创建生成器函数(函数名前面 + *)function * count(){ let arr = [1,2,3,4,5]// 创建一个数组 // 在循环遍历 ...
react学习笔记(32) - 样式组件(styled-components)的基本使用
样式组件(styled-components)
官方文档
styled-components是通过JavaScript改变CSS编写方式的解决方案之一,从根本上解决常规CSS编写的一些弊端。通过JavaScript来为CSS赋能,我们能达到常规CSS所不好处理的逻辑复杂、函数方法、复用、避免干扰。样式书写将直接依附在JSX上面,HTML、CSS、JS三者再次内聚。*all in js*的思想
基本使用
安装
npm i styled-components
在react项目中引入
import styled from 'styled-components'; // 引入 styled-components
在项目中书写样式组件
/* ------------------- 某组件 ------------------------- */import React, { Component } from 'react'import styled from 'styled-components'; ...
react学习笔记(31) - Typescript结合React的使用(2):路由和redux
TS + 路由
其实也与使用js编写路由是基本一致的,有一些细微的不同就是需要写一些接口来限制参数类型罢了
基本使用
安装路由(5版本)
npm i react-router-dom@5
安装预编译文件(路由的类型判断)
npm i --save-dev @types/react-router-dom
案例展示:
要求使用路由实现页面的跳转并且携带参数(动态路由的实现), 以电影为例,使用axios在页面挂载成功时获取数据,点击对应的电影名字,携带对应的电影ID跳转到详情页面
路由组件(index.tsx)/* ------------------- 路由组件 --------------------- */import React, { Component } from 'react'import {HashRouter,Route,Redirect,Switch} from 'react-router-dom'import Film from './views/Films ...