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>
3万多字的打磨让你了解如何创建一个基本的Vue3+Vue2的项目
