自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 mobx在react中的使用以及使用mobx实现跨组件交互

跨组件交互在不使用其它框架、类库的情况下,React要实现跨组件交互这一功能相对有些繁琐。通常我们需要在父组件上定义一个state和一个修改该state的函数。然后把state和这个函数分别传到两个子组件里,在逻辑简单,且子组件很少的时候可能还好,但当业务复杂起来后,这么写就非常繁琐,且难以维护。而用Mobx就可以很好地解决这个问题。来看看以下的例子:class MyState { @observable num1 = 0; @observable num2 = 100; @acti

2020-08-11 18:18:22 149

原创 mobx

@observable * 概念: 创建一个被监听的对象, 没有@observable声明的视图不能检测到变化,把数据源变成可观测的,数据实现相应ES6的装饰器在react中有时不支持,要安装插件(1)写法一:数组、对象、ES6中的map等都可以变成可观察的。例:写一个可观测的数组:const arr = observable (['a','b'])数值不可观察。如果想让数值变成可观察的,使用box()或get()、set()cosnt num = observabl...

2020-08-11 11:36:25 25

转载 github在公司中的使用注意事项

1.下载安装git https://git-scm.com/downloads/2.初始化git本地目录。3.连接远程仓库github(gitlab)配置秘钥。https://www.cnblogs.com/flora5/p/7152556.html4.下载远程代码 git clone <版本库网址>5.然后就开始码农之路了。由于是公司代码,很多人在合作,而且分迭代,所以要学会建立自己的分支(git checkout -b <你的分支名>)常用命令:(注 <&gt

2020-08-08 21:07:17 62

原创 React图片引入的两种方式

一、使用到图片标签的src属性上时1.分离引入方式在文件头部引入:import logo from '../img/logo.svg';在reder函数中使用<img src={logo} alt="图标"/>2.通过require懒加载引入在reder函数中使用<img src={require("../img/logo2.jpg")} alt="图标"/>二、作为背景图片使用时1.分离引入方式在文件头部引入:import

2020-07-20 18:31:55 95

原创 React列表渲染的三种常见方式

1.循环数组采用map方法render(){letimgarr=["https://t7.baidu.com/it/u=656449836,1405112256&fm=193", "https://t7.baidu.com/it/u=4203437985,3172522485&fm=193", "https://t9.baidu.com/it/u=2200618372,2799649385&fm=193"]} r...

2020-07-20 18:22:50 33

原创 React的3种条件渲染方法(持续更新中....)

1.If/Elseclass App extends React.Component { state = { text: '', inputText: '', mode: 'view', } handleChange = (e) => { this.setState({ inputText: e.target.value }); } handleSave = () => { this.setState({text: thi

2020-07-20 18:11:26 23

原创 React创建组件的两种常见方式

1.函数式定义(无状态组件)import React from 'react';function MyComponent(props){  return( <h1>mycomponent</h1> )}export default MyComponent;2.es6中class类的方式(有状态组件)import React, { Component } from 'react';class MyConponent extends Com

2020-07-20 17:59:33 35

原创 Vuex

1.Vuex概述Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享使用Vuex管理数据的好处:A.能够在vuex中集中管理共享的数据,便于开发和后期进行维护B.能够高效的实现组件之间的数据共享,提高开发效率C.存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新Vuex中的核心特性A.StateState提供唯一的公共数据源,所有共享的数据都要统一放到Store中的State中存储例如,打开项目中的store.js文件,在State对

2020-07-14 18:16:38 17

原创 github的使用

github开源代码托管网站github是基于git做版本控制的一、git的使用方法1.下载和安装git到官网去下载,下载成功后,点击鼠标右键,会出下如下两个新选项,Git GUI Here和Git Bash Here在任意文件夹下点击右键,选择Git Bash Here,来到当前文件夹路径的命令行在“新建文件夹”下操作,就会把“新建文件夹”当作一个工作区,来和仓库关联2.常用的git指令克隆–http地址–git clone http://github.com/Gitgit地址—gi

2020-07-11 00:11:39 77

原创 Vue路由1

Vue Router的使用步骤(★★★)A.导入下载 npm i vue-router --save或者 npm i vue-router --S在main.js入口文件中引入 import Vue from "vue" import VueRouter from "vue-router"//引入路由工具 import App from "./App.vue"在main.js入口文件中注入路由Vue.use(VueRouter)//就是运行路由的相关函数和给vue绑定东西:

2020-07-08 20:35:35 26

原创 Vue组件之间传值

父组件向子组件传值父组件发送的形式是以属性的形式绑定值到子组件身上。然后子组件用属性props接收子组件的mounted函数先于父组件的mounted函数调用若:1.父组件在mounted函数中将原data定义的arr:[ ],新赋值为arr:[1,2,3],2.父组件给子组件传值,子组件获得arr3.子组件在mounted函数中打印arr,打印的结果为[ ]空原因:子组件的mounted函数先于父组件的mounted函数调用,因为子组件调用mounted时,父组件还没有调用mounted

2020-07-06 20:14:41 25

原创 Vue组件插槽

组件插槽组件的最大特性就是复用性,而用好插槽能大大提高组件的可复用能力匿名插槽 <div id="app"> <!-- 这里的所有组件标签中嵌套的内容会替换掉slot 如果不传值 则使用 slot 中的默认值 --> <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <aler

2020-07-05 21:39:20 58

原创 Vue基础组件入门

什么是组件?组件 (Component) 是 Vue.js 最强大的功能之一组件可以扩展 HTML 元素,封装可重用的代码组件注册全局注册Vue.component(‘组件名称’, { }) 第1个参数是标签名称,第2个参数是一个选项对象全局组件注册后,任何vue实例都可以用组件的基础用法 <div id="example"> <!-- 2、 组件使用 组件名称 是以HTML标签的形式使用 --> <my-co

2020-07-05 21:21:28 53

原创 Vue自定义指令

自定义指令内置指令不能满足我们特殊的需求Vue允许我们自定义指令Vue.directive 注册全局指令<!-- 使用自定义的指令,只需在对用的元素中,加上'v-'的前缀形成类似于内部指令'v-if','v-text'的形式。 --><input type="text" v-focus><script>// 注意点: // 1、 在自定义指令中 如果以驼峰命名的方式定义 如 Vue.directive('focusA',function

2020-07-05 21:15:07 23

原创 Vue生命周期函数

生命周期事物从出生到死亡的过程Vue实例从创建 到销毁的过程 ,这些过程中会伴随着一些函数的自调用。我们称这些函数为钩子函数常用的 钩子函数beforeCreate在实例初始化之后,数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了created在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来beforeMount在挂载开始之前被调用 此时页面上还看不

2020-07-05 12:36:36 100

原创 计算属性和监视器、过滤器的区别

计算属性和监视器的区别计算属性 compued监视器 watch一个数据受多个数据影响一个数据影响多个数据不支持异步支持异步首次会运行首次不会运行有返回值无返回值计算属性和过滤器的区别计算属性 compued过滤器 filters依赖于固定的实列,在某个实列中使用不依赖实列,可以定义全局的过滤器,在多个实列中使用不接受额外参数,依赖于data属性中的变量过滤器不依赖于data属性中的变量,可以接受额外参数,可以是临时变量

2020-07-05 09:23:51 46

原创 Vue监听器属性watch

监听器属性使用watch来响应数据的变化一般用于异步或者开销较大的操作watch 中的属性 一定是data 中 已经存在的数据当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听 <div id="app"> <div> <span>名:</span> <span>

2020-07-05 08:48:34 47

原创 Vue计算属性 computed

计算属性 computed模板中放入太多的逻辑会让模板过重且难以维护 使用计算属性可以让模板更加的简洁计算属性是基于它们的响应式依赖进行缓存的computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 <div id="app"> <!-- 当多次调用 reverseString 的时候 只要里面的 num 值不改变 他会把第一次计算的结果直接返回

2020-07-05 08:35:41 58

原创 Vue过滤器filter

过滤器Vue.js允许自定义过滤器,可被用于一些常见的文本格式化。过滤器只能用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由“管道”符号指示支持级联操作过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本全局注册时是filter,没有s的。直接通过Vue对象调用而局部过滤器是filters,是有s的,与el,data,methods同级1.全局下使用//在全局下使用过滤器 <div id="app">

2020-07-02 08:51:20 91

原创 Vue循环渲染&key的原理

v-for用于循环的数组里面的值可以是对象,也可以是普通元素 <ul id="example-1"> <!-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组--> <li v-for="item in items"> {{ item.message }} </li> </

2020-07-02 08:36:42 129

原创 Vue条件渲染

1.v-if使用场景1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素2- 进行两个视图之间的切换 <div id="app"> <!-- 判断是否加载,如果为真,就加载,否则不加载--> <span v-if="flag"> 如果flag为true则显示,false不显示! </span> </div>

2020-07-02 08:20:10 25

原创 vue常用事件绑定

v-on用来绑定事件的形式如:v-on:click 缩写为 @click;v-on事件函数中传入参数<body> <div id="app"> <div>{{num}}</div> <div> <!-- 1、如果事件直接绑定函数名称,那么默认会传递事件对象作为事件函数的第一个参数 --> <button v-on:click='h

2020-07-01 10:29:33 204

原创 vue数据绑定指令

指令1.什么是指令本质就是自定义属性(data-xxx)Vue中指定都是以 v- 开头2.v-cloak防止页面加载时出现闪烁问题–vue是先显示插值表达式,然后迅速替换。v-cloak指令的用法1、在style中提供样式 [v-cloak]{ display: none; }2、在插值表达式所在的标签中添加v-cloak指令v-cloak背后的原理:先通过样式隐藏内容,然后在内存中进行值的替换,替换好之后再显示最终的结果 <

2020-06-30 19:52:03 46

原创 egg文件上传

egg文件上传1.先在 config 文件中启用 file 模式// config/config.default.jsconfig.multipart = { mode: 'file',};现在前端发的不是字段,而是大量的二进制数据。(multipart在前端的表单出现过)后端开启文件解析模式2.前端提交文件文件常常用post请求,因为post才可以携带大量的参数当表单提交文件时,要注意加上 enctype=“multipart/form-data”,把文件打包成二进制数据交到后端

2020-06-30 08:39:36 106

原创 数据库----sql语句

数据库----sql语句新增:语法:insert into <表名> [列名] values <列值>注意:1.字段没有顺序要求,后面的值必须要和字段一一对应2.文本类型对应的值需要加 引号,数字不需要引号。3.字段可以省略。如果省略表名,将依次插入所有列修改:语法:update <表名> set <列名=更新值> [where <更新条件>]注意:1. set后面可以紧随多个数据列的更新值(非数字要引号);where子句是可

2020-06-30 08:36:22 29

原创 模块化开发

为什么要使用模块化的标准进行开发呢如果我们写一个大型点的案例,这大型的案例代码肯定是比较多的,如果我们臃肿的写在一个js文件里面,那会使得我们我们文件体积非常大,代码量非常的多,结构显得很混乱(详情看第一天的作业)。那么我们可以使用模块化,还给我们的项目进行模块化的区分(把不同的功能写在不同的文件夹当中),这样写的好处我们可以让模块复用性,减少代码的臃肿,为了我们在一次写项目的时候可以减少开发时间和提高效率。每一个js文件都是一个模块在node.js 当中每一个js文件就是一个模块,其中每个模块他都

2020-06-30 08:26:24 57

原创 跨域配置

跨域配置什么是跨域当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域1.在本服务器访问本服务器的网址,就不存在跨域。2.如果在本地系统中打开的网页,需要请求别的服务器,因为协议不同,就存在跨域了。3.跨域做网络请求就会报错—“Access-Control-Allow-Origin”解决跨域1.jsonpJSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。核心思想:网页通过添

2020-06-30 08:25:21 33

原创 常见网络攻击类型

常见网络攻击类型XSS(Cross-site scripting)跨站脚本攻击服务器对客户端的输入检测不严格 ,导致客户端输入的恶意JAVASCRIPT代码被植入到HTML代码中,这些JAVASCRIPT代码得以执行,实现一些特殊的目的------“你害别人”。当其它用户浏览该网站时,这段HTML代码会自动执行,从而达到攻击的目的。如,盗取用户Cookie、破坏页面结构、重定向到其它网站等。过滤:替换:转义字符限制:限制输入CSRF(Cross-site request forgery)跨

2020-06-30 08:23:14 96

原创 XMLHttpRequest对象

XMLHttpRequest一、XMLHttpRequest对象是AJAX的技术基础。“异步JavaScript与XML(AJAX)是一个专用术语,用于实现在客户端脚本与服务器之间的数据交互过程。这一技术的优点在于,它向开发者提供了一种从Web服务器检索数据而不必把用户当前正在观察的页面回馈给服务器。与现代浏览器的通过存取浏览器DOM结构的编程代码 (JavaScript) 动态地改变被显示内容的支持相配合,AJAX让开发者在浏览器端更新被显示的HTML内容而不必刷新页面。”---------即:XML

2020-06-30 08:22:09 32

原创 node.js中MVC模式应用

node.js中MVC模式应用全称Model(模型)-View(视图)-Controller(控制器),这是一种开发模式,他的好处是可以将界面和业务逻辑分离.//以下是看到的比较能理解的例子views视图 index<div class="form-group"> <label for="exampleInputFile">File input</label> <input type="number" id="numbertxt" class

2020-06-30 08:20:25 46

原创 get/post 请求的发送与处理
原力计划

get/post 请求的发送与处理简单区别GET和POST都是用于发送HTTP请求的方式,而且是最常用的方式。HTTP的全称:超文本传输协议(HyperText Transfer Protocol),是一种发送和接收HTML页面的方法。以前简单学了HTTP协议,只知道有这两种方式可以发送请求,但不知道它们的异同。课上了解到的最直观的区别就是:1.GET把参数包含在URL中,POST通过request body传递参数。2.语义上的区别,get用于获取数据,post用于提交数据。3.get参数有长

2020-06-30 08:18:14 53

原创 js事件循环队列

事件循环队列JavaScript是什么是一个单线程、非阻塞、异步、解释型的脚本语言。那是怎么实现非阻塞、异步的?这就涉及到了浏览器的事件循环机制。关于执行中的线程:1、问:JavaScript被浏览器执行为什么是单线程?答:JavaScript 是浏览器脚本语言,它可以操纵 DOM ,可以渲染动画,可以与用户进行互动,如果是多线程,执行顺序无法预知,操作以哪个线程很难预知。2、主线程:也就是 js 引擎执行的线程,这个线程只有一个,页面渲染、函数处理都在这个主线程上执行。工作线程:也称幕后线程

2020-06-29 00:34:50 118 1

原创 NodeJs常用模块详解
原力计划

NodeJs模块http模块http 模块主要是用于创建一个能够处理和响应 http 响应的服务使用方法如下:// 1. 引入http模块const http = require("http");// 2. 创建http服务 并监听端口, 这里的端口可以修改http.createServer((request, response) => { response.end('hello node');}).listen(3000);//此时,用浏览器访问 127.0.0.1:30

2020-06-29 00:32:08 87

原创 Node是什么?

一.Node是什么?1.Node.js是一个JavaScript运行时环境(可以解析和执行JavaScript代码)2.现在的JavaScript可以完全脱离浏览器来运行,一切都归功于Node.js3.浏览器中的JavaScript包括EcmaScript、BOM、DOM4.Node.js中的JavaScript :没有BOM、DOM,用EcmaScript进行编码,主要是在Node这个JavaScript执行环境中为JavaScript提供一些服务器级别的API操作(例如文件读写、网络服务的构建、

2020-06-29 00:27:02 29

原创 webpack入门保姆级指南

一、安装1.全局安装npm install webpack webpack-cli -gps:webpack:做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。2.项目下安装npm install webpack webpack-cli --save-devps:即,先在全局装一次,以后每次在项目下再装一次。"–save-dev"的缩写为“-D”而”–save“

2020-06-29 00:23:39 43

原创 egg 连接mysql数据库

安装与配置安装对应的插件 egg-mysqlnpm i --save egg-mysql开启插件:// 在config/plugin.js配置exports.mysql = { enable: true, package: 'egg-mysql',};配置数据库:// config/config.default.js config.mysql={ client:{ host:'localhost', port:'3306', .

2020-06-08 20:21:02 61

原创 egg--入门&目录结构

接下来,我们来看一下egg的目录结构egg-project├── package.json -- 框架配置,依赖├── app.js (可选) -- 用于自定义启动时的初始化工作├── agent.js (可选) -- 代理(同上)├── app| ├── router.js -- 用于配置 URL 路由规则| ├── model -- 用于放置领域模型│ | └── us...

2020-06-08 20:15:01 55

原创 解决js小数运算精度丢失

//说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。//调用:accAdd(arg1,arg2)//返回值:arg1加上arg2的精确结果function accAdd(arg1,arg2){ var r1,r2,m; try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} try{r2=arg2.toString().split(".")[1].length}c.

2020-05-28 08:58:06 114

原创 css复习-弹性盒子

1.弹性容器(Flex container)包含着弹性项目的父元素。通过设置 display属性的值为 flex或 inline-fle来定义弹性容器。2.弹性项目(Flex item)弹性容器的每个子元素都称为弹性项目。弹性容器直接包含的文本将被包覆成匿名弹性单元。3.轴(Axis)每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。注意:主轴与侧轴的概念主轴就是弹性盒子子元素沿着排列的轴..

2020-05-25 21:15:33 66

原创 css复习--定位

css定位有四种不同类型,position值分别为:static, relative,absolute,fixed1. relative(相对定位):相对定位的偏移参考元素是元素本身,不会使元素脱离文档流。元素的初始位置占据的空间会被保留。相对定位元素常常作为绝对定位元素的父元素。并且定位元素经常与z-index属性进行层次分级尽管会使元素产生了偏移,但是文字并没有填补它的原来的位置,可以看出相对定位元素没有脱离文档流,原来的位置依然会被保留。2. absolute(绝对定位)绝对定位元素以父辈

2020-05-25 21:08:16 82

空空如也

空空如也

空空如也

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

TA关注的人 TA的粉丝

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