Vue3+Element-ul学生管理系统(项目实战)

要发奋做一个可爱的人。不埋怨谁，不嘲笑谁，也不羡慕谁，阳光下灿烂，风雨中奔跑，做自我的梦，走自我的路！

看本项目的前提自己学过Vue2+Vue3+Elementui组件库

项目的PTT的介绍:

具体的环境配置操作:

core-js 它是JavaScript标准库的 polyfill（垫片/补丁）, 新功能的es'api'转换为大部分现代浏览器都可以支持运行的一个'api' 补丁包集合。 2.因为官方库对他介绍的形容 2.1.它支持最新的 ECMAScript 标准 2.2.它支持ECMAScript 标准库提案 2.3.它支持一些 WHATWG / W3C 标准（跨平台或者 ECMAScript 相关） 2.4.它最大限度的模块化：你能仅仅加载你想要使用的功能 2.5.它能够不污染全局命名空间 2.6.它和babel紧密集成：这能够优化core-js的导入 2.7.它是最普遍、最流行的给 JavaScript 标准库打补丁的方式。

项目结构的信息:

文件的结构介绍解析:

项目实现的效果图如下所示:

项目的心得:

• 自己回去思考项目开发使用的技术有哪些
• 比如这个项目采用的是Vue2+ element-ui“: 组件库
• 自己所学习的知识手写出一个项目是对于自己所学的Vue框架的知识点稳固
• 自己所学习的知识点将自己所学的内容知识点进行融汇柜台
• 写项目让自己了解具体的业务开发的流程,了解自己如何去配置一个综合项目的环境配置
• 在写项目的过程对自己的逻辑思维进行提升
• 在写项目的过程中会有以下的疑问.这个项目采用的技术是什么?为什么要这样写？如何去写好这个项目？
•在写项目的过程中可能会出现bug但是自己也要去解决这个bug.因为在写项目的过程中会出现很多的问题.关键在于对自己如何去解决这个问题。
•项目会认自己在开发中使用很多的第三方库的组件,而这些组件也是自己学习的知识的一部分。

项目展示的部分代码:

main.js文件

import Vue from 'vue'
import App from './App.vue'
import './plugins/element.js'
import router from './router'
import VCharts from 'v-charts'
Vue.config.productionTip = false
Vue.use(VCharts)
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router/index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../components/HomeView.vue'
// 信息管理的模块
import StudentManage from "@/views/student/StudentManage";
// 增加学生管理的信息模块
import AddStudent from "@/views/student/StudentAdd";
// 查询所有的的学生信息
import StudentSee from "@/views/student/StudentSee";
// 上面为第一部分
//  成绩管理的模块
// 软件工程
import SoftwareEngineering from "@/views/achievement/SoftwareEngineering";
// 计算机
import CompilationPrinciple from "@/views/achievement/CompilationPrinciple";
// 编译原理
import ComputerNetwork from "@/views/achievement/ComputerNetwork";
// 软件管理
import DataStructure from "@/views/achievement/DataStructure";
// 高等数据
import HighNumber from "@/views/achievement/HighNumber";

// 上面的第二部分 成绩管理模块
// student/dashboard
import DashboardView from "@/views/student/DashboardView";

import BodyView from "@/views/BodyView";

// 课程管理
import CurriculumView from "@/views/curriculum/CurriculumView";
//其他的设置
import SettingView from "@/views/SettingView";

Vue.use(VueRouter)

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

Vue.use(VueRouter)
const routes = [
  {
    // 父盒子的组件
    path: '/father',
    name: 'father',
    component: BodyView,
    children:[
      {
        path: '/student/manage',
        name: 'StudentManage',
        component: StudentManage
      },
      {
        path: '/student/add',
        name: 'AddStudent',
        component: AddStudent
      },
      {
        path: '/student/see',
        name: 'StudentSee',
        component: StudentSee
      },
      {
        path: '/achievement/software_engineering',
        name: 'SoftwareEngineering',
        component: SoftwareEngineering
      },
      {
        path: '/achievement/compilation_principle',
        name: 'CompilationPrinciple',
        component:CompilationPrinciple
      },
      {
        path: '/achievement/computer_network',
        name: 'ComputerNetwork',
        component: ComputerNetwork
      },
      {
        path: '/achievement/data_structure',
        name: 'DataStructure',
        component: DataStructure
      },
      {
        path: '/achievement/high_number',
        name: 'HighNumber',
        component: HighNumber
      },
      {
        path: '/student/dashboard',
        name: 'Dashboard',
        component: DashboardView
      },

      {
        path: '/curriculum',
        name: 'AddCurriculum',
        component: CurriculumView
      },
      {
        path: '/setting',
        name: 'settingView',
        component: SettingView
      }
    ]
  },
  {
    path: '/',
    name: 'home',
    component: HomeView
  }


]

const router = new VueRouter({
  routes
})

export default router

App.vue文件

<template>
  <div id="app">
    <!-- 开始路由跳转的页面 -->
    <router-view/>
  </div>
</template>

<style>
#app {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.el-container {

}

.el-header {
  background-color: #FFFFFF;
  color: #e4f2ff;
}

.el-main {
  background-color: #FFFFFF;
  margin: 25px 25px 25px 25px;
  border-radius: 15px 15px 15px 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: 100px;
}

.el-footer {
  background-color: #ffffff;
  margin-top: -50px;
  z-index: 9999;
  left: 0;
  clear: both;
}
</style>

BodyView.vue文件

<template>
  <transition name="el-fade-in-linear">
    <div v-show="!show" class="transition-box">
      <!-- 左 -->
      <el-row :style="{height:'100%'}">
        <el-container style="height: 100%;">
          <el-aside>
            <NavMenu/>
          </el-aside>

          <el-container style="height: auto;background:#FFFAFA">
            <el-header>
              <!-- 头部 -->
              <HeaderView/>
            </el-header>

            <el-main>
              <!-- 默认路由跳到位置 -->
              <router-view/>
            </el-main>

            <el-footer>
              <FooterView>
              </FooterView>
            </el-footer>
          </el-container>
        </el-container>
      </el-row>
    </div>
  </transition>
</template>
<script>
// 脚步
import FooterView from "@/components/FooterView"
// 头部
import HeaderView from "@/components/HeaderView"
// 侧边栏
import NavMenu from "@/components/NavMenu"

export default {
  name: 'BodyView',
  components: {FooterView, HeaderView, NavMenu},
  props: {
    show: {}
  }
}
</script>
<style>

.transition-box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

</style>

HomeView.vue文件

<template>
  <div class="home">
    <el-row type="flex" justify="center" align="middle" style="height: 100%">
      <div class="login">
        <el-col :span="12" style="height: 100%">
          <el-row type="flex" justify="center" align="bottom" style="height: 50%">
            <div style="font-size: 50px;margin-bottom: 10px">Welcome</div>
          </el-row>
          <el-row type="flex" justify="center" align="top" style="height: 50%">
            <div style="font-size: 40px;margin-top: 10px">Hello Word学生管理系统</div>
          </el-row>
        </el-col>
        <el-col :span="12" style="height: 100%;background: #FFFFFF">
          <el-row type="flex" justify="center" align="middle" style="height: 100%">
            <!-- 首页条到登录页面 -->
            <LoginView :setShow="setShow"/>
          </el-row>
        </el-col>
      </div>
    </el-row>
  </div>
</template>

<script>
import LoginView from "@/components/LoginView";

export default {
  name: "HomeView",
  components: {LoginView},
  props: {
    setShow: {
      type: Function,
      default: () => {
      }
    }
  }
}
</script>

<style scoped>

.login {
  background: rgba(255, 255, 255, 0.68);
  height: 60%;
  width: 60%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}

.home {
  background: url("../assets/2.webp");
  height: 100%;
  width: 100%;
}
</style>

LoginView.vue文件

<template>
  <!-- 用户登录页面 -->
  <el-form ref="form" :model="form" label-width="100px" style="width: 80%">
    <el-form-item label="用户名">
      <el-input v-model="form.user" prefix-icon="el-icon-user-solid"  placeholder="请输入用户名"></el-input>
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.passwd" type="password" show-password prefix-icon="el-icon-lock"  placeholder="请输入密码"></el-input>
    </el-form-item>
    <el-form-item>
      <el-checkbox v-model="form.tag">三天免登录</el-checkbox>
      <div style="float: right">
      <el-link>忘记密码？</el-link>
      </div>
    </el-form-item>
    <el-form-item style="text-align: center">
      <el-button  type="primary" round @click="onSubmit" style="width: 100%">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      form: {
        user: '',
        passwd: '',
        tag: true
      }
    }
  },
  methods: {
    onSubmit() {
      console.log(this.form.user + this.form.passwd)
      if (this.form.user === "Hello" && this.form.passwd === "word") {
        this.$message({
          showClose: true,
          message: '登录成功',
          type: 'success'
        });
        this.$router.push('/student/dashboard')
      }
      else
      {
        this.$message({
          showClose: true,
          message: '用户名或密码错误',
          // 登录错误后可以跳转异常页面
          type: 'error'
        });
      }
    }
  }
}




</script>

<style scoped>

</style>

NavMenu.vue文件


// 侧边栏
<template>
  <!-- 侧边栏 -->
  <div style="height: 100%" id="a10086">
    <el-row class="tac" style="background-color: #006873ff; height: 100%">
      <el-col>
        <!-- @open="handleOpen"  打开
          @close="handleClose"  关闭-->
        <el-menu
          class="el-menu-vertical-demo"
          :router="true"
          text-color="#ffffffff"
          background-color="#006873ff"
          active-text-color="green"
          @open="handleOpen"
          @close="handleClose"
        >
        <!-- 学生管理的模块 -->
          <el-submenu index="one">
            <template slot="title">
              <!-- class图标组件库 -->
              <i class="el-icon-user-solid"></i>
              <span>学生管理</span>
            </template>
        
            <el-menu-item-group>
              <el-menu-item index="/student/dashboard">学生的名单管理</el-menu-item>
            </el-menu-item-group>

            <el-menu-item-group>
              <template slot="title">我管理的</template>

              <!-- 当用户点击信息管理时 -->
              <el-menu-item index="/student/manage"> 信息管理 </el-menu-item>

              <el-menu-item index="/student/add"> 新增学生 </el-menu-item>
            </el-menu-item-group>


            <el-menu-item-group title="在校生">
              <el-menu-item index="/student/see">所有学生</el-menu-item>
            </el-menu-item-group>


          </el-submenu>

          <!-- 成绩管理的模块 -->
          <el-submenu index="/achievement">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">成绩管理</span>
            </template>
            <el-menu-item-group>
              <template slot="title">我担任的</template>

              <el-menu-item index="/achievement/software_engineering">
                软件工程
              </el-menu-item>
              <el-menu-item index="/achievement/computer_network">
                计算机网络
              </el-menu-item>
              <el-menu-item index="/achievement/compilation_principle">
                编译原理
              </el-menu-item>
              <el-menu-item index="/achievement/data_structure">
                数据结构
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="我可查看的">
              <el-menu-item index="/achievement/high_number"
                >高等数学</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <!-- 课程管理的系统 -->
          <el-menu-item index="/curriculum">
            <i class="el-icon-s-order"></i>
            <span slot="title">课程管理</span>
          </el-menu-item>
          <!-- 其他的内容设置 -->
          <el-menu-item index="/setting">
            <i class="el-icon-setting"></i>
            <span slot="title">其他设置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "NavMenu",
  methods: {
    // 打开
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    // 关闭
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    jumpTo(path) {
      this.$router.push(path);
    },
  },
};
</script>

<style scoped>
</style>

HeaderView.vue文件:

<template>
  <div style="height: 100%">
    <div style="float: left;height: 100%;width: 50%">
      <el-row type="flex" align="middle" style="height: 100%">
        <BreadcrumbView/>
      </el-row>
    </div>
    <div style="float: right;height: 100%;width: 50%">
      <el-row style="height:100%" type="flex" align="middle" justify="end">
        欢迎您：{{name}} &nbsp;&nbsp;&nbsp;
        </el-row>
    </div>
  </div>
</template>

<script>
import BreadcrumbView from "@/components/BreadcrumbView";
export default {
  name: "HeaderView",
  components: {BreadcrumbView},
  data()
  {
    return {
      name:"Hellow"
    }
  }
}
</script>

<style scoped>
*{
  color: rgb(14, 117, 143);
  font-weight: 900;
}

</style>

FooterView.vue文件:

<template>
  <!-- 页面的脚步 -->
  <div style="height: 100%">
    <!-- 利用的组件库 -->
    <div style="float: left;height: 100%;width: 50%">
      <el-row type="flex" align="middle" style="height: 100%">
        &nbsp; &nbsp;
        <i class="fa fa-qq" style="font-size:20px;color: #7a879a;"></i>
        &nbsp;
        &nbsp;
        &nbsp;
        <i class="fa fa-twitter" style="font-size:24px;color: #7a879a;"></i>
      </el-row>
    </div>
    <div style="float: right;height: 100%;width: 50%">
      <el-row style="height:100%;font-size:12px;color: #7a879a;" type="flex" align="middle" justify="end">
        <p>
         2022年9月-12月
        </p>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "FooterView"
}
</script>

<style scoped>

</style>

achievement模块:

CompilationPrinciple.vue

<template>
  <el-table
      :data="tableData"
      stripe
      style="width: 100%">
    <el-table-column
        prop="courseName"
        label="课程名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="studentName"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="studentNumber"
        label="学号">
    </el-table-column>
    <el-table-column
        prop="achievement1"
        label="平日成绩">
    </el-table-column>
    <el-table-column
        prop="achievement2"
        label="卷面成绩">
    </el-table-column>
    <el-table-column
        prop="ans"
        label="总成绩">
    </el-table-column>
    <el-table-column>
      <template slot="header" slot-scope="{}">
        <el-input
            placeholder="输入关键字搜索"/>
      </template>
      <el-button type="primary">修改成绩</el-button>
    </el-table-column>
  </el-table>
  <!--  -->
</template>

<script>
export default {
  name: "CompilationPrinciple",
  parent:['cName'],
  data() {
    return {
      tableData: [{
        courseName: '编译原理',
        studentNumber: '1001',
        studentName: '王小虎',
        achievement1: 40,
        achievement2: 50,
        ans : 90
      },
      ]
    }
  }
}
</script>

<style scoped>

</style>

ComputerNetwork.vue

<template>
  <el-table
      :data="tableData"
      stripe
      style="width: 100%">
    <el-table-column
        prop="courseName"
        label="课程名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="studentName"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="studentNumber"
        label="学号">
    </el-table-column>
    <el-table-column
        prop="achievement1"
        label="平日成绩">
    </el-table-column>
    <el-table-column
        prop="achievement2"
        label="卷面成绩">
    </el-table-column>
    <el-table-column
        prop="ans"
        label="总成绩">
    </el-table-column>
    <el-table-column>
      <template slot="header" slot-scope="{}">
        <el-input
            placeholder="输入关键字搜索"/>
      </template>
      <el-button type="primary">修改成绩</el-button>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "ComputerNetwork",
  data() {
    return {
      tableData: [{
        courseName: '计算机网络',
        studentNumber: '1001',
        studentName: '王小虎',
        achievement1: 40,
        achievement2: 50,
        ans : 90
      }
      ]
    }
  }
}
</script>

<style scoped>

</style>

DataStructure.vue

<template>
  <el-table
      :data="tableData"
      stripe
      style="width: 100%">
    <el-table-column
        prop="courseName"
        label="课程名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="studentName"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="studentNumber"
        label="学号">
    </el-table-column>
    <el-table-column
        prop="achievement1"
        label="平日成绩">
    </el-table-column>
    <el-table-column
        prop="achievement2"
        label="卷面成绩">
    </el-table-column>
    <el-table-column
        prop="ans"
        label="总成绩">
    </el-table-column>
    <el-table-column>
      <template slot="header" slot-scope="{}">
        <el-input
            placeholder="输入关键字搜索"/>
      </template>
      <el-button type="primary">修改成绩</el-button>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "DataStructure",
  parent:['cName'],
  data() {
    return {
      tableData: [{
        courseName: '数据结构',
        studentNumber: '1001',
        studentName: '我数据内容',
        achievement1: 40,
        achievement2: 50,
        ans : 90
      }
      ]
    }
  }
}
</script>

<style scoped>

</style>

HighNumber.vue

<template>
<div>
  <el-table
      :data="tableData"
      stripe
      style="width: 100%">
    <el-table-column
        prop="courseName"
        label="课程名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="studentName"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="studentNumber"
        label="学号">
    </el-table-column>
    <el-table-column
        prop="achievement1"
        label="平日成绩">
    </el-table-column>
    <el-table-column
        prop="achievement2"
        label="卷面成绩">
    </el-table-column>
    <el-table-column
        prop="ans"
        label="总成绩">
    </el-table-column>
    <el-table-column>
      <template slot="header" slot-scope="{}">
        <el-input
            placeholder="输入关键字搜索"/>
      </template>
      <el-button type="primary" disabled>修改成绩</el-button>
    </el-table-column>
  </el-table>
</div>
</template>

<script>
export default {
  name: "HighNumber",
  data() {
    return {
      tableData: [{
        courseName: 'Java从入门到放弃',
        studentNumber: '1001',
        studentName: '王小三',
        achievement1: 40,
        achievement2: 50,
        ans: 90
      }
      ],
      methods: {
        setCurrent(row) {
          this.$refs.singleTable.setCurrentRow(row);
        },
        handleCurrentChange(val) {
          this.currentRow = val;
        }
      }
    }
  }
}
</script>

<style scoped>

</style>

SoftwareEngineering.vue

<template>
  <el-table
      :data="tableData"
      stripe
      style="width: 100%">
    <el-table-column
        prop="courseName"
        label="课程名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="studentName"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="studentNumber"
        label="学号">
    </el-table-column>
    <el-table-column
        prop="achievement1"
        label="平日成绩">
    </el-table-column>
    <el-table-column
        prop="achievement2"
        label="卷面成绩">
    </el-table-column>
    <el-table-column
        prop="ans"
        label="总成绩">
    </el-table-column>
    <el-table-column>
      <template slot="header" slot-scope="{}">
        <el-input
            placeholder="输入关键字搜索"/>
      </template>
      <el-button type="primary">修改成绩</el-button>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "SoftwareEngineering",
  parent:['cName'],
  data() {
    return {
      tableData: [{
        courseName: '软件工程',
        studentNumber: '1001',
        studentName: '我是学生',
        achievement1: 40,
        achievement2: 50,
        ans : 90
      }
      ]
    }
  }
}
</script>

<style scoped>

</style>

curriculum模块:

AddCurriculum.vue

<template>
  <el-row type="flex" justify="center">
    <el-form ref="form" :model="sizeForm" label-width="80px">
      <el-form-item label="课程名称">
        <el-input v-model="sizeForm.name"></el-input>
      </el-form-item>
      <el-form-item label="班级">
        <el-select v-model="sizeForm.region" placeholder="请选择班级">
          <el-option label="计算机科学" value="shanghai"></el-option>
          <el-option label="软件工程" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开设时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="开始日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2" style="text-align: center">-</el-col>
        <el-col :span="11">
          <el-date-picker placeholder="结束日期" v-model="sizeForm.date2" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="课程标签">
        <el-checkbox-group v-model="sizeForm.type">
          <el-checkbox-button label="专业核心课" name="type"></el-checkbox-button>
          <el-checkbox-button label="计算机" name="type"></el-checkbox-button>
          <el-checkbox-button label="基础" name="type"></el-checkbox-button>
          <el-checkbox-button label="数据结构" name="type"></el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="授课方式">
        <el-radio-group v-model="sizeForm.resource" size="medium">
          <el-radio border label="线上"></el-radio>
          <el-radio border label="线下"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item size="large">
        <el-button type="primary" @click="onSubmit">立即添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>

<script>
export default {
  name: "AddCurriculum",
  data() {
    return {
      sizeForm: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    }
  }
}
</script>

<style scoped>

</style>

CurriculumView.vue

<template>
  <!-- 在课程管理中增加三个组件 -->
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <!-- 在课程里面插入组件 -->
    <el-tab-pane label="添加课程" name="first">
      <!-- 增加 -->
      <AddCurriculum/></el-tab-pane>
    <el-tab-pane label="删除课程" name="second">
      <!-- 删除 -->
      <DelCurriculum/></el-tab-pane>
    <el-tab-pane label="修改课程" name="third">
      <!-- 修改 -->
      <UpdateCurriculum/></el-tab-pane>
  </el-tabs>
</template>

<script>
// 增加 删除 修改 课程
import AddCurriculum from "@/views/curriculum/AddCurriculum";
import DelCurriculum from "@/views/curriculum/DelCurriculum";
import UpdateCurriculum from "@/views/curriculum/UpdateCurriculum";
export default {
  name: "CurriculumView",
  components: {UpdateCurriculum, DelCurriculum, AddCurriculum},
  data() {
    return {
      activeName: 'first'
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped>

</style>

DelCurriculum.vue

<template>
  <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        fixed
        prop="number"
        label="课程编号"
        width="150">
    </el-table-column>
    <el-table-column
        fixed
        prop="cname"
        label="课程名"
        width="150">
    </el-table-column>
    <el-table-column
        prop="name"
        label="任课教师"
        width="150">
    </el-table-column>
    <el-table-column
        prop="address"
        label="任课地点"
        width="250">
    </el-table-column>
    <el-table-column
        prop="date1"
        label="开课时间"
        width="200">
    </el-table-column>
    <el-table-column
        prop="date2"
        label="结课时间"
        width="200">
    </el-table-column>
    <el-table-column
        prop="room"
        label="任课班级"
        width="200">
    </el-table-column>
    <el-table-column
        label="操作"
        width="200">
      <template slot-scope="scope">
        <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small">
          移除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "DelCurriculum",
  methods: {
    deleteRow(index, rows) {
      this.$confirm('确认修改？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rows.splice(index, 1)
        this.$message({
          type: 'success',
          message: '修改成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  },
  data() {
    return {
      tableData: [
        {
        cname: 'Web开发工程师',
        date1: '2022-09-22',
        date2: '2022-12-19',
        name: '我是张三',
        room: '计算机科学技术C',
        number: '1001',
        address: '大数据学院创新实验室',
      },
      {
        cname: 'Java开发工程师',
        date1: '2022-09-22',
        date2: '2022-12-19',
        name: '我是Java设计工程师',
        room: '计算机科学技术',
        number: '1002',
        address: '清华大学实验室',
      },
      {
        cname: 'MySql数据开发工程师',
        date1: '2022-09-22',
        date2: '2022-12-19',
        name: '大数据库时代',
        room: 'MySql',
        number: '1003',
        address: '北大学实验室',
      },
    ]
    }
  }
}
</script>

<style scoped>

</style>

UpdateCurriculum.vue

<template>
  <el-row>
    <div v-show="tag">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="number" label="课程编号" width="150">
        </el-table-column>
        <el-table-column fixed prop="cname" label="课程名" width="150">
        </el-table-column>
        <el-table-column prop="name" label="任课教师" width="150">
        </el-table-column>
        <el-table-column prop="address" label="任课地点" width="250">
        </el-table-column>
        <el-table-column prop="date1" label="开课时间" width="200">
        </el-table-column>
        <el-table-column prop="date2" label="结课时间" width="200">
        </el-table-column>
        <el-table-column
          prop="room"
          label="任课班级"
          @click="update(scope.$index, tableData)"
          width="200"
        >
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="update(scope.$index, tableData)"
              type="text"
              size="small"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-show="!tag">
      <el-row type="flex" justify="center">
        <el-form ref="form" :model="sizeForm" label-width="80px">
          <el-form-item label="课程名称">
            <el-input v-model="sizeForm.name"></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-select v-model="sizeForm.region" placeholder="班级">
              <el-option label="计算机科学" value="shanghai"></el-option>
              <el-option label="软件工程" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开设时间">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="开始日期"
                v-model="sizeForm.date1"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
            <el-col class="line" :span="2" style="text-align: center">-</el-col>
            <el-col :span="11">
              <el-date-picker
                placeholder="结束日期"
                v-model="sizeForm.date2"
                style="width: 100%"
              ></el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="课程标签">
            <el-checkbox-group v-model="sizeForm.type">
              <el-checkbox-button
                label="专业核心课"
                name="type"
              ></el-checkbox-button>
              <el-checkbox-button
                label="计算机"
                name="type"
              ></el-checkbox-button>
              <el-checkbox-button label="基础" name="type"></el-checkbox-button>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="授课方式">
            <el-radio-group v-model="sizeForm.resource" size="medium">
              <el-radio border label="线上"></el-radio>
              <el-radio border label="线下"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item size="large">
            <el-button type="primary" @click="onSubmit">立即修改</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
  </el-row>
</template>

<script>
export default {
  name: "UpdateCurriculum",
  methods: {
    update() {
      this.tag = !this.tag;
    },
    onSubmit() {
      this.$confirm("确认修改？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "修改成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
  },
  data() {
    return {
      tag: true,
      tableData: [
        {
          cname: "计算机网络",
          date1: "2022-04-03",
          date2: "2022-07-03",
          name: "张亮",
          room: "计算机科学技术C",
          number: "1001",
          address: "大数据学院创新实验室",
        },
        {
          cname: "Web开发工程师",
          date1: "2022-09-22",
          date2: "2022-12-19",
          name: "我是张三",
          room: "计算机科学技术C",
          number: "1001",
          address: "大数据学院创新实验室",
        },
        {
          cname: "Java开发工程师",
          date1: "2022-09-22",
          date2: "2022-12-19",
          name: "我是Java设计工程师",
          room: "计算机科学技术",
          number: "1002",
          address: "清华大学实验室",
        },
        {
          cname: "MySql数据开发工程师",
          date1: "2022-09-22",
          date2: "2022-12-19",
          name: "大数据库时代",
          room: "MySql",
          number: "1003",
          address: "北大学实验室",
        },
        {
          cname: "计算机网络",
          date1: "2022-04-03",
          date2: "2022-07-03",
          name: "张亮",
          room: "计算机科学技术C",
          number: "1001",
          address: "大数据学院创新实验室",
        },
      ],
      sizeForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
};
</script>

<style scoped>
</style>

student模块:

DashboardView.vue

<!-- eslint-disable no-unused-vars -->
<template>
  <div>
    <!-- 查询 -->
    <!--这是新增的查询功能-->
    <el-input
      type="text"
      placeholder="请输入要查询的条件"
      style="width: 25%"
      v-model="search"
      class="searchClass"
    /><el-button type="success" @click="search(that)">搜索</el-button>

    <!-- 添加数据 -->
    <div id="tianjia">
      <el-input
        type="text"
        name="id"
        v-model="addDetail.id"
        value=""
        placeholder="请输入学生的编号"
        style="width: 20%"
      />
      <el-input
        type="text"
        name="name"
        v-model="addDetail.name"
        value=""
        placeholder="请输入学生的姓名"
        style="width: 20%"
      />
      <el-input
        type="text"
        name="adress"
        v-model="addDetail.adress"
        value=""
        placeholder="请输学生的户籍所在地的地址"
        style="width: 20%"
      />

      <el-button type="success" size="big" @click.native.prevent="adddetail()"
        ><font color="#f0f8ff" size="2px">添加</font>
      </el-button>
    </div>
    <!-- 展示数据 -->
    <el-form>
      <!-- 对数据的绑定 -->
      <el-table :data="newsList" style="width: 100%" align="center">
        <el-table-column
          prop="id"
          label="学生的编号"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="学生的姓名"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="adress"
          label="学生的户籍所在地"
          width="200"
        ></el-table-column>
        
        <!--增加 操作 菜单 以及旗下的子菜单 增加 修改-->
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-button
              @click="handleEdit(scope.$index, scope.row)"
              type="info"
              size="small"
              >修改</el-button
            >

            <!--删除按钮-->
            <el-button
              @click.native.prevent="deletedetail(scope.$index, newsList)"
              type="danger"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

    </el-form>

    <!--编辑弹框部分-->
    <div>
      <el-dialog title="编辑" :visible.sync="dialogFormVisible" width="30%">
        <!--这就是一个表格-->
        <el-form :model="form">
          <el-form-item label="学生的编号">
            <el-input v-model="form.id" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="学生的名称">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="学生的户籍所在地">
            <el-input v-model="form.adress" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>

        <!--确定, 取消  按钮-->
        <div>
          <el-button type="primary" @click.native.prevent="editSubForm"
            >确定</el-button
          >
          <el-button @click.native.prevent="dialogFormVisible = false"
            >取消</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
var _index; //定义一个全局变量，以获取行数据的行号
export default {
  data() {
    return {
      dialogFormVisible: false,
      editForm: [],
      form: {
        id: "",
        name: "",
        adress: "",
      },
      selectList: {},
      search: "",
      addDetail: {},

      newsList: [
        {
          id: "1001",
          name: "张宇航",
          adress: "江西省九江市",
        },
        {
          id: "1002",
          name: "胡帅",
          adress: "江西省九江市",
        },
        {
          id: "1003",
          name: "胡滨",
          adress: "江西省九江市",
        },
        {
          id: "1004",
          name: "万怡勇",
          adress: "江西省九江市",
        },
        {
          id: "1005",
          name: "黄文煜",
          adress: "江西省九江市",
        },
      ],
    };
  },
  methods: {
    /*添加方法*/
    adddetail() {
      console.log(1);
      this.$confirm("确认进行添加", "是否继续?", "提示", {
        confirmButtonText: "确定",
        // eslint-disable-next-line no-dupe-keys
        confirmButtonText: "取消",
      })
        .then(() => {
          this.newsList.push({
            id: this.addDetail.id,
            name: this.addDetail.name,
            adress: this.addDetail.adress,
          }),
            /*成功添加之后的提示信息*/
            this.$message({
              type: "success",
              message: "添加成功",
            });
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: err,
          });
        });
    },

    /*删除方法*/

    deletedetail: function (index) {
      this.$confirm("此操作将删除数据,", "是否继续?", "提示", {
        confirmButtonText: "确定",
        // eslint-disable-next-line no-dupe-keys
        confirmButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.newsList.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: err,
          });
        });
    },

    /*编辑修改数据*/
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.form = Object.assign({}, row);
      _index = index;
      console.log(index+" "+_index)

      //取到这一栏的值，也就是明白是在那一栏进行操作，从而将编辑后的数据存到表格中
    },
    //保存编辑
    editSubForm() {
      var editData = _index;
      this.newsList[editData].id = this.form.id;
      this.newsList[editData].name = this.form.name;
      this.newsList[editData].adress = this.form.adress;
      this.dialogFormVisible = false;
    },
  },
};
</script>
<style>
.searchClass {
  margin-left: 600px;
}
#tianjia {
  margin-left: 600px;
}

.title {
  padding: 10px;
  border-bottom: 1px solid #ddffff;
}

.mask {
  width: 300px;
  height: 250px;
  background: rgba(255, 255, 255, 1);
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 47;
  border-radius: 5px;
}

#mask {
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
}
</style>

DescriptionsView.vue

<template>
  <div>
    <el-descriptions class="margin-top" :column="3" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          姓名
        </template>
        {{ student.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          性别
        </template>
        {{ student.sex }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        {{ student.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          用户类型
        </template>
        <el-tag size="small">{{ userT[student.userType] }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          家庭地址
        </template>
        {{ student.address }}
      </el-descriptions-item>
    </el-descriptions>

  </div>
</template>

<script>
export default {
  name: "DescriptionsView",
  props: ["student"],
  data() {
    return {
      userT: ['', '学生', '班长', '老师']
    }
  }
}
</script>

<style scoped>

</style>

StudentAdd.vue

<template>
  <el-row>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-row>
        <el-col :span="6">
          <el-form-item label="学生姓名" prop="name" >
            <el-input v-model="ruleForm.name" style="width: 200px" placeholder="姓名"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="ruleForm.sex" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
      </el-row>
      <el-form-item label="班级" prop="classStudent">
        <el-select v-model="ruleForm.classStudent" placeholder="请选择班级">
          <el-option label="计算机科学技术" value="计算机科学与技术"></el-option>
          <el-option label="软件工程" value="软件工程"></el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-form-item label="入学时间" required>
          <el-form-item prop="date1">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"></el-date-picker>
          </el-form-item>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="毕业时间" required>
          <el-form-item prop="date2">
            <el-date-picker placeholder="选择时间" v-model="ruleForm.date2"></el-date-picker>
          </el-form-item>
        </el-form-item>
      </el-row>
      <el-form-item label="是否住校" prop="delivery">
        <el-switch v-model="ruleForm.delivery"></el-switch>
      </el-form-item>
      <el-row>
        <el-col :span="6">
          <el-form-item label="联系电话" prop="phone">
            <el-input v-model="ruleForm.phone" style="width: 200px"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="家庭住址" prop="address">
        <el-input type="textarea" v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即添加</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>


<script>
export default {
  data() {
    return {
      ruleForm: {
        name: '',
        sex: '',
        classStudent: '',
        date1: '',
        date2: '',
      },
      rules: {
        name: [
          {required: true, message: '请输入名字', trigger: 'blur'},
          {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ],
        classStudent: [
          {required: true, message: '请选择班级', trigger: 'change'}
        ],
        date1: [
          {type: 'date', required: true, message: '请选择日期', trigger: 'change'}
        ],
        date2: [
          {type: 'date', required: true, message: '日期', trigger: 'change'}
        ],
        phone: [
          {required: true, message: '请选择活动资源', trigger: 'change'}
        ],
        address: [
          {required: true, message: '请填写活动形式', trigger: 'blur'}
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('200!');
        } else {
          console.log('error');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

StudentManage.vue

<template>
  <el-table style="width: 100%"
            :data="tableData"
            border
  >
    <el-table-column style="width: 100%"
        prop="number"
        label="学号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="address"
        label="地址">
    </el-table-column>
    <el-table-column
        prop="phone"
        label="联系电话">
    </el-table-column>
    <el-table-column>
      <template slot="header" slot-scope="{}">
        <el-input
            placeholder="输入关键字搜索"/>
      </template>
      <el-button type="primary">修改</el-button>
      <el-button type="danger">删除</el-button>
      <el-button type="info">停用</el-button>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "StudentManage",
  data() {
    return {
      tableData: [{
        number: '1001',
        name: '张三',
        address: '山东省临沂市兰山区山水华庭 1518',
        phone: "15266620354"
      }, 
    ]
    }
  }
}
</script>

<style scoped>
.el_table {
  background-color: #F3F6F9;
}
</style>

StudentSee.vue

<template>
  <div>
    <div v-for="i in 7" :key="student[i].number">
      <DescriptionsView :student="student[i]"/>
      <br>
    </div>
    <el-row type="flex" align="middle" justify="center">
      <el-pagination
          layout="prev, pager, next"
          :page-size="5"
          :current-page.sync="current"
          :total="total">
      </el-pagination>
    </el-row>
  </div>
</template>

<script>
import DescriptionsView from "@/views/student/DescriptionsView";

export default {
  name: "StudentSee",
  components: {DescriptionsView},
  data() {
    return {
      count: 0,
      current:1,
      total:15,
      student: [
        {},
        {
          name: '张三',
          sex:'男',
          number: '1001',
          phone: '15266620354',
          address: '山东省兰山区金雀山路金雀公馆1104',
          userType: 1
        },
      ]
    }
  },
  methods: {
    load() {
      this.count += 2
    }
  }
}
</script>

<style scoped>

</style>