JavaWeb這三週-FrameSet框架實現新聞後臺管理系統

實驗目的：利用frameset框架完成新聞後臺管理系統
使用技術型別：frameset、css、form表單提交。
1、新建登入頁面login.html:
簡單登入表單頁面，提交action為index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Style/Login.css" rel="stylesheet" type="text/css" 
 />
<title>主頁</title>
</head>

<body>
   <div id="wrapper">
       <form id="form1" name="form1" action="index.html" >
          <div class="login">
             <div>
                 <label for="username">使用者名稱</label>
                 <input 
 type="username" name="username" id="username"  />
             </div>
             <div> 
                 <label for="password">密  碼</label>
                 <input type="password" name="password" id="password"  />
             </div>
             <div class="button" 
>
                 <input type="submit" name="Submit" value="登入"  />
                 <input type="reset"  name="Submit" value="重置"  />
             </div>
           </div>
        </form>
    </div>

 </body>
</html>

/* CSS Document */
* {
    margin: 0px;
    padding: 0px;
}
body {
    font-family: Arial, "宋體";
    color: #FFFFFF;
    font-size: 12px;
    line-height: 24px;
}
a {
    font-family: Arial, "宋體";
    font-size: 12px;
    color: #FFCC00;
    text-decoration: underline;
    margin-right: 5px;
}
a:hover {
    text-decoration: none;
    color: #FFFFFF;
}
#wrapper {
    background-image: url(../Images/Bj_Login.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    height: 218px;
    width: 670px;
    margin-top: 150px;
    margin-right: auto;
    margin-left: auto;
}
.login {
    height: 140px;
    width: 222px;
    float: right;
    margin-top: 53px;
    margin-right: 11px;
    padding-top: 10px;
    padding-left: 15px;
    display: inline;
}
.login div {
    margin-top: 15px;
    margin-bottom: 15px;
    height: 22px;
}
.login #type {
    font-family: Arial, "宋體";
    font-size: 12px;
}
.login #username {
    border: 1px solid #0F509F;
    width: 160px;
    height: 16px;
}
.login #password {
    border: 1px solid #0F509F;
    width: 160px;
    height: 16px;
}
.login .button {
    padding-left: 55px;
}
.login .button input {
    background-color: #FFA73D;
    height: 20px;
    width: 60px;
    font-family: Arial, "宋體";
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    background-image: url(../Images/Bj_loginButton.gif);
    background-repeat: repeat-x;
    background-position: 0px 0px;
    border: 1px solid #DC6B00;
    line-height: 18px;
}
#link {
    text-align: center;
    height: 16px;
}

2、新建主頁頂部頁面top.html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Style/Top.css" rel="stylesheet" type="text/css" />
<title>top</title>
</head>

<body>
   <div id="top">
      <div id="time">您好，今天是<span id="date">2015年9月10日&nbsp;星期四</span></div>
      <script type="text/javascript">
             var d=new Date();
             document.getElementById("date").innerHTML=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+" 星期"+"天一二三四五六 ".charAt(d.getDay());
             </script>
   </div>
   <div id="menuBg">
       <div id="name">管理員</div>
       <div id="menu">
             <a href="main.html" target="mainFrame" id="home">首頁</a></div>
   </div>

</body>
</html>

Top.css

/* CSS Document */
body {
    background-color: #FFFFFF;
    background-repeat: repeat-x;
    background-position: 999px top;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-image: url(../Images/Bj_top.gif);
}
#top {
    background-color: #FFFFFF;
    background-image: url(../Images/Pic_top_img.gif);
    background-repeat: no-repeat;
    background-position: left top;
    width: 999px;
    height: 76px;
    font-family: Arial, Helvetica, sans-serif, "宋體";
    font-size: 12px;
    color: #000000;
}
#time {
    line-height: 25px;
    text-align: center;
    height: 25px;
    width: 235px;
    font-family: Arial, Helvetica, sans-serif, "宋體";
    padding: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 702px;
    margin-right: 0px;
}
#menuBg {
    background-image: url(../Images/Bj_menu.gif);
    background-repeat: repeat-x;
    background-position: left top;
    background-color: #0066CC;
    height: 24px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    font-family: Arial, Helvetica, sans-serif, "宋體";
    font-size: 12px;
    color: #FFFFFF;
    text-align: left;
    line-height: 24px;
}
#name {
    line-height: 24px;
    height: 24px;
    width: 70px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    background-image: url(../Images/Pic_iconAdmin.gif);
    background-repeat: no-repeat;
    background-position: left center;
    font-weight: bold;
    display: block;
    float: left;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 20px;
    margin-left: 10px;
    border: 0px;
}
#menu {
    margin: 0px;
    padding: 0px;
    float: right;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}
#menu a {
    margin-right: 16px;
    font-family: Arial, "宋體";
    font-size: 12px;
    color: #FFFFFF;
    text-decoration: none;
}
#menu #home {
    background-image: url(../Images/Pic_homeIcon.gif);
    background-repeat: no-repeat;
    background-position: 0px 1px;
    padding-left: 20px;
    width: 30px;
    height: 24px;
    display: block;
    float: left;
}
#menu #user {
    background-image: url(../Images/Pic_iconUser.gif);
    background-repeat: no-repeat;
    background-position: 0px 1px;
    padding-left: 22px;
    width: 50px;
    height: 24px;
    display: block;
    float: left;
}
#menu #manage {
    background-image: url(../Images/Pic_iconManage.gif);
    background-repeat: no-repeat;
    background-position: 0px 1px;
    padding-left: 22px;
    width: 50px;
    height: 24px;
    display: block;
    float: left;
}
#menu #quit {
    background-image: url(../Images/Pic_quitIcon.gif);
    background-repeat: no-repeat;
    background-position: 0px 1px;
    padding-left: 20px;
    width: 30px;
    height: 24px;
    display: block;
    float: left;
}
#menu #help {
    background-image: url(../Images/Pic_helpIcon.gif);
    background-repeat: no-repeat;
    background-position: 0px 1px;
    padding-left: 20px;
    width: 30px;
    height: 24px;
    display: block;
    float: left;
}

3、新建主頁左側頁面left.html:
包含導航連結，連結頁面至右側主頁面

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Style/Left.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
//選單點選用方法--隱藏
function hideAll() 
{
    if (document.all.list.length==null)
    {
        list.style.display="none";
    }
    else
    {
        for(i=0;i<list.length;i++) 
        {
            list[i].style.display="none";
        }
    }
}

//選單點選用方法--顯示
function showobj(num) 
{
    if (document.all.list.length==null)
    {
        if (list.style.display=="none") 
        {
            hideAll();
            list.style.display="inline";
        }
        else 
        {
            list.style.display="none";
        }
    }
    else
    {
        if (list[num].style.display=="none") 
        {
            hideAll();
            list[num].style.display="inline";
        }
        else 
        {
            list[num].style.display="none";
        }
    }
}
</script>
<style type="text/css">
/*<![CDATA[*/
.yincang {
    display:none;
}
/*]]>*/
</style>

<title>Left</title>
</head>

<body>
    <div>
        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="leftMenu">
            <tr onclick="showobj(0)">
                 <td><a target="mainFrame">管理中心</a></td>
            </tr>
            <tr id="list" style="display:none;">
                  <td>
                      <table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr>
                              <td><a href="News/CategoryList.html" target="mainFrame">類別管理</a></td>
                          </tr>
                          <tr>
                              <td><a href="News/NewsList.html" target="mainFrame">新聞管理</a></td>
                          </tr>
                      </table>
                  </td>
             </tr>
     </table>
  </div>                  
</body>
</html>

Left.css

/* CSS Document */
body {
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-image: url(../Images/Bj_left.gif);
    background-repeat: repeat-y;
    background-position: left top;
    background-color: #3374BE;
}
.leftMenu {
    width: 177px;
    float: left;
    border: 0px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-image: url(../Images/Pic_left_line.gif);
    padding: 0px;
    margin-top: 14px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}
.leftMenu td {
    background-image: url(../Images/Pic_left_line.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-left: 10px;
    line-height: 36px;
    height: 30px;
    cursor: hand;
}
.leftMenu a {
    font-family: Arial, Helvetica, sans-serif, "宋體";
    font-size: 14px;
    font-weight: bold;
    color: #12247A;
    text-decoration: none;
    line-height: 30px;
    margin-left: 5px;
    background-image: url(../Images/Pic_arrow.gif);
    background-repeat: no-repeat;
    background-position: 0px 10px;
    display: block;
    text-indent: 10px;
    width: 100%;
}
.leftMenu a:hover {
    background-image: url(../Images/Pic_arrow.gif);
    background-repeat: no-repeat;
    background-position: 0px 10px;  /*padding-left: 14px;*/
}
.leftMenu td table {
    border: 0px;
    padding: 0px;
    margin-left: 12px;
}
.leftMenu td table td {
    background-image: url(../Images/Pic_left_line.gif);
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-left: 10px;
    line-height: 36px;
    height: 30px;
    cursor: hand;
}
.leftMenu td table td a {
    font-family: Arial, Helvetica, sans-serif, "宋體";
    font-size: 12px;
    font-weight: normal;
    color: #12247A;
    text-decoration: none;
    line-height: 30px;
    margin-left: 5px;
    background-image: url(../Images/Pic_arrow.gif);
    background-repeat: no-repeat;
    background-position: 10px 10px;
    display: block;
    text-indent: 20px;
    width: 100%;
}
.leftMenu td table td a:hover {
    font-weight: bold;
    background-image: url(../Images/Pic_arrow.gif);
    background-repeat: no-repeat;
    background-position: 24px 10px;
    padding-left: 14px;
}

#shrink {
    display: block;
    height: 40px;
    width: 5px;
    padding: 0px;
    margin-top: 156px;
    margin-right: 0px;
    margin-bottom: auto;
    margin-left: 0px;
    float: left;
}

4、新建分隔線頁面border.html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
   *{
       margin:0px;
       padding:0px;
       border:0px;
   }
   body{
       background-color:#3374BE;
   }
   #tab{
       display:block;
       height:100%;
       width:5px;
       padding:0px;
       margin-top:126px;
       margin-right:0px;
       margin-bottom:0px;
       margin-left:0px;
       float:left;
   }


</style>
<title>border</title>
</head>

<body>
    <div id="tab"></div>
</body>
</html>

5、新建主頁右側主頁面：main.html：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="Style/Main.css" rel="stylesheet" type="text/css" />
<title>main</title>
</head>

<body>
   <div id="main"></div>
</body>
</html>

main.css

 
 
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    JavaWeb這三週-FrameSet框架實現新聞後臺管理系統
      
							
							
							實驗目的：利用frameset框架完成新聞後臺管理系統 
使用技術型別：frameset、css、form表單提交。 
1、新建登入頁面login.html: 
簡單登入表單頁面，提交action為index.html



<html xmlns="ht 

  
 

    

    
    .net mvc 框架實現後臺管理系統 3
      左側選單實現 
預設html 
<div class="layui-side layui-bg-black h-slide"> <div class="layui-side-scroll"> <ul class="layui-nav layui-nav-tree" lay-fil 

  
 

    

    
    .net mvc 框架實現後臺管理系統4-layedit使用
      layer   spl   ima   art   mage   get   image   none   UNC   做個簡單的文章發布，使用了layui的layedit
效果：

在html頁面添加：
<textarea id="MyArticleContent" style="display: n 

  
 

    

    
    spring boot+thymeleaf+bootstrap 簡單實現後臺管理系統介面
      
                
最近在學spring boot ，學習一個框架無非也就是使用它來做以前做的事情，兩者比較才有不同，說一下自己使用的體會
先來說下spring boot ，微框架。快速開發，相當於零配置，從一個大神那看來的說：spring boot 相當於框架的框架 ，就是集成了很多，用哪個 

  
 

    

    
    從零開始實現放置遊戲（九）——實現後臺管理系統（7）地圖選擇控制元件
      　　前面做了地圖怪物的新增，刪除，查詢等功能。但新增怪物的時候，需要選擇怪物所在地圖。前幾張的原始碼中，我忘了把這部分改回去，所以如果想要成功新增，需要自己改一下html介面，手動填寫怪物所在地圖的ID。然而，我們配置的時候，地圖ID並不是固定的，而是資料庫自增的。所以這裡最好做成一個彈窗，點選後彈出一個地圖 

  
 

    

    
    Vue + Element-ui實現後臺管理系統(4)---封裝一個ECharts元件的一點思路
      # 封裝一個ECharts元件的一點思路

有關後臺管理系統之前寫過三遍部落格,看這篇之前最好先看下這三篇部落格。另外這裡只展示關鍵部分程式碼，專案程式碼放在github上： [mall-manage-system](https://github.com/yudiandemingzi/mall-manage- 

  
 

    

    
    Vue + Element-ui實現後臺管理系統(5)---封裝一個Form表單元件和Table表格元件
      # 封裝一個Form表單元件和Table元件

有關後臺管理系統之前寫過四遍部落格,看這篇之前最好先看下這四篇部落格。另外這裡只展示關鍵部分程式碼，專案程式碼放在github上： [mall-manage-system](https://github.com/yudiandemingzi/mall-manag 

  
 

    

    
    SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 後端篇（五）： 資料表設計、使用 jwt、redis、sms 工具類完善註冊登入邏輯
      （1） 相關博文地址：

SpringBoot + Vue + ElementUI 實現後臺管理系統模板 -- 前端篇（一）：搭建基本環境：https://www.cnblogs.com/l-y-h/p/12930895.html
SpringBoot + Vue + ElementUI 實現後臺管理系統模板 

  
 

    

    
    微信小程式開發（一）——使用ssh（struts2+hibernate+spring）框架實現後臺與微信前臺進行通訊
      
                使用ssh框架實現對微信小程式前臺的通訊，做到前後臺分離，後臺頁面都為靜態頁面，通過用json來現實與前臺通訊（面向介面程式設計）。在這次因為只為了實現通訊所以沒有用hibernate。只用了struts2+spring，也是ssh框架中struts和spring整合。實現了 

  
 

    

    
    Angular4 後臺管理系統搭建（3） - wijmo5 flexgrid表格增刪改按鈕實現
      -a   bsp   pack   github   技術分享   lease   需要   lec   獲取     這章應該是wijmo5 flexgrid表格應用的最後一章，我們在三章內介紹了flexgrid表格組件的數據綁定，分頁器搭建，單元格模板控制和代碼重繪單元格控制。這章在介紹下對表格添加增刪改 

  
 

    

    
    巨人大哥談電商平臺框架之後臺管理框架
      交易   exc   行修改   出版社   管理系   搜索   平臺   信息   自定義   巨人大哥談電商平臺框架之後臺管理框架
 




一級目錄


二級目錄


欄目


簡介




網站設置


基本設置


網站設置


可以自定義網站參數




系統設置


可以對系統進行相關參數設 

  
 

    

    
    我的第一個python web開發框架（33）——後臺管理系統權限設計
      style   頁面   失效   限制   路由   前後端分離   也會   其他   自己   　　框架底層和接口終於改造完成了，小白再次找到老菜。
　　小白：老大，上次你對後臺權限系統簡單的講了一下，我一點頭緒都沒有，現在有空完整的說一說嗎？
　　老菜：說到權限系統，要講明白真不容易，權限系統並不 

  
 

    

    
    python實現後臺管理前臺系統
      swd   管理員密碼   只有一個   div   添加   tip   一個   用戶名   put_user   功能要求：
　　　　1.後臺管理員只有一個用戶:admin 密碼：admin　　　　2.當管理員登陸成功後，才可以管理用戶信息　　　　3.管理用戶信息包含    　　　　　　添加用戶信息   

  
 

    

    
    vue.js+element實現簡單的後臺管理系統（一）
      最近公司趕專案，要求做一個後臺管理系統，靜態半天，介面一天，測試一天。 
看了一下需求，10個頁面，16+介面，雖說調取資料的比較多，實際寫起來感覺東西還是蠻多的，也在網上查閱了很多資料，感覺都是一些開箱即用的後臺管理系統，一開始我也是想拿來修改一下就好，結果看了好幾個github上面的，感覺並不是很貼合需求 

  
 

    

    
    [外包]!采用asp.net core 快速構建小型創業公司後臺管理系統(三)
      bus   issues   model   nco   mage   oop   推出   兩個   options   接著上一章節繼續嘮嘮
本章主要說一下Redis

Redis操作優化

一.基礎類的配置工作
　　1.我想信許多人（許多neter人）操作redis依然用的是StackExc 

  
 

    

    
    [外包]!採用asp.net core 快速構建小型創業公司後臺管理系統(三)
      接著上一章節繼續嘮嘮 
本章主要說一下Redis 
 
 Redis操作優化 
 
一.基礎類的配置工作 
　　1.我想信許多人（許多neter人）操作redis依然用的是StackExchange.Redis，這個neget包，並沒有用國內現在一些大佬們推出了包 
　　 
　　RedisOptions主要是 

  
 

    

    
    angular6 + ng-zorro鹿途後臺管理系統（三）專案升級改造 01 升級ng-zorro-antd到1.8+
       升級命令 
 
 npm i ng-zorro-antd 
 
  
 
 ng add ng-zorro-antd 
 
  
ng-zorro-antd 1.8+的版本圖示使用方法存在差異，我們需要按照新的標準對專案的圖示進行調整，命令如下 
  
 
 ng g 

  
 

    

    
    angular6 + ng-zorro鹿途後臺管理系統（三）項目升級改造 01  升級ng-zorro-antd到1.8+
      管理系   圖標   lar   項目   實時更新   後臺管理   log   針對   建議    升級命令

npm i ng-zorro-antd

 

ng add ng-zorro-antd

 
ng-zorro-antd 1.8+的版本圖標使用方法存在差異，我們需要按照新的標準對項目的圖標 

  
 

    

    
    javaweb訓練題：後臺管理系統的員工新增功能（jquery克隆、前臺json序列化、後臺反序列化）
       
 
 資料庫中有四張表，分別為：員工基本資訊、教育經歷、工作經歷、聯絡人， 
  
 我要在一個頁面中填入四張表的資訊，其中教育、工作、聯絡人是多對一的關係， 
 因此，我設定了四個表單，分別為： 
  
  
  
  
 頁面是這樣的： 
  
 當點選“新增教育”，就會動態生成又一張“教育資訊”表單 

  
 

    

    
    vue3.0與element實現後臺管理模板
      通過自己所學的這段時間，利用空餘時間，使用vue3.0腳手架搭建的一個關於後臺的管理模板，所實現功能也是模仿一個後臺的介面，資料分為兩種存放，一種是直接儲存到mlab,這裡的資料是存放這登入註冊，只有註冊了自己的賬號才能訪問到頁面，另一些資料直接存放在easy-mock裡， 
原始碼地址:https://gi