ElementUI-学生管理系统后台实例

最新推荐文章于 2024-06-27 15:49:35 发布
最新推荐文章于 2024-06-27 15:49:35 发布
阅读量412 收藏 2
点赞数
分类专栏： 笔记 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30803523/article/details/118073406
版权

ElementUI-学生管理系统后台实例

在这里插入图片描述

难度基本没有，调用el组件就行，就像搭积木一样。

代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo2</title>
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../js/vue.js"></script>
    <script src="../../element-ui/lib/index.js"></script>
    <style>
        .el-header {
            background-color: #545c64;
            color: #333;
            text-align: center;
            line-height: 60px;

        }
        .el-footer {
            background-color: #545c64;
            color: #333;
            text-align: center;
            line-height: 60px;
            /*position:fixed;*/
            /*width: 78.5%;*/
            /*bottom:0px;*/
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 200px;
        }

        .el-main {
            background-color: #ffffff;
            color: #333;
            text-align: center;

        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

    </style>
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-menu
                        :default-active="activeIndex2"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        style="float: right;"
                >

                    <el-menu-item index="1" >处理中心</el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">我的工作台</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="3"><a href="#">首页</a></el-menu-item>
                </el-menu>
            </el-header>
            <el-container>
                <el-col :span="5">
                        <el-menu
                                default-active="2"
                                class="el-menu-vertical-demo"
                                @open="handleOpen"
                                @close="handleClose"
                                default-openeds=['1']

                        >
<!--                                default-openeds=["1"]-->
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span style="font-size: 20px">学工部</span>
                                </template>
                                <el-menu-item-group>
                                    <template slot="title">分组一</template>
                                    <el-menu-item index="1-1"style="font-size: 15px"><i class="el-icon-s-help"></i >在校学生管理</el-menu-item>
                                    <el-menu-item index="1-2"style="font-size: 15px"><i class="el-icon-help"></i>学生升级/留级</el-menu-item>
                                    <el-menu-item index="1-3"style="font-size: 15px"><i class="el-icon-water-cup"></i>学生就业情况</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                            <el-menu-item index="2">
                                <i class="el-icon-menu"></i>
                                <span slot="title"style="font-size: 20px">咨询部</span>
                            </el-menu-item>
                            <el-menu-item index="3">
                                <i class="el-icon-setting"></i>
                                <span slot="title"style="font-size: 20px">教研部</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>

                <el-container>
                    <el-main>
                        <div>
                            <h3 style="float: left;color: red;">学生列表</h3>
                            <el-button type="primary" style="float: right">添加学生</el-button>
                        </div>
                        <template>
                            <el-table
                                    :data="tableData"
                                    style="width: 100%">
                                <el-table-column
                                        label="日期"
                                        width="300"

                                >
                                    <template slot-scope="scope" >
                                        <i class="el-icon-time"></i>
                                        <span style="margin-left: 10px;font-size: 15px">{{ scope.row.date }}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="姓名"
                                        width="300">
                                    <template slot-scope="scope">
                                        <el-popover trigger="hover" placement="top">
                                            <p style="font-size: 15px">姓名: {{ scope.row.name }}</p>
                                            <p style="font-size: 15px">住址: {{ scope.row.address }}</p>
                                            <div slot="reference" class="name-wrapper">
                                                <el-tag size="medium" style="font-size: 15px">{{ scope.row.name }}</el-tag>
                                            </div>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        label="地址"
                                        width="600">
                                    <template slot-scope="scope">
                                        <el-popover trigger="hover" placement="top">
                                            <p>姓名: {{ scope.row.name }}</p>
                                            <p>住址: {{ scope.row.address }}</p>
                                            <div slot="reference" class="name-wrapper">
                                                <el-tag size="medium"style="font-size: 15px">{{ scope.row.address }}</el-tag>
                                            </div>
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button
                                                type="warning"
                                                size="mini"
                                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                        <el-button
                                                type="danger"
                                                size="mini"
                                                type="danger"
                                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-main>
                    <el-footer>
                        <span style="float: left;color: #000000">
                            © 2021 Copyright
                        </span>
                        <span style="float: right;color: #000000">
                            Powered by ENSIO | Theme by ENISO
                        </span>
                    </el-footer>
                </el-container>
            </el-container>
        </el-container>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            activeIndex: '1',
            activeIndex2: '1',
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        },
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        }
    });
</script>
</html>
影修
关注
专栏目录
学生管理系统Element UI版
专注于Java领域开发 关注我 带你玩转Java
03-16 2万+
学生管理系统Element UI版 前后端分离 增删改查一套 免费获取
基于elementui-vue的后台管理系统代码
05-26
Vue.js ElementUI 后台管理系统代码详解 Vue.js 和 ElementUI 的组合是现代前端开发中的常见选择，因为它们提供了一套高效、优雅的组件库，适用于构建用户界面，特别是后台管理系统。ElementUI 是一个基于 Vue.js ...
基于vue2.0+element-ui的管理后台实例源码
09-05
基于vue2.0+element-ui的管理后台实例源码，包括路由管理，动态路由加载，全局导航守卫处理等功能，可以作为管理后台开发的非常好的参考
vue+element【后台案例 · 搜集 · 集锦】
草巾冒小子的博客
11-27 1250
案例一：https://github.com/taylorchen709/vue-admin cnblogs.com · 博客地址 CSDN · 博客地址 简书 · 地址 github · 源码地址 vue-admin · 演示Demo地址 效果图 · 截图： 案例二：Vue+elementui的后台管理系统模板 CSDN 博客地址 github源码地址 【master分支】 效果...
基于Vue+ElementUI框架实现学生管理系统前端页面设计
最新发布
小谷同学的博客
06-27 998
通过Vue.js和ElementUI框架搭建一个简单的学生管理系统的前端页面骨架，适合新手来初步学习搭建项目。
HTML期末学生大作业 基于HTML+CSS+JavaScript通用的后台管理系统ui框架模板
网页设计与制作 | HTML+CSS+JS
12-05 141
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新
使用DIV+CSS技术设计的非遗文化网页与实现制作（web前端网页制作课作业）
wx___BJ050106的博客
12-12 116
💗 非遗文化网页设计 、等网站的设计与制作。🏷️HTML非遗文化网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序...
vue-elementUI后台管理系统 v1.0.zip
04-02
在这个“vue-elementUI后台管理系统 v1.0.zip”压缩包中，包含了两个主要文件：`说明.htm`和`vueproject`。`说明.htm`可能是一个包含系统介绍、安装指南或者使用教程的HTML文档，帮助用户更好地理解和使用这个后台...
基于vue2 + Element-ui搭建的后台管理系统源码.zip
10-12
"vue2-admin-template-master"这个文件名可能是项目的主分支或者源码仓库，其中包含了完整的后台管理系统模板，包括基本的路由配置、组件实例、样式文件等，开发者可以通过研究和修改这个模板来快速构建自己的后台...
Vuejs实例Vuejs20全家桶结合ELementUI制作后台管理系统
08-10
在本实例中，“Vuejs20全家桶结合ElementUI制作后台管理系统”旨在教你如何利用这些技术栈来搭建一个功能完善的后台管理平台。 Vue.js 2.0 提供了响应式数据绑定和组件化设计，使得开发者可以轻松创建可复用的代码...
学生管理系统（上）（Element版）
lcshen1234的博客
03-18 244
学生管理系统（Element版）
基于Element的后台管理系统
08-12
基于 Element 的后台管理系统
elementUi+vue+node+express+mongodb简易学生成绩管理系统
08-07
elementUi+vue+node+express+mongodb简易学生成绩管理系统,简易版，可以用来学习
基于ElementUI的后台管理系统
08-09
基于ElementUI的后台管理系统
基于vueelementui的后台管理系统
08-12
本项是目基于vue element-ui 构建的后台管理系统， 具有真实的注册、登陆、管理数据、权限验证等功能。
Vue（+ element UI + Django）编写学生管理页面后端资源
11-29
Vue（+ element UI + Django）编写学生管理页面后端资源，使用django编写，修改数据库配置后，直接运行即可
用vue和element-ui实现学生信息管理系统
weixin_35757531的博客
12-16 872
为了使用 Vue 和 Element-UI 实现学生信息管理系统，你可以按照以下步骤进行： 安装 Vue 和 Element-UI：首先，你需要在项目中安装 Vue 和 Element-UI。你可以使用 npm 或者 yarn 进行安装。 创建 Vue 项目：然后，你需要创建一个 Vue 项目。你可以使用 Vue CLI 或者手动创建。 引入 Element-UI 组件：接下来，你需要在项目...
Vue+SpringBoot+ElementUI实战学生管理系统-10.学生管理模块
老徐的博客只有干货
01-27 1396
1.章节介绍 前一篇介绍了教师管理模块，这一篇编写学生管理模块，需要的朋友可以拿去自己定制。：） 2.获取源码 源码是捐赠方式获取，详细请QQ联系我 ：）！ 3.实现效果 学生列表 修改学生 4.模块代码 页面布局 <template> <div> <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb
vue+elementui实现学生信息管理系统
weixin_43719616的博客
11-22 2818
第一个是最开始的纯dom操作的，第二个是最近学了vue后做出来的，很开心！！ 第二个简直好看太多了吧！后端代码都还是一样的，只是前端的样式变了。少了dom操作后真的巨爽！！！ 不过还是有很多不足，比如axios调用的不是很好，而且接口使用不是很6，之后要用脚手架来搭一个真正的前端项目然后再来玩耍！ 冲呀~ ...
使用elementUI制作一个论坛后台管理系统
05-24
好的，下面是一个使用 ElementUI 制作的简单的论坛后台管理系统的示例： 1. 首先引入 ElementUI 的样式和组件库 在 HTML 中引入 ElementUI 的样式文件和 JS 文件： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>论坛后台管理系统</title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"></div> </body> </html> ``` 2. 创建 Vue 实例并添加路由 ```js const Home = { template: '<div>首页</div>' } const Topics = { template: '<div>话题管理</div>' } const Users = { template: '<div>用户管理</div>' } const routes = [ { path: '/', component: Home }, { path: '/topics', component: Topics }, { path: '/users', component: Users } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app') ``` 在这个示例中，我们创建了三个组件：Home、Topics 和 Users，并且添加了三个路由。接下来我们创建一个 Vue 实例并添加路由。 3. 创建页面布局 ```html <div id="app"> <el-container> <el-header> <h1>论坛后台管理系统</h1> <el-menu router :default-active="$route.path" mode="horizontal"> <el-menu-item index="/">首页</el-menu-item> <el-menu-item index="/topics">话题管理</el-menu-item> <el-menu-item index="/users">用户管理</el-menu-item> </el-menu> </el-header> <el-main> <router-view></router-view> </el-main> </el-container> </div> ``` 在这个示例中，我们使用 ElementUI 的容器组件和菜单组件来实现一个简单的页面布局。其中，el-container 组件是一个容器组件，用于包裹整个页面，el-header 组件是一个头部组件，用于放置网站的标题和菜单栏，el-menu 组件是一个菜单组件，用于实现页面的导航，el-main 组件是一个主体组件，用于显示页面的主要内容。 4. 添加表格组件 ```html <template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [{ date: '2021-01-01', name: '张三', address: '北京市' }, { date: '2021-01-02', name: '李四', address: '上海市' }, { date: '2021-01-03', name: '王五', address: '广州市' }] } } } </script> ``` 在这个示例中，我们使用 ElementUI 的表格组件实现了一个简单的表格。el-table 组件是一个表格组件，用于显示数据，el-table-column 组件是一个表格列组件，用于定义每一列的数据。 5. 添加表单组件 ```html <template> <div> <el-form :model="form" label-width="80px"> <el-form-item label="用户名"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="密码"> <el-input v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('form')">提交</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { form: { name: '', password: '' } } }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('提交成功') } else { return false } }) } } } </script> ``` 在这个示例中，我们使用 ElementUI 的表单组件实现了一个简单的表单，el-form 组件是一个表单组件，用于收集用户的输入数据，el-form-item 组件是一个表单项组件，用于定义每个表单项的标签和输入框，el-input 组件是一个输入框组件，用于输入数据，el-button 组件是一个按钮组件，用于提交表单。 通过以上步骤，我们可以简单地使用 ElementUI 制作一个论坛后台管理系统，其中包括了页面布局、菜单导航、表格和表单等常用组件。在实际开发中，还需要根据具体需求进行定制化开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

影修

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值