代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<!--
* CoreUI - Free Bootstrap Admin Template
* @version v2.0.0
* @link https://www.bilibili.com/video/av26256249/?p=1
* @link
* @link
* @link https://www.bootcdn.cn/
* @link http://mockjs.com/
* @link http://doc.vue-js.com/
* @link https://v4.bootcss.com/docs/4.0/getting-started/introduction/
* @link http://www.fontawesome.com.cn/
* @link https://coreui.io
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
* Licensed under MIT (https://coreui.io/license)
-->
<html lang="en">
<head>
<!-- <base href="./"> -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta name="description" content="CoreUI - Open Source Bootstrap Admin Template">
<meta name="author" content="Łukasz Holeczek">
<meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,jQuery,CSS,HTML,RWD,Dashboard">
<title>User UI</title>
<!-- Icons字体图标 CSS-->
<link href="vendors/@coreui/icons/css/coreui-icons.min.css" rel="stylesheet">
<link href="vendors/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
<link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="vendors/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Main styles for this application-->
<link href="css/style.css" rel="stylesheet">
<link href="vendors/pace-progress/css/pace.min.css" rel="stylesheet">
</head>
<body class="app header-fixed aside-menu-fixed ">
<header class="app-header navbar">
<a class="navbar-brand" href="#">
<i class="fa fa-graduation-cap fa-2x" aria-hidden="true"></i>学习平台
</a>
<ul class="nav navbar-nav d-md-down-none">
<li class="nav-item px-3">
<a class="nav-link" href="#">工作台</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">课程管理</a>
</li>
<li class="nav-item px-3">
<a class="nav-link" href="#">设置</a>
</li>
</ul>
<ul class="nav navbar-nav ml-auto">
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#">
<i class="icon-bell"></i>
<span class="badge badge-pill badge-danger">6</span>
</a>
</li>
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#">
<i class="icon-list"></i>
</a>
</li>
<li class="nav-item d-md-down-none">
<a class="nav-link" href="#">
<i class="icon-location-pin"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
<img class="img-avatar" src="img/avatars/7.jpg" alt="admin@bootstrapmaster.com">
</a>
<div class="dropdown-menu dropdown-menu-right">
<div class="dropdown-header text-center">
<strong>Account</strong>
</div>
<a class="dropdown-item" href="#">
<i class="fa fa-bell-o"></i> Updates
<span class="badge badge-info">42</span>
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-envelope-o"></i> Messages
<span class="badge badge-success">42</span>
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-tasks"></i> Tasks
<span class="badge badge-danger">42</span>
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-comments"></i> Comments
<span class="badge badge-warning">42</span>
</a>
<div class="dropdown-header text-center">
<strong>Settings</strong>
</div>
<a class="dropdown-item" href="#">
<i class="fa fa-user"></i> Profile</a>
<a class="dropdown-item" href="#">
<i class="fa fa-wrench"></i> Settings</a>
<a class="dropdown-item" href="#">
<i class="fa fa-usd"></i> Payments
<span class="badge badge-secondary">42</span>
</a>
<a class="dropdown-item" href="#">
<i class="fa fa-file"></i> Projects
<span class="badge badge-primary">42</span>
</a>
<div class="divider"></div>
<a class="dropdown-item" href="#">
<i class="fa fa-shield"></i> Lock Account</a>
<a class="dropdown-item" href="#">
<i class="fa fa-lock"></i> Logout</a>
</div>
</li>
</ul>
<button class="navbar-toggler aside-menu-toggler d-md-down-none" type="button" data-toggle="aside-menu-lg-show">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler aside-menu-toggler d-lg-none" type="button" data-toggle="aside-menu-show">
<span class="navbar-toggler-icon"></span>
</button>
</header>
<div class="app-body">
<main class="main">
<!-- Breadcrumb-->
<ol class="breadcrumb">
<li class="breadcrumb-item">首页</li>
<li class="breadcrumb-item active">用户管理</li>
<li class="breadcrumb-item active"><a href="http://127.0.0.1:5500/text1.html">返回登录UI</a></li>
<!-- Breadcrumb Menu-->
</ol>
<div class="container-fluid">
<div class="animated fadeIn" id="itemsTemplate">
<div class="card">
<div class="card-header">
<i class="icon-people" aria-hidden="true"></i>信息管理
<div class="card-header-actions">
<a class="card-header-action btn-setting" @click="addBox()" href="#">
<i class="icon-plus"> 新增</i>
</a>
<a class="card-header-action btn-close" data-toggle="modal" data-target="#multipleModal"
href="#">
<i class="icon-trash" aria-hidden="true"> 删除</i>
</a>
</div>
</div>
<div class="card-body collapse show" id="collapseExample">
<table class="table table-responsive-sm table-bordered table-striped">
<thead>
<tr>
<!-- click 与 change 的区别，前者先传值再操作，或者先操作再传值 -->
<th><input type="checkbox" v-model="checkall" @change="checkAll" />全选/反选</th>
<th>用户名</th>
<th>注册时间</th>
<th>角色</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in items"
v-if="index>=(curpage-1)*pagesize && index < curpage*pagesize">
<td><input type="checkbox" v-model="item.select"
@change="checkOne" />#{{item.id}}</td>
<td @click="edit(index)" contenteditable="false">{{item.name}}</td>
<td @click="edit(index)" contenteditable="false">{{item.registerDate}}</td>
<td @click="edit(index)" contenteditable="false">{{item.role}}</td>
<td @click="edit(index)">
<span v-if="item.status=='激活'"
class="badge badge-success">{{item.status}}</span>
<span v-if="item.status=='禁用'"
class="badge badge-danger">{{item.status}}</span>
</td>
<td>
<button class="btn btn-ghost-primary" type="button" @click="edit(index)"><i
class="icon-note"></i> 编辑</button>
<button class="btn btn-ghost-danger" type="button"
v-on:click="confirmDel(index)"><i class="fa fa-trash-o fa-lg"></i>
删除</button>
</td>
</tr>
</tbody>
</table>
<!-- 翻页 -->
<div id="page-break">
<ul class="pagination pagination-lg">
<template v-for="page in Math.ceil(items.length/pagesize)">
<li v-on:click="PrePage()" id="prepage" v-if="page==1" class="disabled">
<a class="page-link">Prev</a>
</li>
<li v-if="page==1" class="page-item active" v-on:click="NumPage(page, $event)">
<a class="page-link">{{page}}</a></li>
<li v-else v-on:click="NumPage(page, $event)" class="page-item">
<a class="page-link">{{page}}</a>
</li>
<li id="nextpage" v-on:click="NextPage()"
v-if="page==Math.ceil(items.length/pagesize)">
<a class="page-link">Next</a>
</li>
</template>
</ul>
</div>
</div>
</div>
<!-- Modal删除 -->
<div class="modal fade" id="dangerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-danger" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">危险</h5>
<button class="close" type="button" @click="off" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>记录删除后将无法恢复！确定要删除吗？</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button" v-on:click="del()">确认</button>
<button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- Modal多项删除 -->
<div class="modal fade" id="multipleModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-danger" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">危险</h5>
<button class="close" type="button" @click="off" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>记录删除后将无法恢复！确定要删除吗？</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button" @click="multipleDel">确认</button>
<button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<!-- Modal删除成功 -->
<div class="modal fade show" id="successModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-success" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">成功</h5>
<button class="close" type="button" v-on:click="off" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>删除成功!</p>
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" @click="off">确定</button>
</div>
</div>
<!-- /.modal-content-->
</div>
<!-- /.modal-dialog-->
</div>
<!-- Modal编辑 -->
<div class="modal fade" id="primaryModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-primary" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">编辑</h5>
<button class="close" type="button" @click='off' aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="needs-validation" action="" method="post"
enctype="multipart/form-data">
<div class="form-group row">
<label class="col-md-3 col-form-label" for="text-input">用户名</label>
<div class="col-md-9">
<input class="form-control" id="text-input" type="text"
name="text-input" placeholder="用户名" v-model.lazy="editItems.name"
pattern="^[\u4e00-\u9fa5·A-Za-z][\u4E00-\u9FA5·A-Za-z0-9-_\s]{1,15}$"
required>
<div class="invalid-feedback">
用户名必须2到16位中英文、首位必须是中英文，(字母，数字，下划线，减号)
<!-- pattern="^([\u4e00-\u9fa5·A-Za-z][\u4e00-\u9fa5·A-Za-z0-9-_]{1,10})$" -->
</div>
<!-- <span class="help-block">用户名必须2到16位中英文(字母，数字，下划线，减号)</span> -->
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="email-input">注册时间</label>
<div class="col-md-9">
<input class="form-control" id="1" type="text" name="disabled-input"
placeholder="年 -月-日 --:--" disabled=""
v-model.lazy="editItems.registerDate"></div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="password-input">角色</label>
<div class="col-md-9">
<select class="custom-select" v-model="editItems.role">
<option>教师</option>
<option>学生</option>
</select>
<!-- <span>{{ selected1 }}</span> -->
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">状态</label>
<div class="col-md-9 col-form-label">
<div class="form-check form-check-inline mr-1">
<input class="form-check-input" id="inline-radio1" type="radio"
v-model.lazy="editItems.status" value="激活">
<label class="form-check-label" for="inline-radio1">激活</label>
</div>
<div class="form-check form-check-inline mr-1">
<input class="form-check-input" type="radio"
v-model.lazy="editItems.status" value="禁用">
<label class="form-check-label" for="inline-radio2">禁用</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" @click="editSubmit">保存</button>
<button class="btn btn-secondary" type="button" @click='off'>取消</button>
</div>
</div>
<!-- /.modal-content-->
</div>
<!-- /.modal-dialog-->
</div>
<!-- Modal添加 data-backdrop="static"禁止点击外面触发关闭-->
<div class="modal fade show" id="addModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered modal-primary" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">新增</h5>
<button class="close" type="button" v-on:click="off" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="validation" action="" method="post" enctype="multipart/form-data">
<div class="form-group row">
<label class="col-md-3 col-form-label" for="text-input">用户名</label>
<div class="col-md-9">
<input class="form-control" id="text-input" type="text"
name="text-input" placeholder="用户名" v-model="newItems.name"
pattern="^[\u4e00-\u9fa5·A-Za-z][\u4E00-\u9FA5·A-Za-z0-9-_\s]{1,15}$"
required>
<div class="invalid-feedback">
用户名必须2到16位中英文、首位必须是中英文，(字母，数字，下划线，减号)
</div>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="email-input">注册时间</label>
<div class="col-md-9" id="itemstime">
<input class="form-control" id="1" type="text" name="disabled-input"
placeholder="年 -月-日 --:--" disabled=""
v-model="newItems.registerDate" value=""></div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="password-input">角色</label>
<div class="col-md-9">
<select class="custom-select" v-model="newItems.role">
<option selected>教师</option>
<option>学生</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-md-3 col-form-label">状态</label>
<div class="col-md-9 col-form-label">
<div class="form-check form-check-inline mr-1">
<input class="form-check-input" id="inline-radio1" type="radio"
v-model="newItems.status" value="激活">
<label class="form-check-label" for="inline-radio1">激活</label>
</div>
<div class="form-check form-check-inline mr-1">
<input class="form-check-input" type="radio"
v-model="newItems.status" value="禁用">
<label class="form-check-label" for="inline-radio2">禁用</label>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" v-on:click="add">保存</button>
<button class="btn btn-secondary" type="button" v-on:click="off">取消</button>
</div>
</div>
<!-- /.modal-content-->
</div>
<!-- /.modal-dialog-->
</div>
</div>
</div>
</main>
</div>
<footer class="app-footer">
<div>
<a href="http://127.0.0.1:5500/index.html">CoreUI</a>
<span>© 2018 creativeLabs.</span>
</div>
<div class="ml-auto">
<span>Powered by</span>
<a href="http://127.0.0.1:5500/index.html">CoreUI</a>
</div>
</footer>
<!-- CoreUI and necessary plugins-->
<script src="vendors/jquery/js/jquery.min.js"></script>
<script src="vendors/popper.js/js/popper.min.js"></script>
<script src="vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/pace-progress/js/pace.min.js"></script>
<script src="vendors/perfect-scrollbar/js/perfect-scrollbar.min.js"></script>
<script src="vendors/@coreui/coreui/js/coreui.min.js"></script>
<!-- <script src="vendors/chart.js/js/Chart.min.js"></script> -->
<!-- <script src="vendors/@coreui/coreui-plugin-chartjs-custom-tooltips/js/custom-tooltips.min.js"></script> -->
<!-- <script src="js/main.js"></script> -->
<script src="js/mock-min.js"></script>
<script src="js/vue.js"></script>
<script src="vendors/moment/moment-with-locales.js"></script>
<!-- <script src="js/page.js"></script> -->
<!-- <script src="js/vue.min.js"></script> -->
<!-- <script src="https://cdn.bootcss.com/vue/2.6.9/vue.common.dev.js"></script> -->
<!-- 获取数据 -->
<script>
var items = [];
var app;
// var currentdate;
$(function () {
//使用Mock.js库，模拟一个api数据访问接口
//api的访问地址为：http://127.0.0.1:5500/czf
Mock.mock("http://127.0.0.1:5500/czf", {
'data|20-30': [{
id: "@increment()",
'name|1': ["@name", "@cname"],
'role|1': ["教师", "学生"],
registerDate: "@datetime()",
'status|1': ["激活", "禁用"],
}],
success: true,
code: 200,
msg: "Success"
});
//使用jQuery提供的getJSON方法，向服务器发送一个请求
//返回的结果由第二个参数的function处理
$.getJSON("http://127.0.0.1:5500/czf", function (response) {
items = response.data;
var i;
for (i = 0; i < items.length; i++) {
items[i].select = false;
}
//使用vue.js框架，将response.data数据填充到itemsTemplate模板
app = new Vue({
el: '#itemsTemplate',
data: {
items: items,
//添加临时数组
newItems: '',
// seen: false,
// editSeen: false,
//编辑临时数组
editItems: {
id: '',
name: '',
role: '',
registerDate: '',
status: '',
},
index: -1,
editIndex: -1,
checkall: false, // 正在进行中的数据是否被选中
pagesize: 10, //一页加载数据
curpage: 1, //当前页的页码
},
// 在 `methods` 对象中定义方法
methods: {
confirmDel: function (index) {
$('#dangerModal').modal('show');
i=index;
// index = i;
},
// 单项删除（把选中的索引i）
del: function () {
this.items.splice(i, 1);
$('#dangerModal').modal('hide');
$('#successModal').modal('show');
},
//多项删除
multipleDel: function () {
$('#multipleModal').modal('hide');
$('#successModal').modal('show');
for (var i = 0; i < this.items.length; i++) {
if (this.items[i].select) {
// alert(this.items[i].id)
this.items.splice(i, 1);
i--;
}
}
this.curpage = 1;
// alert(curpage);
},
// 添加
addBox: function () {
var form = document.getElementsByClassName('validation')[
0];
form.classList.remove('was-validated');
$('#addModal').modal('show');
this.newItems = {
'id': items.length + 1, //id自动+1
'name': '',
'role': '学生', //默认为学生
// 'registerDate': moment().format("YYYY-MM-DD hh:mm:ss"),
registerDate:time,
'status': '禁用' //默认为禁用状态
};
},
//添加保存
add: function () {
var form = document.getElementsByClassName('validation')[
0];
if (form.checkValidity() === true) {
//插入到items中
this.items.push(this.newItems);
$('#addModal').modal('hide');
};
form.classList.add('was-validated');
},
//取消、关闭模态框
off: function () {
// this.seen = false
$('#addModal').modal('hide');
$('#primaryModal').modal('hide');
$('#dangerModal').modal('hide');
$('#multipleDel').modal('hide');
$('#successModal').modal('hide');
},
//编辑
edit: function (index) {
var form = document.getElementsByClassName('needs-validation')[
0];
form.classList.remove('was-validated');
this.editIndex = index;
this.editItems = JSON.parse(JSON.stringify(this.items[index]));
$('#primaryModal').modal('show');
},
//编辑后提交
editSubmit: function () {
var form = document.getElementsByClassName('needs-validation')[
0];
if (form.checkValidity() === true) {
Vue.set(this.items, this.editIndex, this.editItems);
$('#primaryModal').modal('hide');
};
form.classList.add('was-validated');
},
// 用户全选
checkAll() {
// alert(1)
for (var i = 0; i < this.items.length; i++) {
this.items[i].select = this.checkall;
}
// this.items.forEach(items => items.select = this.checkall);
// alert(this.checkall);
},
//用户单选
checkOne() {
this.checkall = this.items.every(items => items.select);
// alert(this.checkall)
},
//上一页方法
PrePage: function (event) {
$(".pagination .active").prev().trigger("click");
},
//下一页方法
NextPage: function (event) {
$(".pagination .active").next().trigger("click");
},
//点击页码的方法
NumPage: function (num, event) {
if (this.curpage == num) {
return;
}
this.curpage = num;
$(".pagination li").removeClass("active");
if (event.target.tagName.toUpperCase() == "LI") {
$(event.target).addClass("active");
} else {
$(event.target).parent().addClass("active");
}
if (this.curpage == 1) {
$("#prepage").addClass("disabled");
} else {
$("#prepage").removeClass("disabled");
}
if (this.curpage == Math.ceil(this.items.length / this
.pagesize)) {
$("#nextpage").addClass("disabled");
} else {
$("#nextpage").removeClass("disabled");
}
},
},
});
return;
});
});
</script>
<!-- 获取系统当前时间 -->
<script type="text/javascript">
window.setInterval("showtime()");
function showtime() {
var date = new Date();
var s1 = "-";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
var hh = date.getHours();
var mi = date.getMinutes();
var ss = date.getSeconds();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
if (hh >= 0 && hh <= 9) {
hh = "0" + hh;
}
if (mi >= 0 && mi <= 9) {
mi = "0" + mi;
}
if (ss >= 0 && ss <= 9) {
hh = "0" + hh;
}
itemstime = year + s1 + month + s1 + strDate + " " + hh + ":" + mi +
":" + ss +
" ";
return itemstime;
}
</script>
<script type="text/javascript">
window.setInterval("Showtime()");
function Showtime(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var day=date.getDate();
var hh=date.getHours();
var mi=date.getMinutes();
var ss=date.getSeconds();
// var wk="星期"+"日一二三四五六".charAt(date.getDay());
// document.getElementById("div1").innerHTML=year+"-"+month+"-"+day+" "+hh+":"+mi+":"+ss+" ";//+wk;
time=year+"-"+month+"-"+day+" "+hh+":"+mi+":"+ss+" ";
// return time;
}
</script>
<!-- 动态时间 -->
<!-- <script type="text/javascript">
window.setInterval("showtime()");
function showtime() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hh = date.getHours();
var mi = date.getMinutes();
var ss = date.getSeconds();
// var wk="星期"+"日一二三四五六".charAt(date.getDay());
document.getElementById("itemstime").innerHTML = year + "-" + month + "-" + day + " " + hh + ":" + mi +
":" + ss +
" "; //+wk;
}
</script> -->
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
