咨询管理系统(一)-dtcms模板网

当前位置：首页 > 学习教程 > 编程语言

咨询管理系统(一)

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-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="用户名">
        </div>
      </div>

      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">姓名</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="name">
        </div>
      </div>

      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
      </div>

      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">性别</label>
        <div class="col-sm-10">
          <div class="radio">
            <label>
              <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>男
            </label> &nbsp;&nbsp;
            <label>
              <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
              女
            </label>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">手机号</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="tel">
        </div>
      </div>

      <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">生日</label>
        <div class="col-sm-10">
          <input type="password" class="form-control" id="inputPassword3" placeholder="date">
        </div>
      </div>

    </form>
  </div>

  <div class="modal-footer">
    <button type="button" class="cancel" data-dismiss="modal">取消</button>
   
    <button  type="button" class="save">确定</button>
  </div>

</div> <!--modal-content-->

    <!--设置模态框-->
    <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

附件下载

上一篇：Spark DF:关于Row中的数值获取问题

下一篇：洛谷 P1143 进制转换

教程类别

dtcms

文件下载

javascript

.net

编程语言

web前端教程

图片教程

阅读排行

咨询管理系统(一)

页面(部分)

附件下载

相关教程

共有条评论网友评论

教程类别

dtcms

文件下载

javascript

.net

编程语言

web前端教程

图片教程

阅读排行

咨询管理系统(一)

页面(部分)

附件下载

相关教程

共有条评论 网友评论

共有条评论网友评论