项目展示的部分代码:
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}} </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%"> <i class="fa fa-qq" style="font-size:20px;color: #7a879a;"></i> <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>
