20快速开发网站项目的工具和方法

最新推荐文章于 2021-08-03 11:26:31 发布

iteye_4639

最新推荐文章于 2021-08-03 11:26:31 发布

阅读量258

点赞数

文章标签：数据库 javascript 前端 ViewUI

本来已经进入“正式开发”的教程部分了，但这次还是要先插入一些“旁门左道”，因为很多时候，我们仅仅只是要演示一个产品概念或者完成一次老师布置的课程设计，那就没必要仔仔细细地敲打每一行代码。像我这学期选修了“高级网页”课程，期末大家都在着急做不出来，我花了两个小时，就做了一个包含“一、两千行”代码的网站项目出来，顺利过关。

“旁门左道”虽好，但并不适合新手，只有发现自己只是在重复着熟悉的操作时，才有能力控制“旁门左道”。

这次介绍的工具有：网站扒皮者（前端）、动软代码生成器（后端）以及将两者结合起来的方法。

一：网站扒皮者

使用很简单，输入要“扒”的网址，这个软件就会自动下载相关文件（包括Html、CSS、JS和图片等那个网页需要用到的文件，文件相对路径也会对应存放好），分秒间就可以搞出一个可以出手的页面，删除一些不要的代码，比如原来的内容部分就不要了，剩下一个<Div id="content">放在那里，存放我们要显示的内容即可。

网站扒皮者

二：动软代码生成器

这是为.Net设计的代码生成器，它可以生产“三层架构”、“工厂模式”的项目。首先你要先设计好数据库（我用的是MSSQL2008，它支持多种数据库），然后打开软件，新增数据库服务器--连接--新建.Net项目（“简单三层”生成的版本是VS2005的，“简单三层（管理）”适用版本可以选择VS2008或者VS2010，我生成的是后者），完成之后，就会得到一个完整的Asp.net项目。

主要时候两处代码。

1.BLL层，每张数据库表都会对应生成一个操作类。里面包含的“增删查改”这些常规功能，比如

动软代码生成器

2.UI层，封装了一些简单的页面。每张数据库表都有对应的一个文件夹，里面有对应的“增删查改”的页面，做一些简单修改也可以弄出挺多功能和效果的。

动软代码生成器效果

三：整合

使用“内置”的模板，能实现的功能和效果比较有限，有了步骤一生产出来的漂亮页面，我们还要在步骤二的BLL层写多一些功能，这个功能可以根据数据库里的数据和你的要求来灵活生产Html代码。下面我结合一个有较多功能的表格JS来做一个页面（叫做dataTables ，先在它的官网http://www.datatables.net/下载Demo文件，了解它的使用规则）。

首先Html代码规则是这样的：

<head runat="server">
    <title></title>
    <link href="DataTable/demo_page.css" rel="stylesheet" type="text/css" />
    <link href="DataTable/demo_table.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.js" type="text/javascript"></script>
    <script src="DataTable/jquery.dataTables.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function () {
            $('#example').dataTable();
        });
    </script>
</head>
<body id="dt_example">
    <form id="form1" runat="server">
    <div id="container">
        <div id="demo" runat="server" style="text-align:center;">
        </div>
        <div class="spacer">
        </div>
    </form>
</body>

接下来当页面加载时，就在<div id="demo">插入要显示的内容的Html代码：

protected void Page_Load(object sender, EventArgs e)
        {
            Maticsoft.BLL.Call bll = new Maticsoft.BLL.Call();
            string html = bll.GetTableHtmlByListAll();
            demo.InnerHtml = html;
        }

我们来看看这段html代码是怎样生成出来的（要自己写代码）

#region  ExtensionMethod
        /// <summary>
        /// 获取所有列表的HTML代码
        /// </summary>
        /// <returns></returns>
        public string GetTableHtmlByListAll()
        {
            DataTable table = dal.GetList("").Tables[0];
            string[] tables = new string[table.Rows.Count];
           


            StringBuilder sb = new StringBuilder();

            sb.Append("<table cellpadding='0' cellspacing='0' border='1' class='display' id='example' width='100%'>");
            //表头，第一行，列名
            sb.Append("<thead><tr>");
            sb.Append("<th>编号</th><th>主叫方号码</th><th>主叫方网络</th><th>接听方号码</th><th>接听方网络</th><th>响铃开始时间</th><th>通话时间</th><th>备注</th><th>是否为Bug</th>");
            sb.Append("</tr></thead>");
            //-----------------
            List<Model.Call> list = DataTableToList(table);
            sb.Append("<tbody>");
            foreach (Model.Call m in list)
            {
                sb.Append("<tr class='odd gradeC'>");
                sb.Append("<td>"+m.Id+"</td>").Append("<td>"+m.CallingPartyNum+"</td>").Append("<td>"+m.CallingPartyNet+"</td>").Append("<td>"+m.CalledPartyNum+"</td>").Append("<td>"+m.CalledPartyNet+"</td>")
                    .Append("<td>" + m.BeginTime + "</td>").Append("<td>" + m.Time + "</td>").Append("<td>" + m.Remark + "</td>").Append("<td>" + turnBoolToChinese(m.IsBug) + "</td>");
                sb.Append("</tr>");
            }
            sb.Append("</tbody><tfoot><tr>");
            sb.Append("<th>编号</th><th>主叫方号码</th><th>主叫方网络</th><th>接听方号码</th><th>接听方网络</th><th>响铃开始时间</th><th>通话时间</th><th>备注</th><th>是否为Bug</th>");
;
            sb.Append("</tr></tfoot></table>");
            return sb.ToString();
        }
        private string turnBoolToChinese(bool b)
        {
            if (b)
                return "是";
            return "否";
        }
#endregion  ExtensionMethod

对，就是拼接字符串，最后把完成的html代码发给前台，渲染之后的效果：

datatable效果

这个表格拥有“分页、排序、查找”等功能，需要的话还可以显眼地标记“异常”的数据，非常强大，Demo文件还有很多特殊场景的功能，但我就没去测试了，这些东西都是需要再翻的。

简单吧哈哈。可怜我就惨了，这些天回来家里，没拉网线，一大早抱着电脑去别人家上网写教程，回来了想继续写点后发表，只能解决手机发送wlan来上网，没想到一编辑文章，之前上传的图片全不见了（网速太慢，没加载到图片，然后csdn又自动帮我保存了还是，反正我图片又得重新打开程序截图，然后龟速上传）。呜呼，觉得有用的朋友顶一下呗。