碼上歡樂
相關內容    簡體    繁體

layui 使用

本文轉載自   查看原文   2018-04-28 18:39   8770 

1.下載后解壓如圖

 

2.示例

 

home.thml代碼

 
         
<!DOCTYPE html>
<html>
<!-- head -->
<head>
 <meta charset="utf-8">
 <title>首頁</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../layui/css/layui.css" media="all">
 
 <style>
 .layadmin-tabsbody-item, [template] {
 display: none;
 }
 .layui-show {
 display: block!important;
 }
 
 html {
 background-color: #f2f2f2;
 color: #666;
 }
 
 
 </style>
</head>
 
         
 
         
<body class="layui-layout-body" cz-shortcut-listen="true">
 <script type="text/javascript" src="../layui/layui.js" charset="utf-8"></script>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <div class="layui-layout layui-layout-admin"> 
<!-- 導航欄 -->
<div class="layui-header">
 <div class="layui-logo">layui 后台布局</div>
 <!-- 頭部區域（可配合layui已有的水平導航） -->
 <ul class="layui-nav layui-layout-left">
 <li class="layui-nav-item"><a href="">控制台</a></li>
 <li class="layui-nav-item"><a href="">商品管理</a></li>
 <li class="layui-nav-item"><a href="">用戶</a></li>
 <li class="layui-nav-item">
 <a href="javascript:;">其它系統</a>
 <dl class="layui-nav-child">
 <dd><a href="">郵件管理</a></dd>
 <dd><a href="">消息管理</a></dd>
 <dd><a href="">授權管理</a></dd>
 </dl>
 </li>
 </ul>
 <ul class="layui-nav layui-layout-right">
 <li class="layui-nav-item">
 <a href="javascript:;">
 <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
 賢心
 </a>
 <dl class="layui-nav-child">
 <dd><a href="">基本資料</a></dd>
 <dd><a href="">修改密碼</a></dd>
 </dl>
 </li>
 <li class="layui-nav-item"><a href="">退了</a></li>
 </ul>
 </div>
 
         
 
         
 
 
         
 
         
<!-- 左側導航欄 -->
 <div class="layui-side layui-bg-black">
 <div class="layui-side-scroll">
 <!-- 左側導航區域（可配合layui已有的垂直導航） -->
 <ul class="layui-nav layui-nav-tree" lay-filter="test">
 <li class="layui-nav-item layui-nav-itemed">
 <a class="" href="javascript:;">所有商品</a>
 <dl class="layui-nav-child">
 <dd><a href="javascript:;">列表一</a></dd>
 <dd><a href="javascript:;">列表二</a></dd>
 <dd><a href="javascript:;">列表三</a></dd>
 <dd><a href="">超鏈接</a></dd>
 </dl>
 </li>
 <li class="layui-nav-item">
 <a href="javascript:;">解決方案</a>
 <dl class="layui-nav-child">
 <dd><a href="javascript:;">基本資料</a></dd>
 <dd><a href="javascript:;">修改密碼</a></dd>
 
 </dl>
 </li>
 
 <li class="layui-nav-item" id="id1"><a href="javascript:;" id="id2" onclick="aClick()">雲市場</a></li>
 <li class="layui-nav-item"><a href="javascript:;">發布商品</a></li>
 
 
 <li class="layui-nav-item">
 <a href="javascript:;">設置</a>
 <dl class="layui-nav-child">
 <dd><a href="../html/">基本資料</a></dd>
 <dd><a href="../html/editUserInfo.html">修改密碼</a></dd>
 </dl>
 </li>
 
 
 <li data-name="set" data-jump="" class="layui-nav-item"> 
 <a href="javascript:;" lay-tips="設置" lay-direction="2"> 
 <i class="layui-icon layui-icon-set"></i> <cite>設置1</cite> <span class="layui-nav-more"></span>
 </a> 
 
 <dl class="layui-nav-child"> 
 <dd data-name="system" data-jump="" class=""> 
 <a href="javascript:;">系統設置<span class="layui-nav-more"></span></a> 
 <dl class="layui-nav-child"> 
 <dd data-name="website" data-jump="" class=""> <a href="javascript:;" lay-href="set/system/website">網站設置</a></dd> 
 <dd data-name="email" data-jump="" class=""> <a href="javascript:;" lay-href="set/system/email">郵件服務</a></dd> 
 </dl> 
 </dd> 
 
 <dd data-name="user" data-jump="" class=""> 
 <a href="javascript:;">我的設置<span class="layui-nav-more"></span></a> 
 <dl class="layui-nav-child"> 
 <dd data-name="info" data-jump="" class="layui-this"> <a href="javascript:;" lay-href="../html">基本資料1</a></dd> 
 <dd data-name="password" data-jump="" class=""> <a href="javascript:;" lay-href="../html/editUserInfo.html">修改密碼</a> </dd> 
 </dl> 
 </dd> 
 </dl> 
 </li>
 
         
 
         
 </ul>
 </div>
 </div>
 
         
 
         
<!-- 內容 -->
 
         
 
         
 <div class="layui-body" style="top: 50px;">
 <!-- 內容主體區域 style="padding: 150px;"-->
 <div class="layadmin-tabsbody-item layui-show">
 <div class="layui-fluid" style="padding: 35px;"> 
 <div class="layui-row layui-col-space15">
 <div class="layui-col-md12">
 <div class="layui-col-md12">
 <div class="layui-card">
 <div class="layui-card-header">設置我的資料</div>
 <div class="layui-card-body" pad15>
 <div class="layui-form" lay-filter>
 <div class="layui-form-item">
 <label class="layui-form-label">我的角色</label>
 <div class="layui-input-inline">
 <select name="role" lay-verify="">
 <option value="1" selected="">超級管理員</option>
 <option value="2" disabled="">普通管理員</option>
 <option value="3" disabled="">審核員</option>
 <option value="4" disabled="">編輯人員</option>
 </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="請選擇" value="超級管理員" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="1" class="layui-this">超級管理員</dd><dd lay-value="2" class=" layui-disabled">普通管理員</dd><dd lay-value="3" class=" layui-disabled">審核員</dd><dd lay-value="4" class=" layui-disabled">編輯人員</dd></dl></div> 
 </div>
 <div class="layui-form-mid layui-word-aux">當前角色不可更改為其它角色</div>
 </div>
 
 <div class="layui-form-item">
 <label class="layui-form-label">用戶名</label>
 <div class="layui-input-inline">
 <input type="text" name="username" value="xianxin" readonly="" class="layui-input">
 </div>
 <div class="layui-form-mid layui-word-aux">不可修改。一般用於后台登入名</div>
 </div>
 
 <div class="layui-form-item layui-form-text">
 <label class="layui-form-label">備注</label>
 <div class="layui-input-block">
 <textarea name="remarks" placeholder="請輸入內容" class="layui-textarea"></textarea>
 </div>
 </div>
 
 <div class="layui-form-item">
 <div class="layui-input-block">
 <button class="layui-btn" lay-submit="" lay-filter="setmyinfo">確認修改</button>
 <button type="reset" class="layui-btn layui-btn-primary">重新填寫</button>
 </div>
 </div>
 
 </div>
 </div>
 </div>
 
 </div>
 </div>
 
 </div>
 
 </div>
 
 
 </div>
 </div>
 
         
 
         
<!-- fotter -->
 <div class="layui-footer">
 <!-- 底部固定區域 -->
 © layui.com - 底部固定區域
 </div>
</div> 
 
         
 
         

</div>
 
         
 
         
<script>
 $(function() {// 初始化內容
 //debugger;
 $("#id2").trigger("click");
 
 });
 
 layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
 
         
 
         
 var laydate = layui.laydate //日期
 ,laypage = layui.laypage //分頁
 layer = layui.layer //彈層
 ,table = layui.table //表格
 ,carousel = layui.carousel //輪播
 ,upload = layui.upload //上傳
 ,element = layui.element; //元素操作
 
 //向世界問個好
 //layer.msg('Hello World');
 
 //監聽Tab切換
 element.on('nav(test)', function(data){
 debugger;
 layer.msg('切換了：'+ this.innerHTML);
 //var tt = this.getAttribute("id");
 //layer.msg(tt);
 console.log(data);
 });
 
 
 });
 
 function aClick () { 
 alert(1);
 //layer.msg('切換了：'+ this.innerHTML);
 } 
 
 
 
         
 
         
</script>
 
         
 
         
 
 
         
 
         

 
 
 
 
<!-- 尾部 -->
 
         
 
         
 
 
         
 
         
</body>
</html>
 
         
 
 
        
 
         
         
        
 
 
        
登錄頁login.html
 
        
 
         
 
         
<!DOCTYPE html>
<html>
<!-- head -->
<head>
 <meta charset="utf-8">
 <title>登錄頁</title>
 <meta name="renderer" content="webkit">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <link rel="stylesheet" href="../layui/css/layui.css" media="all">
 <link rel="stylesheet" href="../layui/login.css" media="all">
 <link rel="stylesheet" href="../layui/admin.css" media="all">
 
 <style>
 body{margin: 10px;}
 .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
 
 </style>
</head>
 
         
 
         
 <body cz-shortcut-listen="true" class="layui-layout-body">
 <div id="LAY_app" class="layadmin-tabspage-none">
 <script type="text/javascript" src="../layui/layui.js" charset="utf-8"></script>
 <!--<script type="text/html" template=""><link rel="stylesheet" href="{{ layui.setter.base }}style/login.css?v={{ layui.admin.v }}-1" media="all"></script> 
 <link rel="stylesheet" href="./dist/style/login.css?v=1.0.0-beta9 pro-1" media="all"> <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
 -->
 <div class="layadmin-user-login-main">
 <div class="layadmin-user-login-box layadmin-user-login-header">
 <h2>layuiAdmin</h2>
 <p>layui 官方出品的單頁面后台管理模板系統</p>
 </div>
 <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
 <div class="layui-form-item">
 <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
 <input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用戶名" class="layui-input">
 </div>
 <div class="layui-form-item">
 <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
 <input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密碼" class="layui-input">
 </div>
 <div class="layui-form-item">
 <div class="layui-row">
 <div class="layui-col-xs7">
 <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
 <input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required" placeholder="圖形驗證碼" class="layui-input">
 </div>
 <div class="layui-col-xs5">
 <div style="margin-left: 10px;">
 <img src="https://www.oschina.net/action/user/captcha" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
 </div>
 </div>
 </div>
 </div>
 <div class="layui-form-item" style="margin-bottom: 20px;">
 <input type="checkbox" name="remember" lay-skin="primary" title="記住密碼"><div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>記住密碼</span><i class="layui-icon"></i></div>
 <a lay-href="/user/forget" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘記密碼？</a>
 </div>
 <div class="layui-form-item">
 <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="LAY-user-login-submit">登 入</button>
 </div>
 <div class="layui-trans layui-form-item layadmin-user-login-other">
 <label>社交賬號登入</label>
 <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
 <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
 <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
 
 <a lay-href="/user/reg" class="layadmin-user-jump-change layadmin-link">注冊帳號</a>
 </div>
 </div>
 </div>
 
 <div class="layui-trans layadmin-user-login-footer">
 
 <p>© 2018 <a href="http://www.njxzc.edu.cn/" target="_blank">南京曉庄學院</a></p>
 <p>
 <span><a href="http://www.baidu.com" target="_blank">獲取授權</a></span>
 <span><a href="http://www.baidu.com" target="_blank">在線演示</a></span>
 <span><a href="http://www.baidu.com" target="_blank">前往官網</a></span>
 </p>
 </div>
 
 <!--<div class="ladmin-user-login-theme">
 <script type="text/html" template>
 <ul>
 <li data-theme=""><img src="{{ layui.setter.base }}style/res/bg-none.jpg"></li>
 <li data-theme="#03152A" style="background-color: #03152A;"></li>
 <li data-theme="#2E241B" style="background-color: #2E241B;"></li>
 <li data-theme="#50314F" style="background-color: #50314F;"></li>
 <li data-theme="#344058" style="background-color: #344058;"></li>
 <li data-theme="#20222A" style="background-color: #20222A;"></li>
 </ul>
 </script>
 </div>-->
 
 </div><script>
 layui.use(['admin', 'form', 'user'], function(){
 var $ = layui.$
 ,setter = layui.setter
 ,admin = layui.admin
 ,form = layui.form
 ,router = layui.router()
 ,search = router.search;
 
         
 
         
form.render();
 
         
 
         
 //提交
 form.on('submit(LAY-user-login-submit)', function(obj){
 
 //請求登入接口
 admin.req({
 url: './json/user/login.js' //實際使用請改成服務端真實接口
 ,data: obj.field
 ,done: function(res){
 
 //請求成功后，寫入 access_token
 layui.data(setter.tableName, {
 key: setter.request.tokenName
 ,value: res.data.access_token
 });
 
 //登入成功的提示與跳轉
 layer.msg('登入成功', {
 offset: '15px'
 ,icon: 1
 ,time: 1000
 }, function(){
 location.hash = search.redirect ? decodeURIComponent(search.redirect) : '/';
 });
 }
 });
 
 });
 
 
 //實際使用時記得刪除該代碼
 layer.msg('為了方便演示，用戶名密碼可隨意輸入', {
 offset: '15px'
 ,icon: 1
 });
 
 });
 </script></div>
 <!-- <script src="//res.layui.com/layui/rc/layui.js?t=20180403-1"></script> -->
 <script>
 layui.config({
 base: './dist/' //指定 layuiAdmin 項目路徑
 ,version: '1.0.0-beta9-1'
 }).use('index', function(){
 var layer = layui.layer, admin = layui.admin;
 layer.ready(function(){
 admin.popup({
 content: '單頁面專業版默認未開啟“多標簽”功能，實際運用時，你可以自定義是否開啟'
 ,area: '300px'
 ,btnAlign: 'c'
 ,shade: false
 });
 });
 });
 </script>
 
 <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_30088308'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "w.cnzz.com/c.php%3Fid%3D30088308' type='text/javascript'%3E%3C/script%3E"));</script><span id="cnzz_stat_icon_30088308"></span><script src=" http://w.cnzz.com/c.php?id=30088308" type="text/javascript"></script>
 
         
 
         
 
 
         
 
         

 <div class="layui-layer-move"></div>
</body>
 
         
 
         

</html>
 
         
 
 
        
 
         
         
        
 
 
        
editUserInfo.html
 
        
 
         
<!DOCTYPE html>
<html>
<!-- head -->
<head>
  <meta charset="utf-8">
  <title>修改密碼</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
    
  <style>
        .layadmin-tabsbody-item, [template] {
            display: none;
        }
        .layui-show {
            display: block!important;
        }
        
        html {
            background-color: #f2f2f2;
            color: #666;
        }
        
        
  </style>
</head>

<body class="layui-layout-body" cz-shortcut-listen="true">
    <script type="text/javascript" src="../layui/layui.js" charset="utf-8"></script>
 <div class="layui-layout layui-layout-admin">         
<!-- 導航欄 -->
<div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 頭部區域（可配合layui已有的水平導航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用戶</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系統</a>
        <dl class="layui-nav-child">
          <dd><a href="">郵件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授權管理</a></dd>
        </dl>
      </li>
    </ul>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          賢心
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本資料</a></dd>
          <dd><a href="">修改密碼</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>



<!-- 左側導航欄 -->
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左側導航區域（可配合layui已有的垂直導航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">所有商品</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超鏈接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解決方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超鏈接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">雲市場</a></li>
        <li class="layui-nav-item"><a href="">發布商品</a></li>
        
        <li class="layui-nav-item">
          <a href="javascript:;">設置</a>
          <dl class="layui-nav-child">
            <dd><a href="../html/">基本資料</a></dd>
            <dd><a href="../html/editUserInfo.html">修改密碼</a></dd>
          </dl>
        </li>
        
        
        <li data-name="set" data-jump="" class="layui-nav-item"> 
            <a href="javascript:;" lay-tips="設置" lay-direction="2"> 
                <i class="layui-icon layui-icon-set"></i> <cite>設置1</cite> <span class="layui-nav-more"></span>
            </a>  
            
            <dl class="layui-nav-child">  
                <dd data-name="system" data-jump="" class=""> 
                    <a href="javascript:;">系統設置<span class="layui-nav-more"></span></a>  
                    <dl class="layui-nav-child">  
                        <dd data-name="website" data-jump="" class=""> <a href="javascript:;" lay-href="set/system/website">網站設置</a></dd>  
                        <dd data-name="email" data-jump="" class=""> <a href="javascript:;" lay-href="set/system/email">郵件服務</a></dd>  
                    </dl>  
                </dd>  
                
                <dd data-name="user" data-jump="" class=""> 
                    <a href="javascript:;">我的設置<span class="layui-nav-more"></span></a>  
                    <dl class="layui-nav-child">  
                    <dd data-name="info" data-jump="" class="layui-this"> <a href="javascript:;" lay-href="set/user/info">基本資料</a></dd>  
                        <dd data-name="password" data-jump="" class=""> <a href="javascript:;" lay-href="set/user/password">修改密碼</a> </dd>  
                    </dl>  
                </dd>  
            </dl> 
        </li>
        
      </ul>
    </div>
  </div>

<!-- 內容 -->

  <div class="layui-body" style="top: 50px;">
    <!-- 內容主體區域 style="padding: 150px;"-->
    <div class="layadmin-tabsbody-item layui-show">
        <div class="layui-fluid" style="padding: 35px;">    
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-col-md12">
                        <div class="layui-card">
                            <div class="layui-card-header">修改密碼</div>
                            <div class="layui-card-body" pad15>
                                <div class="layui-form" lay-filter>
                                    
                                    <div class="layui-form-item">
                                      <label class="layui-form-label">當前密碼</label>
                                      <div class="layui-input-inline">
                                        <input type="password" name="oldPassword" lay-verify="required" lay-vertype="tips" class="layui-input">
                                      </div>
                                    </div>
                                    
                                    <div class="layui-form-item">
                                      <label class="layui-form-label">新密碼</label>
                                      <div class="layui-input-inline">
                                        <input type="password" name="password" lay-verify="pass" lay-vertype="tips" autocomplete="off" id="LAY_password" class="layui-input">
                                      </div>
                                      <div class="layui-form-mid layui-word-aux">6到16個字符</div>
                                    </div>
                                    
                                    <div class="layui-form-item">
                                      <label class="layui-form-label">確認新密碼</label>
                                      <div class="layui-input-inline">
                                        <input type="password" name="repassword" lay-verify="repass" lay-vertype="tips" autocomplete="off" class="layui-input">
                                      </div>
                                    </div>
                                    
                                    
                                    <div class="layui-form-item">
                                      <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit="" lay-filter="setmyinfo">確認修改</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重新填寫</button>
                                      </div>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            
            </div>
        
        </div>
        
    
    </div>
  </div>

<!-- fotter -->
  <div class="layui-footer">
    <!-- 底部固定區域 -->
    © layui.com - 底部固定區域
  </div>
</div>    


</div>

<script>
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){

  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分頁
  layer = layui.layer //彈層
  ,table = layui.table //表格
  ,carousel = layui.carousel //輪播
  ,upload = layui.upload //上傳
  ,element = layui.element; //元素操作
  
  //向世界問個好
  //layer.msg('Hello World');
  
  //監聽Tab切換
  element.on('tab(demo)', function(data){
    //debugger;
    layer.msg('切換了：'+ this.innerHTML);
    //var tt = this.getAttribute("id");
    //layer.msg(tt);
    console.log(data);
  });
  
  table.render({
    elem: '#test'
    ,url:'/demo/table/user/'
    ,cellMinWidth: 80 //全局定義常規單元格的最小寬度，layui 2.2.1 新增
    ,cols: [[
      {field:'id', width:80, title: 'ID', sort: true}
      ,{field:'username', width:80, title: '用戶名'}
      ,{field:'sex', width:80, title: '性別', sort: true}
      ,{field:'city', width:80, title: '城市'}
      ,{field:'sign', title: '簽名', width: '30%', minWidth: 100} //minWidth：局部定義當前單元格的最小寬度，layui 2.2.1 新增
      ,{field:'experience', title: '積分', sort: true}
      ,{field:'score', title: '評分', sort: true}
      ,{field:'classify', title: '職業'}
      ,{field:'wealth', width:137, title: '財富', sort: true}
    ]]
  });
});
</script>

 


 
 
 
 
<!-- 尾部 -->



</body>
</html>
 
        
 
         
         
        
 
 
        
 
 
        
 
 
        
 
 
        
 
 
        
login.css
 
        
 
         
/** layuiAdmin.pro-v1.0.0-beta9 LPPL License By http://www.layui.com/admin/ */
 #LAY_app,body,html{height:100%}.layui-layout-body{overflow:auto}#LAY-user-login,.layadmin-user-display-show{display:block!important}.layadmin-user-login{position:relative;left:0;top:0;padding:110px 0;min-height:100%;box-sizing:border-box}.layadmin-user-login-main{width:375px;margin:0 auto;box-sizing:border-box}.layadmin-user-login-box{padding:20px}.layadmin-user-login-header{text-align:center}.layadmin-user-login-header h2{margin-bottom:10px;font-weight:300;font-size:30px;color:#000}.layadmin-user-login-header p{font-weight:300;color:#999}.layadmin-user-login-body .layui-form-item{position:relative}.layadmin-user-login-icon{position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2}.layadmin-user-login-body .layui-form-item .layui-input{padding-left:38px}.layadmin-user-login-codeimg{max-height:38px;width:100%;cursor:pointer;box-sizing:border-box}.layadmin-user-login-other{position:relative;font-size:0;line-height:38px;padding-top:20px}.layadmin-user-login-other>*{display:inline-block;vertical-align:middle;margin-right:10px;font-size:14px}.layadmin-user-login-other .layui-icon{position:relative;top:2px;font-size:26px}.layadmin-user-login-other a:hover{opacity:.8}.layadmin-user-jump-change{float:right}.layadmin-user-login-footer{position:absolute;left:0;bottom:0;width:100%;line-height:30px;padding:20px;text-align:center;box-sizing:border-box;color:rgba(0,0,0,.5)}.layadmin-user-login-footer span{padding:0 5px}.layadmin-user-login-footer a{padding:0 5px;color:rgba(0,0,0,.5)}.layadmin-user-login-footer a:hover{color:rgba(0,0,0,1)}.layadmin-user-login-main[bgimg]{background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,.05)}.ladmin-user-login-theme{position:fixed;bottom:0;left:0;width:100%;text-align:center}.ladmin-user-login-theme ul{display:inline-block;padding:5px;background-color:#fff}.ladmin-user-login-theme ul li{display:inline-block;vertical-align:top;width:64px;height:43px;cursor:pointer;transition:all .3s;-webkit-transition:all .3s;background-color:#f2f2f2}.ladmin-user-login-theme ul li:hover{opacity:.9}@media screen and (max-width:768px){.layadmin-user-login{padding-top:60px}.layadmin-user-login-main{width:300px}.layadmin-user-login-box{padding:10px}}
 
        
 
         
         
        
 
 
        
admin.css
 
        
 
         
/** layuiAdmin.pro-v1.0.0-beta9 LPPL License By http://www.layui.com/admin/ */
 html #layuicss-layuiAdmin{display:none;position:absolute;width:1989px}::-webkit-input-placeholder{color:#ccc}html{background-color:#f2f2f2;color:#666;}.layadmin-tabsbody-item,[template]{display:none}[lay-href],[lay-tips],[layadmin-event]{cursor:pointer}.layui-layout-admin .layui-header{position:fixed;top:0;left:0;width:100%;height:50px}.layui-layout-admin .layui-header .layui-nav .layui-nav-child a{color:#333}.layui-layout-admin .layui-side{width:220px;top:0;z-index:1001}.layui-layout-admin .layui-header .layui-nav .layui-nav-item,.layui-layout-admin .layui-logo{height:50px;line-height:50px}.layui-layout-admin .layui-logo{position:fixed;left:0;top:0;z-index:1002;width:220px;height:49px;padding:0 15px;box-sizing:border-box;overflow:hidden;font-weight:300;background-repeat:no-repeat;background-position:center center}.layadmin-pagetabs,.layui-layout-admin .layui-body,.layui-layout-admin .layui-footer,.layui-layout-admin .layui-layout-left{left:220px}.layadmin-pagetabs{position:fixed;top:50px;right:0;z-index:999}.layadmin-pagetabs .layui-breadcrumb{padding:0 15px}.layui-layout-admin .layui-body{top:90px;bottom:0}.layui-layout-admin .layui-body .layadmin-tabsbody-item{position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;overflow-y:auto}.layui-layout-admin .layui-header .layui-nav-img{width:26px;height:26px}.layui-layout-admin .layui-header .layui-nav-child{top:55px}.layui-layout-admin .layui-header .layui-layout-right .layui-nav-child{left:auto;right:0}.layui-layout-admin .layui-header .layui-nav .layui-nav-child dd.layui-this,.layui-layout-admin .layui-header .layui-nav .layui-nav-child dd.layui-this a{background:0 0}.layadmin-pagetabs,.layui-layout-admin .layui-body,.layui-layout-admin .layui-footer,.layui-layout-admin .layui-header .layui-layout-right,.layui-layout-admin .layui-header .layui-nav .layui-nav-item,.layui-layout-admin .layui-layout-left,.layui-layout-admin .layui-logo,.layui-layout-admin .layui-side{transition:all .3s;-webkit-transition:all .3s}.layui-icon-login-qq{color:#3492ED}.layui-icon-login-wechat{color:#4DAF29}.layui-icon-login-weibo{color:#CF1900}.layui-form[wid100] .layui-form-label{width:100px}.layui-form[wid100] .layui-input-block{margin-left:130px}@media screen and (max-width:450px){.layui-form[wid100] .layui-form-item .layui-input-inline{margin-left:132px}.layui-form[wid100] .layui-form-item .layui-input-inline+.layui-form-mid{margin-left:130px}}.layui-form-item .layui-input-company{width:auto;padding-right:10px;line-height:38px}.layui-bg-white{background-color:#fff}.layadmin-loading{position:absolute;left:50%;top:50%;margin:-16px -15px;font-size:30px;color:#c2c2c2}.layadmin-fixed{position:fixed;left:0;top:0;z-index:999}.layadmin-link{color:#029789!important}.layadmin-link:hover{opacity:.8}.layui-layer-admin .layui-layer-title{height:50px;line-height:50px;border:0;background-color:#20222A;color:#fff}.layui-layer-admin i[close]{position:absolute;padding:5px;right:10px;top:12px;color:#fff;cursor:pointer}.layui-layer-admin .layui-layer-content{padding:20px;line-height:22px}.layui-layer-admin .layui-layer-content cite{font-style:normal;color:#FF5722}.layui-layer-adminRight{top:50px!important;bottom:0;box-shadow:1px 1px 10px rgba(0,0,0,.1);border-radius:0;overflow:auto}.layadmin-note .layui-layer-content{padding:0}.layadmin-note textarea{display:block;width:300px;height:132px;min-width:300px;min-height:132px;line-height:20px;padding:10px 20px;border:none;box-sizing:border-box;color:#666;word-wrap:break-word}.layui-layout-admin .layui-layout-left{padding:0 10px}.layui-layout-admin .layui-layout-left .layui-nav-item{margin:0 20px}.layui-layout-admin .layui-layout-left a,.layui-layout-admin .layui-layout-right{padding:0}.layui-header .layui-nav-item .layui-icon{position:relative;top:1px;font-size:16px}.layui-header .layui-layout-right .layui-badge-dot{margin-left:11px}.layui-header .layui-nav .layui-this:after,.layui-layout-admin .layui-header .layui-nav-bar{top:0!important;bottom:auto;height:3px;background-color:#fff;background-color:rgba(255,255,255,.3)}.layadmin-body-shade{position:fixed;display:none;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,.3);z-index:1000}.layui-side-menu .layui-side-scroll{width:240px}.layui-side-menu .layui-nav{width:220px;margin-top:50px;background:0 0}.layui-side-menu .layui-nav .layui-nav-item a{height:40px;line-height:40px;padding-left:45px;padding-right:30px}.layui-side-menu .layui-nav .layui-nav-item>a{padding-top:8px;padding-bottom:8px}.layui-side-menu .layui-nav .layui-nav-item a:hover{background:0 0}.layui-side-menu .layui-nav .layui-nav-itemed>.layui-nav-child{padding:5px 0}.layui-side-menu .layui-nav .layui-nav-item .layui-icon{position:absolute;top:50%;left:20px;margin-top:-19px}.layui-side-menu .layui-nav .layui-nav-child .layui-nav-child{background:0 0!important}.layui-side-menu .layui-nav .layui-nav-child .layui-nav-child a{padding-left:60px}.layui-side-menu .layui-nav .layui-nav-more{right:15px}@media screen and (max-width:992px){.layui-layout-admin .layui-side{transform:translate3d(-220px,0,0);-webkit-transform:translate3d(-220px,0,0);width:220px}.layadmin-pagetabs,.layui-layout-admin .layui-body,.layui-layout-admin .layui-footer,.layui-layout-admin .layui-layout-left{left:0}}.layadmin-side-shrink .layui-layout-admin .layui-logo{width:60px;background-image:url(res/logo.png)}.layadmin-side-shrink .layui-layout-admin .layui-logo span{display:none}.layadmin-side-shrink .layui-side{left:0;width:60px}.layadmin-side-shrink .layadmin-pagetabs,.layadmin-side-shrink .layui-layout-admin .layui-body,.layadmin-side-shrink .layui-layout-admin .layui-footer,.layadmin-side-shrink .layui-layout-admin .layui-layout-left{left:60px}.layadmin-side-shrink .layui-side-menu .layui-nav{position:static;width:60px}.layadmin-side-shrink .layui-side-menu .layui-nav-item{position:static}.layadmin-side-shrink .layui-side-menu .layui-nav-item>a{padding-right:0}.layadmin-side-shrink .layui-side-menu .layui-nav-item cite,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>.layui-nav-child,.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-item>a .layui-nav-more{display:none;padding:8px 0;width:200px}.layadmin-side-shrink .layui-side-menu .layui-nav>.layui-nav-itemed>a{background:rgba(0,0,0,.3)}.layadmin-side-spread-sm .layadmin-pagetabs,.layadmin-side-spread-sm .layui-layout-admin .layui-body,.layadmin-side-spread-sm .layui-layout-admin .layui-footer,.layadmin-side-spread-sm .layui-layout-admin .layui-layout-left{left:0;transform:translate3d(220px,0,0);-webkit-transform:translate3d(220px,0,0)}.layadmin-side-spread-sm .layui-layout-admin .layui-layout-right{transform:translate3d(220px,0,0);-webkit-transform:translate3d(220px,0,0)}.layadmin-side-spread-sm .layui-side{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}.layadmin-side-spread-sm .layadmin-body-shade{display:block}.layadmin-pagetabs .layui-tab-title li:first-child .layui-tab-close,.layadmin-tabs-select.layui-nav .layui-nav-bar,.layadmin-tabs-select.layui-nav .layui-nav-more{display:none}.layadmin-pagetabs{height:40px;line-height:40px;padding:0 80px 0 40px;background-color:#fff;box-sizing:border-box;box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.layadmin-pagetabs .layadmin-tabs-control{position:absolute;top:0;width:40px;height:100%;text-align:center;cursor:pointer;transition:all .3s;-webkit-transition:all .3s;box-sizing:border-box;border-left:1px solid #f6f6f6}.layadmin-pagetabs .layadmin-tabs-control:hover{background-color:#f6f6f6}.layadmin-pagetabs .layui-icon-prev{left:0;border-left:none;border-right:1px solid #f6f6f6}.layadmin-pagetabs .layui-icon-next{right:40px}.layadmin-pagetabs .layui-icon-down{right:0}.layadmin-tabs-select.layui-nav{position:absolute;left:0;top:0;width:100%;height:100%;padding:0;background:0 0}.layadmin-tabs-select.layui-nav .layui-nav-item{line-height:40px}.layadmin-tabs-select.layui-nav .layui-nav-item>a{height:40px}.layadmin-tabs-select.layui-nav .layui-nav-item a{color:#666}.layadmin-tabs-select.layui-nav .layui-nav-child{top:40px;left:auto;right:0}.layadmin-tabs-select.layui-nav .layui-nav-child dd.layui-this,.layadmin-tabs-select.layui-nav .layui-nav-child dd.layui-this a{background-color:#f2f2f2!important;color:#333}.layadmin-pagetabs .layui-tab{margin:0;overflow:hidden}.layadmin-pagetabs .layui-tab-title{height:40px;border:none}.layadmin-pagetabs .layui-tab-title li{min-width:0;line-height:40px;max-width:160px;text-overflow:ellipsis;padding-right:40px;overflow:hidden;border-right:1px solid #f6f6f6;vertical-align:top}.layadmin-pagetabs .layui-tab-title li:first-child{padding-right:15px}.layadmin-pagetabs .layui-tab-title li .layui-tab-close{position:absolute;right:8px;top:50%;margin:-7px 0 0;width:16px;height:16px;line-height:16px;border-radius:50%;font-size:12px}.layadmin-pagetabs .layui-tab-title li:after{content:'';position:absolute;top:0;left:0;width:0;height:2px;border-radius:0;background-color:#292B34;transition:all .3s;-webkit-transition:all .3s}.layadmin-pagetabs .layui-tab-title li:hover:after{width:100%}.layadmin-pagetabs .layui-tab-title li.layui-this,.layadmin-pagetabs .layui-tab-title li:hover{background-color:#f6f6f6}.layadmin-pagetabs .layui-tab-title li.layui-this:after{width:100%;border:none;height:2px;background-color:#292B34}.layadmin-tabspage-none .layui-layout-admin .layui-header{border-bottom:none;box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}.layadmin-tabspage-none .layui-layout-admin .layui-body{top:50px}.layadmin-tabspage-none .layadmin-header{display:block}.layadmin-tabspage-none .layadmin-header .layui-breadcrumb{border-top:1px solid #f6f6f6}.layui-layout-admin .layui-header{border-bottom:1px solid #f6f6f6;box-sizing:border-box;background-color:#fff}.layui-layout-admin .layui-header a,.layui-layout-admin .layui-header a cite{color:#333}.layui-layout-admin .layui-header a:hover{color:#000}.layui-layout-admin .layui-header .layui-nav .layui-nav-more{border-top-color:#666}.layui-layout-admin .layui-header .layui-nav .layui-nav-mored{border-color:transparent transparent #666}.layui-layout-admin .layui-header .layui-nav .layui-this:after,.layui-layout-admin .layui-header .layui-nav-bar{height:2px;background-color:#20222A}.layui-layout-admin .layui-logo{background-color:#20222A;box-shadow:0 1px 2px 0 rgba(0,0,0,.15)}.layui-layout-admin .layui-logo,.layui-layout-admin .layui-logo a{color:#fff;color:rgba(255,255,255,.8)}.layui-side-menu{box-shadow:1px 0 2px 0 rgba(0,0,0,.05)}.layui-layout-admin .layui-footer{padding:10px 0;text-align:center;box-shadow:0 -1px 2px 0 rgba(0,0,0,.05)}.layadmin-setTheme-side,.layui-side-menu{background-color:#20222A;color:#fff}.layadmin-setTheme-header,.layui-layout-admin .layui-footer{background-color:#fff}.layui-tab-admin .layui-tab-title{background-color:#393D49;color:#fff}.layui-fluid{padding:15px}.layadmin-header{display:none;height:50px;line-height:50px;margin-bottom:0;border-radius:0}.layadmin-header .layui-breadcrumb{padding:0 15px}.layui-card-header .layui-icon{line-height:initial;position:absolute;right:15px;top:50%;margin-top:-7px}.layadmin-iframe{position:absolute;width:100%;height:100%;left:0;top:0}.layadmin-carousel{height:185px!important;background-color:#fff}.layadmin-carousel .layui-carousel-ind li{background-color:#e2e2e2}.layadmin-carousel .layui-carousel-ind li:hover{background-color:#c2c2c2}.layadmin-carousel .layui-carousel-ind li.layui-this{background-color:#999}.layadmin-carousel .layui-carousel,.layadmin-carousel>[carousel-item]>*{background-color:#fff}.layadmin-carousel .layui-col-space10{margin:0}.layadmin-carousel .layui-carousel-ind{position:absolute;top:-41px;text-align:right}.layadmin-carousel .layui-carousel-ind ul{background:0 0}.layui-card .layui-tab-brief .layui-tab-title{height:42px;border-bottom-color:#f6f6f6}.layui-card .layui-tab-brief .layui-tab-title li{margin:0 15px;padding:0;line-height:42px}.layui-card .layui-tab-brief .layui-tab-title li.layui-this{color:#333}.layui-card .layui-tab-brief .layui-tab-title .layui-this:after{height:43px}.layui-card .layui-tab-brief .layui-tab-content{padding:15px}.layui-card .layui-table-view{margin:0}.layadmin-shortcut li{text-align:center}.layadmin-shortcut li .layui-icon{display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s}.layadmin-shortcut li cite{position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px}.layadmin-shortcut li:hover .layui-icon{background-color:#f2f2f2}.layadmin-backlog .layadmin-backlog-body{display:block;padding:10px 15px;background-color:#f8f8f8;color:#999;border-radius:2px;transition:all .3s;-webkit-transition:all .3s}.layadmin-backlog-body h3{padding-bottom:10px;font-size:12px}.layadmin-backlog-body p cite{font-style:normal;font-size:30px;font-weight:300;color:#009688}.layadmin-backlog-body:hover{background-color:#f2f2f2;color:#888}.layadmin-dataview{height:332px!important}.layadmin-dataview>[carousel-item]:before{display:none}.layadmin-dataview>[carousel-item]>div{height:332px}.layadmin-takerates{padding-top:5px}.layadmin-takerates .layui-progress{margin:50px 0 60px}.layadmin-takerates .layui-progress:last-child{margin-bottom:10px}.layadmin-takerates .layui-progress h3{position:absolute;right:0;top:-35px;color:#999;font-size:14px}.layadmin-takerates .layui-progress-bar{text-align:left}.layadmin-takerates .layui-progress-text{top:-35px;line-height:26px;font-size:26px}.layadmin-news{height:60px!important;padding:5px 0}.layadmin-news a{display:block;line-height:60px;text-align:center}.layadmin-news .layui-carousel-ind{height:45px}.layadmin-list li{margin-bottom:6px;padding-bottom:6px;border-bottom-color:#f6f6f6;list-style-position:inside;list-style-type:disc;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.layadmin-list li a{color:#666}.layadmin-list li a:hover{color:#009688}.layadmin-list li:last-child{border:none;padding:0;margin:0}.layadmin-text p{margin-bottom:10px;text-indent:2em}.layadmin-text p:last-child{margin:0}.layadmin-panel-selection{width:768px;margin:30px auto}.layadmin-panel-selection .layui-panel-window{padding:30px 50px;border-top-color:#ddd;text-align:center}.layadmin-panel-selection .layui-panel-window h2{padding-bottom:15px;font-size:18px}.layadmin-panel-selection .layui-panel-window ul{margin-top:15px;text-align:left}.layadmin-panel-selection .layui-btn-container{margin-top:30px}.layadmin-panel-selection .layui-btn-container .layui-btn{width:100%}.layuiAdmin-msg-detail h1{font-size:16px}.layuiAdmin-msg-detail .layui-card-header{height:auto;line-height:30px;padding:15px}.layuiAdmin-msg-detail .layui-card-header span{padding:0 5px;color:#999}.layuiAdmin-msg-detail .layui-card-header span:first-child{padding-left:0}.layuiAdmin-msg-detail .layui-card-body{padding:15px}.layadmin-setTheme{padding:15px;overflow-x:hidden}.layadmin-setTheme>h5{padding:20px 0 10px;color:#000}.layadmin-setTheme>h5:first-child{padding-top:0}.layadmin-setTheme-color{width:330px;font-size:0}.layadmin-setTheme-color li{position:relative;display:inline-block;vertical-align:top;width:80px;height:50px;margin:0 15px 15px 0;background-color:#f2f2f2;cursor:pointer;font-size:12px;color:#666}.layadmin-setTheme-color li:after{content:'';position:absolute;z-index:20;top:50%;left:50%;width:1px;height:0;border:1px solid #f2f2f2;transition:all .3s;-webkit-transition:all .3s;opacity:0}.layadmin-setTheme-color li.layui-this:after,.layadmin-setTheme-color li:hover:after{width:100%;height:100%;padding:4px;top:-5px;left:-5px;border-color:#5FB878;opacity:1}.layadmin-setTheme-header{position:relative;z-index:10;height:10px;border-top:1px solid #f2f2f2;border-right:1px solid #f2f2f2}.layadmin-setTheme-side{position:absolute;left:0;top:0;width:20px;height:100%;z-index:11;box-shadow:1px 0 2px 0 rgba(0,0,0,.05)}.layadmin-setTheme-logo{position:absolute;left:0;top:0;width:100%;height:10px;box-shadow:0 1px 2px 0 rgba(0,0,0,.15)}.layadmin-form-right{text-align:right}.layadmin-about p{margin-bottom:10px}.layadmin-menu-list .layui-card-header{height:50px;line-height:50px;font-size:16px}.layadmin-menu-list .layui-card-header:active{background-color:#f2f2f2}.layadmin-menu-list .layui-card-header .layui-icon{position:relative;top:1px;left:0;display:inline-block;margin:0 10px;font-size:18px}@-webkit-keyframes layui-rl{from{-webkit-transform:translate3d(100%,0,0)}to{-webkit-transform:translate3d(0,0,0)}}@keyframes layui-rl{from{transform:translate3d(100%,0,0)}to{transform:translate3d(0,0,0)}}.layui-anim-rl{-webkit-animation-name:layui-rl;animation-name:layui-rl}@-webkit-keyframes layui-lr{from{-webkit-transform:translate3d(0 0,0);opacity:1}to{-webkit-transform:translate3d(100%,,0,0);opacity:1}}@keyframes layui-lr{from{transform:translate3d(0,0,0)}to{transform:translate3d(100%,0,0)}}.layui-anim-lr,.layui-anim-rl.layer-anim-close{-webkit-animation-name:layui-lr;animation-name:layui-lr}.layadmin-tips{margin-top:30px;text-align:center}.layadmin-tips .layui-icon[face]{display:inline-block;font-size:300px;color:#393D49}.layadmin-tips .layui-text{width:500px;margin:30px auto;padding-top:20px;border-top:5px solid #009688;font-size:16px}.layadmin-tips h1{font-size:100px;line-height:100px;color:#009688}.layadmin-tips .layui-text .layui-anim{display:inline-block}@media screen and (max-width:768px){.layadmin-panel-selection{margin:0;width:auto}.layui-body .layui-nav .layui-nav-item{display:block}}
 
        
 
        
 
 
        
表結構
 
        
 
         
CREATE TABLE stuent
(
  id                     integer             NOT NULL , -- 表id
  stuname                 VARCHAR(64)         NOT NULL,     -- 事件id
  stutype             VARCHAR(64),                     -- 事件時間
  
  CONSTRAINT stuent_key PRIMARY KEY (id)
);

CREATE TABLE course1
(
  id                     integer             NOT NULL , -- 表id
  coursename                 VARCHAR(64)         NOT NULL,     -- 事件id
 
  
  CONSTRAINT course1_key PRIMARY KEY (id)
);

CREATE TABLE stu_course
(
  id                     integer             NOT NULL , -- 表id
  stuid                 integer         ,     -- 事件id
  courseid             integer,                     -- 事件時間
  
  CONSTRAINT stu_course_key PRIMARY KEY (id)
);
 
        
 
        
 
 
        
 
 
        
sql語句：
 
        
 
 
        
 
         
 
         
-- 老師所授課
SELECT
 *
FROM
 stuent,
 stu_course,course1
 
WHERE
 stuent. id = stu_course. stuid 
 and stu_course.courseid = course1.id
 and stuent.stutype = '2' and stuent.id = 2
 -- and stuent.id = 2 加上老師過濾
;
 
         
 
         
--所有的課 ,需要添加課程年級的過濾【課程過濾做到年級的過濾】
select * from course1 
 
         
 
         

 -- 學生看到的課，就是老師交的課程；
 -- 自己選過的課程不在這里出現【list集合過濾下】
 
         
 
         

-- 學生選的課程
 SELECT
 *
FROM
 stuent,
 stu_course,course1
where
stuent. id = stu_course. stuid 
 and stu_course.courseid = course1.id
 and stuent.stutype = '2' and stuent.id = 1
 
         
 
         

根據課程查到學生的出勤狀態
select student.stuname from student,stu_course,course ,stu_onduty
 where student.id = stu_course.stuid
 and course.id = stu_course.courseid
 and stu_onduty.courseid = stu_course.courseid
 and stu_onduty.teacherid = stu_course.stuid
 and student.stutype = '2' 
 and stu_course.courseid = 1 and stu_course.stuid = 2 -- 課程id，以及老師id
 and stu_onduty.createtime = '20180101'
 
         
 
         
根據課程id以及老師id查 該門課程的出勤信息，用來回寫出勤狀態
select * from stu_onduty ,student
where stu_onduty.teacherid ='2' and stu_onduty.courseid = '1'
 and stu_onduty.stuid = student.id
 
         
 
         
管理員課程分配分配
 
         
 
 
        
 
        
 
 
        
具體的sql
 
        
 
         
/*
 Navicat MySQL Data Transfer

 Source Server         : 本體
 Source Server Type    : MySQL
 Source Server Version : 50639
 Source Host           : 127.0.0.1:3306
 Source Schema         : sturollcall

 Target Server Type    : MySQL
 Target Server Version : 50639
 File Encoding         : 65001

 Date: 16/04/2018 20:17:18
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for course
-- ----------------------------
DROP TABLE IF EXISTS `course`;
CREATE TABLE `course`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `coursename` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '課程名稱',
  `coursestarttime` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '課程開始時間',
  `courseendtime` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '課程結束時間',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

-- ----------------------------
-- Table structure for student
-- ----------------------------
DROP TABLE IF EXISTS `student`;
CREATE TABLE `student`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `stuname` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '學生姓名',
  `stupwd` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '學生登陸密碼',
  `stugrade` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '學生年紀',
  `stuclass` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '學生班級',
  `stuprofess` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '學生專業',
  `stuphone` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '學生電話',
  `stuemail` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '學生郵箱',
  `whichyear` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '那一屆學生',
  `createtime` varchar(0) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '數據創建時間',
  `createtype` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '創建類型0：默認；1：學生自己創建；3老師創建',
  `stusex` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '學生性別0：男，1：女',
  `stutype` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '角色0：老師1：學生',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

-- ----------------------------
-- Table structure for teacher
-- ----------------------------
DROP TABLE IF EXISTS `teacher`;
CREATE TABLE `teacher`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `teachername` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '老師名字',
  `teachersex` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '老師登陸密碼',
  `teachersex` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '老師性別',
  `teachertype` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '1:管理員；2：老師',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 1 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` int(11) NOT NULL,
  `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `pwd` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;

SET FOREIGN_KEY_CHECKS = 1;
 
        
 
        
 
 
        
 郵件發送：
 
        
 
         
package com.hikvision.cms.module.cpi.servlet;

import java.util.*;
import javax.mail.*;
import javax.mail.internet.*;
import javax.activation.*;

@SuppressWarnings("unused")
public class SendEmail
{

    public boolean send(String str) {

        boolean success = true;
        try {
            // 建立郵件會話
            Properties props = new Properties(); // 用來在一個文件中存儲鍵-值對的，其中鍵和值是用等號分隔的，
            // 存儲發送郵件服務器的信息
            props.put("mail.smtp.host", "hikml5.hikvision.com.cn");
            // 同時通過驗證
            props.put("mail.smtp.auth", "true");
            // 根據屬性新建一個郵件會話
            Session s = Session.getInstance(props);
            //s.setDebug(true); // 有他會打印一些調試信息。

            // 由郵件會話新建一個消息對象
            MimeMessage message = new MimeMessage(s);

            // 設置郵件
            InternetAddress from = new InternetAddress(str); // 
            message.setFrom(from); // 設置發件人的地址
            // 
            //設置收件人,並設置其接收類型為TO
            InternetAddress to = new InternetAddress(str); // 
            message.setRecipient(Message.RecipientType.TO, to);
            message.addRecipient(Message.RecipientType.CC, new InternetAddress("xujiangfei@hikvision.com.cn"));
            //發送多個郵件
            InternetAddress[] address = new  InternetAddress[]{new InternetAddress("xujiangfei@hikvision.com.cn"),new InternetAddress("xujiangfei@hikvision.com.cn")};
            //message.addRecipients(Message.RecipientType.TO, address); 
            //message.addRecipient(Message.RecipientType.CC, ccAddress);

            // 設置標題
            message.setSubject("hhh"); // java學習

            // 設置信件內容
            message.setText("你好"); 

            // 設置發信時間
            message.setSentDate(new Date());

            // 存儲郵件信息
            message.saveChanges();

            // 發送郵件
            Transport transport = s.getTransport("smtp");
            //transport.connect(arg0, arg1, arg2, arg3);
            
            try{
                // 以smtp方式登錄郵箱,第一個參數是發送郵件用的郵件服務器SMTP地址,第二個參數為端口,第三個參數為用戶名，第四個為密碼
                transport.connect("hikml5.hikvision.com.cn",25,"xujiangfei","Hik12345+");
                //transport.connect("smtp.hikvision.com.cn","wangshuaiyf1@hikvision.com.cn", "86287184");
                System.out.println(transport.isConnected());
                if(!transport.isConnected()){ //連接服務器失敗
                    
                    success = false;
                    return success;
                }
                // 發送郵件,其中第二個參數是所有已設好的收件人地址
                transport.sendMessage(message, message.getAllRecipients());
                transport.close();
            }catch(Exception e){
                success = false;
            }
            

        } catch (Exception e) {
            success = false;
        }
        return success;
    }
    
    public static void main(String[] args) {
        SendEmail mailTrans=new SendEmail();
        mailTrans.send("xujiangfei@hikvision.com.cn");
    }
}
 
        
 
        
 
 
        
具體的功能需求點
 
        
 
         
    管理員：
0.首頁模塊
    
1.所有課程模塊
    **列表：查詢課程表所有課程返回page頁，搜索功能一起做
    **刪除：支持批量刪除 -- NO
    **修改：
    **查詢 -- NO
    **新增：
    **分配：把課程分配和老師，把課程id和老師id存到 stu_course表 -- NO
    
2.學生管理模塊
    **列表：查詢學生表所有學生返回page頁，搜索功能一起做
    **刪除：支持批量刪除
    **修改：
    **查詢：
    **新增：
    
3.老師管理模塊【學生和老師在同一個表】
    **列表：查詢學生表所有學生返回page頁，搜索功能一起做
    **刪除：支持批量刪除
    **修改：
    **查詢：
    **新增：
    
4.登錄，個人信息修改


    老師
1.首頁模塊
    **
2.所有課程
    **列表：課程表所有課程
    
    
3.我的課程
    **列表：和老師做過關聯的課程
    **點名：點名后跳轉到一個列表顯示所有選課的學生
4.考勤

5.郵件發送
    
    
    
    
    學生
1.    首頁模塊

2.  所有課程

3.  我的課程
    **請假：在課程后面有請教的功能按鈕
4.  考勤
 
        
 
        
 
 
        
 
 
        
 
 
        
畢業設計遺留問題：
 
        
1.表設計問題：學生，老師，管理員放到一張表，會有數據量的問題【其實問題應該不大，一個學校的人數也就幾萬人】；課程和學生關聯表中的數據可能會很多
 
        
2.高並發問題
 
       
 
        
       
 
        
 
 
       
 
        
       
 
       
 
      
 
      
 
      
 
     
 
     
 
      
 
      
 
        
       
免責聲明！
 
       
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。
 
      
 
      

      
 
     
 
    
 
     
    
 
     
 
      猜您在找 
        使用layui上傳圖片  
        layui使用記錄  
        layui timeline使用  
        vue中使用layui  
        layui插件croppers的使用  
        layui中formSelects的使用  
        LayUI的基本使用 - 分頁  
        LayUI open和confirm使用  
        layui穿梭框使用  
        Layui中layedit模板的使用  
      
 
      
 
     
 
    
 
   
 
  
 
  

    
  
 
  
 
   
 
   
 
   
 
    粵ICP備18138465號  
    © 2018-2025 CODEPRJ.COM