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

目录

一. 最终效果展示

二. 详细教程

1. 创建项目

2. 下载组件 

3. 在main.js中配置

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

 登录组件  Login.vue

系统主页组件 Main.vue

学生管理组件 StudentList.vue

专业管理组件 MajorList.vue

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

6. 添加画布

三. 素材


所用框架:Vue.js + ElementUI     所有语言:Html  CSS  Javascript

前言:

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

建议您在看本篇文章之前先阅读以下两篇文章:

node.js环境安装以及Vue-CLI脚手架搭建项目教程-CSDN博客

ElementUI框架搭建及组件使用+登录界面精美模版分享_vue+elementui部署-CSDN博客

Vue.js与ElementUI的官方文档:

介绍 — Vue.js (vuejs.org)

Element - The world's most popular Vue UI framework

一. 最终效果展示

二. 详细教程

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 



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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/35229.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为何选择骨干线路的服务器?一篇全面攻略

服务器的选择对于企业和个人用户来说至关重要。骨干线路的服务器因其独特的优势&#xff0c;成为了众多用户的首选。本文将详细解析为何选择骨干线路的服务器&#xff0c;并在最后介绍弹性云的优势。 一、什么是骨干线路的服务器&#xff1f; 骨干线路的服务器是指连接在互联…

【Java Web】MVC架构模式

目录 一、MVC是什么? 二、MVC组成结构 三、MVC模式下项目常见包 一、MVC是什么? MVC&#xff08;ModelViewController&#xff09;是软件工程中的一种软件架构模式&#xff0c;它把软件系统分为模型、视图和控制器三个基本部分。用一种业务逻辑、数据、界面显示分离的方法组织…

写一个坏越个人天地(五)

昨天整了半天天气api还是有点小问题。一天50次真的不够我test的。一气之下还是全删了改用高德api。把接口写在了后端&#xff0c;这样我启动界面后就可以直接通过接口在后端嘎嘎处理逻辑了。再整理返回就好了 不过高德api好像获取地址的概率好低&#xff0c;于是我还是整了个获…

通俗范畴论6 基于关系的范畴

前一部分介绍了Set𝑆𝑒𝑡范畴的含义: Set𝑆𝑒𝑡范畴 所有集合构成的范畴,该范畴的对象是集合,态射是集合间的函数,态射的复合是函数的复合,又名集合函数范畴。 在 Set𝑆𝑒𝑡 范畴中,对象是集合,态射是集合间的函数。也许你觉得这是十分自然的事情,…

服务治理怎么做:降级、熔断、全链路压测

服务降级的常见场景 系统负载过高&#xff1a;在高峰期或者流量激增的情况下&#xff0c;为了防止系统崩溃&#xff0c;可以暂时关闭或降低某些非关键服务的质量。 依赖服务故障&#xff1a;当某个依赖服务不可用时&#xff0c;通过服务降级可以提供替代方案或者简化的功能&am…

Spring框架FactoryBean接口的作用和应用

一、FactoryBean源码解读 FactoryBean<T> 是 Spring 框架 beans.factory包中的一个接口&#xff0c;从字面意思可以理解为工厂bean&#xff0c;它是干什么的&#xff0c;类名上的泛型又是指什么&#xff0c;有什么作用&#xff1f; 注释看不懂没关系&#xff0c;先看一…

阿里巴巴向国际用户开放人工智能模型平台ModelScope(魔搭社区)

阿里巴巴对 Hugging Face 和 Amazon Bedrock 的回应包含 5,000 多个中国专业模型&#xff0c;以及 1,500 个工具包和数据集 阿里云已将其人工智能模型存储库ModelScope&#xff08;魔搭社区&#xff09;的访问权限扩展至全球英语用户&#xff0c;意在吸引更多国际企业和开发者…

1.整体认知spring 体系结构

Spring框架是一个开源的Java平台&#xff0c;它以控制反转&#xff08;IoC&#xff09;和面向切面编程&#xff08;AOP&#xff09;作为核心概念&#xff0c;提供了一个企业级的服务和支持。Spring框架的体系结构主要分为以下几个模块&#xff1a; 核心容器&#xff1a; 这是S…

PM10 和 PM2.5 有什么区别

颗粒物 (PM) 是一个术语&#xff0c;用于描述空气中的固体颗粒和液滴的混合物。这些颗粒的大小、成分和来源各不相同&#xff0c;通常根据其空气动力学直径进行分类。最常监测的成分是 PM10 和 PM2.5&#xff0c;每种成分都有不同的特征和健康影响。 定义和大小差异 颗粒物10…

自动建立用户练习

一丶编辑文本存放用户名 vim userlist 二丶编辑文本存放需要创建用户的密码 vim passlist 三丶编辑脚本 vim create_user.sh #!bin/bash [ "$#" -lt "2" ] && { #echo error please input userlist anpassli…

高德.js2.0绘制多条折线(轨迹)及清除所有折线

2.0版本的地图,需要绘制多条折线的时候,就需要循环生成,因此也需要循环清除 for (let j 0; j < combinedArray.length; j) {const item combinedArray[j];this.polyline new AMap.Polyline({map: this.map,path: item,showDir: true,strokeColor: "#28F", //线…

【深度学习】Python之人工智能应用篇——音频生成技术

一、音频生成概述 音频生成是指根据所输入的数据合成对应的声音波形的过程&#xff0c;主要包括根据文本合成语音&#xff08;text-to-speech&#xff09;、进行不同语言之间的语音转换、根据视觉内容&#xff08;图像或视频&#xff09;进行语音描述&#xff0c;以及生成旋律…

简过网:上万元的学费,考公到底要不要报个培训班?

考公报不报班一直是很多朋友比较纠结一件事&#xff0c;报班了学费太贵&#xff0c;不报班又怕考不上&#xff0c;如果你也有这种困扰&#xff0c;那么&#xff0c;不妨看看这篇文章&#xff01; 首先&#xff0c;对于报班VS自学这个问题&#xff0c;小编的建议是&#xff1a;…

HTML【介绍】

HTML【介绍】 一、Web认知 1.网页组成 文字、图片、音频、视频、超链接 2.五大浏览器 IE浏览器、火狐浏览器&#xff08;Firefox&#xff09;、谷歌浏览器&#xff08;Chrome&#xff09;、Safari浏览器、欧朋浏览器&#xff08;Opera&#xff09; 3.Web标准的构成 HTML…

【JavaScript】数据类型和运算符

目录 一、数据类型 1.1 JS常用数据类型 1.2 JS中使用var声明变量特点 二、运算符 2.1 算术&#xff1a; - * / % 2.2 复合算术&#xff1a; -- - * / % 2.3 关系: > < > < ! 2.4 逻辑&#xff1a; 短路||或 短路与…

C# 一元多次方程求解

private double FindRoot(double a, double b, double c, double d, double target) { double x0 1.0; // 初始猜测值 double epsilon 0.0001; // 迭代精度 double f(double t) > a * t * t * t b * t * t c * t d - target; // 定义方程 double df(double t) …

GPU_Gems-物理模型的水模拟

创建一个多网格的平面 void GraphicsWindowBase::RenderPlane() {constexpr int width 150;constexpr int depth 150;constexpr int vertNum width * depth;float length 60.f;if (quadVAO 0){float planeVert[vertNum * 5];float offsetX length / (width - 1.f);float…

朴素贝叶斯机器学习算法:从基础到高级

文章目录 一、说明二、从一个简单例子入手2.1 简单示例2.2 朴素贝叶斯算法的直觉解释 三、在训练阶段&#xff0c;朴素贝叶斯内部会发生什么&#xff1f;3.1 朴素贝叶斯如何处理数值数据&#xff1f;3.2 如果数据分布不是高斯分布怎么办&#xff1f;3.3 朴素贝叶斯的数值稳定性…

Flutter Navigator.popUntil 参数传递

Flutter 使用页面传参 以下是 在flutter 中页面传参的常用形式&#xff0c;都可以有有直接的传值参数提供。 Navigator.push #跳转到指定页面 压栈路由表Navigator.pushReplacement #关闭当前页面 跳转到指定页面压栈路由表Navigator.pus…

留学生高效完成Group work的四个阶段

在众多作业中&#xff0c;有一个传说中可以逼疯各位留学生的作业&#xff0c;那肯定是非Group Work莫属了&#xff0c;简单来说&#xff0c;就是老师给一个课题&#xff0c;通过小组课上讨论以及与老师沟通方案&#xff0c;准备PPT以及Presntation&#xff0c;最后打分计入总成…