一点一滴_2b勿扰_CSDN博客-前端,.Net通用工具,(持续更新)vue基础篇领域博主

原创 (精华2020年6月24日更新)asp.net core3.1实战篇 RabbitMQ的使用三(EasyNetQ的高级用法一)

在.net core控制台安装Install-Package EasyNetQ定义公共消息类namespace Messages{ public class TextMessage { public string Text { get; set; } }}一：发布者代码using System;using EasyNetQ;using Messages;namespace Publisher{ class Program

2020-06-24 15:49:47 9146

原创 (精华2020年6月24日更新)asp.net core3.1实战篇 RabbitMQ的使用二(环境搭建和初步使用)
原力计划

上篇已经安装完Erlang，继续安装RabbitMQ1. RabbitMQ是啥RabbitMQ是使用Erlang编写的一个开源的消息队列，本身支持很多的协议：AMQP，XMPP, SMTP, STOMP，也正因如此，它非常重量级，更适合于企业级的开发。同时实现了Broker构架，这意味着消息在发送给客户端时先在中心队列排队。对路由，负载均衡或者数据持久化都有很好的支持。它支持开放的高级消息队列协议 (AMQP，Advanced Message Queuing Protocol)，从根本上避免了生产厂商

2020-06-24 08:56:24 10232

原创 (精华2020年6月24日更新)asp.net core3.1实战篇 RabbitMQ的使用一(安装Erlang)

步骤一：下载erlang下载地址：64位：http://erlang.org/download/otp_win64_20.3.exe32位：http://erlang.org/download/otp_win32_20.3.exe步骤二：安装erlang直接点击exe安装，安装路径自己配的要记住在哪里，最好自己指定一个安装目录，等等会用到。步骤三：配置环境变量配置ERLANG_HOME环境变量，其值指向erlang的安装目录(就是步骤二的路径)。另外将 ;%ERLANG_HOME%\bin 加

2020-06-24 08:33:54 10016

原创 (精华2020年6月21日更新)Angular实战篇 ngrx/store状态管理的使用

首先自然是安装相关包yarn add @ngrx/store定义statu.tsexport interface TaskList { id: number; text: string; completed: boolean;}//初始状态export const initCount = 0; //state export const TASKSAll: TaskList[] = [ { id: 1, text: 'C#', completed: false },

2020-06-21 17:43:18 12902

原创 (精华2020年6月17日更新)asp.net core3.1实战专题 Worker Service构建系统服务实现任务调度

使用vs2019创建Worker Service程序首先nuget安装Microsoft.Extensions.Hosting.Windows在Program中添加UseWindowsService()public class Program { public static void Main(string[] args) { CreateHostBuilder(args).Build().Run(); }

2020-06-17 13:57:47 16222

原创 (精华2020年6月14日更新)Angular实战篇路由懒加载

子模块 article-routing.moduleimport { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import {ArticleComponent} from './article.component';import {ArticlelistComponent} from './components/articlelist/articlelist.comp

2020-06-14 12:43:47 10759

原创 (精华2020年6月11日更新)Angular实战篇模块的使用

首先先建模块ng g modul 目录在mymodul下先建组件ng g components 目录在模块中暴露组件给其他模块使用import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { UserComponent } from './user.component';import { AddressComponent } from './componen

2020-06-11 23:25:16 15463

原创 (精华2020年6月10日更新)Angular实战篇路由的传参

第一种html<ul> <li *ngFor="let item of newsList; let key = index;"> <a [routerLink]="['/newsdetail']" [queryParams]="{aid:item.id}">{{key}}--{{item.name}}</a> </li></ul><bu

2020-06-10 00:17:33 16200

原创 (精华2020年6月10日更新)Angular实战篇路由的使用

app-routing.module.tsimport { NgModule } from '@angular/core';import { Routes, RouterModule } from '@angular/router';import { HomeComponent } from './components/home/home.component';import { WelcomeComponent } from './components/home/welcome/welcome.

2020-06-10 00:11:10 15442

原创 (精华2020年6月9日更新)Angular实战篇 axio的封装

首先先建个axio服务ng g service 文件目录ts文件import { Injectable } from '@angular/core';import axios from 'axios';import Qs from 'qs';axios.defaults.timeout = 5000;import { environment } from '../../environments/environment';console.log(environment.baseURL);

2020-06-09 00:07:18 16558

原创 (精华2020年6月9日更新)Angular实战篇 http请求模块的使用

首先模块引入import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import {FormsModule} from '@angular/forms';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component'

2020-06-07 23:08:28 15750

原创 (精华2020年6月7日更新)Angular实战篇异步数据流RxJS的使用

组件tsimport { Component, OnInit } from '@angular/core';import { CommonService } from '../../services/common.service';import { Observable } from 'rxjs';import { map, filter } from 'rxjs/operators';@Component({ selector: 'app-home', templateUrl: '.

2020-06-07 22:51:09 14172

原创 (精华2020年6月7日更新)Angular基础篇生命周期详解

import { Component, OnInit, Input, EventEmitter } from '@angular/core';// v-on:event = 'getData()'@Component({ selector: 'app-lifecycle', templateUrl: './lifecycle.component.html', styleUrls: ['./lifecycle.component.less'], inputs: ['titleV:tit

2020-06-07 18:01:15 15940

原创 (精华2020年6月7日更新)Angular基础篇父组件到子组件传参

父组件html<div class="content"> <p>我是home页面</p> <app-header [stitle]='title' [category]='category' [homeWork] = 'homeWork' [homepage]='this' ></app-header></div>子组件tsimport { Component, O

2020-06-07 10:02:48 16172

原创 (精华2020年6月7日更新)Angular基础篇子组件到父组件传参

html<div #myBox>我是一个dom节点</div><app-header #header></app-header><button type="button" (click)='getChildProp()'>获取子组件header的属性</button><button type="button" (click)='getChildMethod()'>获取子组件header的方法</button&g

2020-06-07 09:56:12 15772

原创 (精华2020年6月7日更新)Angular基础篇 DOM的操作

TS文件import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-transition', templateUrl: './transition.component.html', styleUrls: ['./transition.component.less']})export class TransitionComponent implements OnInit { flag:

2020-06-07 07:52:06 15856

原创 (精华2020年6月6日更新)Angular基础篇服务services的使用

首先输入如下命令ng g services 目录名生成import { Injectable } from '@angular/core';@Injectable({ providedIn: 'root'})//提供一个可以注册的服务export class StorageService { count: number = 1; constructor() { } //将数据写入localStorage set(key: any, value: any) {

2020-06-06 00:18:51 15811

原创 (精华2020年6月4日更新)Angular基础篇管道,(click),(keydown),(keyup)的使用

<h1>---------------管道-------------</h1>{{today | date:'yyyy-MM-dd HH:mm ss'}}<h1>---------------事件(click)-----------------</h1><button (click)="run()">执行事件</button><button (click)="setData($event)">执行方法改变属性里面的

2020-06-04 23:58:30 15751

原创 (精华2020年6月4日更新)Angular基础篇 ngClass,ngStyle的使用

<h1>属性[ngClass]</h1><div [class]="{'blue':flag,'red':!flag}">ngclass演示</div><!--

2020-06-04 23:53:59 15452

原创 (精华2020年6月4日更新)Angular基础篇 ngFor,ngIf,ngSwitch的使用

<h1>--------------循环 ngFor---------------</h1><ul> <li *ngFor="let item of list;let key=index">{{key}} -- {{item}}</li></ul><ul> <li *ngFor="let item of list">{{key}} -- {{item}}</li></ul&g

2020-06-04 23:50:58 15484

原创 (精华2020年6月4日更新)Angular基础篇属性绑定[]的使用

ts文件import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-news', templateUrl: './news.component.html', styleUrls: ['./news.component.less']})export class NewsComponent implements OnInit { //定义普通数据 title:string='我是新闻组件

2020-06-04 23:41:22 14364

原创 (精华2020年6月4日更新)TypeScript中装饰器的使用

类装饰器//----------------------基本使用--------------------------- function logClass(param: string) { console.log(param) //ruanmou return function (target: any) { // console.log(target); //target:当前类 HttpClient con

2020-06-04 22:48:12 15471

原创 (精华2020年6月3日更新) TypeScript中泛型的使用

泛型的使用//-------------------泛型方法--------------------function getData1(value: string): string { return value;}function getData2(value: number): number { return value;}//any 放弃了类型检查，传入的参数类型和返回参数类型不一致function getData3(value: any): any { ret

2020-06-03 23:59:24 15564

原创 (精华2020年6月3日更新) TypeScript中接口详解

非接口约束function printA(labelObj:{label:string}){ console.log(labelObj);}printA({ label:'你好'})//跳过额外字段的检测// 第一种断言：printA({ label:'你好', name:'laney'} as {label:string})//第二种方式：添加字符串的索引签名function printB(labelObj:{label:string,[pr

2020-06-03 23:43:18 14625

原创 (精华2020年6月3日更新) TypeScript中类的使用(封装，继承，多态)

基本使用class Cat { name:string; color:string; constructor(name1:string,color:string){ this.name = name1; this.color= color } eat(){ console.log('eat'); }}var c1 = new Cat('哈哈','黄色');继承class Animal { n

2020-06-03 00:00:54 14925

原创 (精华2020年6月2日更新) TypeScript函数详解

//函数声明function run():string{ return 'run'; // return 123; //错误}//函数表达式var run2=function test():number{ return 123;}alert(run2());//方法传参function getInfo(name:string,age:number):string{ return `${name} ----${age}`;}alert(getInfo(

2020-06-02 23:34:27 14642

原创 (精华2020年6月2日更新) TypeScript的数据类型

第一种：布尔类型（boolean）var flag:boolean=true;flag = false; //正确flag = '你好typescript'; //错误第二种：数字类型（number）var num: number = 1314;num = 4131;//正确num = '你好typescript'; //错误第三种：字符串类型(string)var str: string = '你好typescript';str = '你好js';str = 1314; //

2020-06-02 22:50:16 15429

原创 (精华2020年6月2日更新) TypeScript的基础使用

首先安装npm i -g typescript新建index.ts文件var a=123;在vscode终端运行tsc index.ts就可以生成index.js文件生成typescript配置文件tsconfig.jsontsc init{ "compilerOptions": { /* Basic Options */ // "incremental": true, /* Enable incremental compilat

2020-06-02 22:24:56 14368

原创 (精华2020年5月31日更新) react实战篇 react配置详解

以往的方式都是暴露配置文件来配置less，下面推荐一个craco，可以不需要暴露配置，进行配置。首先安装cracoyarn add @craco/craco在根目录下添加craco.config.js文件const CracoLessPlugin = require('craco-less');//配置lessmodule.exports = { plugins: [{ plugin: CracoLessPlugin, options: {

2020-05-31 10:50:41 15821

原创 (精华2020年5月31日更新) react基础篇手写ssr服务端渲染

共用部分import React ,{useState} from 'react'import {connect} from 'react-redux'import {getIndexList} from '../store/index'const Index = (props) => { let [count,setCount] = useState(1) return ( <div> <h1>服务端渲染<

2020-05-31 07:30:10 15782

原创 (精华2020年5月28日更新) react基础篇虚拟dom的渲染机制和性能调优

下面几种写法等同//-------------------------1----------------------------- function Table ({rows}) { return ( <table> { rows.map(row=>( <tr>

2020-05-28 23:00:37 14647

原创 (精华2020年5月27日更新) react基础篇 setstate原理详解

先上张图代码// partialState 部分stateReactComponent.prototype.setState = function (partialState, callback) { invariant( typeof partialState === 'object' || typeof partialState === 'function' || partialState == null, 'setState(...): takes an o

2020-05-27 23:38:26 14751

原创 (精华2020年5月27日更新) react基础篇 react-hooks的useReducer的使用

import React , {useReducer} from 'react'// (state,action)=>newStateconst UseReducer = ()=>{ const reducer = (state,action) =>{ if(action.type === 'add'){ return { ...state, count:state.coun

2020-05-27 23:10:07 14670

原创 (精华2020年5月27日更新) react基础篇 react-hooks的useEffect的使用

import React , {useEffect,useState} from 'react'const UseEffect = ()=>{ const [loading,setLoading] = useState(true) useEffect(()=>{ setTimeout(()=>{ setLoading(false) },2000) }) return ( loadin

2020-05-27 23:07:34 15479

原创 (精华2020年5月25日更新) react基础篇 react-hooks的useContext用法

import React , {useContext} from 'react'const UseContext = ()=>{ const UseContextCon = React.createContext({}) const Son = () =>{ const {name} = useContext(UseContextCon) return ( <p>我是son组件我的名字是{nam

2020-05-25 00:12:50 14684

原创 (精华2020年5月25日更新) react基础篇 react-hooks的useState用法

import React , {useState} from 'react'const addCon = ()=>{ console.log(useState(0)); const [count,setCount] = useState(0) const handelAdd = () =>{ let newCount = count; setCount(newCount+=1) } return (

2020-05-25 00:11:30 15458

原创 (精华2020年5月24日更新) react基础篇 redux的使用和react-redux的使用

redux的核心apicreateStore()创建包含指定reducer的store对象store对象redux库最核心的管理对象内部维护着 state reducer对象核心方法getState()dispatch(action)subscriberedux的三个核心概念action标识要执行行为的对象包含两个方面的属性type 标识属性值是字符串唯一必要的属性xxx 数据属性值类型是任意的可选属性const action ..

2020-05-24 19:48:05 15524 1

原创 (精华2020年5月24日更新) react基础篇父组件到孙组件跨级传参

新版：跨级传参最主要是避免每层赋值，也避免用到dvaimport React from 'react'const {Provider,Consumer} = React.createContext('default')export default class ContextDemo extends React.Component { state={ newContext:'createContext' } render() { const {newCon

2020-05-24 11:48:22 15441

原创 (精华2020年5月24日更新) react基础篇 ref的三种方式

import React from 'react'export default class RefDemo extends React.Component { constructor() { super() this.objRef = React.createRef()//第一种 // { current: null } } componentDidMount() { // console.log(`span1: ${this.refs.ref1.text

2020-05-24 11:39:28 14719

原创 (精华2020年5月24日更新) react基础篇 react-router-dom的基本使用

首先安装 npm i react-router-dom到index.js中加入如下代码import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';import {HashRouter,BrowserRouter} from 'react-route

2020-05-24 10:11:05 14793

空空如也

空空如也

空空如也