AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

基于Vue+ElementUI框架实现学生管理系统前端页面设计

2024-07-01 445
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 基于Vue+ElementUI框架实现学生管理系统前端页面设计

前言：


本篇文章旨在练习通过Vue-cli脚手架搭建项和使用ElementUI组件来制作一个简单的学生管理系统的一个前端页面来巩固所学的前端知识，不涉及与数据库交互和任何后端的知识和内容，比较适合小白刚开始学习搭建一个简单的项目，同时也是为JavaEE的学习和后端处理做一个铺垫。

一. 最终效果展示


二. 详细教程

1. 创建项目

选择vue项目(2.6.10)，点击创建

2. 下载组件

在终端通过命令下载我们所需要的组件：

在下载之前我们需要把 package-lock.json 文件删除


npm i vue-router@3.5.3   下载router组件（组件路由）


npm i vue-router@3.5.3

npm i element-ui -S          下载ElementUI组件

npm i element-ui -S

下载完毕后在package.json文件中检查是否安装成功

3. 在main.js中配置

import router from './router/index.js';
Vue.use(router);
 
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
 
new Vue({
el: '#app',
router,
render: h => h(App)
})

4. 创建项目中的组件(页面)

在这里我创建了4个组件，以这4个组件搭建出一个简单的基础模版，大家可以在此基础常添加更多的组件！

登录组件  Login.vue

由于不涉及数据库和后端内容，该登录组件只要用户输入的账号和密码不为空都可以跳转到系统主页界面(Main.vue)，若账号或密码为空会进行提示，在这里我只是提供了一个简单的模版，大家可以在此基础上添加更多的功能或其他组件！

将此代码复制到Login.vue组件即可：

<template>
  
  <div class="login_face">
    <div class="title">————学生管理系统————</div>
    
    
    <div class="login_box">
 
      <div class="img_box"></div>
 
      <!-- 登录表单 -->
      <div class="login_msg">
        <!-- 账号输入框 -->
        <el-input placeholder="请输入内容" v-model="account" clearable id="account"></el-input>
        <!-- 密码输入框 -->
        <el-input placeholder="请输入密码" v-model="password"  id="password" show-password></el-input>
        <!-- 登录按钮 -->
        <el-button id="btn" type="primary" @click="login()">登录</el-button>
      </div>
      
    </div>
  </div>
</template>
 
<script>
  /* 导出组件,并为组件定义数据,函数,生命周期函数 */
  export default {
    data() {
      return {
        account: '',
        password: ''
      }
    },
    methods: {
      login() {
        if (this.account.length == 0) {
          this.$message({
            message: '账号不能为空!',
            type: 'warning'
          });
          return;
        }
        if (this.password.length == 0) {
          this.$message({
            message: '密码不能为空!',
            type: 'warning'
          });
          return;
        }
        //后端交互
 
 
        //后端响应
        this.$router.push("/main"); //进行页面路由导航的操作
      }
    }
  }
</script>
 
<style>
  .title{
    position: absolute;
    top: 15px;
    font-size: 60px;
    letter-spacing: 25px;
    color: rgb(243, 230, 241);
    font-family: '仿宋';  
  }
  
  /* 登录组件盒子设置 */
  .login_msg{
    width: 400px;
    height: 300px;
    margin: auto;
    margin-top: 25px;
    /* background-color: lightcyan; */  
  }
  /* 登录组件设置 */
  #account,#password{
    width:400px;
    height: 50px;
    margin: 15px;
    margin:15px 0;
    background: rgba(255, 255, 255, 0.65);
    border-radius: 25px;
  }
  /* 登录组件设置(登录按钮) */
  #btn{
    width: 220px;
    margin-left: 90px;
    margin-top: 25px;
    border-radius: 40px;
  }
  /* 清除浏览器默认样式 */
  * {
    margin: 0px;
    padding: 0px;
  }
    /* 整个界面全局设置*/
  .login_face {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background-image: url(assets/img8.jpg);
    background-size: cover;
  }
    /* 整个登录框设置*/
  .login_box {
    width: 550px;
    height: 450px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.38);
  }
    /* 头像设置 */
  .img_box {
    width: 130px;
    height: 130px;
    background-image: url(assets/myimg.jpg);
    background-size: cover;
    border-radius: 50%;
    border: white solid 8px;
    opacity: 0.95;
    margin: auto;
    margin-top: -68px;
  }
</style>
系统主页组件 Main.vue

在这里我简单的引用了一个Elementui组件，搭建了一个简单的系统主页模版，大家也可以在此基础上继续添加一些其它的组件或功能！

将此代码复制到Main.vue组件即可：

<template>
  <div>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="header-title"><b>后台管理系统</b></div>
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>用户信息</el-dropdown-item>
            <el-dropdown-item>修改密码</el-dropdown-item>
            <el-dropdown-item><span @click="logout()">退出登录</span></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span style="font-size: 17px; #3d405b;"><b>橙留香</b></span>
      </el-header>
 
      <el-container>
        <el-aside width="200px" >
          <el-menu :default-openeds="['1', '3']" router>
            <el-submenu index="1">
 
              <template slot="title"><i class="el-icon-message"></i>导航一</template>
              <el-menu-item-group>
                <el-menu-item index="/studentlist">学生管理</el-menu-item>
                <el-menu-item index="/majorlist">专业管理</el-menu-item>
              </el-menu-item-group>
 
            </el-submenu>
          </el-menu>
        </el-aside>
 
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
 
      }
    },
    methods: {
      logout() {
        this.$confirm('您要退出吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push("/login");
        })
      }
 
    }
  }
</script>
 
<style>
  .el-header {
    background-color: #81b29a;
    color: #333;
    line-height: 60px;
  }
 
  .header-title {
    width: 300px;
    float: left;
    text-align: left;
    font-size: 20px;
    color:  #f4f1de;
  }
 
  .el-main {
    background-color:  #f4f1de;
    height: 100vh;
  }
 
  .el-aside {
    background-color: white;
    text-align: center;
    line-height: 200px;
    
  }
 
  
</style>

此段代码有两个注意事项如图：

学生管理组件 StudentList.vue

我这里简单的引用了一个Elementui组件，目的只是给大家提供一个基础模版来说明问题，大家也可以在此基础上继续添加一些其它的组件！

<template>
  <div>
    <div><h2>学生管理</h2></div>
    <br /><hr /><br />
    <div class="content">
    <el-descriptions title="用户信息" :column="3" border>
        <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      </el-descriptions>
      
    <el-descriptions title=" " :column="3" border>
        <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      </el-descriptions>
      
    <el-descriptions title=" " :column="3" border>
        <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      </el-descriptions>
      
    <el-descriptions title=" " :column="3" border>
        <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      </el-descriptions>
      
    <el-descriptions title=" " :column="3" border>
        <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      </el-descriptions>
      
      <el-descriptions title=" " :column="3" border>
        <el-descriptions-item label="用户名" label-class-name="my-label" content-class-name="my-content">kooriookami</el-descriptions-item>
        <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
        <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-tag size="small">学校</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="联系地址" :contentStyle="{'text-align': 'right'}">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>
      </el-descriptions>
      
    </div>
    
  </div>
 
</template>
 
<script>
  export default{
    data(){
      return{
        
      }
    },
    methods:{
      
    }
  }
</script>
 
<style>
  .my-label {
    background: #E1F3D8;
  }
 
  .my-content {
    background: #FDE2E2;
  }
</style>
专业管理组件 MajorList.vue

同样，这里也只是简单的引用了一个Elementui组件，目的只是给大家提供一个基础模版来说明问题，大家也可以在此基础上继续添加一些其它的组件

<template>
  <div>
    <div><h2>专业管理</h2></div>
    <br /><hr /><br />
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column label="日期" width="120">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="address" label="专业" show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
  </div>
</template>
 
<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '计算机科学与技术'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '计算机科学与技术'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '计算机科学与技术'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '计算机科学与技术'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '计算机科学与技术'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '计算机科学与技术'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '计算机科学与技术'
        }],
        multipleSelection: []
      }
    },
 
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>

5. 在index.js中配置组件路由

配置时要注意，定义组件地址时，由于StudentList.vue和Major.vue组件是在Main.vue里嵌套的，所以需要用到children:[ ]

import Vue from 'vue';
// 导入路由
import router from 'vue-router'; 
// 导入其他组件
import Main from '../Main.vue'; 
import Login from '../Login.vue'; 
import StudentList from '../views/student/StudentList.vue';
import MajorList from '../views/major/MajorList.vue';
  
 
Vue.use(router);
 
/* 定义组件路由 */
var rout = new router({
  routes: [{
      path: "/",
      component: Login
    },
    {
      path: '/main',
      component:Main,
      children:[
        {
          path: '/studentlist',
          component: StudentList
        },
        {
          path: '/majorlist',
          component: MajorList
        }
        
      ]
    },
    {
      path: '/login',
      component: Login
    }
 
  ]
});
//导出路由对象
export default rout;

6. 添加画布

最后不要忘了，要显示我们的组件需要在App.vue组件中添加画布(router-view)

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
 
<script>
 
export default {
  name: 'app',
 
}
</script>
 
<style>
#app {
 
}
</style>


三. 素材

img8.jpg

myimg.jpg

海漫浩浩,我亦苦作舟!大家一起学习,一起进步!  

文章标签：
前端开发
数据安全/隐私保护
数据库
Java
JavaScript
关键词：
前端页面
系统前端
vue前端
框架前端
框架系统前端
一颗小谷粒
目录
相关文章
小华同学ai
|
7月前
|
前端开发 JavaScript 安全
7.6K Star Shadcn Admin：颜值与实力并存的后台管理系统，前端开发者的新宠！
"基于 Shadcn UI 和 Vite 打造的现代化管理后台，开箱即用的响应式设计 + 无障碍访问，让后台开发从未如此优雅！" —— 来自 GitHub 7.6K 星认证
小华同学ai
1582 26
高端源码库
|
7月前
|
JavaScript 前端开发 Java
制造业ERP源码，工厂ERP管理系统，前端框架：Vue，后端框架：SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统，采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能，整合客户与供应商数据，支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能，助力企业实现高效自动化管理，并通过UniAPP实现移动端支持，满足多场景应用需求。
高端源码库
656 1
卓伊凡
|
3月前
|
存储 前端开发 安全
实现“永久登录”：针对蜻蜓Q系统的用户体验优化方案（前端uni-app+后端Laravel详解）-优雅草卓伊凡
实现“永久登录”：针对蜻蜓Q系统的用户体验优化方案（前端uni-app+后端Laravel详解）-优雅草卓伊凡
卓伊凡
204 5
游客tsrksm3mlhq4y
|
8月前
|
JavaScript 前端开发 API
现代前端开发：四大JavaScript框架和库的比较
JavaScript框架和库
游客tsrksm3mlhq4y
864 57
miadk
|
7月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统：校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架，支持多端运行，结合PHP后端（如ThinkPHP/Laravel），实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互，后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据，RabbitMQ处理异步任务，优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理，确保高效稳定的用户体验。
miadk
440 4
PHP后端与uni-app前端协同的校园圈子系统：校园社交场景的跨端开发实践
dasein58
|
7月前
|
JavaScript 前端开发 编译器
Vue与TypeScript：如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎，而 TypeScript 作为一种静态类型语言，为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用，不仅可以提升代码的可维护性和可扩展性，还能减少运行时错误，提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript，并通过一些代码示例展示其强大功能。
dasein58
295 22
想飞的雪糕
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
1037 14
你都不懂
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
337 0
想飞的雪糕
|
人工智能 自然语言处理 运维
前端大模型应用笔记（一）：两个指令反过来说大模型就理解不了啦？或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下，自然语言指令解析的困境及解决方案。通过增加一个LLM解析层，将复杂的指令拆解为多个明确的步骤，明确操作类型与对象识别，处理任务依赖关系，并将自然语言转化为具体的工具命令，从而提高指令解析的准确性和执行效率。
想飞的雪糕
467 6
程序员小海绵
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑（2）——分布式组件、前端基础，nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
程序员小海绵
783 1
谷粒商城笔记+踩坑（2）——分布式组件、前端基础，nacos+feign+gateway+ES6+vue脚手架

热门文章

最新文章

  • 1
    前端如何存储数据：Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
  • 3
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
  • 4
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
  • 5
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation
  • 6
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 7
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
  • 8
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 10
    「Web应用架构」模式：前端的后端(BFF)
  • 1
    前端如何存储数据：Cookie、LocalStorage 与 SessionStorage 全面解析
    528
  • 2
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（九）：强势分析Animation动画各类参数；从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面，完全了解CSS3 Animation
    199
  • 3
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（八）：学习transition过渡属性；本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    205
  • 4
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（七）：学习ransform属性；本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    147
  • 5
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（六）：全方面分析css的Flex布局，从纵、横两个坐标开始进行居中、两端等元素分布模式；刨析元素间隔、排序模式等
    254
  • 6
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（五）：背景属性；float浮动和position定位；详细分析相对、绝对、固定三种定位方式；使用浮动并清除浮动副作用
    371
  • 7
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（四）：元素盒子模型；详细分析边框属性、盒子外边距
    161
  • 8
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
    98
  • 9
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
    171
  • 10
    【CSS】前端三大件之一，如何学好？从基本用法开始吧！（一）：CSS发展史；CSS样式表的引入；CSS选择器使用，附带案例介绍
    234

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的
    • 下一篇
    对象存储OSS快速上手——如何使用ossbrower2