前端vue入门(纯代码)24_Modules

穷不怪父，苦不责妻，方为真男人！

【23.Vuex中的模块化和命名空间】

[可以去官网看看Vuex3文档](Module | Vuex (vuejs.org))

  • 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
  • 为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
  • modules模板如下：
const moduleA = {state: () => ({ ... }),mutations: { ... },actions: { ... },getters: { ... }
}const moduleB = {state: () => ({ ... }),mutations: { ... },actions: { ... }
}//创建并暴露store
export default new Vuex.Store({// property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)modules: {a:moduleA,b:moduleB,},
});store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

  • （1）我们看一下模块A【modulesCount】中的计算属性getters里的属性bigSum(state, getters,rootstate,rootgetters) 可以传递的四个参数：

const modulesCount = {getters: {// 这里的 `state` 对象是modulesCount的局部状态bigSum(state, getters,rootstate,rootgetters) {console.log('getters第一个参数：',state);console.log('getters第二个参数：',getters);console.log('getters第三个参数：',rootstate);console.log('getters第四个参数：',rootgetters);return state.sum * 10;},},
}

打印结果展示：

  • （2）我们看一下,我们如何在组件Person中使用模块B【modulesPerson】中的状态属性state里的属性personLists 

const modulesPerson = {state: {personLists: [{ id: '001', name: '伍六七' }],},
}

Person组件中：

computed: {// 完整版代码personLists() {return this.$store.state.modulesPerson.personLists;},sum() {return this.$store.state.modulesCount.sum;},// 简写
/* 		...mapState('modulesPerson',['personLists']),...mapState('modulesCount',[ 'sum']), */
},

  • 1.【解释：this.$store.state.modulesPerson.personLists】:我们看到（1）中的第三个参数，可以发现，模块A和模块B都放在根节点的state中【rootstate】，然后，再去存放数据的模块中去寻找自己需要的数据。

  • 2.【解释：...mapState('modulesPerson',['personLists'])】:传递的两个参数，第一个参数：哪一个模块A或B；第二个参数，store中state的映射。

  • （3）我们看一下,我们如何在组件Person中使用模块B【modulesPerson】中的mutations里方法addPerson 

const modulesPerson = {mutations: {// 添加人员信息addPerson(state, value) {console.log('mutations中的addPerson被调用了');console.log('addPerson', value);// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。state.personLists.unshift(value);},},
}

Person组件中：

<input type="text" placeholder="请输入名字" v-model="iptName" />
<button @click="addPerson">添加</button>

import {nanoid} from 'nanoid';
export default {name: 'Person',data() {return {iptName: '',};},methods: {addPerson() {const personObj = {id:nanoid(),name:this.iptName}this.$store.commit('modulesPerson/addPerson', personObj)// 然后清空input框this.iptName=''},},
};

  • 1.【解释：this.$store.commit('modulesPerson/addPerson', personObj)】:我们看到该代码中commit(‘第一个参数’，第二个参数)，

    • 第一个参数：必须要带上路径，即你调用的方法是在哪一个模块的mutations中【开启命名空间后，即namespaced:true】。

      【比如commit('modulesPerson/addPerson', personObj)：此处就是，调用模块modulesPerson中mutations里的addPerson方法。】

    • 第二个参数：要传递的数据。

  • （4）我们看一下,我们如何在组件Count中使用模块A【modulesCount】中的actions里方法jiaOdd 

const modulesCount = {actions: {jiaOdd(context, value) {console.log('actions中的jiaOdd被调用了');// 这里可以访问到state里存储的数据 sumif (context.state.sum % 2) {context.commit('JIA', value);}},},
}

Count组件中：

<button @click="incrementOdd(n)">当前求和为奇数再加</button>

import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';
export default {name: 'Count',methods: {//**********完整版写法************** */incrementOdd(n) {this.$store.dispatch('modulesCount/jiaOdd',n);},//**********借助mapActions方法****************//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)...mapActions('modulesCount',{ incrementOdd: 'jiaOdd'}),//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)// ...mapActions(['jiaOdd'])},
};

  • 1.【解释：...mapActions('modulesCount',{ incrementOdd: 'jiaOdd'}),】:完整版代码如下

    incrementOdd(n) {this.$store.dispatch('modulesCount/jiaOdd',n);
},

    • 第一个参数：必须要带上路径，即你调用的方法是在哪一个模块的actions中【开启命名空间后，即namespaced:true】。

      【比如dispatch('modulesCount/jiaOdd',n)：此处就是，调用模块modulesCount中actions里的jiaOdd方法。】

    • 第二个参数：要传递的数据。

【补充1namespaced: true 】: 使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

目前页面展示：

vuex模块化编码：

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';
import modulesCount from "./count";
import modulesPerson from "./person";
//应用Vuex插件
Vue.use(Vuex);//创建并暴露store
export default new Vuex.Store({// property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)modules: {modulesCount,modulesPerson,},
});

store/count.js

export default {namespaced: true,state: {sum: 0, //当前的和Sname: '伍六七',Sjob: '理发师',},mutations: {// 这里的 `state` 对象是modulesCount的局部状态JIA(state, value) {console.log('mutations中的JIA被调用了');state.sum += value;},JIAN(state, value) {console.log('mutations中的JIAN被调用了');state.sum -= value;},},actions: {jiaOdd(context, value) {console.log('actions中的jiaOdd被调用了');// 这里可以访问到state里存储的数据 sumif (context.state.sum % 2) {context.commit('JIA', value);}},jiaWait(context, value) {console.log('actions中的jiaWait被调用了');setTimeout(() => {context.commit('JIA', value);}, 500);},},getters: {// 这里的 `state` 对象是modulesCount的局部状态bigSum(state, getters,rootstate) {console.log('getters第一个参数：',state);console.log('getters第二个参数：',getters);console.log('getters第三个参数：',rootstate);return state.sum * 10;},},
};

store/person.js

export default {namespaced: true,state: {personLists: [{ id: '001', name: '伍六七' }],},mutations: {// 添加人员信息addPerson(state, value) {console.log('mutations中的addPerson被调用了');console.log('addPerson', value);// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。state.personLists.unshift(value);},},actions: {},getters: {},
};

App.vue

<template><div><Count/><br/><Person/></div>
</template><script>import Count from './components/Count'import Person from './components/Person'export default {name:'App',components:{Count,Person},mounted() {// console.log('App',this)},}
</script>

Count.vue

<template><div><h1>当前求和为：{{ sum }}</h1><h3>当前求和放大10倍为：{{ bigSum }}</h3><h3>我叫{{ Sname }},是一名{{ Sjob }}</h3><h3 style="color: red">Person组件的总人数是：{{ personLists.length }}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';
export default {name: 'Count',data() {return {n: 1, //用户选择的数字};},computed: {//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）...mapGetters('modulesCount', ['bigSum']),//借助mapState生成计算属性，从state中读取数据。（数组写法）...mapState('modulesCount', ['sum', 'Sjob', 'Sname']),...mapState('modulesPerson', ['personLists']),},methods: {//**********借助mapMutations方法****************//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)...mapMutations('modulesCount', {increment: 'JIA',decrement: 'JIAN',}),//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)// ...mapMutations([ 'JIA', 'JIAN' ]),//**********完整版写法************** */incrementOdd(n) {this.$store.dispatch('modulesCount/jiaOdd',n);},//**********借助mapMutations方法****************//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)...mapActions('modulesCount', {// incrementOdd: 'jiaOdd',incrementWait: 'jiaWait',}),//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)// ...mapActions(['jiaOdd','jiaWait'])},mounted() {console.log('Count', this.$store);},
};
</script><style scoped>
button {margin-left: 10px;
}
select {margin-left: 20px;
}
</style>

Person.vue

<template><div><h1>人员列表</h1><h3 style="color: red">Count组件求和为：{{ sum }}</h3><input type="text" placeholder="请输入名字" v-model="iptName" /><button @click="addPerson">添加</button><ul><li v-for="p in personLists" :key="p.id">{{ p.name }}</li></ul></div>
</template><script>
// import { mapState } from 'vuex';
import {nanoid} from 'nanoid';
export default {name: 'Person',data() {return {iptName: '',};},computed: {// 完整版代码personLists() {return this.$store.state.modulesPerson.personLists;},sum() {return this.$store.state.modulesCount.sum;},// 简写
/* 		...mapState('modulesPerson',['personLists']),...mapState('modulesCount',[ 'sum']), */},methods: {addPerson() {const personObj = {id:nanoid(),name:this.iptName}this.$store.commit('modulesPerson/addPerson', personObj)// 然后清空input框this.iptName=''},},
};
</script>

我们添加1个需求：输入框中添加的名字，必须姓:‘鸡’,如图所示。

1.第一种写法：在Person.vue中

<button @click="addPersonJi">添加一个姓鸡的</button>

methods: {addPersonJi() {if (this.iptName.indexOf('鸡')===0) {const personObj = { id: nanoid(), name: this.iptName };this.$store.commit('modulesPerson/addPerson', personObj);// 然后清空input框this.iptName = '';} else {this.iptName = '';alert('请输入姓鸡的名字')}},
},

2.第二种写法：在模块modulesPerson的mutations中

mutations: {addPersonJi(state, value) {console.log('mutations中的addPersonJi被调用了');// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。if (value.name.indexOf('鸡')===0) {state.personLists.unshift(value);// 然后清空input框} else {alert('请输入姓鸡的名字')}},
},

而Person.vue中

methods: {addPersonJi() {const personObj = { id: nanoid(), name: this.iptName };this.$store.commit('modulesPerson/addPersonJi', personObj);// 然后清空input框this.iptName = '';},
},

3.第三种写法：在模块modulesPerson的actions中,最好不要直接修改state里面的数据；最好是去调用commit方法，在mutations里修改state对的数据。

mutations: {// 添加人员信息addPerson(state, value) {console.log('mutations中的addPerson被调用了');console.log('addPerson', value);// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。state.personLists.unshift(value);},
},
actions: {addPersonJi(context, value) {console.log('actions中的addPersonJi被调用了');// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。if (value.name.indexOf('鸡')===0) {context.commit('addPerson',value)} else {alert('请输入姓鸡的名字')}},
},

而Person.vue中

methods: {addPersonJi() {const personObj = { id: nanoid(), name: this.iptName };this.$store.dispatch('modulesPerson/addPersonJi', personObj);// 然后清空input框this.iptName = '';},
},

我们添加1个按钮：利用axios.get()去调用后台api,去随机生成一句情话,如图所示。

情话文案
简介：随机生成一句情话文案

文档：http://txapi.cn/api_detail?id=1601207567931932672

请求方式：GET

调用地址：http://api.txapi.cn/v1/c/love_talk?token=Z1QljZOZiT4NTG

{"code": 200,"msg": "ok","data": {"text": "当你真正爱上一个人，你会有一种很亲切的感觉，他让你觉的很舒服，你可以信任他、依靠他。他像是一个亲密的家人，甚至可以说，比一个家人更亲密，这是亲密加上一种温馨的感觉，就是亲爱的感觉。"},"time": 1670592587018
}

Person.vue

<button @click="addPersonRandom">随机生成一句情话</button>

methods: {addPersonRandom(){this.$store.dispatch('modulesPerson/addPersonRandom');},
},

modulesPerson模块中

actions: {addPersonRandom(context) {axios.get('http://api.txapi.cn/v1/c/love_talk?token=Z1QljZOZiT4NTG').then(// 获取数据成功Response => {const personRandom = {id:nanoid(),name:Response.data.data}context.commit('addPerson',personRandom)},// 获取数据失败，打印失败原因error => {console.log(error.message);});},
},
mutations: {// 添加人员信息addPerson(state, value) {console.log('mutations中的addPerson被调用了');console.log('addPerson', value);// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。state.personLists.unshift(value);},},

整个vuex模块化的完整编码：

store/index.js

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';
import modulesCount from "./count";
import modulesPerson from "./person";
//应用Vuex插件
Vue.use(Vuex);//创建并暴露store
export default new Vuex.Store({// property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)modules: {modulesCount,modulesPerson,},
});

store/count.js

export default {namespaced: true,//开启命名空间state: {sum: 0, //当前的和Sname: '伍六七',Sjob: '理发师',},mutations: {// 这里的 `state` 对象是modulesCount的局部状态JIA(state, value) {console.log('mutations中的JIA被调用了');state.sum += value;},JIAN(state, value) {console.log('mutations中的JIAN被调用了');state.sum -= value;},},actions: {jiaOdd(context, value) {console.log('actions中的jiaOdd被调用了');// 这里可以访问到state里存储的数据 sumif (context.state.sum % 2) {context.commit('JIA', value);}},jiaWait(context, value) {console.log('actions中的jiaWait被调用了');setTimeout(() => {context.commit('JIA', value);}, 500);},},getters: {// 这里的 `state` 对象是modulesCount的局部状态bigSum(state, getters,rootstate,rootgetters) {console.log('getters第一个参数：',state);console.log('getters第二个参数：',getters);console.log('getters第三个参数：',rootstate);console.log('getters第四个参数：',rootgetters);return state.sum * 10;},},
};

store/person.js

//人员管理相关的配置
import axios from 'axios'
import { nanoid } from 'nanoid'export default {namespaced: true, //开启命名空间state: {personLists: [{ id: '001', name: '伍六七' }],},mutations: {// 添加人员信息addPerson(state, value) {console.log('mutations中的addPerson被调用了');console.log('addPerson', value);// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。state.personLists.unshift(value);},},actions: {addPersonJi(context, value) {console.log('actions中的addPersonJi被调用了');// array.unshift(A):把A放在array中的第一个；这样添加的数据是响应式的。if (value.name.indexOf('鸡') === 0) {context.commit('addPerson', value);} else {alert('请输入姓鸡的名字');}},addPersonRandom(context) {axios.get('http://api.txapi.cn/v1/c/love_talk?token=Z1QljZOZiT4NTG').then(// 获取数据成功Response => {const personRandom = {id:nanoid(),name:Response.data.data}context.commit('addPerson',personRandom)},// 获取数据失败，打印失败原因error => {console.log(error.message);});},},getters: {},
};

components/Count.vue

<template><div><h1>当前求和为：{{ sum }}</h1><h3>当前求和放大10倍为：{{ bigSum }}</h3><h3>我叫{{ Sname }},是一名{{ Sjob }}</h3><h3 style="color: red">Person组件的总人数是：{{ personLists.length }}</h3><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment(n)">+</button><button @click="decrement(n)">-</button><button @click="incrementOdd(n)">当前求和为奇数再加</button><button @click="incrementWait(n)">等一等再加</button></div>
</template><script>
import { mapGetters, mapState, mapMutations, mapActions } from 'vuex';
export default {name: 'Count',data() {return {n: 1, //用户选择的数字};},computed: {//借助mapGetters生成计算属性，从getters中读取数据。（数组写法）...mapGetters('modulesCount', ['bigSum']),//借助mapState生成计算属性，从state中读取数据。（数组写法）...mapState('modulesCount', ['sum', 'Sjob', 'Sname']),...mapState('modulesPerson', ['personLists']),},methods: {//**********借助mapMutations方法****************//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)...mapMutations('modulesCount', {increment: 'JIA',decrement: 'JIAN',}),//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)// ...mapMutations([ 'JIA', 'JIAN' ]),//**********完整版写法************** */incrementOdd(n) {this.$store.dispatch('modulesCount/jiaOdd',n);},//**********借助mapMutations方法****************//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)...mapActions('modulesCount', {// incrementOdd: 'jiaOdd',incrementWait: 'jiaWait',}),//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)// ...mapActions(['jiaOdd','jiaWait'])},mounted() {console.log('Count', this.$store);},
};
</script><style scoped>
button {margin-left: 10px;
}
select {margin-left: 20px;
}
</style>

components/Person.vue

<template><div><h1>人员列表</h1><h3 style="color: red">Count组件求和为：{{ sum }}</h3><input type="text" placeholder="请输入名字" v-model="iptName" /><button @click="addPerson">添加</button><button @click="addPersonJi">添加一个姓鸡的</button><button @click="addPersonRandom">随机生成一句情话</button><ul><li v-for="p in personLists" :key="p.id">{{ p.name }}</li></ul></div>
</template><script>
// import { mapState } from 'vuex';
import { nanoid } from 'nanoid';
export default {name: 'Person',data() {return {iptName: '',};},computed: {// 完整版代码personLists() {return this.$store.state.modulesPerson.personLists;},sum() {return this.$store.state.modulesCount.sum;},// 简写/* 		...mapState('modulesPerson',['personLists']),...mapState('modulesCount',[ 'sum']), */},methods: {addPerson() {const personObj = { id: nanoid(), name: this.iptName };this.$store.commit('modulesPerson/addPerson', personObj);// 然后清空input框this.iptName = '';},addPersonJi() {const personObj = { id: nanoid(), name: this.iptName };this.$store.dispatch('modulesPerson/addPersonJi', personObj);// 然后清空input框this.iptName = '';},addPersonRandom(){this.$store.dispatch('modulesPerson/addPersonRandom');},},
};
</script>

App.vue

<template><div><Count/><br/><Person/></div>
</template><script>import Count from './components/Count'import Person from './components/Person'export default {name:'App',components:{Count,Person},mounted() {// console.log('App',this)},}
</script>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入vue-resource插件
import vueResource from 'vue-resource';
//引入store
import store from './store'
//关闭Vue的生产提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)//创建vm
new Vue({el:'#app',render: h => h(App),// property 简写 (用在对象某个 property 的 key 和被传入的变量同名时)// 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件store,// 生命周期钩子beforeCreate中模板未解析，且this是vmbeforeCreate() {// this:指的是vmVue.prototype.$bus = this  //安装全局事件总线$bus}
})

总结：模块化+命名空间

  1. 目的：让代码更好维护，让多种数据分类更加明确。

  2. 修改store.js

    const countAbout = {namespaced:true,//开启命名空间state:{x:1},mutations: { ... },actions: { ... },getters: {bigSum(state){return state.sum * 10}}
}const personAbout = {namespaced:true,//开启命名空间state:{ ... },mutations: { ... },actions: { ... }
}const store = new Vuex.Store({modules: {countAbout,personAbout}
})

  3. 开启命名空间后，组件中读取state数据：

    //方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),

  4. 开启命名空间后，组件中读取getters数据：

    //方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

  5. 开启命名空间后，组件中调用dispatch

    //方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

  6. 开启命名空间后，组件中调用commit

    //方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

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

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

相关文章

go-zero微服务实战——服务构建

go-zero微服务实战——服务构建

目录介绍 接上一节go-zero微服务实战——基本环境搭建。搭建好了微服务的基本环境&#xff0c;开始构建整个微服务体系了&#xff0c;将其他服务也搭建起来。 order的目录结构&#xff0c;如下 根目录 api服务rpc服务自定义逻辑层logic自定义参数层models自定义工具层util …
阅读更多...
5.带你入门matlab常见分布的期望和方差（matlab程序）

5.带你入门matlab常见分布的期望和方差（matlab程序）

代码及运行结果 %% 　二项分布的期望和方差 clear all; n1100; p10.3; [m1,v1]binostat(n1,p1) %100*0.3 100*0.3*0.7 %% %% 均匀分布的期望和方差 clear all; a11; b15; [m1,v1]unifstat(a1,b1) %% 正态分布的期望和方差 clear all; n12; n23; [m1,v1]normstat(n1,n2) %%…
阅读更多...
SuperMap iClient3D for Cesium最短路径分析

SuperMap iClient3D for Cesium最短路径分析

作者&#xff1a;Mei 目录 前言实现思路实现步骤1、构建二维网络数据集1.1拓扑检查1.2线拓扑数据集处理1.3构建二维网络数据集 2、发布网络分析服务3、实现代码 前言 在交通、消防业务场景中&#xff0c;如果某地发生火灾或者交通事故&#xff0c;需要快速规划出最短抢救路线&a…
阅读更多...
maven-依赖管理-下

maven-依赖管理-下

依赖冲突 特殊优先 特殊优先∶当同级配置了相同资源的不同版本&#xff0c;后配置的覆盖先配置的(提醒&#xff1a;要尽量避免这种没有意义的冲突)修改D:\java_projects\maven_A\pom.xml, 引入mysql5.1 <?xml version"1.0" encoding"UTF-8"?> &…
阅读更多...
vue2 element-ui el-cascader地址省市区分开单独写

vue2 element-ui el-cascader地址省市区分开单独写

使用 npm 或 yarn 安装 element-china-area-data 包&#xff1a; npm install element-china-area-data 在你的代码中导入 element-china-area-data import { regionData } from element-china-area-data let that; 完整代码 <template><div><el-form ref&quo…
阅读更多...
什么是事件循环 Event Loop

什么是事件循环 Event Loop

一、什么是事件循环 事件循环&#xff08;Event Loop&#xff09;是单线程的JavaScript在处理异步事件时进行的一种循环过程&#xff0c;具体来讲&#xff0c;对于异步事件它会先加入到事件队列中挂起&#xff0c;等主线程空闲时会去执行事件队列&#xff08;Event Queue&…
阅读更多...
【AGC】认证服务HarmonyOS(api9)实现手机号码认证登录

【AGC】认证服务HarmonyOS(api9)实现手机号码认证登录

【问题背景】 近期AGC上线了HarmonyOS(api9)平台的SDK&#xff0c;这样api9的设备也能使用认证服务进行快速认证登录了。下面为大家带来如何使用auth SDK&#xff08;api9&#xff09;实现手机号码认证登录。 【开通服务】 1.登录AppGallery Connect&#xff0c;点击“我的项…
阅读更多...
松鼠回家（最短路+二分）

松鼠回家（最短路+二分）

D-松鼠回家_2023河南萌新联赛第&#xff08;一&#xff09;场&#xff1a;河南农业大学 (nowcoder.com) #include<bits/stdc.h> using namespace std; #define int long long const int N2e510; map<int,int>a; int n,m,st,ed,h; struct node{int x,y; }; vector&l…
阅读更多...
揭晓！2023年6月CSDN城市之星西安赛道获奖名单及评选规则解析

揭晓！2023年6月CSDN城市之星西安赛道获奖名单及评选规则解析

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…
阅读更多...
更快更复杂之—Mendix如何支持多种AI部署模式

更快更复杂之—Mendix如何支持多种AI部署模式

在过去十年&#xff0c;LCAP市场逐渐崛起的同时&#xff0c;计算能力不断提高、大数据可用性不断增强&#xff0c;预计未来数年&#xff0c;低代码应用平台&#xff08;LCAP&#xff09;的市场将增长30%左右&#xff0c;并带动人工智能&#xff08;AI&#xff09;迎来新的春天。…
阅读更多...
【Linux后端服务器开发】进程与地址空间概述

【Linux后端服务器开发】进程与地址空间概述

目录 一、进程创建 二、进程状态 1. 运行状态R 2. 睡眠状态S 3. 僵尸状态Z 4. 孤儿进程 三、进程优先级 PRI 四、地址空间的层次结构 五、虚拟地址和物理地址 一、进程创建 fork()函数创建子进程&#xff0c;若创建成功&#xff0c;则给父进程返回子进程的pid&#x…
阅读更多...
HTTP以及Servlet的学习

HTTP以及Servlet的学习

HTTP和Servlet 联系&#xff1a; HTTP是一个通信协议&#xff0c;而Servlet是服务器端程序&#xff0c;用于处理HTTP请求。Servlet通常用于处理HTTP请求&#xff0c;在服务器上生成动态内容&#xff0c;并生成HTTP响应。HTTP协议就是Servlet处理的基础。 区别&#xff1a; …
阅读更多...
【图像处理】Python判断一张图像是否亮度过低

【图像处理】Python判断一张图像是否亮度过低

比如&#xff1a; 直方图&#xff1a; 代码&#xff1a; 这段代码是一个用于判断图像亮度是否过暗的函数is_dark&#xff0c;并对输入的图像进行可视化直方图展示。 首先&#xff0c;通过import语句导入了cv2和matplotlib.pyplot模块&#xff0c;用于图像处理和可视化。 i…
阅读更多...
解决win11中快捷键不能使用的问题(shift+F6)

解决win11中快捷键不能使用的问题(shift+F6)

1.背景 windows11在某次开机之后&#xff0c;idea的shiftF6快捷键不生效了&#xff0c;很不方便。本来想着凑合着用吧&#xff0c;但是越凑合越不爽&#xff01;直到今天&#xff0c;一定得搞定这个问题。在网上找了好几种检测热键冲突的软件&#xff0c;在windows11上&#x…
阅读更多...
C语言进阶之指针的进阶

C语言进阶之指针的进阶

指针的进阶 1. 字符指针2. 指针数组3. 数组指针3.1 数组指针的定义3.2 &数组名VS数组名3.3 数组指针的使用 4. 数组参数、指针参数4.1 一维数组传参4.2 二维数组传参4.3 一级指针传参4.4 二级指针传参 5. 函数指针6. 函数指针数组7. 指向函数指针数组的指针8. 回调函数9. 指…
阅读更多...
汇报方案设计方案规划方案资源下载

汇报方案设计方案规划方案资源下载

标题汇报方案设计方案规划方案资源下载https://wheart.cn/so/home?mdw&tag%E5%AE%89%E5%85%A8文章标签事业单位人事人才信息综合管理系统建设设计报价方案人事系统,人事人才,事业单位,工资系统,职称系统xx纪检委智慧监督平台建设方案汇报.docx建设方案,规划设计,汇报方案营…
阅读更多...
HTML语法

HTML语法

文章目录 前言HTML 文件基本结构常见标签标签种类特殊符号图片链接a链接 双标签链接 列表表格 &#xff1a;表单多行文本域: 前言 HTML是有标签组成的 <body>hello</body>大部分标签成对出现. 为开始标签, 为结束标签. 少数标签只有开始标签, 称为 “单标签”. 开…
阅读更多...
Acwing：第 111 场周赛（2023.7.12 C++）

Acwing：第 111 场周赛（2023.7.12 C++）

目录 5047. 1序列 题目描述&#xff1a; 实现代码&#xff1a; 5048. 无线网络 题目描述&#xff1a; 实现代码&#xff1a; 二分 贪心 5049. 选人 题目描述&#xff1a; 实现代码&#xff1a; 数学 5047. 1序列 题目描述&#xff1a; 实现代码&#xff1a; #incl…
阅读更多...
MySQL（九）：MySQL语法-高级

MySQL（九）：MySQL语法-高级

MySQL语法-高级 LIMITLIKEASCREATE UNIQUE INDEX、DROP INDEXCREATE VIEW、DROP VIEWGROUP BYHAVINGMYSQL - JOININNER JOIN、JOINLEFT JOIN、LEFT OUTER JOINRIGHT JOIN、RIGHT OUTER JOINLEFT JOIN ... WHERE ...RIIGHT JOIN ... WHERE ... TRUNCATE TABLEINSERT INTO 表1 (列…
阅读更多...
反垄断在中国

反垄断在中国

中国通过反垄断法 中国通过了具有里程碑意义的反托拉斯立法，外国企业表示谨慎性的欢迎，希望该法案能带来更大的开放性，但需要观察它是如何实施的。（华尔街日报 2007年8月32日报道） 反垄断法禁止垄断协议和诸如卡特尔及价格操纵，但允许能促进创新和技术进步的垄断之存在。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发