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

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

2024-07-01 137
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 基于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前端
前端页面
框架前端
框架系统前端
一颗小谷粒
目录
相关文章
代码掌控者
|
2月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素，但是它们之间有些细微的差别，稍不注意，就很容易弄错！
代码掌控者
54 1
优雅草央千澈
|
3天前
|
人工智能 前端开发 小程序
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
优雅草央千澈
50 31
2024年12月30日蜻蜓蜻蜓AI工具系统v1.0.0发布-优雅草科技本产品前端源代码已对外开源可免费商用-优雅草老八
多客潇潇
|
15天前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣，提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心，通过用户行为数据分析和机器学习提高匹配准确性。
多客潇潇
49 3
DK方方
|
13天前
|
前端开发 搜索推荐 安全
陪玩系统架构设计陪玩系统前后端开发，陪玩前端设计是如何让人眼前一亮的?
陪玩系统的架构设计、前后端开发及前端设计是构建吸引用户、功能完善的平台关键。架构需考虑用户需求、技术选型、安全性等，确保稳定性和扩展性。前端可选用React、Vue或Uniapp，后端用Spring Boot或Django，数据库结合MySQL和MongoDB。功能涵盖用户管理、陪玩者管理、订单处理、智能匹配与通讯。安全性方面采用SSL加密和定期漏洞扫描。前端设计注重美观、易用及个性化推荐，提升用户体验和平台粘性。
DK方方
43 0
ZOMI酱
|
1月前
|
人工智能 自然语言处理 前端开发
【AI系统】LLVM 前端和优化层
本文介绍了 LLVM 编译器的核心概念——LLVM IR，并详细讲解了 LLVM 的前端 Clang 如何将 C、C++ 等高级语言代码转换为 LLVM IR。文章还探讨了编译过程中的词法分析、语法分析和语义分析三个关键步骤，以及 LLVM 优化层的 Pass 机制，包括分析 Pass 和转换 Pass 的作用及依赖关系。
ZOMI酱
33 3
gkkkkk
|
2月前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
gkkkkk
14 1
.自定义认证前端页面
html的七十二变
|
2月前
|
前端开发 JavaScript 搜索推荐
前端懒加载：提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术，通过延迟加载非首屏内容，减少初始加载时间，提高用户访问体验和页面性能。
html的七十二变
268 6
阿里云计算巢-雲尧
|
2月前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息，并通过阿里云计算巢完成了Appsmith的快速部署，使用者不需要自己下载代码，不需要自己安装复杂的依赖，不需要了解底层技术，只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith，非技术同学也能轻松搞定。
阿里云计算巢-雲尧
46 5
大树营养快线
|
2月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同？
总的来说，Vue 的数据驱动视图在诸多方面展现出独特的优势，其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
大树营养快线
31 0
想飞的雪糕
|
3月前
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
205 2

热门文章

最新文章

  • 1
    从0开始打造一款APP：前端+搭建本机服务，定制暖冬卫衣先到先得
  • 2
    WeaveFox：蚂蚁集团推出 AI 前端智能研发平台，能够根据设计图直接生成源代码，支持多种客户端和技术栈
  • 3
    前端页面加载性能指标之LCP
  • 4
    前端必须掌握的设计模式——单例模式
  • 5
    （前端3D模型开发）网页三维CAD中加载和保存STEP模型
  • 6
    探索无界：前端开发中的响应式设计深度实践与思考###
  • 7
    探索前端性能优化：关键策略与代码实例
  • 8
    前端自动化测试
  • 9
    探索无界：前端开发中的响应式设计哲学####
  • 10
    前端状态管理：Vuex 核心概念与实战
  • 1
    web前端之纯CSS实现简单酷炫的照片墙效果、排除元素的伪类、scale
    95
  • 2
    《跨界合作：前端与后端如何优化协作效率》
    89
  • 3
    使用Vue.js构建交互式前端的技术探索
    92
  • 4
    如何优化前端性能：关键步骤和技巧
    90
  • 5
    nbcio-boot基于jeecg的flowable支持部门经理的单个或多实例支持（前端部分）
    103
  • 6
    ruoyi-nbcio-plus基于vue3的flowable修正加签与跳转的前端问题
    130
  • 7
    vue的 blob文件下载文件时，后端自定义异常，并返回json错误提示信息，前端捕获信息并展示给用户
    285
  • 8
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（二）
    74
  • 9
    ruoyi-nbcio-plus的Vue3前端一些插件使用介绍（一）
    101
  • 10
    ruoyi-nbcio-plus的Vue3前端升级组件后出现的问题（二）
    152

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月