Vue+Bootstrap实现简易学生管理系统
利用vue和bootstrap做了一个比较简易的学生管理系统，供大家参考，具体内容如下
废话不多说，先来看看效果图
附上源代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>学生管理系统</title>
<link href="../public/css/bootstrap.min.css" rel="stylesheet">
<link href="../public/css/style.css" rel="stylesheet">
<style>
.row>div{border: 1px solid #000;}
.modal{display: block;opacity:1;top: 100px; overflow:visible;}
</style>
</head>
<body>
<div id="app">
<div class="container">
<table class="table table-striped">
<caption>学生管理系统v1.0-展示学生</caption>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr v-for="item,key in stuInfoArr">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.gender}}</td>
<td><button @click="showDialog(item.name,key)" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">删除</button></td>
</tr>
</table>
<hr>
<hr>
<hr>
<form action="">
<table class="table table-striped">
<caption>添加学生信息</caption>
<tr>
<td>项目</td>
<td>信息</td>
</tr>
<tr>
<td>姓名</td>
<td>
<input v-model="stuName" type="text" class="form-control" id="stuname" placeholder="姓名" name="stuname">
</td>
</tr>
<tr>
<td>年龄</td>
<td>
<input v-model="stuAge" type="text" class="form-control" id="stuage" placeholder="年龄" name="stuage">
</td>
</tr>
<tr>
<td>性别</td>
<td>
<label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" checked value="男"> 男</label>
<label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" value="女"> 女</label>
<label class="gen-span"><input v-model="stuGender" type="radio" class="radio-info" name="gender" value="保密"> 保密</label>
</td>
</tr>
</table>
<div style="text-align: center;"><input type="button" class="btn btn-info btn-sm add-btn" value="确定增加" @click="add"/></div>
</form>
</div>
<!-- 删除按钮确认框 -->
<div v-show="isDialogShow" class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button @click="isDialogShow=false" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">确认框</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="message-text" class="control-label">确定要删除<strong class="control-label-name" style="color:blue">{{delStuName}}</strong>吗？</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" @click="isDialogShow=false">返回</button>
<a href="###" rel="external nofollow" class="delete-a"><button type="button" class="btn btn-primary" @click="delStuInfo()">确认</button></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: '#app',
data: {
stuInfoArr: [
{ name: '小明', age:12, gender:"男" },
{ name: '小红', age:10, gender:"女" },
{ name: '小刚', age:16, gender:"保密" }
],
isDialogShow: false,
stuName: "",
stuAge:"",
stuGender:"男" ,
delStuName:'xx',
index: ""
},
methods:{
add() {
// 业务逻辑
// 只要有一个为空就终止执行
if(!this.stuName || !this.stuAge) {
alert("姓名和年龄不能为空")
return
}
this.stuInfoArr.push({ name:this.stuName , age:this.stuAge, gender:this.stuGender })
},
// 点击删除按钮触发的函数
showDialog(name,key) {
this.isDialogShow = true,
this.delStuName = name,
this.index = key
},
delStuInfo() {
// 真正实现删除功能
this.stuInfoArr.splice(this.index, 1),
this.isDialogShow = false
}
},
})
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Bootstrap Table快速完美搭建后台管理系统
Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分页,以及编辑.导出.过滤(扩展)等等的功能:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 现在做的一个app管理以及后台配置系统,需要针对不同的城市作相应的定制化的配置,对一些后台数据也做一些展示和操作,所以每一个模块基本都会有表格的展现形式,这样做的好处就是直观方便操作.对于用什么t
-
vue实现信息管理系统
最近学习了vue,自己用bootstrap+vue写了一个信息管理系统,只有前端,没有后台,可以实现基本的增.删.改.查 具体效果在结尾处有附图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body,html{ margin: 20px 50px; } .title2{ color: bluev
-
spring boot+thymeleaf+bootstrap实现后台管理系统界面
最近在学spring boot ,学习一个框架无非也就是使用它来做以前做的事情,两者比较才有不同,说一下自己使用的体会. 先来说下spring boot ,微框架.快速开发,相当于零配置,从一个大神那看来的说:spring boot 相当于框架的框架 ,就是集成了很多,用哪个添加哪个的依赖就行,这样的话自己看不到配置,对于习惯了使用配置刚使用spring boot的开发者来说可能还有点不习惯,什么都不用配,看不到配置感觉对项目整体架构有点陌生,再说在spring boot 中使用 thymele
-
vue实现户籍管理系统
本文实例为大家分享了vue实现户籍管理系统的具体代码,供大家参考,具体内容如下 户籍管理系统,v-model,v-for的引用 界面预览 步骤思路: 1.html+css创建 2.引入vue,实例 3.准备默认数据message数组 4.渲染默认数据,v-for循环表单 5.创建一条新数据newmessage 6.绑定到输入框v-model 7.创建一个添加函数add(),把新数据添加到默认数据中,newmessage->message 8.添加完后,清空表单,即恢复newmessage 9.点
-
vue实现学生信息管理系统
本文实例为大家分享了vue实现学生信息管理系统的具体代码,供大家参考,具体内容如下 界面 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue--学生信息管理系统</title> <!-- 引包 --> <script src="https://cdn.jsdelivr
-
VueJS实现用户管理系统
本文实例为大家分享了VueJS实现用户管理系统的具体代码,供大家参考,具体内容如下 源代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1
-
vue实现图书管理系统
本文实例为大家分享了vue实现图书管理系统的具体代码,供大家参考,具体内容如下 组件代码 <template> <div id="app"> <div class="grid"> <div> <h1>图书管理</h1> <div class="book"> <div> <label for="id" v-focus> 编
-
基于VUE实现简单的学生信息管理系统
一.主要功能 本次任务主要是使用VUE来实现一个简单的学生信息管理系统,主要功能为: 1.显示所有学生的信息(默认为10个) 2. 点击按钮,显示出学号尾号为单数(或双数)的学生信息 3. 增加学生信息 4. 要求使用VUE中 父子组件间通信 二.实现思路 1.数据管理:使用json数组的方式来管理储存数据 2.显示学生信息:因为组件是可复用的 Vue 实例,所以在这里引入子组件(用来显示每个学生的信息),将主页作为父组件.主页(父组件)使用v-for循环显示子组件. 3.按单双号筛选查找学生:
-
Vue+Bootstrap实现简易学生管理系统
利用vue和bootstrap做了一个比较简易的学生管理系统,供大家参考,具体内容如下 废话不多说,先来看看效果图 附上源代码: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
C语言实现简易学生管理系统
本文实例为大家分享了C语言实现学生管理系统的具体代码,供大家参考,具体内容如下 首先我们在做一个管理系统之前要了解这个学生管理系统需要哪些功能,如:简单的增,删,改,查,即:录入成绩,查询成绩,删除成绩,修改成绩,插入成绩,这几个是基本要包括的,当然我们也可以加上排序,统计学生人数,这些功能. 当清楚需要哪些功能之后我们就可以写系统的界面了. 效果图如下: printf("\t\t\t---------------STUDENT---------------\t\t\t\n");
-
python实现简易学生信息管理系统
本文实例为大家分享了python实现学生信息管理系统的具体代码,供大家参考,具体内容如下 简易学生信息管理系统主要功能有 1 录入学生信息 2 查找学生信息 3 删除学生信息 4 修改学生信息 5 排序 6 统计学生总人数 7 显示所有学生信息 0 退出系统 系统运行效果 主菜单的代码方法: # Author: dry # 开发时间:2019/9/11 # 开发工具:PyCharm import re # 导入正则表达式模块 import os # 导入操作系统模块 filename = "st
-
基于Python实现简易学生信息管理系统
目录 一.系统简介 二.步骤分析 三.需求实现 四.具体实现 4.1 添加学生信息的函数 4.2 删除学生信息的函数 4.3 修改学生信息的函数 4.4 查询学生信息的函数 4.5 显示所有学生信息 五.运行效果 六.完整代码 一.系统简介 实现一个学生信息的管理系统:主要功能有: 添加学生信息 删除学生信息 修改学生信息 查询学生信息 显示学生信息 退出当前系统 二.步骤分析 显示功能界面 用户输入功能序号 对不同序号的功能实现具体函数(3.1 定义函数.3.2 调用函数) 三.需求实现 显示
-
Java+Mysql学生管理系统源码
最近正在学java和数据库,想起以前写的学生管理系统,都是从网上下载,敷衍了事.闲来无事,也就自己写了一个,不过功能实现的不是很多. 开发语言:java: 开发环境:Mysql, java: 开发工具:eclipse 开发此案例,首先得在电脑上有java开发环境和Mysql, java开发环境与Mysql的搭建,就不再叙述了,如果需要,请联系我最下面的联系方式:dingyelf@aliyun.com 此次系统比较简易:数据库中只有一个表:stu;功能:能够对学生增加.删除.修改. 开发步骤:
-
python实现学生管理系统开发
使用python完成超级基础的学生管理系统,供大家参考,具体内容如下 说明: 1.本学生管理系统非常非常简易,只有增,显,查,删,改功能,对于Python新手容易看懂上手. 2.信息的存储只使用了字典和列表. 3.不喜勿喷. 代码: 1.主循环框架 while True: print(info_str) action = input("请输入想要进行的操作:") if action == '0': print("再见.") break elif action ==
-
Java 实现简易教务管理系统的代码
Main.java import java.util.Scanner; public class Main { public static void main(String[] args) { System.out.println("\t\t简易教务管理系统"); System.out.println("1.录入学生\t2.显示学生\t3.录入课程\t4.显示课程\t5.录入教师" +"\t6.显示教师\t7.学生选课\t8.教师录入成绩\t9.教师排课\
-
利用Java写一个学生管理系统
目录 前言: 其实作为一名Java的程序猿,无论你是初学也好,大神也罢,学生管理系统一直都是一个非常好的例子,初学者主要是用数组.List等等来写出一个简易的学生管理系统,二.牛逼一点的大神则用数据库+swing来做一个有界面的学生管理系统.其实都并不会太难. 我先写一个简单的用List来实现学生管理系统: 首先,管理系统是针对学生对象的,所以我们先把学生对象写出来: package bean; public class Student { String name; String student
-
Java实现简易学籍管理系统
本文实例为大家分享了Java实现简易学籍管理系统的具体代码,供大家参考,具体内容如下 1.我们先来讲讲什么是泛型化编程 package 学生管理系统; import java.util.ArrayList; import java.util.List; /* * 进行泛型化编程 * @autor:pcb * */ public class TestGeneric { //进行泛型化编程,规定类型. public List <CourseClass> courses