VueElement——简单的教务系统

最新推荐文章于 2024-07-23 15:40:17 发布
最新推荐文章于 2024-07-23 15:40:17 发布
阅读量252 收藏
点赞数 8
分类专栏： JavaWeb 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wlx2513/article/details/138190100
版权

准备

参考前面几章

知识点

路由和element组件

源码

//SchoolHomeView.vue
<template>
  <div>
    <!-- 框架 -->
    <!-- height设置高度;border设置边框；solid设置实线；#xxx设置颜色 -->
    <!-- 顶部 -->
    <el-container style="height: 700px; border: 1px solid #9e9797">
      <!-- font-size设置字体大小；background设置背景颜色；text-align设置字体位置 -->
      <el-header
        style="
          font-size: 40px;
          background: rgb(181, 172, 172);
          text-align: center;
        "
        >简单的教务系统</el-header
      >
      <el-container>
        <!-- 左部 -->
        <el-aside width="200px">
          <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '2']">
              <el-submenu index="1">
                <template slot="title"><i class="el-icon-message"></i>人员管理</template>
                <el-menu-item-group>
                  <el-menu-item index="1-1">
                      <router-link to="/teachers">
                          教师管理
                      </router-link>
                  </el-menu-item>
                  <el-menu-item index="1-2">
                      <router-link to="/students">
                          学生管理
                      </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i>成绩</template>
                <el-menu-item-group>
                  <el-menu-item index="2-1">
                    <router-link to="/teachersscore">
                      教师评价
                    </router-link>
                  </el-menu-item>
                  <el-menu-item index="2-2">
                    <router-link to="/studentsscore">
                      学生成绩
                    </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-aside>
        </el-aside>
        <!-- 右部 -->
        <!-- display:flex;justify-content:center;align-items:center 设置盒子居中 -->
        <el-main style="color:rgb(255, 111, 0);font-size:70px;display:flex;justify-content:center;align-items:center">Welcome WWW School</el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {};
</script>

<style>

</style>
//studentsview.vue
<template>
  <div>
    <!-- 框架 -->
    <!-- height设置高度;border设置边框；solid设置实线；#xxx设置颜色 -->
    <!-- 顶部 -->
    <el-container style="height: 700px; border: 1px solid #9e9797">
      <!-- font-size设置字体大小；background设置背景颜色；text-align设置字体位置 -->
      <el-header
        style="
          font-size: 40px;
          background: rgb(181, 172, 172);
          text-align: center;
        "
        >简单的教务系统</el-header
      >
      <el-container>
        <!-- 左部 -->
        <el-aside width="200px">
          <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '2']">
              <el-submenu index="1">
                <template slot="title"
                  ><i class="el-icon-message"></i>人员管理</template
                >
                <el-menu-item-group>
                  <el-menu-item index="1-1">
                    <router-link to="/teachers"> 教师管理 </router-link>
                  </el-menu-item>
                  <el-menu-item index="1-2">
                    <router-link to="/students"> 学生管理 </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title"
                  ><i class="el-icon-menu"></i>成绩</template
                >
                <el-menu-item-group>
                  <el-menu-item index="2-1">
                    <router-link to="/teachersscore">
                      教师评价
                    </router-link>
                  </el-menu-item>
                  <el-menu-item index="2-2">
                    <router-link to="/studentsscore">
                      学生成绩
                    </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-aside>
        </el-aside>
        <!-- 右部 -->
        <el-main>
          <el-table :data="tableData" style="width: 100%" height="250">
            <el-table-column fixed prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="120">
            </el-table-column>
            <el-table-column  prop="date" label="入学日期" width="150">
            </el-table-column>
            <el-table-column prop="Profession" label="专业" width="120">
            </el-table-column>
            <el-table-column prop="address" label="家庭住址" width="300">
            </el-table-column>
            <el-table-column prop="id" label="学号" width="120">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
  
<script>
export default {
  data() {
      return {
        tableData: [{
          date: '2021-09-03',
          name: '小明',
          gender: '男',
          Profession: '网络空间安全',
          address: '福建',
          id: 4681354
        }, {
          date: '2021-09-03',
          name: '小玲',
          gender: '女',
          Profession: '电子信息',
          address: '浙江',
          id: 4685213
        }, {
          date: '2021-09-03',
          name: '李华',
          gender: '男',
          Profession: '统计学',
          address: '北京',
          id: 5468135
        }]
      }
    }
};
</script>
  
<style>
</style>
//teachersview.vue
<template>
  <div>
    <!-- 框架 -->
    <!-- height设置高度;border设置边框；solid设置实线；#xxx设置颜色 -->
    <!-- 顶部 -->
    <el-container style="height: 700px; border: 1px solid #9e9797">
      <!-- font-size设置字体大小；background设置背景颜色；text-align设置字体位置 -->
      <el-header
        style="
          font-size: 40px;
          background: rgb(181, 172, 172);
          text-align: center;
        "
        >简单的教务系统</el-header
      >
      <el-container>
        <!-- 左部 -->
        <el-aside width="200px">
          <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '2']">
              <el-submenu index="1">
                <template slot="title"
                  ><i class="el-icon-message"></i>人员管理</template
                >
                <el-menu-item-group>
                  <el-menu-item index="1-1">
                    <router-link to="/teachers"> 教师管理 </router-link>
                  </el-menu-item>
                  <el-menu-item index="1-2">
                    <router-link to="/students"> 学生管理 </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title"
                  ><i class="el-icon-menu"></i>成绩</template
                >
                <el-menu-item-group>
                  <el-menu-item index="2-1">
                    <router-link to="/teachersscore">
                      教师评价
                    </router-link>
                  </el-menu-item>
                  <el-menu-item index="2-2">
                    <router-link to="/studentsscore">
                      学生成绩
                    </router-link>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-aside>
        </el-aside>
        <!-- 右部 -->
        <el-main>
          <el-table :data="tableData" style="width: 100%" height="250">
            <el-table-column fixed prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="gender" label="性别" width="120">
            </el-table-column>
            <el-table-column  prop="date" label="入职日期" width="150">
            </el-table-column>
            <el-table-column prop="class" label="课程" width="120">
            </el-table-column>
            <el-table-column prop="address" label="家庭住址" width="300">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="120">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
  
<script>
export default {
  data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '张三',
          gender: '男',
          class: '数据库原理与安全',
          address: '上海',
          email: "1111111@qq.com"
        }, {
          date: '2016-08-11',
          name: '李四',
          gender: '男',
          class: '心理学',
          address: '四川',
          email: "1112222@qq.com"
        }, {
          date: '2016-04-15',
          name: '李娜',
          gender: '女',
          class: '专业英语',
          address: '美国',
          email: "11114444@qq.com"
        }]
      }
    }
};
</script>
  
<style>
</style>
//studentsscore.vue
<template>
    <div>
      <!-- 框架 -->
      <!-- height设置高度;border设置边框；solid设置实线；#xxx设置颜色 -->
      <!-- 顶部 -->
      <el-container style="height: 700px; border: 1px solid #9e9797">
        <!-- font-size设置字体大小；background设置背景颜色；text-align设置字体位置 -->
        <el-header
          style="
            font-size: 40px;
            background: rgb(181, 172, 172);
            text-align: center;
          "
          >简单的教务系统</el-header
        >
        <el-container>
          <!-- 左部 -->
          <el-aside width="200px">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
              <el-menu :default-openeds="['1', '2']">
                <el-submenu index="1">
                  <template slot="title"
                    ><i class="el-icon-message"></i>人员管理</template
                  >
                  <el-menu-item-group>
                    <el-menu-item index="1-1">
                      <router-link to="/teachers"> 教师管理 </router-link>
                    </el-menu-item>
                    <el-menu-item index="1-2">
                      <router-link to="/students"> 学生管理 </router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                  <template slot="title"
                    ><i class="el-icon-menu"></i>成绩</template
                  >
                  <el-menu-item-group>
                    <el-menu-item index="2-1">
                      <router-link to="/teachersscore">
                        教师评价
                      </router-link>
                    </el-menu-item>
                    <el-menu-item index="2-2">
                      <router-link to="/studentsscore">
                        学生成绩
                      </router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-aside>
          </el-aside>
          <!-- 右部 -->
          <el-main>
            <el-table :data="tableData" style="width: 100%" height="250">
              <el-table-column fixed prop="name" label="姓名" width="120">
              </el-table-column>
              <el-table-column prop="id" label="学号" width="120">
              </el-table-column>
              <el-table-column prop="class" label="课程" width="120">
              </el-table-column>
              <el-table-column prop="score" label="成绩" width="120">
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
    
  <script>
  export default {
    data() {
        return {
          tableData: [{
            name: '小明',
            id: 4681354,
            class:'体育',
            score:85
          }, {
            name: '小玲',
            id: 4685213,
            class:'专业英语',
            score: 90

          }, {
            name: '李华',
            id: 5468135,
            class:'数据库原理与安全',
            score:88

          }]
        }
      }
  };
  </script>
    
  <style>
  </style>
//teachersscoreview.vue
<template>
    <div>
      <!-- 框架 -->
      <!-- height设置高度;border设置边框；solid设置实线；#xxx设置颜色 -->
      <!-- 顶部 -->
      <el-container style="height: 700px; border: 1px solid #9e9797">
        <!-- font-size设置字体大小；background设置背景颜色；text-align设置字体位置 -->
        <el-header
          style="
            font-size: 40px;
            background: rgb(181, 172, 172);
            text-align: center;
          "
          >简单的教务系统</el-header
        >
        <el-container>
          <!-- 左部 -->
          <el-aside width="200px">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
              <el-menu :default-openeds="['1', '2']">
                <el-submenu index="1">
                  <template slot="title"
                    ><i class="el-icon-message"></i>人员管理</template
                  >
                  <el-menu-item-group>
                    <el-menu-item index="1-1">
                      <router-link to="/teachers"> 教师管理 </router-link>
                    </el-menu-item>
                    <el-menu-item index="1-2">
                      <router-link to="/students"> 学生管理 </router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                  <template slot="title"
                    ><i class="el-icon-menu"></i>成绩</template
                  >
                  <el-menu-item-group>
                    <el-menu-item index="2-1">
                      <router-link to="/teachersscore">
                        教师评价
                      </router-link>
                    </el-menu-item>
                    <el-menu-item index="2-2">
                      <router-link to="/studentsscore">
                        学生成绩
                      </router-link>
                    </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
              </el-menu>
            </el-aside>
          </el-aside>
          <!-- 右部 -->
          <el-main>
            <el-table :data="tableData" style="width: 100%" height="250">
              <el-table-column fixed prop="name" label="姓名" width="120">
              </el-table-column>
              <el-table-column fixed prop="class" label="期次" width="120">
              </el-table-column>
              <el-table-column prop="score" label="分数" width="120">
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </template>
    
  <script>
  export default {
    data() {
        return {
          tableData: [{
            name: '张三',
            class: '期末',
            score: 88
          }, {
            name: '李四',
            class: '期末',
            score: 90
          }, {
            name: '李娜',
            class: '期末',
            score: 95
          }]
        }
      }
  };
  </script>
    
  <style>
  </style>
#router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  {
    path: '/teachers',
    name: 'teachers',
    component: () => import('../views/SchoolSystem/TeachersView.vue')
  },
  {
    path: '/teachersscore',
    name: 'teachersscore',
    component: () => import('../views/SchoolSystem/TeachersScoreView.vue')
  },
  {
    path: '/studentsscore',
    name: 'studentsscore',
    component: () => import('../views/SchoolSystem/StudentsScoreView.vue')
  },
  {
    path: '/',
    name: 'schoolhome',
    component: () => import('../views/SchoolSystem/SchoolHomeView.vue')
  },
  {
    path: '/students',
    name: 'students',
    component: () => import('../views/SchoolSystem/StudentsView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

//App.vue
<template>
  <div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  
}
</script>

<style>

</style>

一定要修改app.vue，才能路由！！！

如果你觉得该文章对你有用的话，请随意打赏（微信），有需要源码可私。

小王在学习了
关注
  • 8
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
vue后台管理系统实践方案总结(一)
m0_61255374的博客
02-18 2079
项目概述 基本业务概述 根据不同的应用场景，电商系统一般都提供了PC端、移动APP、移动Web、微信小程序等多种终端访问方式 管理系统功能 电商后台管理系统用于管理账号、商品分类、商品信息、订单、数据统计等业务功能 开发模式 电商后台管理系统整体采用前后端分离的开发模式，其中前后端项目基于Vue技术栈的SPA项目 技术选型 前端技术栈 vue vue-router Element-UI Axios Echarts 后端技术栈 Node.js Express Jwt Mysql Sequelize 项目部分效
数据库系统课设——教务管理系统
热门推荐
记录了个人在学习生活中的所思所想，在反思自己的同时希望也能够帮到你
11-23 2万+
这两个星期学校进行数据库的课程设计，我利用所学知识做出来了一个较为简单的教务管理系统，具体功能包括登录、人员管理、教师课程申请、管理员审批课程、管理员安排课程、学生选课、教师给学生评分等等。分享一下我的课程设计，记录一下自己的成长过程。《教务管理系统》项目演示前端采用Vue2，后端采用Spring，数据库使用MySQL。系统主要有以下几大模块：用户登录、人员管理、课程申请、课程审批、课程安排、课程选课、成绩评定。
04 微架构教务系统——前端Vue框架搭建
巅峰键盘侠
08-30 1035
1、前端技术 框架：Vue 插件：Vue-Router UI组件：element-ui 开发工具：WebStorm 2018.3 前端项目工程结构概览： 2、系统界面 由于之前给南宁那边公司开发的教务系统有商业协议，不能抽取它的前端程序出来用，而我有不擅长前端开发，所以本来是不打算做系统的前端部分的，但是又觉得不做前端部分的话，这个开源项目就像残缺了一部分一样，最后还是决定...
基于Vue和JavaScript的教务系统前端设计源码
04-17
本项目是基于Vue和JavaScript开发的教务系统前端设计源码，主要使用Html/Css进行开发。项目共包含52个文件，其中Vue...项目结构清晰，代码注释详尽，适合用于学习和研究Vue和JavaScript在教务系统前端开发中的应用。
基于vue + element UI 的后台管理系统模板
09-12
在本项目"基于vue + element UI 的后台管理系统模板"中，开发者可以利用这些组件和功能，快速搭建起一个具备基本管理功能的后台系统。通过动态路由的实现，系统可以根据用户权限动态加载相应的组件和页面，提高用户...
基于vue-nodejs的教务管理系统源码+数据库+毕业设计.zip
07-08
基于vue-nodejs的教务管理系统源码+数据库+毕业设计，已获老师指导并通过的高分项目 项目安装 1、下载node.js 2、检查是否下载成功 node -v 3、npm i @vue/cli -g 4、前后端分别运行： npm install 前端代码运行 ...
springboot+shiro+vue实现的简易教务系统.zip
03-23
《基于SpringBoot、Shiro和Vue的简易教务系统实现详解》 教务管理系统是教育机构信息化建设的重要组成部分，它能够有效地管理和优化教学资源，提高工作效率。本项目以"springboot+shiro+vue实现的简易教务系统.zip...
vue图片存放在public目录和src/assets目录下的区别
Zing_ing的博客
07-19 621
使用随时要更换的图片，有更新动态显示的需求，像banner、轮播、广告、展示性等大型图片放在public下比较合适；而一些icon、精灵图、雪碧图更适合放在assets下。如果图片不需要被处理，比如网站的结构用图，如logo图片，则放public中，否则如内容图片或者需要被构建为base64的小图标可以放assets中。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 169
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 954
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
vue 腾讯云 javascript sdk + 简单富文本组件设计+实战
呵呵哒!的博客
07-19 284
【代码】vue 腾讯云 javascript sdk + 简单富文本组件设计+实战。
VUE中的重点*
qq_61132537的博客
07-22 765
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 94
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
【vueUse库Time模块各函数简介及使用方法--全篇】
最新发布
xiejunlan的博客
07-23 539
vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。
Vue的模板编译：深入理解渲染函数与预编译模板
哎 你看的博客
07-22 829
Vue.js 是一个用于构建用户界面的渐进式框架，它的核心特性之一是其响应式和声明式的模板语法。Vue 的模板不仅仅是简单的字符串插值，它们会被编译成渲染函数，这个过程涉及到将模板字符串转换成 JavaScript 代码。本文将深入探讨 Vue 的模板编译过程，并讨论如何使用预编译模板来提高应用性能。
vue zip文件下载请求封装与使用
Anlittlecat的博客
07-23 147
Excel的话把type改成 { type: ‘application/vnd.ms-excel’ }这里把响应超时时间注释是文件下载接口返回需要较长时间。axios封装（重点是响应拦截）
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 472
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
vue element 的文献管理系统
09-10
Vue Element的文献管理系统是一个基于Vue.js和Element UI组件库开发的应用程序，旨在帮助用户有效地管理和浏览各种文献资源。 该系统提供了用户登录、注册、注销等基本的用户管理功能，以确保数据的安全性和隐私...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值