在上述要求中实现以“荣成学院信息管理系统”为例,简易实现教师和学生的管理。 其中教师端:主要功能是输入教师信息,并添加到教师列表中,然后可能给指定ID的教师增加薪酬。 学生端:主要功能是给学生增加创新成绩,每次递增5分,最高成绩为100分,成绩范围:30~95。
时间: 2024-03-01 20:49:44 浏览: 17
好的,以下是一个简单的实现荣成学院信息管理系统的示例代码:
1. 在store/modules目录下创建students.js和teachers.js文件,分别实现学生和教师的管理逻辑。示例代码如下:
students.js:
```javascript
const state = {
students: []
}
const mutations = {
ADD_STUDENT(state, student) {
state.students.push(student)
},
UPDATE_STUDENT_SCORE(state, { id, score }) {
const student = state.students.find(student => student.id === id)
if (student) {
student.score += score
if (student.score > 100) {
student.score = 100
}
}
}
}
const actions = {
addStudent({ commit }, student) {
commit('ADD_STUDENT', student)
},
updateStudentScore({ commit }, { id, score }) {
commit('UPDATE_STUDENT_SCORE', { id, score })
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
```
teachers.js:
```javascript
const state = {
teachers: []
}
const mutations = {
ADD_TEACHER(state, teacher) {
state.teachers.push(teacher)
},
INCREASE_TEACHER_SALARY(state, id) {
const teacher = state.teachers.find(teacher => teacher.id === id)
if (teacher) {
teacher.salary += 1000
}
}
}
const actions = {
addTeacher({ commit }, teacher) {
commit('ADD_TEACHER', teacher)
},
increaseTeacherSalary({ commit }, id) {
commit('INCREASE_TEACHER_SALARY', id)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
```
2. 在store/index.js文件中,将学生和教师模块注册进来。示例代码如下:
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
import students from './modules/students'
import teachers from './modules/teachers'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
students,
teachers
}
})
```
3. 在组件中使用store,实现教师和学生管理的功能。示例代码如下:
教师管理组件:
```vue
<template>
<div>
<h2>教师列表</h2>
<ul>
<li v-for="teacher in teachers" :key="teacher.id">
{{ teacher.name }} ({{ teacher.salary }})
<button @click="increaseSalary(teacher.id)">增加薪酬</button>
</li>
</ul>
<h2>添加教师</h2>
<div>
名字:<input v-model="teacherName">
薪酬:<input v-model.number="teacherSalary">
<button @click="addTeacher">添加</button>
</div>
</div>
</template>
<script>
export default {
computed: {
teachers() {
return this.$store.state.teachers.teachers
}
},
data() {
return {
teacherName: '',
teacherSalary: 0
}
},
methods: {
addTeacher() {
const teacher = {
id: new Date().getTime(),
name: this.teacherName,
salary: this.teacherSalary
}
this.$store.dispatch('teachers/addTeacher', teacher)
this.teacherName = ''
this.teacherSalary = 0
},
increaseSalary(id) {
this.$store.dispatch('teachers/increaseTeacherSalary', id)
}
}
}
</script>
```
学生管理组件:
```vue
<template>
<div>
<h2>学生列表</h2>
<ul>
<li v-for="student in students" :key="student.id">
{{ student.name }} ({{ student.score }})
<button @click="increaseScore(student.id)">增加成绩</button>
</li>
</ul>
<h2>添加学生</h2>
<div>
名字:<input v-model="studentName">
<button @click="addStudent">添加</button>
</div>
</div>
</template>
<script>
export default {
computed: {
students() {
return this.$store.state.students.students
}
},
data() {
return {
studentName: '',
}
},
methods: {
addStudent() {
const student = {
id: new Date().getTime(),
name: this.studentName,
score: 30
}
this.$store.dispatch('students/addStudent', student)
this.studentName = ''
},
increaseScore(id) {
const score = Math.min(5, 100 - this.$store.state.students.students.find(student => student.id === id).score)
this.$store.dispatch('students/updateStudentScore', { id, score })
}
}
}
</script>
```
注意:以上代码仅为示例,具体实现可能需要根据实际情况进行调整。