一点一滴

在.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

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

步骤一：下载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 加

首先自然是安装相关包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 },

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

子模块 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

首先先建模块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

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

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.

首先先建个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);

首先模块引入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'

组件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: '.

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

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

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

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:

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

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

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

<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

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='我是新闻组件

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

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

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

基本使用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

//函数声明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(

第一种：布尔类型（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; //

首先安装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

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

共用部分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>服务端渲染<

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

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

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

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

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

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 (

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

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

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

首先安装 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

首先npm i workbox-webpack-plugin在到webpack配置文件中添加插件const WorkboxWebpackPlugin = require('workbox-webpack-plugin')plugins: [ new MiniCssExtractPlugin({ filename: '[name].css' }), new WorkboxWebpackPlugin.GenerateSW({

import React from 'react';import logo from './logo.svg';import './App.css';class App extends React.Component{ constructor(props){ super(props) this.state = { msg:'第一次的消息' } } componentWillMount(){ console.log(this.state.msg);

app.jsimport React from 'react'import TodoMain from './components/TodoMain';import TodoHeader from './components/TodoHeader';import TodoFooter from './components/TodoFooter';class App extends React.Component{ constructor(props){ super(props)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>todoList</title></head><body> <div id=

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>prop</title></head><body> <div id="app"&

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>this</title></head><body> <div id="app

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单组件</title></head><body> <div id="app

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello</title></head><body> <div id="ap

import webSocket from '../webSocket.js';export default { isIosAndroid() { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端 isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

页面缓存后，页面是不会变化的。要使缓存页面变化可以利用路由的钩子函数beforeRouteLeave。<template> <div </div></template><script>export default { methods: { }, beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` console

MYvue.js 主要作用监听属性变化class MYvue { constructor(options) { this.$options = options; this.$data = options.data; //数据劫持 this.observe(this.$data); this.$el = options.el; //包含Watcher创建 new Complie(optio

插件开发以vue-router为例import Vue from 'vue'// import VueRouter from 'vue-router'import VueRouter from '../MYRouter/index.js'Vue.use(VueRouter)// 执行install方法const routes = [ { path:'/', redirect:'/goods' }, { path: '/goods', name: 'g

const state = { country: '中国'}const getters = { getCountry(state) { return state.country }}const mutations = { updateCountry(state, payload) { state.country = payload.country; }}//用来管理mutationsconst actions = { updateCountry({

vuex的基本使用store.jsimport Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);//定义属性var state = { count:6, country:'中国'};//定义gettersvar getters = { count(state){ return state.count }, isEvenOrOdd(state){ return

首先在template加如下代码<el-calendar v-model="日期"> <template slot="dateCell" slot-scope="{date, data}"> <div class="date-cell" :class="data.isSelected ? 'is-selected' : ''"> <div class="calendar-day">

router.jsimport Vue from "vue";import VueRouter from "vue-router";Vue.use(VueRouter);import home from '../pages/home.vue';import news from '../pages/news.vue';var allRoutes = [{ path:'/login', name:'login', meta:{ title:'登陆'

首先安装npm i cross-env package.jsom"scripts": { "test":"cross-env scene=test webpack --config webpack.config.js", "dev": "cross-env scene=dev webpack-dev-server --config webpack.config.js", "build": "cross-env scene=prod webpack --config webpa

新版vue脚手架中webpack已经封装好看不见，需要vue.config.js代替配置module.exports = { publicPath:'/wuhan', //部署应用包时的基本 URL。用法和 webpack 本身的 output.publicPath 一致 outputDir:'dist3', //打包路径地址,Default: 'dist' ,代替 output.path assetsDir:'assets1', //放置生成的静态资源 (js、css、img、

package.json的启动"scripts": { "build":"rimraf dist && webpack --config webpack.config.js --mode production", "dev": "webpack-dev-server --config webpack.config.js" }基本共用配置文件webpack.common.jsvar webpack = require('webpack');var path = r

首先先上脚手架目录webpack-demowebpack-demo|-index.html|- src---- |-main.js 入口文件------|-App.vue vue文件|-package.json 工程文件|-webpack.config.js webpack配置文件|-.babelrc Babel配置文件安装如下包npm install vue -Snpm install webpack -Dnpm install webpack-cli -D

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>权限控制- filters</title> <style> .active { font-size: 20px; color: #ff7300; text-decoration: none; } .main-menu a { display

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>路由基本用法</title> <style> /* .router-link-active{ font-size:20px; color:#ff7300;...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slot内容分发</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri...

第三个vue实例实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>非父子组件间的通信</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>父子组件传参组件<...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引用模板</t...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定义组件的方式<...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动画</titl...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习：自定义指令实例（元素拖动）</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>监视数据的变化：$wa...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue实例的属性和方...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&...

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

地址为本地，需要请求数据科研自己搭建后端api，或者用mock<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>发送AJAX请求</title> <script src="https://cdn.jsde...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>自定义过滤器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>模板</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>class和styl...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>属性绑定和属性的简写</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></sc...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>键盘事件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&g...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件冒泡和默认行为</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scr...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>事件简写和事件对象$event</title> <script src="js/vue.js"></script> <script> wi...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>练习：用户管理</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></scri...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常用指令：v-show v-if</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">&...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常用指令：v-on</title> <!-- 事件简写和事件对象$event --> <script src="https://cdn.jsdelivr.net...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>常用指令：v-for</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></s...

test

// nodejs+express+jwt-simplelet jwt = require('jwt-simple');//秘钥let secret = "laney";let time = 10;let tokenExpiresTime = 1000 * 60 * 60 * 24 * 7;//token过期时间,毫秒为单位， 7天 module.exports = { /* ...

mysql包的数据库连接首先安装npm i mysqlconst mysql = require("mysql2");/*建立数据库链接 连接配置 */// createPool//getConnection// createPool 连接池 --- getConnection 获取到连接对象 操作后建议主动的释放连接// createConnection方法创建连接对...

const fs = require("fs");function get(key) { fs.readFile("./db.json", (err, data) => { const json = JSON.parse(data); console.log(json[key]); });}function set(key, value) { fs.rea...

后端var connect = require('connect');var bodyParser = require('body-parser'); //body解析var cors = require('cors');const url = require('url');const qs = require('qs');const path = require('path');c...

ws的使用前端代码人物一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...

HTTP协议var http = require('http');var server = http.createServer(); // server eventEmitterserver.on('request', function (request, response) {console.log('666666666666666666') }).listen(9080, func...

#region AES加密 /// <summary> /// AES加密 /// </summary> /// <param name="source"></param> /// <param name="key">密钥</param> ...

安装如下包npm i js-xlsx项目中引用在按钮中执行exportList方法就好了，表头合并null必须占位//导出排柜汇总表 exportList() { salesApi.cabinetExpolexcel().then(response => { console.log(response.data.data) }); ...

<el-table :data="list" max-height="700" border style="width: 100%" @cell-click="tabClick" :row-class-name="tableRowClassName" > <el-table-column ...

import Vue from "vue";// v-dialogDrag: 弹窗拖拽+水平方向伸缩/** 使用方法* 将以下代码复制到一个js文件中，然后在入口文件main.js中import引入即可；* 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。* 给dialog设置 :close-on-click-mo...

表格导入导出首先安装：npm install vue-json-excel//表格导出npm install vue-xlsx-table//表格导入在vue的main.js文件中加入全局配置//导入表格import vueXlsxTable from 'vue-xlsx-table'Vue.use(vueXlsxTable, {rABS: false})//导出表格impor...

Proxy 对象 get，set的应用let handel = { get(target,key){ console.log(key); if(key[0] === "_"){ throw new Error('内部属性禁止外部访问') } return...