【无标题】boot用户管理

最新推荐文章于 2024-06-01 09:33:50 发布
最新推荐文章于 2024-06-01 09:33:50 发布
阅读量111 收藏
点赞数
文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53857788/article/details/124646268
版权 
<!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">
		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>用户管理</title>

		<!-- Bootstrap -->
		<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->
		<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"rel="stylesheet">
		<link rel="stylesheet" href="./css/demo2.css">
		<script src="js/vue.global.min.js" type="text/javascript" charset="utf-8"></script>

		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://fastly.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://fastly.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
	</head>
	<body>
		<div>
		<nav class="navbar navbar-default">
		  <div class="container-fluid">
		    <!-- Brand and toggle get grouped for better mobile display -->
		    <div class="navbar-header">
		      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
		        <span class="sr-only">Toggle navigation</span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		        <span class="icon-bar"></span>
		      </button>
		      <a class="navbar-brand" href="#">COMO Admin</a>
		    </div>
		
		    <!-- Collect the nav links, forms, and other content for toggling -->
		    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
		      <ul class="nav navbar-nav">
		        <li><a href="#"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;后台首页<span class="sr-only">(current)</span></a></li>
		        <li class="active"><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;用户管理</a></li>
				<li><a href="#"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;&nbsp;内容管理</a></li>
		        <li><a href="#"><span class="glyphicon glyphicon-tags"></span>&nbsp;&nbsp;标签管理</a></li>
		      </ul>
		      <ul class="nav navbar-nav navbar-right">
		        <li class="dropdown">
		          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">admin<span class="caret"></span></a>
		          <ul class="dropdown-menu">
		            <li><a href="#"><span class="glyphicon glyphicon-screenshot"></span>&nbsp;&nbsp;前台首页</a></li>
		            <li><a href="#"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;个人主页</a></li>
		            <li><a href="#"><span class="glyphicon glyphicon-cog"></span>&nbsp;&nbsp;个人设置</a></li>
		            <li><a href="#"><span class="glyphicon glyphicon-credit-card"></span>&nbsp;&nbsp;帐户中心</a></li>
		            <li><a href="#"><span class="glyphicon glyphicon-heart"></span>&nbsp;&nbsp;我的收藏</a></li>
		          </ul>
		        </li>
				<li><a href="#"><span class="glyphicon glyphicon-off"></span>&nbsp;&nbsp;退出</a></li>
		      </ul>
		    </div><!-- /.navbar-collapse -->
		  </div><!-- /.container-fluid -->
		</nav>
		</div>
		<div id="app">
			<div class="container">
				<div class="row">
					<div class="col-md-2">
						<div class="list-group">
							<a href="#" class="list-group-item" @click="index=1" :class="{active:index==1}">用户管理</a>
							<a href="#" class="list-group-item" @click="index=2" :class="{active:index==2}">用户搜索</a>
							<a href="#" class="list-group-item">添加用户</a>
						</div>
					</div>
					<div class="col-md-10">
						<div class="page-header">
							<h3> <small>用户管理</small></h3>
						</div>
						<div>
						<!-- Nav tabs -->
						<ul class="nav nav-tabs">
						  <li @click="index=1" :class="{active:index==1}"><a href="#">用户列表</a></li>
						  <li @click="index=2" :class="{active:index==2}"><a href="#">用户搜索</a></li>
						  <li><a href="#">添加用户</a></li>
						</ul>

						<!-- Tab panes -->
						<div class="tab-content">
						  <div class="tab-pane" :class="{active:index==1}">
							<div class="panel panel-default">

							<!-- Table -->
							<table class="table">
							<thead>
							<tr>
								<th>ID</th>
								<th>用户名</th>
								<th>邮箱</th>
								<th>操作</th>
							</tr>
							</thead>
							<tbody>
							<tr>
								<th scope="row">1</th>
								<td>Kuhn</td>
								<td>Kuhn000@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">2</th>
								<td>Kuhn</td>
								<td>Kuhn000@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">3</th>
								<td>Kuhn</td>
								<td>Kuhn000@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">4</th>
								<td>Kuhn</td>
								<td>Kuhn000@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">5</th>
								<td>Kuhn</td>
								<td>Kuhn000@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">6</th>
								<td>Kuhn</td>
								<td>Kuhn000@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">7</th>
								<td>Kuhn</td>
								<td>Kuhn000@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">8</th>
								<td>Kuhn</td>
								<td>Kuhn000@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">9</th>
								<td>Kuhn</td>
								<td>Kuhn000@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							<tr>
								<th scope="row">10</th>
								<td>Kuhn</td>
								<td>Kuhn000@qq.com</td>
								<td>
								<div class="input-group-btn">
								  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">操作 <span class="caret"></span></button>
								  <ul class="dropdown-menu">
									<li><a href="#">编辑</a></li>
									<li><a href="#">删除</a></li>
									<li><a href="#">锁定</a></li>
									<li><a href="#">修改密码</a></li>
								  </ul>
								</div>
								</td>
							</tr>
							</tbody>
							</table>
							</div>
						  </div>
						<div class="tab-pane" :class="{active:index==2}">用户搜索</div>
						</div>

				</div>
				</div>
				</div>
			</div>
			<!-- #append -->
		</div>
		<div class="container">
		<nav class="pull-right" aria-label="Page navigation">
		  <ul class="pagination">
		    <li>
		      <a href="#" aria-label="Previous">
		        <span aria-hidden="true">&laquo;</span>
		      </a>
		    </li>
		    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
		    <li><a href="#">2</a></li>
		    <li><a href="#">3</a></li>
		    <li><a href="#">4</a></li>
		    <li><a href="#">5</a></li>
		    <li>
		      <a href="#" aria-label="Next">
		        <span aria-hidden="true">&raquo;</span>
		      </a>
		    </li>
		  </ul>
		</nav>
		</div>
		
		<div class="container-fluid footer">
			<div class="row>
			  <div class="col-md-12">
				  Copyright &copy; <a href="#"></a> | <a href="#">ICP备111号-2</a>
			  </div>
			</div>
		</div>
	

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
		 crossorigin="anonymous"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
		 crossorigin="anonymous"></script>
		<script type="text/javascript">
			const app = {
				data() {
					return {
						index: 1
					}
				}
			}
			Vue.createApp(app).mount('#app')
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

real_ezzkxonz1333
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
炫酷半透明Bootstrap5管理员后台模版
04-03
一个完全响应式的 Bootstrap 5 管理仪表板模板。它使用 bootstrap 5 框架、HTML5、CSS 和 JQuery 构建。它适用于所有主要的网络浏览器、台式机和所有智能手机设备。这是一个非常易于定制且对开发人员友好的模板。它拥有大量带有最新 jQuery 和引导程序插件的 UI 组件。它可用于任何类型的 Web 应用程序电子商务仪表板、自定义管理面板、项目管理管理、CRM、cms 等。 模板主要功能 多色仪表盘 60 多个响应式 HTML 页面 易于定制 200 多个 UI 图标 多个图表选项 W3C 验证代码 多表布局示例 100% Html 响应页面 带分页和排序的数据表 不同类型的表单布局 验证表格 范围滑块 表单向导 发票页面 用户资料页面 不同类型的通知和甜蜜警报 登录/注册页面 动画模型 兼容小、中、大屏幕 动态和静态小部件 井文档
教程：如何使用 Bootstrap 5 构建简单的管理仪表板界面
allway2的博客
11-11 2443
在今天的教程中，我想向你们展示如何使用 Bootstrap 5 创建一个非常简单的管理仪表板界面。现在，您已经使用 Bootstrap 5 完成了一个简单的管理仪表板界面的构建。让我们继续看仪表板的最后一部分，即页脚。仪表板的页脚是显示对导航较少的页面（如隐私策略、协议条款、联系人等）的引用的好方法。现在，您的项目中已包含 Bootstrap 5，您可以开始构建管理仪表板界面。现在，您还有一个带有表格的小部件，您可以在其中添加用户、事务等内容。您将在本教程中创建的最后一个小部件将是具有图表的小部件。
bootstrap实现管理系统首页设计
weixin_52837547的博客
11-08 1417
bootstrap实现管理系统首页设计
软件20-4 杜明童 bootstrap
qq_63197676的博客
05-07 325
<!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"> <!-- 上述3个meta标签*必须*
运用 bootstrap 创建简单的登陆界面
m0_73384165的博客
08-15 3324
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。​Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
基于spring boot的后台管理系统(java源码+数据库完整版)
01-29
“后台管理系统”通常包括用户认证、权限管理、数据处理等功能，可能包含模块如用户管理、角色管理、菜单管理、操作日志等，这些都是企业级系统中常见的组件。这样的系统通常会使用RESTful API进行前后端分离，前端...
（含实训报告）黑马boot客户管理系统（源码+数据库文件）.zip
06-24
【标题】：“黑马boot客户管理系统”是一个基于SSM框架与Bootstrap技术实现的客户关系管理系统的实践项目，包含源代码和数据库文件。 【描述】：该系统的核心开发采用SSM（Spring、SpringMVC、MyBatis）框架，这是...
就业信息管理系统-使用spring boot+layui
04-25
本系统以"就业信息管理系统-使用spring boot+layui"为标题，旨在通过Spring Boot框架与Layui前端UI库的结合，构建一个高效、易用且功能完善的就业信息管理平台。 Spring Boot是由Pivotal团队提供的全新框架，其核心...
Boot Task app 管理页UI .sketch素材下载
04-20
综上所述，"Boot Task app 管理页UI .sketch素材"包含了设计者对于应用界面的全面构思，从布局到细节都经过深思熟虑，旨在为用户提供高效、美观且易用的任务管理体验。通过Sketch工具，设计师能够精确控制每一个像素...
Boot_crmc.rar
06-18
【标题】"Boot_crmc.rar" 是一个包含基于Spring Boot和SSM（Spring、SpringMVC、MyBatis）框架构建的客户管理系统的压缩文件。这个系统旨在提供全面的客户管理功能，包括客户登录、权限拦截、客户信息查询、添加、...
创建个人中心页面(下）
weixin_49884716的博客
11-14 1147
springboot
【Python Web】Flask框架（五）Bootstrap登录和后台管理案例
qq_51670115的博客
09-17 1530
通过Bootstrap的组件和css进行实现，主要用使用有面板，表格，表单等。
发现完美登录界面：Bootstrap 5 登录模板
最新发布
gitblog_00004的博客
06-01 1055
发现完美登录界面：Bootstrap 5 登录模板 项目地址:https://gitcode.com/nauvalazhar/bootstrap-5-login-page 在数字世界的入口处，一个优雅且功能强大的登录界面不仅是用户体验的门户，也是品牌的第一印象。今天，我们为您推荐一款由nauvalazhar精心打造的开源项目——Bootstrap 5 登录页面。这不仅仅是一个简单的HTML模板，而...
Bootstrap-test3-用户管理
qq_52989010的博客
05-09 192
效果图 代码部分 <div> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button"
5.2 创建个人中心页面-前端部分
是芜湖的，更是世界的！
09-05 7850
5.2 创建个人中心页面-前端部分
基于SpringBoot+Bootstrap的旅游管理系统的设计与实现
2301_77541824的博客
09-28 986
随着旅游业的迅速发展，传统的旅游信息查询方式，已经无法满足用户需求，因此，结合计算机技术的优势和普及，针对常州旅游，特开发了本基于Bootstrap的常州地方旅游管理系统。本论文首先对常州地方旅游管理系统进行需求分析，从系统开发环境、系统目标、设计流程、功能设计等几个方面进行系统的总体设计，开发出本基于Bootstrap的常州地方旅游管理系统，主要实现了用户功能模块和管理员功能模块两大部分，用户可查看景点信息、景点资讯等，注册登录后可进行景点订票操作，同时管理员可进入系统后台对系统进行全面管理操作。
后台管理系统示例：bootstrap快速搭建html页面，jQuery实现选择菜单切换内容
qq_39231899的博客
04-07 6001
后台管理系统示例：通过bootstrap快速搭建html页面，jQuery实现选择菜单切换内容
推荐：Flutter Bootstrap风格的管理界面UI
gitblog_00047的博客
05-20 310
推荐：Flutter Bootstrap风格的管理界面UI 项目地址:https://gitcode.com/kalismeras61/flutter_web_dashboard 在寻找一个美观且易用的Flutter Web后台管理系统模板吗？Flutter Bootstrap Style Admin UI 是你的理想选择！这个开源项目为开发者提供了一套精心设计的Flutter Web管理界面UI...
Bootstrap Admin: 提升你的后台管理界面设计
gitblog_00083的博客
03-18 796
Bootstrap Admin: 提升你的后台管理界面设计 Bootstrap Admin是一款基于Bootstrap框架的前端组件库，用于创建功能齐全、美观大方的后台管理页面。它提供了丰富的预设样式和组件，让你可以快速地构建自己的后台管理系统，并拥有良好的可扩展性和自定义性。 项目简介 Bootstrap Admin的主要目标是为开发者提供一个开箱即用的解决方案，帮助他们轻松地创建专业级别的后台...
标题：Spring Boot实现的"志同道合"交友网站设计与开发
在需求分析部分，本文明确了管理员和会员两个角色的功能、涉及的模块以及用户可以进行的操作，如注册登录、会员信息管理、文章信息管理等。通过对需求的详细分析，为后续的开发工作提供了指导。 随后在开发技术介绍...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值