weixin_59684494的博客

原创 ReactNative（3）{多列布局、实现滚动效果、ReactNative路由}

多列布局// rnc react native componentimport React, {Component} from 'react';// 组件或者API使用时,需要提前导入import {Text, View, FlatList, Dimensions, Image} from 'react-native';// 获取屏幕的宽高const {height, width} = Dimensions.get('window');// rpx换算为物理像素 使用方法 例如:30r

原创 ReactNative（2）{网络请求、FlatList组件、触底加载/下拉刷新/回到顶部/元素绑定}

一、网络请求// rnc/*** * View: 不可以滚动 * * ScrollView: 可以滚动 * * 将接口数据展示到页面上 实现的基本步骤: * 发送请求=>接收返回数据=>存储本地=>展示渲染 * */import React, { Component } from "react";import { Text, View, Dimensions, Image, ScrollView } from "react-native";// rpx计算c

原创 ReactNative（1.5）{登陆页面练习}

// rncimport React, { Component } from "react";import { Text, View, StatusBar, ImageBackground, Image, TextInput, TouchableOpacity, StyleSheet, Dimensions,} from "react-native";// 获取宽高const { width, height } = Dimensions.get("window.

原创 ReactNative（学习部署）{样式使用、图片、文本、布局、按钮、活动提示器、状态栏和背景图、开关和文本输入框}

RN环境部署视频链接: https://pan.baidu.com/s/1Z5msrmcoLwrcHwQIRVqKKA提取码: abwuRN部署资源链接: https://pan.baidu.com/s/19eFVsVXoB0viPUK1ZxhmEA 提取码: rphiReactNative学习项目包目录结构在RN代码编写过程中，开发者服务器是热更新服务器，代码写完之后会立即同步到模拟器。代码没写完，就同步过去了，会造成模拟器里APP崩溃。不要使用vscode里...

原创 React（6.5）路由系统

路由系统单页应用(SPA)的多页面切换 需要使用到路由功能。多个组件的路由和切换 使用路由React中默认没有安装路由，需要手动安装安装不指定版本默认是最新版本6目前大多数项目可能还处于版本5安装指令npm i react-router-dom@5安装之后，在package.json确认以下软件名称及其版本"react-router-dom": "^5.3.0"先装5版本，如果安装了新版本，通过以下命令卸载。重新安装5版本npm 卸载命令npm

原创 React（7）语法学习{hook、useState组件状态、生命周期useEffect、Redux}

hookHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。useState组件状态// rfc 函数组件快捷方式// react16.8版本后hook特性 函数组件使用 useState// useState 函数组件使用state// 1.引入useStateimport React,{useState} from 'react'export default function App() {

原创 React（6）练习：{新闻接口 列表展示 翻页按钮实现}

import React, { Component } from "react";export default class App extends Component { // 变动数据 同时渲染DOM 存储在state // page当前页 默认第一页 接口没有返回页数 本地维护一个 state = { data: null,page:1}; // 组件挂在时触发 componentDidMount() { // 发送网络请求 this.getData(); ...

原创 React（5）语法学习{生命周期、网络请求、子元素绑定}

一、生命周期组件生命周期 组件开发到结束的整个过程。react提供了组件在各个生命节点的操作方法，称为钩子函数 Vue的组件生命周期：created=>mounted=>updated=>destoryedcomponentDidmount 组件挂载时触发 初始化操作和发送网络请求 shouldComponentUpdate 组件将要更新 可以用来控制重绘DOM的时机 这个方法 必须要有一个返回值 bool类型 true 渲染 fasle为不渲染 componentD

原创 React（4.5）跨域代理

跨域代理浏览器端因为同源策略，存在跨域问题。一般开发过程中，使用proxy代理方式解决。需要安装一个代理插件 http-proxy-middleware①在项目包根路径安装代理插件npm i http-proxy-middleware安装之后在项目包的package.json中查看依赖，是否安装成功②建立配置文件 配置文件修改后，注意重启项目服务/src/setupProxy.js// /src/setupProxy.js 路径和文件名注意写对cons.

原创 React（4）语法学习{列表渲染：数组、数组对象、map语法遍历数组、map语法遍历数组对象}

列表渲染页面处理的数据较为复杂一些，一般格式为数组和数组对象一、数组// rcc 类组件快捷代码提示import React, { Component } from "react";export default class App extends Component { // 使用state存储还是普通类属性存储？ // state修改后DOM刷新 // 普通属性 存储 不修改 skills = ["uni-app", "react", "reactNative", "a

原创 React（3）语法学习{状态、setState刷新DOM、setState具有异步性、样式的使用、图片、条件渲染、双向绑定}

一、状态React组件中 通过state管理组件内部状态 类Vue中的data// rcc 快捷方式/*** * Vue 组件的数据存放在data 数据自动监听的 当数据发生改变会自动刷新DOM 如果数据很多 会创建大量的监听器 性能就会低一些 * * React 需要的时候再去刷新DOM,没有自动监听器 * React提供了两个方法操作组件的状态: * state 获取数据 * setState 设置修改数据 刷新DOM * * 微信小程序 借鉴了rea

原创 颜色进制转换表（全）

原创 React{打包APK}

打包操作要求之前的环境配置是OK的.官方打包教程:https://www.react-native.cn/docs/signed-apk-android①确认Java的bin目录加入环境变量环境变量配置好后，注意重启cmd再运行命令②生成密钥在`项目包的android/app`目录下执行keytool -genkeypair -v -storetype PKCS12 -keystore my-release-key.keystore -alias my-key-alias.

原创 React（2）{脚手架}

脚手架环境搭建①node环境 检测node环境 npm包管理工具通过以下命令检测环境是否正常,如果提示非命令找不到等信息.说明环境坏了,重装# 查看node版本 node -v# npm 版本 npm -v②镜像源npm包的仓库地址 在国外的 国内下载很慢 一般会配置到国内源# 查看当前源地址 如果为国内的就不用修改了npm config get registry# 设置国内源地址npm config set registry https://registr

原创 React入门（1）{环境准备、快速入门、组件、事件}

React 起源于FaceBook Ins的产品[分享图片],研发的内部项目. 后来2013年开源了.2016年 大前端时代. 用来构建用户界面的JavaScript库 React官网: https://react.docschina.org/一、环境准备插件：代码格式化本地开发服务器智能代码提示自动修改双标签ES6代码片段提示React代码提示二、快速入门React官网: https://react.docschina.org/书写.

转载 前端经典面试题: 从输入URL到页面加载发生了什么

从输入URL到页面加载发生了什么最近在进行前端面试方面的一些准备，看了网上许多相关的文章，发现有一个问题始终绕不开: 在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么。仔细思考这个问题，发现确实很深，这个过程涉及到的东西很多。这个问题的回答真的能够很好的考验一个web工程师的水平，于是我自问自答一番。总体来说分为以下几个过程:DNS解析 TCP连接 发送HTTP请求 服务器处理请求并返回HTTP报文 浏览器解析渲染页面 连接结束具体过程DNS解析DNS解

原创 JavaScript中null和undefined区别

大多数计算机语言，有且仅有一个表示”无”的值，比如，C语言的NULL，Java语言的null，Python语言的None，Ruby语言的nil。有点奇怪的是，JavaScript语言居然有两个表示”无”的值：undefined和null。这是为什么？一、相似性在JavaScript中，将一个变量赋值为undefined或null，老实说，几乎没区别。var a = undefined;var a = null;上面代码中，a变量分别被赋值为undefined和null，这两种写

转载 JavaScript 面试题（75题）

面试题列表1. undefined 和 null 有什么区别？ 2. && 运算符能做什么 3. || 运算符能做什么 4. 使用 + 或一元加运算符是将字符串转换为数字的最快方法吗？ 5. DOM 是什么？ 6. 什么是事件传播? 7. 什么是事件冒泡？ 8. 什么是事件捕获？ 9. event.preventDefault() 和 event.stopPropagation()方法之间有什么区别？ 10. 如何知道是否在元素中使用了event.preventDefa

转载 最全的常用正则表达式大全——包括校验数字、字符、一些特殊的需求等等

一、校验数字的表达式 1 数字：^[0-9]*$ 2 n位的数字：^\d{n}$ 3 至少n位的数字：^\d{n,}$ 4 m-n位的数字：^\d{m,n}$ 5 零和非零开头的数字：^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$ 7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$ 8 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$ 9 有两位小数的正实

原创 MySQL、JavaScript、NODEJS常用单词整理

一、MySQL单词 翻译 server 服务、服务器 database 数据库 use 使用、进入数据库 show 展示、显示 table 数据表 row 行 column 列 desc 完整单词为describe 描述 quit 退出、退出和服务器的连接 drop 丢弃 exists 存在 create 创建 insert into 插入 delete ...

原创 JavaScript 基础 （4）{数组API、二维数组、字符串对象、Math对象、Date对象、Number对象、Boolean对象、错误处理、ES6}

一、数组APIAPI: js中预定义好的一些函数或者方法 toString() 将数组转为字符串,元素之间用逗号隔开 join() 将数组转为字符串,可以指定元素之间的分隔符 concat(arr2,arr3.....) 拼接多个数组arr2,arr3.....表示要拼接的数组 slice(start,end) 截取数组元素,start开始的下标,end结束的下标,不包括enf的本身,end为空截取到最后,下标为负数倒数,返回截取到的元素 splice(start,cou...

原创 JavaScript 基础（3）{函数、作用域、递归、匿名函数、对象、数组}

一、函数Number() / parseInt() / parseFloat() / alert() / prompt()...函数分为系统函数和自定义函数函数:是一个功能体,提供若干个数据,返回处理结果,用于封装重复执行的代码创建普通函数 function 函数名称(){ 函数体---封装的要重复执行的代码 } 函数只是创建不会执行函数体中的代码调用 函数名() //执行函数体中封装的代码创建带有参数的函数 function...

原创 JavaScript 基础（2）{数据类型、数据类型的转换、运算符、浏览器端函数、流程控制、循环}

一、数据类型分为原始类型和引用类型原始类型分为数值型、字符串型、布尔型、未定义型、空（1）数值型—— numbre整型1 2 3 4 5 6 7 8 9 10 8进制 1 2 3 ... 7 10 11 12 16进制 a=10 f=15 1 ..... 9 a ... f 8进制以0开头的数字， 例如010 16进制以0x开头的数字，例如0xf，不区分大小写 浮点型 ...

原创 JavaScript 基础（1）

1.概述（1）历史1995年，JS最早出现在Netscape的浏览器中1996年，IE3中也可以出现JS，称作JScript1997年，制定了JS标准规范，ECMAScript2009年，JS开始向服务器端发展，出现Node.js（2）现状既可以运行在客户端浏览器，也可以运行在服务器（3）特点解释型语言，编译一行执行一行弱类型语言基于对象跨平台（4）应用场景开发前端的交互效果，服务器端开发，例如：访问数据库、其他服务器调用...2.搭建开发

原创 node.js基础（5）{MySQL模块}

1.mysql模块 是Node.js下专门用于操作mysql数据库的模块 下载安装：npm install mysql 连接数据库：mysql.exe -h127.0.0.1 -P3306 -uroot -p 简写：mysql -uroot 脚本模式：mysql -uroot<拖拽SQL脚本文件 创建连接池 createPool（） 创建连接池 query（SQL命令，数组，回调函...

原创 VUE（5）{插槽、组件的生命周期、路由系统}

一、插槽 slot在组件中把某些位置留白, 在真正使用时 利用 插槽方式插入命名插槽: <slot name='名称' />两个使用场景 、三个使用方法: 组件用于布局, 只管布局样式 不负责具体内容的呈现 组件某个位置内容需要经常变动, 用插槽占位 旧写法: <template slot='名称'> 新写法: <template v-slot:名称> 简化写法: <template #名...

原创 VUE（4）{网络请求、过滤器、组件、组件传参、跨域问题}

一、网络请求不同的框架 都有自己的 网络请求模块: 原生html: ajax vue: axios 微信: wx.request react: fetch Angular: HttpClient axios模块安装默认生成的 vue 项目包, 不含 axios 模块, 需要手动安装 和 集成npm i axios vue-axios<template> <div> <button @click="ge.

原创 VUE 脚手架 {vue的：插件、for的key、元素索引、计算属性、网络抓取...}

Vue框架的核心理念: 修改数据, 自动更新DOM元素，理解之后 才算学会了Vue脚手架：就是一款软件, 可以按照用户需求自动生成开发环境: 包含必备的脚本资源, 插件资源随着时代的发展, WEB开发逐渐出现了 工程化 特征: 流水线作业! 脚本方式: 到饭店 自选点餐..脚手架方式: 点 套餐, 一套完善的配置,扩展, 各种易用功能... 脚手架: 是现代WEB开发的最终形态 -- 工程化 流水线作业: 脚手架工具 会生成 标准的项...

原创 VUE（3）{遮罩.隐藏、pre、一次性页面渲染、双向数据绑定、实时监听输入框事件、键盘监听事件、watch监听器、单选/多选/下拉选框、动态样式}

一、遮罩.隐藏在vue实例化之前, 把页面内容暂时隐藏 实例化完毕后, 会自动显示. -- 网络卡顿时才会有效<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" conten

原创 VUE（2）今日内容{插值语法、事件、属性、隐藏和显示、for循环}

插值语法: {{}}在html中书写, 主要出现在 双标签的内容区域, {{ JS代码... }}<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="w..

原创 node.js基础（2）

1.模块__dirname 获取模块的绝对路径 __filename 获取当前模块的绝对路径+模块名称2.模块分类分为自定义模块、核心模块、第三方模块 以路径开头 不以路径开头 文件模块 require('./circle.js') 用于引入自定义模块 require('querystring') 用于引入官方提供的核心模块 ...

原创 node.js基础（3）

1.同步和异步 同步：在主线程中执行，会阻止后续代码的执行，是通过返回值获取结果 异步：在一个独立的线程执行，不会阻止后续代码的执行，是通过回调函数获取结果 2.文件系统模块（fs）用于操作服务器端文件 文件包括目录形式和文件形式mkdirSync(目录路径) 创建目录（1）查看文件状态 statSync(文件的路径) stat(文件的路径，回调函数...

原创 VUE（1） 初识vue

什么是VueVue是一套生产工具, 你只要会用即可, 不需要知道原理!目前绝大多数WEB项目, 都采用Vue框架实现!Vue最低兼容 IE10, 2009年出品的 IE9不支持.Vue是一个 比 jQuery 封装的更加彻底的框架, 把讨厌的DOM操作统统封装了起来, 书写代码时, 完全看不到DOM相关代码!官方网站: Vue.js目前Vue分两个版本: Vue2.x: 目前普及率最高, 大多数项目都采用的是 Vue2.x 制作 Vue3.x: 刚出1年左右, 目

原创 node.js基础（1）

Node.js概述对比JS Node.js 是运行在服务器端的js解释器（一种环境） JS运行在客户端浏览器,存在多款浏览器,有兼容性问题,Node.js运行在服务器端,只有一张解释器谷歌v8引擎,不存在兼容性问题两者都有共同的内置(ES)对象,自定义对象,不同的宿主对象JS用于操作网页,实现用户交互;Node.js用于服务器端开发,例如数据库访问,其他服务器的调用(2)运行方式脚本模式 node 拖拽脚本文件 回车 交互模式...