Kotlin SLAM TCP连接 tsql animation count path vb6 jScrollPane vue最新版本 jquery多个元素绑定同一个事件 mac安装hadoop python与机器学习 一兆等于多少字节 mysql修改字段值 websocket库 python转java python数据库 河南普通话报名入口 python3入门 python中len函数 python文件读取 python学习方法 java基础语言 java入门教程 java如何连接mysql java语言简介 java判断语句 java中instanceof linux命令 rendercontrol 超级力量2修改 vfloppy 英雄联盟体验服转换器 x64dbg 安卓adb python列表求和 魔兽天龙八部 计划任务软件 非凡资源搜索器
当前位置: 首页 > 学习教程  > 编程语言

咨询管理系统(一)

2020/10/8 19:13:09 文章标签:

页面(部分) index.html 登陆页面 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>资讯管理系统<…

页面(部分)

index.html 登陆页面

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>资讯管理系统</title>
	<link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
	<style>
		*{
			margin:0px;
			padding: 0px;
		}
		div.login_container h2{
			text-align: center;
			margin:30px auto;
			color:#777777;
		}
		div.login_container div.login_content{
			height: 400px;
			background-color: #2cb5ac;
			position: relative;
		}
		div.login_content .left_bg{
			width: 370px;
			height: 300px;
			position: absolute;
			top: 50px;
			left: 180px;
		}
		div.login_content .left_bg img{
			width: 370px;
			height: 300px;
		}

		div.login_content .right_form{
			width: 370px;
			height: 300px;
			float: right;
			margin-right: 100px;
			margin-top: 50px;
			background-color: #fff;
			border-radius: 10px;
		}
		div.login_content .right_form p{
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			margin:30px 0 20px 0;

		}
		div.login_content .right_form div{
			width: 85%;
			margin:0 auto;
			margin-bottom: 20px;
		}
		div.login_content .right_form span{
			position: relative;
			left: 30px;
			color: #889aa4;
			font-size: 18px;
		}
		div.login_content .right_form input{
			box-sizing: border-box;
			width: 90%;
			height: 40px;
			background-color: #e5e5e5;
			border:none;
			border-radius: 5px;
			padding-left: 40px;
			font-size: 14px;
		}
		div.login_content .right_form input::-moz-placeholder{
			color: #ccc;
		}
		div.login_content .right_form input:-ms-input-placeholder{
			color: #ccc;
		}
		div.login_content .right_form input::-webkit-input-placeholder{
			color: #ccc;
		}

		div.login_content .right_form button{
			width: 90%;
			display: block;
			height: 35px;
			margin:0 auto;
			background-color: #fff;
			border:1px solid #ccc;
			border-radius: 5px;
			font-size: 14px;
			color:#7f8084
		}
		div.login_content .right_form button:hover{
			cursor: pointer;
			border-color:rgba(44,181,172,0.4);
			color:rgba(44,181,172,0.6);
			background-color: rgba(44,181,172,0.2);
		}
	</style>
 	 <script src="./js/jquery3.5.0.min.js"></script>
  	<script src="./css/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  	<script type="text/javascript">
  		$(function(){
			  //1.给登陆按钮绑定事件
			  $("button").click(function(){
				  //2.获取用户名,密码
				var username = $("input").eq(0).val();//第一个input的值
				var password = $("input").eq(1).val();
				var obj = {
					username:username,
					password:password
				}
				console.log(username,password);
				//3.表单验证
				if(username && password){
					//用户名密码非空
					//获取token: 发送请求
					$.ajax({
						url:'http://121.199.31.109:7788/user/login',
						type:'POST',
						data: JSON.stringify(obj),
						contentType:'application/json',
						success:function(data){
							// console.log(data);
							if(data.status == 200){
								//请求成功,获取token
								var token = data.data.token;
								if(token){
									//页面跳转
									$(location).attr("href","./firstPg.html");
									//存储token,以便其他页面获取
									sessionStorage.setItem("token",token);

								}
							}else{
								//请求失败
					            alert(data.message);

							}
						}
					});
				}else{
					//用户名密码有一个或两个为空
					alert("用户名/密码不为空!");
				}
			  });

  		});
  	</script>
</head>
<body>
	<div class="login_container">
		<h2>资讯管理系统</h2>
		<div class="login_content">
			<div class="left_bg">
				<img src="./images/bg.png" alt="">
			</div>
			<div class="right_form">
				<p>用户名密码登陆</p>
				<div>
					<span class="fa fa-user"></span>
					<input type="text" placeholder="Username">
				</div>
				<div>
					<span class="fa fa-lock"></span>
					<input type="text" placeholder="Password">
				</div>
				<div>
					<button>登录</button>
				</div>
			</div>
		</div>
	</div>
	
</div>
</body>
</html>

firstPg.html首页

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/x-icon" href="./images/favicon.ico" /> 
  <title>资讯管理系统</title>
  <link rel="stylesheet" href="./css/bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/font-awesome-4.7.0/css/font-awesome.min.css">
 <link rel="stylesheet" href="">
  <script src="./js/jquery3.5.0.min.js"></script>
  <script src="./css/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <script src="./js/firstPg.js"></script>
</head>

<body>
  <div class="container-parent">
    <div class="container-left">
      <div class="header-logo">
        <img src="./images/header.png" width="30px" height="30px" alt="">
        <span>资讯管理系统</span>
      </div>
      <nav>
        <ul>
          <li><i class="fa fa-home"></i><span>系统首页</span></li>
          <li><i class="fa fa-user-circle"></i><span>角色权限</span></li>
          <li><i class="fa fa-navicon"></i><span>分类管理</span></li>
          <li><i class="fa fa-file-text"></i><span>资讯管理</span></li>
          <li><i class="fa fa-paper-plane"></i><span>评论管理</span></li>
          <li><i class="fa fa-star"></i><span>个人信息</span></li>
        </ul>
      </nav>
    </div>
    <div class="container-right">
      <div class="header-right">
        <i class="fa fa-navicon"></i>
        <span class="header-title">首页</span>
        <span class="header-user" title="退出登录">
          <img src="./images/user.gif" width="40px" height="40px" alt="">
        </span>
      </div>
      <div class="container-content">
        <div class="content-main">
         
        </div>
      </div>
    </div>
  </div>
</body>

</html>

firstPg.js



$(function (){
    //给退出登陆按钮绑定事件
    $(".header-user").click(function () {
        //页面跳转到登录页面
        $(location).attr("href", "./index.html");
        //清除token
        sessionStorage.clear();
    });

//给左侧选项卡添加事件绑定
$('.container-left li').click(function (){
    //点击获取li的内容
    var text = $(this).text();

    //切换导航条内容
    $(".header-title").text(text);

    //更具浏览器判断并加载对应子页面
    if (text == "系统首页") {
       $('.content-main').load('./pages/home.html');
    }else if(text == "角色权限"){
        $('.content-main').load('./pages/roleManager.html');
    } else if (text == "分类管理") {
       $('.content-main').load('./pages/classifyManager.html');
    } else if (text == "资讯管理") {
        $('.content-main').load('./pages/messageManager.html');
    } else if (text == "评论管理") {
        $('.content-main').load('./pages/commentManager.html');
    } else if (text == "个人信息") {
        $('.content-main').load('./pages/user.html');
    } else {
        return;
    }
    
  });
  //默认点击第一个li-系统首页
   $('./container-left li').eq(0).click();

})
roleManager.html

角色管理
添加
  <div class="col-md-1">
    <input type="text" placeholder="请输入用户名" class="form-control role_search_text" id="exampleInputName2">
  </div>

  <div class="col-md-1">
    <select class="form-control role_search_text">
      <option class="val">请选择角色</option>
    </select>
  </div>
  <div class="col-md-4 role_search">
    搜索
  </div>
</div>

<div class="row">
<button>批量删除</button>
<table class="table table-hover">
  <thead>
   
      <th>序号</th>
      <th>用户名</th>
      <th>姓名</th>
      <th>角色</th>
      <th>性别</th>
      <th>状态</th>
      <th>手机号</th>
      <th>操作</th>

  </thead>
  <tbody>
 
  </tbody>
</table>
    <!--设置模态框-->
    <div class="modal fade szmd" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">设置</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-10">
                  <input type="email" class="form-control" id="inputEmail3" placeholder="用户名" readonly value="lisi">
                </div>
              </div>
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">角色</label>
                <div class="col-sm-10">
                  <label class="radio">
                    <input name="role" type="radio" id="inlineCheckbox1" value="option1"> 学生
                  </label>
                  <label class="radio">
                    <input name="role" type="radio" id="inlineCheckbox2" value="option2"> 管理员
                  </label>
                  <label class="radio">
                    <input name="role" type="radio" id="inlineCheckbox3" value="option3"> 教师
                  </label>
                </div>  
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-default">确定</button>
          </div>
        </div>
      </div>
    </div>
    <!--设置模态框结束-->
```

本文链接: http://www.dtmao.cc/news_show_250123.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?