自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(78)
  • 收藏
  • 关注

原创 React 常用知识点

目录React 常用知识点你们进行React开发的技术栈是什么谈谈React中state和prop的区别React类组件和函数(无状态)组件的区别类组件中有哪些生命周期函数无状态组件中如何模拟生命周期函数React常用Hook有哪些ReactHooks解决了什么样的问题ReactRouter中有哪些Hook简述Dva操作中的流程dispatchconnect什么是高阶组件React 常用知识点你们进行React开发的技术栈是什么React + umi + antdesignPro + dva谈谈Re

2021-06-25 10:24:47 439 1

原创 AntDesign

AntDesign这是蚂蚁金服推出的设计语言,蚂蚁金服官方基于该设计语言实现了React组件库安装npm i --save antd# 或者yarn add antd引入css我们在App.css通过css引入模式进行引入App.css@import '~antd/dist/antd.css';或者我们可以在App.js中引入cssApp.jsimport "antd/dist/antd.css"使用组件React组件不支持全局注册,我们需要在我们对应的使用到antd组件的

2021-06-24 14:41:49 232

原创 ReactRouter基础

目录ReactRouter基础react-router安装react-router的使用BrowserRouter/HashRouterRouteexactSwitchLinkNavLink路由配置安装 react-router-dom安装 react-router-dom配置好routes在App.js中添加函数找到有子路由的组件饿了么路由配置ReactRouter基础本质上react-router有三个模块,react-router、react-router-dom、react-router-na

2021-06-17 18:38:08 528 1

原创 React Hooks

1. React Hooks1.1. useState1.2. useEffect1. React Hooks在React中有自带的hooks,也可以自己定义自定义hooks,所有的hooks都是以use开头–useXxx1.1. useState解决了React函数组件中没有状态的问题const FuntionComponent = () => { // 如果想要设置相关的变量存储数据使用useState。useState调用后返回的是一个数组 // state 和.

2021-06-17 18:37:11 162

原创 React的基本使用

1. React的基本使用1.1. 安装脚手架create-react-app1.2. 创建项目2. JSX语法2.1. VSCode配置2.2. 插值2.3. 列表渲染2.4. 条件渲染2.5. 事件绑定3. React组件3.1. 类组件3.1.1. 存在的问题3.2. 无状态组件4. 组件状态提升(组件通信)5. Props的定义5.1. 限制prop类型5.2. prop默认值5.3. children5.4. 类名的操作1. .

2021-06-17 18:35:50 404 2

原创 Typescript

目录数据类型ts定义数据类型定义接口接口中的属性和对象的属性必须一一对应 ts 中定义接口 接口名字首字母大写定义可选属性 通过 ? : 如果有一些属性是可有可无,可以定义为可选属性,通过 在属性名后边添加 ? 实现定义任意属性 [propName:数据类型] :any定义只读属性 通过 readonly 关键字函数实现接口函数返回值 ,返回值是对象接口定义方法ts定义数组定义函数函数重载定义:typescript 是javascript类型的超级, 可以编译成纯javascript, ,可以跨浏览

2021-06-07 19:10:48 477

原创 echarts 在vuecli中使用

echarts 在vuecli中使用下载安装npm i echarts --save-dev常规使用方法全局配置 (网上的通常的用法)在main.js中进行配置import Echarts from 'echatrs'Vue.prototype.$echarts = Echarts;使用ecahrts在.vue文件的 mounted 生命周期中使用<div id="myecharts"></div>mounted(){ let echarts =

2021-05-21 12:13:44 176

原创 Git的使用命令

这里写目录标题gitgit 安装git 配置git 的基础知识工作区暂存区Git 目录(仓库)git 的基本命令行git addgit commitgit clonegit pushgit branch打标签查看当前工作去的状态版本回退查看历史记录git的ssh 链接gitgit 安装git 配置git安装成功后, 需要进行全局的配置, 配置的是git的用户名和 邮箱地址 , 执行一下命令git config --global user.name 'git的用户名'git config --gl

2021-05-21 12:12:29 353 1

原创 vueRouter 路由的配置

目录vueRouter路由的配置路由跳转命名路由动态路由路由传参嵌套路由vueRouter路由的配置引入vue-rotuer.js 文件<script src='vue.js'></script><script src='vue-router.js'></script>创建路由组件模板每个组件必须存在一个唯一的根元素const 组件名 = { template:`组件模板`}创建路由配置path属性: 匹配的路由;

2021-04-23 11:37:51 709

原创 vue脚手架自动搭建好路由配置以后的使用步骤

vue脚手架自动搭建好路由配置以后的使用步骤1、创建项目1、在要搭建的项目文件内打开npm命令行 输入命令:vue create 项目名称2、选择最后一行功能以上命令执行完毕,开始等待安装完毕安装完毕后 打开文件,这就是基本的文件目录配置步骤1、把vue自动加载的文件不需要的内容给清空,可以把清空完毕的的文件 除了node_modules文件可以删除,其他的文件可以单独放到一个文件夹内,以便以后可以直接使用,不需要再重新安装2、可以在views文件夹内创建自己的单页面

2021-04-23 08:44:23 382

原创 vuecli (vue的基本脚手架安装过程)

vuecli这是vue的脚手架,可以帮助我们快速搭建项目框架, 目前使用的最新版的脚手架 @vue/cli, 如果是 低版本的则为 vue-cli安装npm i @vue/cli -g测试安装是否成功:vue -V创建项目安装成功后,可以通过vue 命令搭建你的项目vue create 项目名搭建过程在命令行窗口输入 vue create myapp; 选择 最后一项 Manually select features? Please pick a preset: (Use a

2021-04-22 18:59:49 217

原创 vue的生命周期

目录vue的生命周期动态组件vue的生命周期vue的生命周期钩子函数:创建前/后 : beforeCreate() created()挂载前/后 : beforeMount() mounted()更新前/后 : beforeUpdate() updated() 数据发生改变时触发销毁前/后 : beforeDestroy() destroyed() 组件被销毁时触发组件的生命周期 :keep-alive 内置标签 : 进行缓存组件的生命周期 结合 keep-alive 一起使用组

2021-04-22 18:54:33 138

原创 楼层导航的几种写法

第一中:通过索引值实现<!-- <!DOCTYPE html> --><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style&gt

2021-04-21 15:54:50 373

原创 媒体查询

媒体查询用media设备:屏幕:PC 手机端打印机屏幕阅读器尺寸:常见尺寸 320-420之间响应式网页:同一个网页,在不同的条件下(不同的设备,不同的宽度),使用不同的样式。rem/百分比:等比例缩放。【注】使用min-width时,通常将小的条件放在前面。使用max-width时,通常将大的条件放在前面实现方式:1、内嵌式: 格式:@media 设备名 逻辑关键词(and , not)(条件){ 样式; }&lt

2021-04-21 15:38:56 49

原创 移动端的适配

目录移动端的适配移动端的一些关键术语移动端的设计稿移动端的适配--媒体查询移动端的屏幕适配js实现移动端的适配移动端的一些关键术语物理像素:其实就是屏幕的分辨率设备独立像素:就是设备的宽度css像素:就是px 是相对长度 CSS 像素是 Web 编程的概念,指的是 CSS 样式代码中使用的逻辑像素视网膜屏:视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕,由苹果公司在2010年在iPhone 4发布会上首次推出设备像素比dpr : dpr = 物理像素 / 设备独立像

2021-04-20 11:41:15 248

原创 vue 的组件

目录vue 的组件组件的注册全局注册组件名组件中的data属性局部注册组件的传值方式组件的关系组件父子通信组件子父通信$on() 和 $emit()$emit()用法$on()用法子父通信vue 的组件组件是可复用的 Vue 实例,且带有一个名字:因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。组件模板必须只能存在一个根元素组件

2021-04-14 16:18:56 565

原创 vue的基本使用

vue渐进式JavaScript 框架vue 的挂载点提供的元素只能作为挂载点。不同于 Vue 1.x,所有的挂载元素会被 Vue 生成的 DOM 替换。因此不推荐挂载 root 实例到 或者 上。通过 el 属性 设置挂载点const app = new Vue({ // #app 对应的是页面中的div#app el:'#app'})通过显示调用 $mount() 方法const app = new Vue({ // #app 对应的是页

2021-04-09 09:41:20 153

原创 webpack

webpackwebpack 默认识别js文件, 可以使用 CommonJs (模块化开发)语法 , 也可以使用 es6 (模块化开发)的语法webpack的基础配置安装npm init -ynpm i webpack webpack-cli --save-dev配置启动命令在package.json 文件的scripts 字段中配置启动命令(打包命令), 配置一个开发环境development,一个生产环境production "scripts": { "test": "echo

2021-04-07 09:45:57 177

原创 canvas实现绘制视频

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> canvas{

2021-03-31 18:41:42 1657

原创 canvas实现绘图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .pic { .

2021-03-31 18:40:02 124

原创 canvas实现多个小球运动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m

2021-03-31 18:37:15 545

原创 H5新增 —— canvas 画布

H5新增 —— canvas 画布1、canvas的基础 画基本图形canvas 有两个发展方向: - 数据可视化 - 游戏开发 案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name

2021-03-31 18:35:07 152

原创 通过服务器向数据库请求数据,渲染到页面的操作

目录一、配置文件1、在项目文件夹内打开服务器窗口2、输入命令 `express -e 要创建的文件夹名`3、根据服务器的提示操作,配置文件4、下载安装需要的插件5、配置插件6、在服务器内输入命令`npm run dev`才可以启动服务 配置才算基本完成二、创建数据库并建立连接在路由文件内链入数据库,并获取请求的数据一、配置文件1、在项目文件夹内打开服务器窗口2、输入命令 express -e 要创建的文件夹名3、根据服务器的提示操作,配置文件4、下载安装需要的插件5、配置插件6、

2021-03-24 20:31:53 1238

原创 express使用ejs模板引擎

1、在项目的文件目录下打开命令窗口 初始化文件夹 通过 npm init -y生成依赖的文件 paclage.json2、安装express框架插件命令行:npm i express --save【注意】在项目开发过程中,有不同的环境开发环境:dev (development) 执行命令为:npm run dev生产环境:bulid(prodcution) 执行命令为:npm run bulid测试环境:test(test): 执行命令为:npm run test文件夹内自动生成文件

2021-03-22 20:44:18 369

原创 ejs的介绍

ejsejs 是js的模板引擎, 可以识别一些简单的js语句和使用一些js简单表达式ejs 的语法流程控制语句 if语句 <% js代码 %>if语句// js 的if 语句格式<% if(条件) { %>// 处理的逻辑 渲染的HTML结构<% } %>if-else语句// js 的if 语句格式<% if(条件) { %>// 处理的逻辑 渲染的HTML结构<% }else { %>// 处理的

2021-03-22 20:44:00 188

原创 nodejs的url、fs、http 的综合应用

const http =require("http");const url = require("url");const fs = require("fs");http.createServer((req,res)=>{ let pathname= url.parse(req.url).pathname; //如果输入localhost:3000/ 弹出的是图1 if( pathname == "/" ){ //读取首页 fs.rea

2021-03-20 16:05:55 78

原创 nodejs的url与http基本的综合应用

const http = require("http");const url = require("url");//搭建服务器http.createServer((req,res)=>{ // console.log(req.url); //设置响应头,有中文防止乱码 res.writeHead(200,{"Content-type":"text/plain;charset=utf-8"}) //获取用户输入的数据 let result=url.parse

2021-03-20 15:25:54 39

原创 nodejs的路由url

nodejs的路由urlurl 模块 : 对url地址进行解析nodejs 路由: url 访问的地址//引入urlconst url = require("url");// 解析url地址 通过url.parse() 方法进行解析// let res = url.parse(path);// 第一个参数是要解析的路径 第二个参数 是对 query 字段转换为对象形式; 布尔值 truelet res = url.parse(path, true);//要获取query的值 q

2021-03-20 14:16:35 152 2

原创 nodejs的文件系统 fs

nodejs的文件系统 fs文件系统分为:读,写 ,追加,删除,文件夹重命名1、先创建一个文件系统const fs = require('fs')2、读取文件//读流 读取文件的内容 fs.readFile('./test1.txt', (err, result) => { if (err) { console.log(err); } console.log(result.toString()); })...

2021-03-20 10:15:48 93

原创 nodejs跟express框架,mysql数据库的基本链接

nodejs跟express框架,mysql数据库的基本链接1、在新建的根目录下打开nodejs服务器通过输入npm init -y 的命令 初始化文件2、在服务器内配置所需要的插件通过 npm install 插件名(eg:mqsql、express) - -save以上准备工作准备好后就可以开始使用3、搭建一个mysql数据库 并把mysql数据库引入进来,通过module.exports导出文件const mysql= require("mysql");const nno=my

2021-03-19 20:31:21 228

原创 ejs的基本语法

ejs的基本语法ejs: 是js的模板引擎ejs 的语法:1. 单独在HTML 文件中使用2. 结合express框架使用ejs的语法: 流程控制语句: <% %> 可以使用一些简单的js语法 if语句: <% if( ) {%> 内容 <% } %> for循环语句: <% for(let i = 0; i < num, i++) {%> 内容 &l

2021-03-19 18:59:38 1794 2

原创 nodejs链接mysql数据库

nodejs链接数据库需要下载mysql包1.下载在服务器窗口输入命令: npm install mysql如果npm下载慢:npm 下载受网络影响(镜像在国外); 一般都会使用 cnpm(镜像源在国内) 代替 npm 使用cnpm 需要全局安装 npm install cnpm -g --registry=https://registry.npm.taobao.org安装完成后: 在服务器输入命令 cnpm -v 可以检测然后可以使用cnpm 下载安装第三放包 cnpm

2021-03-18 20:49:22 126

原创 nodejs的post请求

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do

2021-03-18 20:06:38 666

原创 nodejs处理用户的get请求

nodejs处理用户的get请求<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

2021-03-18 19:34:25 293

原创 nodejs模块的导入与导出以及与ES6的区别

nodejs模块的导入与导出导出的模块:两种方式module.exports = { }exports.key = value两种方式的区别:module.exports 导出的是一个对象 ; 一个文件中只能使用一次 ; 导入模块同样可以使用对象解构形式exports 导出的是一个具体的值 ; 一个文件中可以出现多次 ; exports 可以导出多个模块,当我们引入模块式,会得到一个对象集合 { fun: [Function], test: [Function], num: ‘hell

2021-03-18 19:10:40 867

原创 http 服务器搭建

http 服务器搭建通过http模块提供的方法可以创建服务器1 引入http模块 (nodejs内置模块, 可以直接引入)2. 创建服务器 http.createServer() 方法 3. response.end() 方法 返回数据 终止响应4. 服务要想正常开启,必须要有一个专用的端口号(通道), 默认nodejs的服务端口号是 30005. 回调函数 为了提示服务器正常开启服务器的搭建写法有好几种:第一种const http = require('http');//

2021-03-17 11:36:59 3833

原创 node js的安装和npm包的使用

node js 的安装下载官网地址:node.js下载方法:【注意】电脑系统版本比较高的话,可以选择下载最新版本,如果电脑系统版本低可选择一下方法测试安装是否成功2-1. 打开命令行窗口(cmd)(1) 在开始菜单 的搜索栏输入 cmd 直接回车(2) 在电脑的任何空白地方 , 按着 shift键 + 鼠标右键 ===》出现菜单 ==》 在此处打开命令行窗口(W)2-2 在命令行窗口中输入命令测试输入 node -v 回车出现详细的nodejs版本号, 就证明nodejs 安

2021-03-17 09:29:36 646 1

原创 ES6-Promise的基本用法,async和await的基本用法

ES6-Promise的基本用法1.回调地狱回调地狱: 因为js是单线程的, 有些时候为了代码功能需求,需要函数嵌套函数,当函数嵌套多层时,就会形成回调地狱//里面函数嵌套函数时function fun() { setTimeout(function() { console.log(2); setTimeout(function() { console.log(1);

2021-03-16 13:56:19 223

原创 Git的下载与使用 官网下载太慢

下载链接https://npm.taobao.org/mirrors/git-for-windows/

2021-03-09 19:12:39 1070

原创 跨域 Ajax请求的方法

目录跨域什么是跨域同源策略:解决跨域的三种方法1.jsonp原理:2.cors3.代理正向代理JQuery发送ajax请求get请求post请求Ajax请求跨域什么是跨域同源策略:​当协议,端口号,域名三者中只要有一个不同时,就会触发同源策略。如果没有同源策略,客户端可能会被攻击,比如说获取到cookie,使用cookie去登录别的网站。浏览器不允许你请求这个地址的数据。我们在开发过程中,可能会使用不同的服务器。每个服务器的功能是不同的,比如将HTML css文件 图片资源专门放在一个服

2021-03-08 19:54:14 385

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除