vue-router路由、mixin混入、vue-resource、axios、计算属性watch、moment.js、vuex、vue-cli、数据双向绑定、搭建vue环境、vue实例、配置启动项

路由vue-router介绍:

	 // 1.前端路由核心:锚点值的改变,根据不同的锚点值,渲染指定dom位置的不同数据。// 2.vue中,模板数据不是通过ajax请求的,而是调用函数获取到模板内容// 3.vue-router使用方式:// 1.下载路由组件  :  npm i vue-router -S// 2.在路由router.js文件中引入vue-router组件  :  import Router from 'vue-router'-----(引入前确保引入:import Vue from 'vue')// 3.在路由router.js文件中安装插件,挂载属性 :Vue.use(Router)// 4.在路由router.js文件中创建路由对象,并配置路由规则后导出路由router.js文件:export default new Router({routers:[path:'/',name:'vue组件中配置属性name的值',component:导入的组件名]})// 5.将路由router.js文件导入main.js文件中,并在vue实例中使用:new Vue({router,render: h => h(App)}),注意,在main.js 文件中接收router时,先导入router。// 7.在app.vue中留坑,实现组件渲染:<router-view></router-view>  或者 <router-view/>// 4.router-link的使用:// <router-link :to="{name:'路由文件中路由name属性的值'}"></router-link> 或者 this.$router.push({path:''})-----路由跳转标签,相当于a标签,有name属性,改变锚点值,正常跳转,利于维护// <router-link to='路径'>----------没有name属性,改变锚点值,不会正常跳转,后面必须是具体路径// <router-link :to="{name:'music',query:{id:index}}"></router-link>-----router-link 中query:{id:index}是路径?后面传的参数,在跳转的新页面created属性中通过this.$router.query可以拿到值// 编程式路由-----------通过js函数来实现页面的跳转 // this.$router.go(1)----------根据浏览器记录前进后退,-1表示上一次浏览记录,1表示下一次浏览记录// this.$router.push('/url')----------直接跳转到某个页面显示 // this.$router.push({name:'路由配置中name属性的值'}) // this.$router.push({name:'music',query:{id:2,name:2},params:{name:3}}) // this.$router是具备功能的对象,而this.$route是不具备功能的,它支持只读。// 重定向路由:{path:'/',redirect:'/home'}---这种不方便维护,我们还是给它加上name属性,便于后期维护:{path:'/',redirect:{name:'路由中name属性的值'}}// 404页面处理:当输入的地址找不到时,这时可以在路由处理的最后一个配置{path:'*',component:引入的404页面组件}// 多视图路由----------此时在一个跟元素里面可以放多个坑,在路由文件配置中component变成components并且后面接的是一个对象,对象里面是路由匹配的组件:// <router-view name='naem1'>// <router-view name='naem2'>// <router-view>  --------------------{naem:'head',path:'/',components:{name1:对应组件,name2:对应组件,default:对应组件}},当留的坑里面没有设置name属性时,路由,components中配置名用default。// 嵌套路由---------路由嵌套路由,用单页应用实现多页应用,在一个引入的组件中继续留坑引入组件,页面中只有子组件发生变化:// 视图包含视图:// <router-link :to="{name:'homemusic'}">音乐</router-link>// <router-link :to="{name:'homemovie'}">电影</router-link><hr>// <router-view></router-view>// 父子级关系路由:// {//   name:'homepage',//   path:'/homepage',//   component:HomePage,//要渲染的父组件//   children:[//父组件中包含的子组件用children:[]属性,具体参考案例vuetest//     { name: 'homemusic', path: 'testmusici', component: Tmu },//     { name: 'homemovie', path: 'testmovie', component: Tmo }//   ]// }// 动态路由匹配----------路由冒号后面的路由是动态变化,不同的界面路由不同。// 命名路由和命名视图// 命名路由:------给路由定义不同的名字,根据名字进行匹配// 命名视图:------给不同的router-view定义名字,通过名字进行对应组件的渲染// 1.安装:// 1.直接下载:查看dist目录,dist目录下的文件是最新稳定版,不会同步更新到dev分支上的最新代码。// 2.CDN:引用网络资源。// 3.npm安装:npm install vue-router// 2.使用:var Vue = require('vue)// var VueRouter = require('vue-router) 或者 import VueRouter from 'vue-router'// Vue.use(VueRouter)// 3.前端路由和后端路由是不一样的。// 前端路由:路由地址是根据不同的URL地址展现不同的内容和页面,在做单页面应用,大部分页面结构不变,只改变部分内容的使用前端路由。优点:用户体验好,速度快。缺点:不利于SEO,没有合理利用缓存,单页面无法记住之前滚动的位置

原生路由实现原理:

	<body><div id="content"></div><script type="text/javascript">//监视锚点值的改变做出匹配并设置内容到对应的元素:window.addEventListener('hashchange', function() {var text = '';switch (location.hash) {case '':text = '主页';break;case '#/movie':text = '电影页面';break;}document.getElementById('content').innerHTML = text;})</script></body>

混入:

混入定义了一部分可复用的方法或计算属性,混入对象可以包含任意组件选项。组件使用混入对象后,该组件将可以使用混入对象的方法或属性,如:

	<script>// 1.定义一个混入对象:var myMixin = {data: {sayhello: 'hello'},methods: {say() {console.log($this.data.sayhello);}}};// 2.使用extend方法继承这个混入对象:var Component = Vue.extend({mixins: [myMixin] //mixins 用来混入一个混入对象});//3.实例化一个组件:var mycom = new Component();//4.在另一个实例中使用myMixin:var vm = new Vue({mxins: [myMixin],data: {names: 'jack'}});</script>

vue-resource简介:

	 // 1.Vue-resource和jQuery中ajax一样,是一个异步请求插件,官方已经停止维护了,尤雨溪推荐使用axios,vue-resource使用步骤:// 1.引用文件:网络文件:<script src='https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js'></script> 或者 下载到本地:<script src='vue-resource.min.js'></script>  或者 npm install vue-resource --save(推荐) // 2.引入:import VueResource from 'vue-resource'// 3.挂载使用vue-resource: Vue.use(VueResource) ,确保引入vue和app.vue的情况下。// 2.vue-resource的请求API是按照REST风格设计的,它提供了7种请求API:// 1.get(url,[options])// 2.head(url,[options])// 3.delete(url,[options])// 4.jsonp(url,[body],[options])// 5.post(url,[body],[options])// 6.put(url,[body],[options])// 7.patch(url,[body],[options])//全局拦截器 interceptors:-------如果一个页面中有多个请求,此时需要做一个loading效果,这时可以使用interceptors做统一处理。Vue.http.interceptors.push((request,next)=> {// 请求发送前处理逻辑:next((response) =>{// 请求发送后处理逻辑:// 根据请求状态,response参数会返回给successCallback或errorCallbackreturn response})}) //实例:注意引入vue和vue-resource:<body><div id="box"><input type="button" @click="get()" value="获取数据"></div><script>window.onload = function(){var vm = new Vue({el:'#box',data:{},methods:{get:function(){//发送get请求this.$http.get('/try/ajax/ajax_info.txt').then(function(res){console.log(res.body);    },function(){console.log('请求失败处理');});}}});}</script></body>

axios(ajax)插件介绍:

	    // 1.axios插件:--------也是异步请求插件,跨三端的框架,使用步骤:// 1.引用文件:网络文件:<script src='https://unpkg.com/axios/dist/axios.min.js'></script> 或者 npm install axios --save(推荐)// 2.引入:import Axios from 'axios' ,确保vue和app.vue的引入。// 3.给Vue原型挂载axios属性: Vue.prototype.$axios = Axios;当然axios是直接暴露在root的,直接可以使用axios.API使用。// 4.提供的API:// 1.$axios.request(options)// 2.$axios.get(url[,options])// 3.$axios.delete(url[,options])// 4.$axios.head(url[,options])// 5.$axios.options(url[,options])// 6.$axios.post(url[,data[,options]])// 7.$axios.put(url[,data[,options]])// 8.$axios.natch(url[,options])// 2.合并请求:this.$axios.all([请求1,请求2])--------将两个请求合并发送,只要有一个失败,就算失败,全体成功才算成功,这里的请求并非路径,而是通过this.$axios.post或者get的方式请求。// 3.axios()中传递对象配置进行请求:axios({method:'post',url:'url',data:{key1:value1,key2:value2}});// 4.拦截器:过滤,在一次请求中添油加醋:// this.axios.interceptors.request.use(function(config){config.headers={}})// 5.token类似cookie,且三端都可通用。//实例:<div id="app"></div><script>new Vue({el: '#app',data () {return {info: null}},mounted () {axios//链式调用.get('url').then(function(response){console.log(response);}).catch(function (error) {console.log(error);});}})</script>

计算属性watch使用:

	 // 1.引用型数据和它的属性是无法被直接监视的,需要深度监视,watch可以对单个变量进行监视,也可以深度监视。// 2.computed可以监视多个值, 并且制定返回数据,并且可以显示在页面上。// 3.watch使用:watch: {persons: {handler: function(val, oldVal) {console.log('值改变了')};deep: true}}//watch定义在vue实例之外:第一个参数表示要监听的变量,第二个为处理函数vm.$watch('message',function(newvalue,oldvalue){console.log(oldvalue+'变成了:'+newvalue);})//vue不允许在已经创建的实例上动态添加新根级响应式属性,但是可以通过全局Vue.set和Vue.delete方法:Vue.set(target,key,value);Vue.delete(target,key);

moment.js介绍:

	// 1.moment.js是操作时间的js内库。// 2.多种安装方式,这里推荐npm安装:npm install moment --save  ,当然可以直接下载下来后直接引入文件。// 3.日期格式化:// moment().format('YYYY-MM-DD HH:mm:ss')---------动态的显示当前时间,里面的参数可以控制时间的格式,具体参考官网。// moment("20120201","YYYYMMDD").fromNow()--------动态的显示过去某个时间具当前的时间过去了多久// 更多参考官网

vuex简介:

	// 1.Vuex:是一个专为Vue.js应用程序开发的全局状态管理模式,每一个组件里面的data变量都称作状态。为了方便管理其中一些变量,此时需要把里面部分变量抽出来放到Vuex里面去管理。// 在构建一个中大型的单页面应用程序时,vuex可以更好的帮助我们在组件外部统一管理状态。// 2.Vuex的核心概念:// State:唯一的数据源,数据载体,存数据的。必须定义State,它是至关重要的,每一个组件data里面的变量都称作State,Mutations是唯一可以改变State的状态的东西。// Getters:通过Getters可以派生出一些新的状态,获取数据// Mutations:更改vuex的store中的状态的唯一方法是提交mutation// Actions:Action提交的是mutation,而不是直接变更状态,Action可以包含任意异步操作。// commit:用来提交数据的修改。// Modules:面对复杂的应用程序,当管理的状态比较多时,我们需要将vuex的store对象分割成模块(modules)// 3.使用步骤: 1.下载vuex:npm install vuex -S// 2.引入vuex: import vuex from 'vue';-----确保引入vue和app.vue的情况下。// 3.挂载vuex:app.use(vuex)// 4.创建一个stroe: let store = new Vuex.Store({// state:{}----用来存数据// });

实现双向数据绑定:

	<body><input type="text" id='input1'><br><span id='span1'></span><script>var input1 = document.getElementById('input1');var span1 = document.getElementById('span1');var obj1 = {password: 123};//Object.defineProperty()用来给一个对象扩展新的属性,在控制台console里面输入obj1,即可查看新扩展的属性,参数一--------需要扩展的对象// 参数二--------需要扩展的属性// 参数三--------对扩展属性的描述Object.defineProperty(obj1, 'userNames', { //这里的两个函数是defineProperty底层提供API,如果obj1重新赋值,那么set函数就会触发,如果获取obj1中的值,那么get函数就会触发(即:当obj1发生改变时,会自动触发set和get)// value:'jack',get: function() {console.log('get init');},set: function(val) {console.log('set init');// //实现双向数据绑定:span1.innerText = val;input1.value = val;}});input1.addEventListener('keyup', function(e) {obj1.userNames = e.target.value; //把e.target.value获取键盘抬起监听到的字符赋值给obj1.userNames供Object.defineProperty中set函数使用来实现双向数据绑定});</script></body>

搭建vue环境:

	 // 1.不使用脚手架Vue环境搭建有两种方式://1.官网拷贝: <script src='https://unpkg.com/vue/dist/vue.js'></script>//2.npm安装: cnpm i vue --save  或者  npm install --global vue// 2.脚手架工具vue-cli构建SPA应用,在cmd面板自动创建一个项目的架子结构,我们只需要在对应的文件写代码即可:步骤(在node和npm的环境下):// 1.全局安装vue-cli : npm install -g vue-cli     -----当安装完后,可使用命令 : Vue --version  检查版本以确保安装成功// 2.初始化一个webpack简单模式下的demo : vue init webpack-simple demo  或者  初始化一个webpack完整的demo2 :  vue init webpack myproject    --------demo和myproject是项目文件夹名称// 3.完成上面的操作后,会在cmd控制面板弹出:Project name (默认文件名) 项目名字----------自定义项目的名字,名称一定要小写,否则不会通过。// Project description    项目描述文字---------描述这个项目// Author   作者--------------------创建项目的作者// 注意:这里有几个选项,不是很重要,直接回车或者选择No,安装常用的依赖 : vue-router 等,下面有一项三个选择的询问:是否安装依赖?// 建议使用npm或者稍后去项目下检查是否有node-modules,没有则去命令行键入命令:npm install安装依赖的包,之后命令行执行下一步// 项目创建成功提示:Documentation can be found at https://vue.js-templates.github.io/webpack// 运行项目执行命令:npm run dev    -------这里要注意的是:服务的名称可能并非dev,可到package.json文件script中"start": "npm run dev"查看服务名称。// 运行成功提示:You application is running here: http://localhost:8080   -------- 此时可以到浏览器输入这个地址查看创建的vue项目   // 注意:vuetest文件夹中有案例,HelloWorld.vue是案例文档。

vue-cli搭建环境:

vue-cli可快速搭建大型单页面应用,具体步骤如:

	1.新建一个文件夹并命名为:vuecliproject2.进入vuecliproject文件夹,鼠标右键以git的形式打开终端3.在终端输入:webpack init 初始化一个package.json文件(没有全局安装webpack可:npm install webpack --save,安装webpack,此时自动初始化一个package.json文件)4.终端继续输入:npm install vue-cli --save  安装vue-cli5.终端继续输入:vue init webpack testvuecli 初始化一个vue-cli的测试项目,这里需要安装依赖,根据自己需求进行即可6.终端cd进入到testvuecli目录下继续执行:npm install 下载依赖7.终端继续输入:npm run dev 此时如果出现:Your application is running here: http://localhost:8080,则可以到浏览器输入 http://localhost:8080 访问到vue页面注意:如果这里报错,请全局安装webpack后并在终端继续通过输入:npm install ,再次输入:npm run dev启动。(本应用构建应该在全局安装webpack和vue-cli等工具基础上)

vue实例分析:

	 // 1.页面入口代码分析:new Vue({el:'#app',//设置app的监听区域router,//用到的路由template:'<App/>',//模板components:{APP}//组件});// ===========过去写法扩展============//new Vue({router,render:function(h){//render是底层提供的一个API,可以代替template和 components,简写如下:return h (App);}// render:h=>h(App)简写}).$mount('#app')//通过$mount('#app')挂载到#app中和el是一样的。// 2.组件代码分析:// 1.template中必须有一个跟元素,也就是有一个div把要复制来的代码包裹起来。<template><div></div></template>// 2.导入文件:import './css/style.css' //导入css文件,只需要在import后面跟地址即可。// 3.assets文件和static文件的区别:// 1.都是存放静态资源的.// 2.assets存放的图片在打包的过程中会被打包到一起,会转化为base64位的。// 3.static存放的图片不会转化为base64位的,// 4.模拟mock数据:// mock数据:可以代替接口的json数据,供测试用,大大提高开发效率。

package.json文件配置启动项:

	// 1.webpack-dev-server存在目录:node_module/.bin/webpack-dev-server// 2.终端键入命令启动命令:node_module/bin/webpack-dev-server --inline --hot --open,这样就可以使一个vue文件在index.html文件中渲染出来,每次使用终端是非常不方便的,而且有的时候也不能打开终端,所以这里我们可以利用package.json执行代码来启动这行命令,执行代码:{"scripts":{"dev":"..\\node_modules\\.bin\\webpack-dev-server --inline --hot --open", //------开发命令简化"build":"webpack" //----打包代码到生产环境目录}} 

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575286.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最小路径覆盖,最小点覆盖,最大独立点集(转)

来自&#xff1a;http://blog.csdn.net/l04205613/article/details/6278394 node 1&#xff1a;最小路径覆盖 在一个&#xff30;&#xff38;&#xff30;的有向图中&#xff0c;路径覆盖就是在图中找一些路经&#xff0c;使之覆盖了图中的 所有顶点&#xff0c;且任何一个顶…

iOS中画矩形的几种方法总结

方法1&#xff1a; #pragma mark 画矩形方法1void drawRect1(){ // 1取得图形上下文 CGContextRef ctx UIGraphicsGetCurrentContext(); // 2画一条线段 // 设置一个起点 CGContextMoveToPoint(ctx, 20, 20); CGContextAddLineToPoint(ctx, 100, 10…

linux终端的背景_如何在终端显示图像缩略图 | Linux 中国

lsix 是一个简单的命令行实用程序&#xff0c;旨在使用 Sixel 图形格式在终端中显示缩略图。-- Sk不久前&#xff0c;我们讨论了 Fim[1]&#xff0c;这是一个轻量级的命令行图像查看器应用程序&#xff0c;用于从命令行显示各种类型的图像&#xff0c;如 bmp、gif、jpeg 和 png…

移动App开发、App和Web区别、开发移动app时技术选型

移动App开发 混合移动App: 移动端App开发有Android和iOS及混合App,开发它们采用不同的语言,如: 苹果软件使用: OC、或者Swift语言开发。 安卓软件使用:Java,安卓控件进行开发。 混合App使用:把前端特有的技术(HTML+CSS+JS)通过某种方式移植到移动App开发上,这种…

多线程下HttpContext.Current 的问题

在项目中需要记录文本日志&#xff0c;为了加快响应速度所以用到了多线程。 但是以前的方法是不支持多线程的&#xff0c;程序运行错误。 追踪代码发现提示HttpContext为空。 1.HttpContext.Current表示当前HttpRequest 对应的Context对象 httpContext.current在不同的httpRe…

混合App开发,HBuilder开发移动App

使用HBuilder开发混合App&#xff1a; Hbuilder&#xff1a;是一个在线打包工具&#xff0c;不需要在本地配置开发环境&#xff1b;直接将做好的网站&#xff0c;通过一些简单的操作&#xff0c;就能在线打包为一个App&#xff1b; 混合APP开发常见技术&#xff1a;Html5、Re…

fanuc roboguide_ROBOGUIDE软件:机器人产线输送带输送物料虚拟仿真操作

概述输送带在机器人生产线或工作站中是常见的物料传送设备&#xff0c;它能够将物料从一个工位自动传送到另一个工位&#xff0c;是实现自动化生产制造必不可少的装置设备之一。虚拟仿真是对真实的工业机器人生产线或工作站的图形化再现&#xff0c;因此&#xff0c;对于具有输…

ZOJ 3209

精确覆盖 #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> #include <vector> using namespace std;const int maxn920; const int maxnode920*550; const int maxr550; int ans; struct DLX {int n , sz; …

webpack上线版(生产环境中推荐使用)

配置上线版&#xff08;生产环境&#xff09;webpack&#xff1a; 实际中将开发环境中和生产环境中打包配置是分开的&#xff0c;两者本质没太大区别&#xff0c;只是生产环境中的webpack打包配置要更加优化合理&#xff0c;下面将具体介绍一下生产环境中webpack配置文件&…

双电阻差分电流采样_小小的采样电阻,还真有点门道!

电流检测电阻的基本原理根据欧姆定律,当被测电流流过电阻时,电阻两端的电压与电流成正比.当1W的电阻通过的电流为几百毫安时,这种设计是没有问题的.然而如果电流达到10-20A,情况就完全不同,因为在电阻上损耗的功率(PI2xR)就不容忽视了.我们可以通过降低电阻阻值来降低功率损耗,…

jpa in查询_优选在shopee虾皮怎么发货价格查询皮皮虾云仓

优选在shopee虾皮怎么发货价格查询皮皮虾云仓皮皮虾云仓物流系统为现代化管理系统&#xff0c;可集中化&#xff0c;高效化的处理本土店物流订单。物流系统可对接主流的的电商平台ERP可以实现高效的订单处理。如lazada&#xff0c;shopee&#xff0c;1688、速卖通、eaby、shopi…

html5+、ReactNative、Weex、Ionic之间的区别、(配置java、python、Android环境)、ReactNative(react-native-cli)、yarn、Weex

html5、ReactNative、Weex、Ionic之间的区别&#xff1a; html5和Ionic&#xff1a; 在开发原理上基本相同&#xff0c;都是需要先开发出一个完整的网站&#xff0c;再通过html5或Ionic提供的打包技术对网站进行打包成移动app&#xff0c;它们实际还是一个网站&#xff0c;并非…

AVAudioSession

AVAudioSession类由AVFoundation框架引入。每个IOS应用都有一个音频会话。这个会话可以被AVAudioSession类的sharedInstance类方法访问&#xff0c;如下&#xff1a; AVAudioSession *audioSession [AVAudioSession sharedInstance];复制代码在获得一个AVAudioSession类的实例…

delphi listview失去焦点后的颜色_阴阳师姑获鸟和惠比寿建模更新对比 爷爷帅了 觉醒后鸟姐颜值提升...

阴阳师体验服近期更新了人气式神姑获鸟还有惠比寿的相关建模&#xff0c;本次特别奉上有关这两位式神的建模形象对比图&#xff0c;对比后发现经过修改和优化之后&#xff0c;爷爷更帅了&#xff0c;而觉醒后的鸟姐颜值也有所提升&#xff0c;一起来看看吧。惠比寿觉醒前觉醒前…

kibana 显示 @timestamp 时间问题(utc or browser当前时间)自动转换显示

https://github.com/elasticsearch/kibana/issues/95 可以统一timestamp时间字段为当前信息时区的时间&#xff01; http://www.elasticsearch.org/guide/en/elasticsearch/reference/current/mapping-date-format.html 转载于:https://www.cnblogs.com/sunxucool/p/3939701.ht…

React简介、虚拟DOM、Diff算法、创建React项目、JSX语法、组件、组件声明方式、组件传值props和state、组件的生命周期

React简介&#xff1a; 前面只是简单介绍移动APP开发&#xff0c;后面还会继续深入介绍移动app开发&#xff1b;其中想要用ReactNative开发出更出色的应用&#xff0c;那么就得学好React&#xff0c;下面将介绍React&#xff1a; React 是一个由 Facebook 开发用于构建用户界…

去掉 edittext 长按全选_开封消毒湿巾全选

开封消毒湿巾全选   其实&#xff0c;带有杀菌效果的清洁产品大多通过降低微生物的繁殖力达到预期的杀菌效果&#xff0c;所添加的每种杀菌成分都针对特定细菌&#xff0c;无法杀灭所有细菌。如果产品中的杀菌剂浓度总是不能将细菌完全杀灭&#xff0c;就可能导致细菌对该类杀…

this指向、数据双向流、传递参数、JSX中循环、React中样式、路由、引入资源的其它方式、create-react-app脚手架、事件处理、获取数据、UI框架推荐、pc桌面应用electronjs

改变this指向的几种方式&#xff1a; //1.使用箭头函数代替原始函数写法&#xff1a;getState()>{}//2.在函数调用时给函数名加bind(this)方法&#xff1a;(bind中第一个参数表示修改this指向、第二个参数开始是用来传递数据的)onClick{this.getProps.bind(this,this.datas)…

代数余子式之和怎么算_小明说养老 | 养老金怎么算之月平均缴费指数怎么来的?...

上一期小明分享了企业职工养老保险退休待遇怎么算&#xff0c;具体可戳小明说养老|养老金怎么算&#xff1f;小明来教你。在以张阿姨为例的计算举例中&#xff0c;提到张阿姨15年的平均缴费指数为0.8209。对这个平均缴费指数的概念提问较多&#xff0c;今天就来解释一下月平均缴…

高性能IO设计的Reactor和Proactor模式(转)

在高性能的I/O设计中&#xff0c;有两个比较著名的模式Reactor和Proactor模式&#xff0c;其中Reactor模式用于同步I/O&#xff0c;而Proactor运用于异步I/O操作。 在比较这两个模式之前&#xff0c;我们首先的搞明白几个概念&#xff0c;什么是阻塞和非阻塞&#xff0c;什么是…