zoukankan      html  css  js  c++  java

  • 一键静态化【一键生成静态网页】

    项目首页 HTML页  需要全屏轮播展示，要求通过管理平台能够选择展示的图片。开始时使用 Ajax 获取数据库表中图片地址展示，结果只能轮播一次无法循环轮播，最后通过一键静态化实现此功能

     一，案例展示 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 5.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>模板页</title>

    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/fullplay.js"></script>
 
    <script type="text/javascript">

        var widthint = 1920;
        var heightint = 980;
        $(document).ready(function (e) {
            $("#bodyPage").fullImages({
                ImgWidth: widthint,
                ImgHeight: heightint,
                autoplay: 3500,  //自动播放
                fadeTime: 1500   //褪色 时间
            });
        });



    </script>
    <style type="text/css">
        html
        {
            margin: 0;
            padding: 0;
        }

        body
        {
            margin: 0;
            padding: 0;
        }

        #bodyPage
        {
             100%;
            min-height: 100%;
            height: auto !important;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        img.bg
        {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
            display: none;
            height: 100%;
             100%;
        }

        footer
        {
            position: fixed;
            bottom: 0px;
            height: 10%;
             100%;
            z-index: 9999;
        }

            footer marquee
            {
                font: 2.5vw "华文行楷";
                color: #f00;
            }
    </style>
</head>
<body>
    <section id="bodyBox">
        <div id="bodyPage">
            {$imgList$}
          
        </div>
    </section>
    <footer>
        <article>

            <marquee scrollamount="10">  XXXXXXX 系统  </marquee>
        </article>
    </footer>

</body>
</html>

<script type="text/javascript">

    $("body").click(function () {

        window.location.href = "NavigationInfo.html";
    });
</script>
    HTML 模板页
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 5.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>模板页</title>

    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <script src="../Scripts/fullplay.js"></script>



    <script type="text/javascript">

        var widthint = 1920;
        var heightint = 980;
        $(document).ready(function (e) {
            $("#bodyPage").fullImages({
                ImgWidth: widthint,
                ImgHeight: heightint,
                autoplay: 3500,  //自动播放
                fadeTime: 1500   //褪色 时间
            });
        });



    </script>
    <style type="text/css">
        html
        {
            margin: 0;
            padding: 0;
        }

        body
        {
            margin: 0;
            padding: 0;
        }

        #bodyPage
        {
             100%;
            min-height: 100%;
            height: auto !important;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
        }

        img.bg
        {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1;
            display: none;
            height: 100%;
             100%;
        }

        footer
        {
            position: fixed;
            bottom: 0px;
            height: 10%;
             100%;
            z-index: 9999;
        }

            footer marquee
            {
                font: 2.5vw "华文行楷";
                color: #f00;
            }
    </style>
</head>
<body>
    <section id="bodyBox">
        <div id="bodyPage">
            <img class="bg" src="/UpLoadFiles/20180307/2018030716220622.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716223467.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716224437.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716225115.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716225737.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716230370.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716230949.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716221741.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716222305.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716222856.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716211971.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716234059.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716235859.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716240816.jpg" /><img class="bg" src="/UpLoadFiles/20180307/2018030716250642.png" /><img class="bg" src="/UpLoadFiles/20180307/2018030716341533.png" />
          
        </div>
    </section>
    <footer>
        <article>

            <marquee scrollamount="10"> XXXXXXX 系统</marquee>
        </article>
    </footer>

</body>
</html>

<script type="text/javascript">

    $("body").click(function () {

        window.location.href = "NavigationInfo.html";
    });
</script>
    一键生成

     使用 .aspx 作为网站的后台管理

    <asp:Button ID="show" runat="server" Text="生成展示页" />

     //一键静态化
        void show_Click(object sender, EventArgs e)
        {

            //替换掉模板中的特征字符     ..showcasingWebpagesScreenInfo_Temp.html
            string mbPath = Server.MapPath("../showcasing/Webpages/ScreenInfo_Temp.html");
            Encoding code = Encoding.GetEncoding("UTF-8");
            StreamReader sr = null;
            StreamWriter sw = null;

            string str = null;              //字符串为空
            //读取     
            try
            {
                sr = new StreamReader(mbPath, code);
                str = sr.ReadToEnd();          //注意：这里是‘tempstr’而不是‘str’,不要混了
            }
            catch (Exception ex)
            {
                throw ex;
            }
            finally
            {
                sr.Close();
            }


            string fileName = "../showcasing/Webpages/ScreenInfo.html";
            string imglistStr = GetListStr();

            str = str.Replace("{$imgList$}", imglistStr);
            //生成静态文件     
            try
            {
                sw = new StreamWriter(Server.MapPath("~/Webpages/") + fileName, false, code);
                sw.Write(str);
                sw.Flush();
            }
            catch (Exception ex)
            {
                throw ex;
            }
            finally
            {
                sw.Close();

                JscriptPrint("生产成功啦！", "ShowimagesList.aspx?" + CombUrlTxt(this.channelId, this.keywords) + "page=0", "Success");
            }


        }
    一键静态化方法
     private String GetListStr()
        {
            string listStr = string.Empty;
            ShowImagesBLL ShowImagesBLL = new ShowImagesBLL();
            ShowImagesEntity ShowImagesEntity = new ShowImagesEntity();
            DataTable dt = ShowImagesBLL.GetList("Islook>0 order by Islook asc");
            foreach (DataRow dr in dt.Rows)
            {
                ShowImagesEntity = new ShowImagesEntity(dr);
                listStr += "<img class="bg" src="" + ShowImagesEntity.ImageURL + "" />";

            }
            return listStr;
        }
    GetListStr()

    二、实例说明 《转》

    一，先建立一个模版页

    为了适应实际应用功能，一个网站往往需要最终用户自定义静态化的模版，本文对这方面不作过多描述，主要只是增删改查功能，此章仅作抛砖引玉用！！！
    前端界面如下

    aspx.cs页面代码也只简单实现对模版的保存

    [csharp] view plain copy
     
    1. /// <summary>  
    2. /// Saves the data.  
    3. /// </summary>  
    4. /// <param name="id">The id.</param>  
    5. private void SaveData(int id)  
    6. {  
    7.     Model.C_Template model = GetData(id);  
    8.     if (model != null)  
    9.     {  
    10.         long x = 0;  
    11.         if (id <= 0)  
    12.         {  
    13.             x = model.id = _BLL.Add(model);  
    14.         }  
    15.         else  
    16.         {  
    17.             x = _BLL.Update(model) ? 1 : 0;  
    18.         }  
    19.         //other code  
    20.   
    21.         //show message  
    22.         if (x > 0)  
    23.         {  
    24.             MessageBox.Show(string.Format(_jsonResult, "true", "保存成功", _returnUrl, id.ToString()), MessageEnum.Error);  
    25.         }  
    26.         else  
    27.         {  
    28.             MessageBox.Show(string.Format(_jsonResult, "false", "保存失败，请稍候再试...", "", id.ToString()), MessageEnum.Error);  
    29.         }  
    30.     }  
    31.     else  
    32.     {  
    33.         //有错误  
    34.         MessageBox.Show(string.Format(_jsonResult, "false", _pageMsg, "", id.ToString()), MessageEnum.Error);  
    35.     }  
    36. }  

    二，根据对应模版，静态出一个include页面

    ok，好吧，其实我这里取巧了，先跳过，后面总结里再详说。
    为了使本例简单，现在先假设模版页已经生成了html格式。代码如下
    [html] view plain copy
     
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    2. <html xmlns="http://www.w3.org/1999/xhtml">  
    3. <head>  
    4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    5.     <title>{$title} - {$classcName} - <!--#include file="/include/common/siteTitle.html" --></title>  
    6.     <meta name="description" content="{$seoDescription},<!--#include file="/include/common/siteDescription.html" -->" />  
    7.     <meta name="keywords" content="{$seoKeyWords},<!--#include file="/include/common/siteKeyWords.html" -->" />  
    8.     <link href="/css/layout.css" rel="stylesheet" type="text/css" />  
    9.     <link href="/css/layout_sub.css" rel="stylesheet" type="text/css" />  
    10.     <script src="/js/jquery/jquery.js" type="text/javascript"></script>  
    11.     <script src="/js/jquery/myJS.js" type="text/javascript"></script>  
    12.     <!--[if lte IE 6]>  
    13.     <script type="text/javascript" src="/js/ie6png.js"></script>  
    14.     <![endif]-->  
    15.     <script type="text/javascript">  
    16.         $(function () {  
    17.             $(".hotSchool .tabs").tabs(".hotSchool div.contentC", { event: 'click', effect: 'fade' });  
    18.         });  
    19.     </script>  
    20. </head>  
    21. <body>  
    22.     <div id="bgImgWrap">  
    23.         <img src="/images/back1.jpg" alt="" />  
    24.     </div>  
    25.     <!--#include file="/include/common/picStory.html" -->  
    26.     <div class="bigWrap">  
    27.         <div class="sideWrapBg png"></div>  
    28.         <div class="sideWrap png">  
    29.             <div class="logo noTxt clearfix"></div>  
    30.             <!--#include file="/include/common/sideNav.html" -->  
    31.         </div>  
    32.         <div class="mainWrap png">  
    33.             <!-- top search /-->  
    34.             <!--#include file="/include/common/head.html" -->  
    35.   
    36.             <!-- 频道页顶部导航 /-->  
    37.             <div class="cWrap subTop clearfix">  
    38.                 <div class="left subTitle">{$channelname}</div>  
    39.                 <div class="left subNav">  
    40.                     <!--{$subNav}-->  
    41.                 </div>  
    42.             </div>  
    43.   
    44.             <!-- sub wrap -->  
    45.             <div class="cWrap subWrap pie png clearfix">  
    46.                 <!-- 文章详细 /-->  
    47.                 <div class="detailWrap newsListWrap newsDetailWrap clearfix">  
    48.                     <div class="subNavWrap clearfix">  
    49.                         <div class="subNav left">{$locationget}</div>  
    50.                     </div>  
    51.                     <h1>{$title}</h1>  
    52.                     <div class="infoWrap clearfix">  
    53.                         <div class="shareWrap">   
    54.                             <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">  
    55.                                 <span class="left">分享本页：</span>  
    56.                                 <a class="bds_qzone"></a>  
    57.                                 <a class="bds_tsina"></a>  
    58.                                 <a class="bds_tqq"></a>  
    59.                                 <a class="bds_renren"></a>  
    60.                                 <a class="bds_douban"></a>  
    61.                                 <span class="bds_more"></span>  
    62.                             </div>  
    63.                         </div>  
    64.                         <div class="dateWrap">发表：{$addDate} </div>  
    65.                         <div class="readWrap">阅读：<span id="viewNums">...</span></div>  
    66.                     </div>  
    67.                     <div class="clearfix"></div>  
    68.                     <div class="subHR clearfix png"></div>  
    69.                     <!-- Intro /-->  
    70.                     <div class="introWrap clearfix">  
    71.                          {$intro}  
    72.                     </div>  
    73.                     <!-- 正文 /-->  
    74.                     <div class="txtWrap clearfix minArticle">  
    75.                         {$content}  
    76.                     </div>  
    77.   
    78.   
    79.                     <!-- 相关文章 /-->  
    80.                     <div>  
    81.                     </div>  
    82.                 </div>  
    83.             </div>  
    84.             <!--/ sub wrap -->  
    85.   
    86.             <!-- footer /-->  
    87.             <!--#include file="/include/common/foot.html" -->  
    88.         </div>  
    89.     </div>  
    90. </body>  
    91. </html>  
    ok，现在我们把这个页面命名为“CS1.html”，放在根目录下的“Template”文件夹下，那么，我们建一个“include.aspx”页面，作用户输入文章用，那么
    [csharp] view plain copy
     
    1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="include.aspx.cs" validateRequest="false" Inherits="Admin_CMS_include" %>  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    3.   
    4. <html xmlns="http://www.w3.org/1999/xhtml">  
    5. <head runat="server">  
    6.     <title>文章输入页面</title>  
    7. </head>  
    8. <body>  
    9.     <form id="form1" runat="server">    
    10.     <div>  
    11.         文章标题：<asp:TextBox ID="txtTitle" runat="server" Height="26px" Width="350px"></asp:TextBox><br />      
    12.         文章摘要：<asp:TextBox ID="txtIntro" runat="server" Height="26px" Width="350px"></asp:TextBox><br />      
    13.         文章内容：<asp:TextBox ID="txtContent" runat="server" Height="179px" TextMode="MultiLine" Width="350px"></asp:TextBox><br />    
    14.         <br />    
    15.         <asp:Button ID="btnInclude" runat="server" OnClick="btnInclude_Click" Text="生成静态页" />    
    16.     </div>    
    17.     </form>    
    18. </body>  
    19. </html>  
    aspx.cs页面代码如下，记得引用
    [csharp] view plain copy
     
    1. using System.IO;  
    2. using System.Text;  
    那么，主要代码如下：
    [csharp] view plain copy
     
    1. protected void btnInclude_Click(object sender, EventArgs e)  
    2.   {  
    3.       //other code;  
    4.       //Get date into dataSource;      
    5.   
    6.       string mbPath = Server.MapPath("~/Web/Template/CS1.html");  
    7.       Encoding code = Encoding.GetEncoding("UTF-8");  
    8.       StreamReader sr = null;  
    9.       StreamWriter sw = null;  
    10.       string str = null;      
    11.       try  
    12.       {  
    13.           sr = new StreamReader(mbPath, code);  
    14.           str = sr.ReadToEnd();  
    15.       }  
    16.       catch (Exception ex)  
    17.       {  
    18.           throw ex;  
    19.       }  
    20.       finally  
    21.       {  
    22.           sr.Close();  
    23.       }  
    24.       string fileName = DateTime.Now.ToString("MMddHHmm") + ".html";//保存静态页面的扩展名  
    25.   
    26.       //整章的关键点，替换掉相应字符串   
    27.       str = str.Replace("{$Title}", txtTitle.Text);  
    28.       str = str.Replace("{$intro}", txtIntro.Text);  
    29.       str = str.Replace("{$content}", txtContent.Text);    
    30.   
    31.       //生成静态文件      
    32.       try  
    33.       {  
    34.           sw = new StreamWriter(Server.MapPath("~/html/") + fileName, false, code);  
    35.           sw.Write(str);  
    36.           sw.Flush();  
    37.       }  
    38.       catch (Exception ex)  
    39.       {  
    40.           throw ex;  
    41.       }  
    42.       finally  
    43.       {  
    44.           sw.Close();  
    45.           Response.Write("<a href=/Web/html/" + fileName + " mce_href=" + fileName + " target=_blank>" + fileName + "</a>已经生成！");  
    46.       }  
    47.   }    

    三，总结

    ok，原理已经明白了。那么，从效益出发，实际应用中应该是怎样的呢？

    一：每先建一个静态页面模版，就相应生成一个静态模版页；

    二：或者直接从数据库中读取模版的数据流，然后相应替换；

    三：确定保存文章的时候，立刻生成一个相应的静态文章页；

    四：在网站后台管理中，嵌入“一键生成静态页面”中，重新检索生成漏掉或者有更改的静态页面。

           那么，其它比如是否细分类别来实现对应的静态化功能，就以自己实际项目来考虑了

    最后，附最后的效果图。。。。

      

     
  • 相关阅读:
    Nginx有哪些作用？
    MYSQL如何优化？
    jdk1.8新特性
    [javase基础] JDK JRE JVM的区别？
    JDBC中如何进行事务处理？
    JDBC、ibatis(mybatis)、Hibernate有什么不同？
    java面试题最容易犯错
    Spring高频率面试题
    python pip whl安装和使用
    深入理解 Linux的进程，线程，PID，LWP，TID，TGID
  • 原文地址：https://www.cnblogs.com/Tanghongchang/p/8529611.html
Copyright © 2011-2022 走看看