12-Vue技术栈之Vuex的使用

news2025/2/23 19:47:55

目录

  • 1、理解 vue
    • 1.1 vuex 是什么
    • 1.2 什么时候使用 Vue
    • 1.3 图解两种方式实现数据共享
  • 2、搭建vuex环境
    • 2.1 下载vuex
    • 2.2 配置文件
  • 3、基本使用
    • 3.1 求和案例纯vue写法
    • 3.2 求和案例vuex写法
  • 4、getters的使用
  • 5、四个map方法的使用
    • 5.1 求和案例
  • 6、 模块化+命名空间
    • 6.1求和案例改造

1、理解 vue

1.1 vuex 是什么

  1. 概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信
  2. Github 地址: https://github.com/vuejs/vuex

1.2 什么时候使用 Vue

  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

简单来说就是多个组件需要共享数据时

1.3 图解两种方式实现数据共享

  • 使用全局事件总线实现多组件共享数据较为麻烦。

请添加图片描述

  • 使用Vuex实现多组件共享数据简便。

请添加图片描述

2、搭建vuex环境

2.1 下载vuex

npm i vuex

在这里插入图片描述

注:
如果执行npm i vuex 默认安装的是vuex4版本,而vuex4版本只能在vue3里面使用,所以如果你用的是vue2需要指定安装vuex3的版本。

vue2里正确安装:

npm i vuex@3

2.2 配置文件

  1. 创建文件:src/store/index.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})
  1. main.js中创建vm时传入store配置项
......
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入store
import store from './store/index.js'
......

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

3、基本使用

  • vuex工作原理图:

在这里插入图片描述

  1. 初始化数据、配置actions、配置mutations,操作文件store.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})
  1. 组件中读取vuex中的数据:$store.state.sum

  2. 组件中修改vuex中的数据:$store.dispatch('action中的方法名',数据)$store.commit('mutations中的方法名',数据)

    备注:若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch,直接编写commit

3.1 求和案例纯vue写法

  • 我们来用纯Vue写一个案例,在用vuex重新书写一遍,形成一个对比。

实现效果:

请添加图片描述
结构目录:
在这里插入图片描述

代码示例:
main 文件

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
 new Vue({
  render: h => h(App),
}).$mount('#app')

App组件

<template>
  <Count/>
</template>

<script>
import Count from './components/Count'
export default {
  name:'App',
  components:{Count}
}
</script>

<style>

</style>

Count组件

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="subtract">-</button>
    <button @click="addOdd">当前和为奇数再加</button>
    <button @click="addWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1, //选择数
      sum: 0, //求和数
    };
  },
  methods: {
    add() {
      this.sum += this.n;
    },
    subtract() {
      this.sum -= this.n;
    },
    addOdd() {
      if (this.sum % 2) {
        this.sum += this.n;
      }
    },
    addWait() {
      setTimeout(() => {
        this.sum += this.n;
      }, 500);
    },
  },
};
</script>

<style>
h1 {
  color: pink;
}
select {
  width: 50px;
  background: pink;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background: pink;
  border: none;
  cursor: pointer;
}
</style>

3.2 求和案例vuex写法

实现效果:

请添加图片描述
结构目录:

在这里插入图片描述
main文件

import Vue from 'vue'
import App from './App.vue'
//引入store里面的index.js文件,vue里默认引入的就是index文件
import store from './store'
Vue.config.productionTip = false
const vm = new Vue({
  render: h => h(App),
  store //安装store
}).$mount('#app')
console.log(vm);

App组件

<template>
  <Count/>
</template>

<script>
import Count from './components/Count'
export default {
  name:'App',
  components:{Count}
}
</script>
<style>

</style>

Count组件

<template>
  <div>
    <h1>当前求和为:{{ $store.state.sum }}</h1>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="subtract">-</button>
    <button @click="addOdd">当前和为奇数再加</button>
    <button @click="addWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1, //选择数
    };
  },
  methods: {
    add() {
      this.$store.commit("ADD", this.n);
    },
    subtract() {
      this.$store.commit("SUBTRACT", this.n);
    },
    addOdd() {
      this.$store.dispatch("addOdd", this.n);
    },
    addWait() {
      this.$store.dispatch("addWait", this.n);
    },
  },
};
</script>

<style>
h1 {
  color: pink;
}
select {
  width: 50px;
  background: pink;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background: pink;
  border: none;
  cursor: pointer;
}
</style>

store里面的index.js 文件

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {
	addOdd(context, value) {
		if (context.state.sum % 2) {
			context.commit('ADD', value)
		};
	},
	addWait(context, value) {
		setTimeout(() => {
			context.commit('ADD', value)
		}, 500);
	}
}
//准备mutations对象——修改state中的数据
const mutations = {
	ADD(context, value) {
		context.sum += value
	},
	SUBTRACT(context, value) {
		context.sum -= value
	},

}
//准备state对象——保存具体的数据
const state = {
	sum: 0, //求和数
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

4、getters的使用

  1. 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。

  2. store.js中追加getters配置

    ......
    
    const getters = {
    	bigSum(state){
    		return state.sum * 10
    		//靠返回值
    	}
    }
    
    //创建并暴露store
    export default new Vuex.Store({
    	......
    	getters
    })
    
  3. 组件中读取数据:$store.getters.bigSum

5、四个map方法的使用

  1. mapState方法:用于帮助我们映射state中的数据为计算属性
computed: {
    //借助mapState生成计算属性:sum、school、subject(对象写法)
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
         
    //借助mapState生成计算属性:sum、school、subject(数组写法)
    ...mapState(['sum','school','subject']),
},
  1. mapGetters方法:用于帮助我们映射getters中的数据为计算属性
computed: {
    //借助mapGetters生成计算属性:bigSum(对象写法)
    ...mapGetters({bigSum:'bigSum'}),

    //借助mapGetters生成计算属性:bigSum(数组写法)
    ...mapGetters(['bigSum'])
},
  1. mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数
methods:{
    //靠mapActions生成:incrementOdd、incrementWait(对象形式)
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

    //靠mapActions生成:incrementOdd、incrementWait(数组形式)
    ...mapActions(['jiaOdd','jiaWait'])
}
  1. mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数
methods:{
    //靠mapActions生成:increment、decrement(对象形式)
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    
    //靠mapMutations生成:JIA、JIAN(对象形式)
    ...mapMutations(['JIA','JIAN']),
}

备注:在四个方法使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象。

5.1 求和案例

  • 我们将上面的求和案例利用这些方法进行改进一下:
  • 其他文件照常,只改变store里面的index.jsCount组件
    index.js文件
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {
	/* add(context, value) {
		context.commit('ADD', value)
	},
	subtract(context, value) {
		context.commit('SUBTRACT', value)
	}, */
	addOdd(context, value) {
		if (context.state.sum % 2) {
			context.commit('ADD', value)
		};
	},
	addWait(context, value) {
		setTimeout(() => {
			context.commit('ADD', value)
		}, 500);
	}
}
//准备mutations对象——修改state中的数据
const mutations = {
	ADD(context, value) {
		context.sum += value
	},
	SUBTRACT(context, value) {
		context.sum -= value
	},

}
//准备state对象——保存具体的数据
const state = {
	sum: 0, //求和数
	school:'哔站',
	subject:'前端'
}
// 对state对象里的数据进行加工
const getters = {
	bigSum(state) {
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})

Count组件

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <h3>放大十倍后的和为:{{ bigSum }}</h3>
    <h3>我在{{ school }}学{{ subject }}</h3>

    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add(n)">+</button>
    <button @click="subtract(n)">-</button>
    <button @click="addOdd(n)">当前和为奇数再加</button>
    <button @click="addWait(n)">等一等再加</button>
  </div>
</template>

<script>
// 导入4个map方法
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1, //选择数
    };
  },
  computed: {
    //靠程序员自己亲自去写计算属性
    /* sum(){
				return this.$store.state.sum
			},
			school(){
				return this.$store.state.school
			},
			subject(){
				return this.$store.state.subject
			}, */

    //借助mapState生成计算属性,从state中读取数据。(对象写法)
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
    //借助mapState生成计算属性,从state中读取数据。(数组写法)
    // 数组写法必须数据名和计算方法名一致
    ...mapState(["sum", "school", "subject"]),
    // ...............................
    //靠程序员自己亲自去写计算属性
    /* bigSum(){
				return this.$store.getters.bigSum
			}, */
    //借助mapGetters生成计算属性,从getters中读取数据。(对象写法)
    // ...mapGetters({bigSum:'bigSum'})
    //借助mapGetters生成计算属性,从getters中读取数据。(数组写法)
    ...mapGetters(["bigSum"]),
  },
  methods: {
    //程序员亲自写方法
    /*   add() {
      this.$store.commit("ADD", this.n);
    },
    subtract() {
      this.$store.commit("SUBTRACT", this.n);
    },
    addOdd() {
      this.$store.dispatch("addOdd", this.n);
    },
    addWait() {
      this.$store.dispatch("addWait", this.n);
    }, */

    //借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法)
    ...mapMutations({ add: "ADD", subtract: "SUBTRACT" }), //必须在插值语法中传入实参,不然默认是event事件对象
    //借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(数组写法)数组写法必须数据名和方法名一致,这里改了,上面调用的时候也要改。
    // ...mapMutations({ADD:'ADD',SUBTRACT:'SUBTRACT'})

    //借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法)
    // ...mapActions({addOdd:'addOdd',addWait:'addWait'})
    //借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(数组写法)
    ...mapActions(["addOdd", "addWait"]),
  },
};
</script>

<style>
h1,
h3 {
  color: pink;
}
select {
  width: 50px;
  background: pink;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background: pink;
  border: none;
  cursor: pointer;
}
</style>

6、 模块化+命名空间

  • 目的:让代码更好维护,让多种数据分类更加明确。

  • 修改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
      }
    })
    
  • 开启命名空间后,组件中读取state数据:

    //方式一:自己直接读取
    this.$store.state.personAbout.list
    //方式二:借助mapState读取:
    ...mapState('countAbout',['sum','school','subject']),
    
  • 开启命名空间后,组件中读取getters数据:

    //方式一:自己直接读取
    this.$store.getters['personAbout/firstPersonName']
    //方式二:借助mapGetters读取:
    ...mapGetters('countAbout',['bigSum'])
    
  • 开启命名空间后,组件中调用dispatch

    //方式一:自己直接dispatch
    this.$store.dispatch('personAbout/addPersonWang',person)
    //方式二:借助mapActions:
    ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    
  • 开启命名空间后,组件中调用commit

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

6.1求和案例改造

  • 实现效果:

请添加图片描述

  • 结构目录:

在这里插入图片描述
main文件

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

 new Vue({
  render: h => h(App),
  store
}).$mount('#app')

App组件

<template>
  <div>
    <Count />
    <Person />
  </div>
</template>

<script>
import Count from "./components/Count";
import Person from "./components/Person";
export default {
  name: "App",
  components: { Count, Person },
};
</script>
<style>
</style>

Count组件使用4种map方法

<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <h3>放大十倍后的和为:{{ bigSum }}</h3>
    <h3>我在{{ school }}学{{ subject }}</h3>
    <h3 style="color: red">Person组件的总人数是:{{ persons.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="add(n)">+</button>
    <button @click="subtract(n)">-</button>
    <button @click="addOdd(n)">当前和为奇数再加</button>
    <button @click="addWait(n)">等一等再加</button>
  </div>
</template>

<script>
// 导入4个map方法
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  computed: {
    //借助mapState生成计算属性,从state中读取数据。(数组写法)
    ...mapState('CountOptions',["sum", "school", "subject"]),
    ...mapState('PersonOptions',["persons"]),
    //借助mapGetters生成计算属性,从getters中读取数据。(数组写法)
    ...mapGetters('CountOptions',["bigSum"]),
  },
  methods: {
    //借助mapMutations生成对应的方法,方法中会调用commit去联系mutations(对象写法)
    ...mapMutations('CountOptions',{ add: "ADD", subtract: "SUBTRACT" }),
    //借助mapActions生成对应的方法,方法中会调用dispatch去联系actions(对象写法)
    ...mapActions('CountOptions',["addOdd", "addWait"]),
  },
};
</script>

<style>
h1,
h3,
li {
  color: pink;
}
select {
  width: 50px;
  background: pink;
}
button {
  margin: 5px;
  padding: 5px 10px;
  background: pink;
  border: none;
  cursor: pointer;
}
</style>

Person组件不使用map方法,和上面的写法进行一个对比

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red">Count组件求和为:{{ sum }}</h3>
    <h3>列表中第一个人的名字是:{{ firstPersonName }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <button @click="addZhang">添加一个姓张的人</button>
    <button @click="addPersonServer">随机添加一条语录</button>

    <ul>
      <li v-for="p in persons" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
  name: "Person",
  data() {
    return {
      name: "",
    };
  },
  computed: {
    persons() {
      //   return this.$store.state.persons
      return this.$store.state.PersonOptions.persons;
    },
    sum() {
      return this.$store.state.CountOptions.sum;
    },
    firstPersonName() {
      return this.$store.getters["PersonOptions/firstPersonName"];
    },
  },
  methods: {
    add() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.commit("PersonOptions/PersonAdd", personObj);
    },
    addZhang() {
      const personObj = { id: nanoid(), name: this.name };
      this.$store.dispatch("PersonOptions/addZhang", personObj);
    },
    addPersonServer() {
        this.$store.dispatch('PersonOptions/addPersonServer')
    }
  },
  mounted() {
    console.log(this.$store);
  },
};
</script>

<style>
input::placeholder {
  color: pink;
}
input {
  border: 1px solid pink;
  padding: 5px;
}
</style>

store/index.js文件

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import axios from 'axios'
import { nanoid } from 'nanoid'
//应用Vuex插件
Vue.use(Vuex)

const CountOptions = {
	namespaced: true,
	actions: {
		addOdd(context, value) {
			if (context.state.sum % 2) {
				context.commit('ADD', value)
			};
		},
		addWait(context, value) {
			setTimeout(() => {
				context.commit('ADD', value)
			}, 500);
		}
	},
	mutations: {
		ADD(state, value) {

			state.sum += value
		},
		SUBTRACT(state, value) {
			state.sum -= value
		},
	},
	state: {
		sum: 0, //求和数
		school: '哔站',
		subject: '前端',
	},
	getters: {
		bigSum(state) {
			return state.sum * 10
		}
	}
}
const PersonOptions = {
	namespaced: true,
	actions: {
		addZhang(context, value) {
			if (value.name.indexOf('张') === 0) {
				context.commit('PersonAdd', value)
			} else { alert('请输入姓张的人') }
		},
		addPersonServer(context) {
			axios({
				methods: 'get',
				url: 'https://api.uixsj.cn/hitokoto/get?type=social'
			}).then(response => {
				context.commit('PersonAdd', { id: nanoid(), name: response.data })
			}, error => { 
				alert(error.message)
			})
		}
	},
	mutations: {
		PersonAdd(state, value) {
			state.persons.unshift(value)
		}
	},
	state: {
		persons: [{ id: "001", name: '张三' }]
	},
	getters: {
		firstPersonName(state) {
			return state.persons[0].name
		}
	}
}

//创建并暴露store
export default new Vuex.Store({
	modules: {
		CountOptions,
		PersonOptions
	}
})

store/index.js文件进行拆分

  • 目录结构
    在这里插入图片描述
    index.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'


import CountOptions from './CountOptions'
import PersonOptions from './PersonOptions'
//应用Vuex插件
Vue.use(Vuex)

//创建并暴露store
export default new Vuex.Store({
	modules: {
		CountOptions,
		PersonOptions
	}
})

CountOptions.js

export default {
	namespaced: true,
	actions: {
		addOdd(context, value) {
			if (context.state.sum % 2) {
				context.commit('ADD', value)
			};
		},
		addWait(context, value) {
			setTimeout(() => {
				context.commit('ADD', value)
			}, 500);
		}
	},
	mutations: {
		ADD(state, value) {

			state.sum += value
		},
		SUBTRACT(state, value) {
			state.sum -= value
		},
	},
	state: {
		sum: 0, //求和数
		school: '哔站',
		subject: '前端',
	},
	getters: {
		bigSum(state) {
			return state.sum * 10
		}
	}
}

PersonOptions.js

import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
    namespaced: true,
    actions: {
        addZhang(context, value) {
            if (value.name.indexOf('张') === 0) {
                context.commit('PersonAdd', value)
            } else { alert('请输入姓张的人') }
        },
        addPersonServer(context) {
            axios({
                methods: 'get',
                url: 'https://api.uixsj.cn/hitokoto/get?type=social'
            }).then(response => {
                context.commit('PersonAdd', { id: nanoid(), name: response.data })
            }, error => {
                alert(error.message)
            })
        }
    },
    mutations: {
        PersonAdd(state, value) {
            state.persons.unshift(value)
        }
    },
    state: {
        persons: [{ id: "001", name: '张三' }]
    },
    getters: {
        firstPersonName(state) {
            return state.persons[0].name
        }
    }
}

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

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

相关文章

C++“static“成员使用

1.static 成员概念 声明为static的类成员称为类的静态成员&#xff0c;用static修饰的成员变量&#xff0c;称之为静态成员变量&#xff1b;用static修饰的成员函数&#xff0c;称之为静态成员函数。静态成员变量一定要在类外进行初始化。 1.2 static特性 静态成员为所有类对…

JVM学习(十):方法区

目录 一、栈、堆和方法区的交互关系 二、对方法区的理解 2.1 方法区在哪里 2.2 方法区的基本概念 2.3 Hotspot中方法区的演进 三、方法区的大小 3.1 设置参数 3.1.1 jdk7及以前 3.1.2 jdk8以后&#xff1a; 3.2 配置参数演示OOM 四、方法区的内部结构 4.1 方法区里…

【Java虚拟机】JVM调优和分析案例综合实战

1.什么是JVM性能优化 jvm性能优化涉及到两个很重要的概念&#xff1a;吞吐量和响应时间。jvm调优主要是针对他们进行调整优化&#xff0c;达到一个理想的目标&#xff0c;根据业务确定目标是吞吐量优先还是响应时间优先。 吞吐量&#xff1a;用户代码执行时间/(用户代码执行时…

C语言学习分享(第六次)------数组

&#x1f493;博主CSDN主页:杭电码农-NEO&#x1f493;   ⏩专栏分类:C语言学习分享⏪   &#x1f69a;代码仓库:NEO的学习日记&#x1f69a;   &#x1f339;关注我&#x1faf5;带你学习更多C语言知识   &#x1f51d;&#x1f51d; 数组详解 1. 前言&#x1f536;2. …

使用 spring 的 IoC 的实现账户的CRUD(2)双层实现

spring实现service和dao的数据的查找 dao层设置接口实现dao层的接口service设置接口通过注入dao层&#xff0c;来实现接口 //dao层的接口&#xff0c;定义了根据id查询的方法 public interface Accountdao {Account findByid(int id); }实现接口&#xff1a;实现了查询的方法 …

【模板】拓扑排序

import java.util.Scanner; import java.util.*;// 注意类名必须为 Main, 不要有任何 package xxx 信息 public class Main {public static void main(String[] args) {Scanner in new Scanner(System.in);int point in.nextInt();int side in.nextInt();int[][] arr new i…

MacOS下安装和配置Nginx

一、安装brew /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"按回车后&#xff0c;根据提示操作&#xff1a;输入镜像序号 --> 输入Y&#xff0c;回车等待brew安装完成即可。 在终端输入brew -v后&#xff0c;会提示…

【牛客刷题专栏】0x25:JZ24 反转链表(C语言编程题)

前言 个人推荐在牛客网刷题(点击可以跳转)&#xff0c;它登陆后会保存刷题记录进度&#xff0c;重新登录时写过的题目代码不会丢失。个人刷题练习系列专栏&#xff1a;个人CSDN牛客刷题专栏。 题目来自&#xff1a;牛客/题库 / 在线编程 / 剑指offer&#xff1a; 目录 前言问…

Jedis客户端和SpringDataRedis客户端

目录 3.Redis的Java客户端 3.1.Jedis客户端 3.1.1.快速入门 3.1.2.连接池 3.2.SpringDataRedis客户端 3.2.1.快速入门 3.2.2.自定义序列化 3.2.3.StringRedisTemplate 3.Redis的Java客户端 3.1.Jedis客户端 Jedis的官网地址&#xff1a; GitHub - redis/jedis: Redis…

单片机中时钟分析与快速读懂时序图的方法

目录 一、时钟电路 二、周期 三、时序 我们都知道在学校是通过铃声来控制所有班级的上下课时间&#xff0c;那个单片机是通过什么样的办法进行取指令&#xff0c;执行指令和其它操作的呢&#xff1f;在这里引入了一个时序的概念。 一、时钟电路 单片机时钟电路有三种方式…

LoadRunner的简单使用

目录 1、LoadRunner工具介绍 2、VUG的使用 3、Controller的使用 3.1、场景设计 3.2、场景运行及结果 4、Analysis的使用 1、LoadRunner工具介绍 Virtual User Generator&#xff1a;主要用来生成性能测试脚本Controller&#xff1a;创建测试场景&#xff0c;运行测试脚本、…

民用电力远程监控解决方案

民用电力远程监控解决方案 项目背景 随着我国城市现代化的飞速发展&#xff0c;城市配电系统的不断改造更新&#xff0c;信息化、网络化和智能化的快速发展&#xff0c;要求箱变安全稳定运行&#xff0c;出现故障能够及时排除保证快速供电。 但是&#xff0c;电力行业的监控…

如何挖掘闲置硬件资源的潜力-PrestoDB缓存加速实践小结

用户体验的追求是无限的&#xff0c;而成本是有限的&#xff0c;如何平衡&#xff1f; 用户体验很重要&#xff0c;降本也很重要。做技术的都知道&#xff0c;加机器堆资源可以解决绝大多数的用户觉得慢的问题&#xff0c;但要加钱。没什么用户体验是开发不了的&#xff0c;但…

阿里高P谈内卷,基础牢固才能破局,你的技术栈深度跟广度真的够么?

​ ​ 最近内卷严重&#xff0c;各种跳槽裁员&#xff0c;分享一套学习笔记 / 面试手册&#xff0c;准备跳槽的朋友可以好好刷一刷&#xff0c;还是挺有必要的&#xff0c;它几乎涵盖了所有的软件测试技术栈&#xff0c;非常珍贵&#xff0c;肝完进大厂&#xff01;妥妥的。相信…

PID算法(位置式pid算法和增量式pid算法)

这里写目录标题 PID算法介绍比例环节比例积分环节比例积分微分环节 位置式PID增量式PIDPID参数整定采样周期选择PID参数整定方法![请添加图片描述](https://img-blog.csdnimg.cn/849bf1672243484699b131b487f05a55.png)试凑法临界比例法一般调节法 PID算法介绍 PID 算法是闭环…

使用Process Monitor探测Windows系统高DPI缩放设置的注册表项

目录 1、在高显示比例下部分软件界面显示模糊问题 2、如何设置才能使得软件显示的清晰一些&#xff1f; 3、使用Process Monitor监测上述设置对应的注册表的操作 4、最后 VC常用功能开发汇总&#xff08;专栏文章列表&#xff0c;欢迎订阅&#xff0c;持续更新...&#xff…

分布式 04 nginx 的使用

01.Nginx可以理解成为一个代理运营商在计算机网络中。用户发送的请求在Nginx中处理&#xff0c;而后分配给相关的服务器 02.在Nginx文件中conf文件件&#xff0c;中修改nginx.conf文件 首先先去监听和获取请求&#xff0c;使用关键字server 这个是浏览器url中输入localhost时…

如何在本地部署运行ChatGLM-6B

在本篇技术博客中&#xff0c;将展示如何在本地获取运行代码和模型&#xff0c;并配置环境以及 Web GUI&#xff0c;最后通过 Gradio 的网页版 Demo 进行聊天。 官方介绍 ChatGLM-6B 是一个开源的、支持中英双语的对话语言模型&#xff0c;基于 General Language Model (GLM)…

Flutter 自定义裁剪之圆形豁口/缺口

目录 Flutter自定义裁剪Flutter的自定义裁剪类CustomClipper裁剪的实际代码思路分析注意点完整代码总结如图所示,图中的圆形缺口,需要我们自定义裁剪,才能实现。 Flutter自定义裁剪 裁剪,我们想到的是剪刀,实际上,Flutter的裁剪原理,和我们现实物理世界的剪刀是一样的…

木夕的IC日记——Vim使用【一】

Vim使用日记【一】 Vim的运行方式进入Vim第一步&#xff1a;打开文件保存文件并退出Vim三种模式下能做哪些事命令模式编辑模式底行模式Visual Block功能 Vim的运行方式 作为Linux系统中最常用的文本编辑器&#xff0c;Vim体现了Linux“万物皆是文件”的设计哲学。通过Vim&…