fiona_0427-CSDN博客

原创 linux 安装nginx 开机自启

一、安装nginx1.到【nginx: download】下载，上传压缩包到非【/usr/local/】目录解压：tar -zxvf nginx-1.20.2.tar.gz -C /2.cd nginx-1.20.23../configure --prefix=/usr/local/nginx-1.20.2 --with-http_ssl_module --with-http_stub_status_module#配置configure --prefix 代表安装的

2022-04-11 14:47:12 3009

原创 linux 部署 mongodb并添加开机自启

在/usr/local/ 创建文件夹mongoDB 上传mongodb安装文件到Linux上的/usr/local/目录下，并且tar -zxvf mongodb-linux-i686-3.2.13-rc0.gz -C /usr/local/mongoDB 重命名回到数据库目录下cd /usr/local/mongoDB/mongodbserver1.创建数据库文件夹cd /usr/local/mongoDB/mongodbservermkdir datacd /us..

2022-04-09 00:58:22 1366

原创 react---antd Table组件滚动加载数据的实现

import React, { Component } from "react";import { Table } from "antd";import PropTypes from "prop-types";class TableBar extends Component { constructor(props) { super(props); this.onScrollEvent = this.onScrollEvent.bind(this); } onScroll...

2021-05-26 14:12:38 1179

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

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

2020-08-11 18:18:22 1473

原创 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 183

转载 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 497

原创 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 449

原创 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 439

原创 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 181

原创 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 182

原创 Vuex

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

2020-07-14 18:16:38 82

原创 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 294

原创 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 105

原创 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 176

原创 Vue组件插槽

组件插槽组件的最大特性就是复用性，而用好插槽能大大提高组件的可复用能力匿名插槽 <div id="app">  <alert-box>有bug发生</alert-box> <alert-box>有一个警告</alert-box> <aler

2020-07-05 21:39:20 189

原创 Vue基础组件入门

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

2020-07-05 21:21:28 115

原创 Vue自定义指令

自定义指令内置指令不能满足我们特殊的需求Vue允许我们自定义指令Vue.directive 注册全局指令<input type="text" v-focus><script>// 注意点： // 1、在自定义指令中如果以驼峰命名的方式定义如 Vue.directive('focusA',function

2020-07-05 21:15:07 76

原创 Vue生命周期函数

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

2020-07-05 12:36:36 710

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

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

2020-07-05 09:23:51 168

原创 Vue监听器属性watch

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

2020-07-05 08:48:34 679

原创 Vue计算属性 computed

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

2020-07-05 08:35:41 827

原创 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 171

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

v-for用于循环的数组里面的值可以是对象，也可以是普通元素 <ul id="example-1">  <li v-for="item in items"> {{ item.message }} </li> </

2020-07-02 08:36:42 448

原创 Vue条件渲染

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

2020-07-02 08:20:10 78

原创 vue常用事件绑定

v-on用来绑定事件的形式如：v-on:click 缩写为 @click;v-on事件函数中传入参数<body> <div id="app"> <div>{{num}}</div> <div>  <button v-on:click='h

2020-07-01 10:29:33 955

原创 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 859

原创 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 864

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

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

2020-06-30 08:36:22 315

原创模块化开发

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

2020-06-30 08:26:24 137

原创跨域配置

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

2020-06-30 08:25:21 244

原创常见网络攻击类型

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

2020-06-30 08:23:14 286

原创 XMLHttpRequest对象

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

2020-06-30 08:22:09 626

原创 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 193

原创 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 1197

原创 js事件循环队列

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

2020-06-29 00:34:50 1051 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 583

原创 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 3367

空空如也

空空如也