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.pushVueRouter.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-menuclass="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"stripestyle="width: 100%"><el-table-columnprop="courseName"label="课程名"width="180"></el-table-column><el-table-columnprop="studentName"label="姓名"width="180"></el-table-column><el-table-columnprop="studentNumber"label="学号"></el-table-column><el-table-columnprop="achievement1"label="平日成绩"></el-table-column><el-table-columnprop="achievement2"label="卷面成绩"></el-table-column><el-table-columnprop="ans"label="总成绩"></el-table-column><el-table-column><template slot="header" slot-scope="{}"><el-inputplaceholder="输入关键字搜索"/></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"stripestyle="width: 100%"><el-table-columnprop="courseName"label="课程名"width="180"></el-table-column><el-table-columnprop="studentName"label="姓名"width="180"></el-table-column><el-table-columnprop="studentNumber"label="学号"></el-table-column><el-table-columnprop="achievement1"label="平日成绩"></el-table-column><el-table-columnprop="achievement2"label="卷面成绩"></el-table-column><el-table-columnprop="ans"label="总成绩"></el-table-column><el-table-column><template slot="header" slot-scope="{}"><el-inputplaceholder="输入关键字搜索"/></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"stripestyle="width: 100%"><el-table-columnprop="courseName"label="课程名"width="180"></el-table-column><el-table-columnprop="studentName"label="姓名"width="180"></el-table-column><el-table-columnprop="studentNumber"label="学号"></el-table-column><el-table-columnprop="achievement1"label="平日成绩"></el-table-column><el-table-columnprop="achievement2"label="卷面成绩"></el-table-column><el-table-columnprop="ans"label="总成绩"></el-table-column><el-table-column><template slot="header" slot-scope="{}"><el-inputplaceholder="输入关键字搜索"/></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"stripestyle="width: 100%"><el-table-columnprop="courseName"label="课程名"width="180"></el-table-column><el-table-columnprop="studentName"label="姓名"width="180"></el-table-column><el-table-columnprop="studentNumber"label="学号"></el-table-column><el-table-columnprop="achievement1"label="平日成绩"></el-table-column><el-table-columnprop="achievement2"label="卷面成绩"></el-table-column><el-table-columnprop="ans"label="总成绩"></el-table-column><el-table-column><template slot="header" slot-scope="{}"><el-inputplaceholder="输入关键字搜索"/></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"stripestyle="width: 100%"><el-table-columnprop="courseName"label="课程名"width="180"></el-table-column><el-table-columnprop="studentName"label="姓名"width="180"></el-table-column><el-table-columnprop="studentNumber"label="学号"></el-table-column><el-table-columnprop="achievement1"label="平日成绩"></el-table-column><el-table-columnprop="achievement2"label="卷面成绩"></el-table-column><el-table-columnprop="ans"label="总成绩"></el-table-column><el-table-column><template slot="header" slot-scope="{}"><el-inputplaceholder="输入关键字搜索"/></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-columnfixedprop="number"label="课程编号"width="150"></el-table-column><el-table-columnfixedprop="cname"label="课程名"width="150"></el-table-column><el-table-columnprop="name"label="任课教师"width="150"></el-table-column><el-table-columnprop="address"label="任课地点"width="250"></el-table-column><el-table-columnprop="date1"label="开课时间"width="200"></el-table-column><el-table-columnprop="date2"label="结课时间"width="200"></el-table-column><el-table-columnprop="room"label="任课班级"width="200"></el-table-column><el-table-columnlabel="操作"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-columnprop="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-pickertype="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-pickerplaceholder="结束日期"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-buttonlabel="专业核心课"name="type"></el-checkbox-button><el-checkbox-buttonlabel="计算机"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-inputtype="text"placeholder="请输入要查询的条件"style="width: 25%"v-model="search"class="searchClass"/><el-button type="success" @click="search(that)">搜索</el-button><!-- 添加数据 --><div id="tianjia"><el-inputtype="text"name="id"v-model="addDetail.id"value=""placeholder="请输入学生的编号"style="width: 20%"/><el-inputtype="text"name="name"v-model="addDetail.name"value=""placeholder="请输入学生的姓名"style="width: 20%"/><el-inputtype="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-columnprop="id"label="学生的编号"width="200"></el-table-column><el-table-columnprop="name"label="学生的姓名"width="200"></el-table-column><el-table-columnprop="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-keysconfirmButtonText: "取消",}).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-keysconfirmButtonText: "取消",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-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnprop="phone"label="联系电话"></el-table-column><el-table-column><template slot="header" slot-scope="{}"><el-inputplaceholder="输入关键字搜索"/></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-paginationlayout="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>3万多字的打磨让你了解如何创建一个基本的Vue3+Vue2的项目
