2、利用EnterpriseFrameWork快速開發Web系統(B/S)

EnterpriseFrameWork框架實例源代碼下載: 實例下載javascript

   

      本章經過一個開發實例來說解Web系統的開發通過,以及會碰到的一些問題。實例功能就是業務系統中最多見的增、刪、改、查來演示,用一個界面來管理本身的書籍,包括書籍名稱、購買的價格、購買的時間、是否丟失;css

      步驟:數據庫建表->新建項目->完成後臺邏輯層代碼->編寫Web界面中的aspxjs代碼,通過以上幾個步驟完成代碼的編寫,以後只要調整配置文件,調試好程序就行啦。html

本文要點:java

1.Web版界面效果jquery

2.Web項目開發步驟web

3.代碼文件調用關係圖ajax

4.常見問題彙總sql

 

 

      1.先看看完成後的界面效果數據庫

 

 2.開發步驟json

      1)數據庫建表,貼出建表腳本

 

CREATE TABLE [Books] ( [Id] [int] NOT NULL IDENTITY(1, 1), [BookName] [varchar] (50) COLLATE Chinese_PRC_CI_AS NULL, [BuyPrice] [decimal] (18, 2) NULL, [BuyDate] [datetime] NULL, [Flag] [smallint] NULL CONSTRAINT [DF_Books_Flag] DEFAULT ((0)) ) ON [PRIMARY]

GO
View Code

 

      2)新建項目,同時引用好幾個比要的程序集

 

      3)完成後臺邏輯層代碼,主要包括Dao、實體和Web控制器,ObjectModel在實例中不會用到,由於太簡單了沒有必要用到它,用它只會讓你的代碼變得複雜;

 

      咱們先講實體的代碼,實體主要是在使用框架的ORM功能的必要代碼,它把數據庫表的全部字段都映射到實體的屬性上,這樣咱們代碼中操做數據庫表的數據無需寫sql,只需操做實體便可。下面看實體的代碼,重點就是自定義標籤的配置信息,詳細用法會再後面的系列中介紹;還有就是全部實體都必須繼承核心類庫中的AbstractEntity對象。

 

Book.cs文件

using EFWCoreLib.CoreFrame.BusinessArchitecture.Orm; namespace Books.Entity { [Serializable] [Table(TableName = "Books", EntityType = EntityType.Table, IsGB = true)] public class Book : EFWCoreLib.CoreFrame.BusinessArchitecture.AbstractEntity { private int id; [Column(FieldName = "Id", DataKey = true, Match = "", IsInsert = false)] //主鍵
        public int Id { get { return id; } set { id = value; } } private string bookName; [Column(FieldName = "BookName", DataKey = false, Match = "", IsInsert = true)] public string BookName { get { return bookName; } set { bookName = value; } } private decimal buyPrice; [Column(FieldName = "BuyPrice", DataKey = false, Match = "", IsInsert = true)] public decimal BuyPrice { get { return buyPrice; } set { buyPrice = value; } } private DateTime buyDate; [Column(FieldName = "BuyDate", DataKey = false, Match = "", IsInsert = true)] public DateTime BuyDate { get { return buyDate; } set { buyDate = value; } } private int flag; [Column(FieldName = "Flag", DataKey = false, Match = "", IsInsert = true)] public int Flag { get { return flag; } set { flag = value; } } } }
View Code

 

      接着看Dao的編寫,Dao主要是編寫ORM以外的一些數據庫操做SQL腳本,全部的Dao都必須繼承核心類庫中的AbstractDao對象

 

bookDao.cs文件

namespace Books.Dao { public class BookDao : EFWCoreLib.CoreFrame.BusinessArchitecture.AbstractDao { public DataTable GetBooks(string searchChar, int flag) { string strsql = @"SELECT * FROM dbo.Books WHERE BookName LIKE '%{0}%' AND Flag={1}"; strsql = string.Format(strsql, searchChar, flag); //oleDb是繼承的父類中的操做數據庫的對象
            return oleDb.GetDataTable(strsql); } } }
View Code

 

      最後Web控制器的編寫,控制器起着承上啓下的做用,界面的請求都是具體到控制器中的某個方法,方法中調用上面的實體或Dao,再輸出json數據返回給界面;通常來講一個控制器對應業務中的一個用列;全部控制器必須繼承核心類庫中的AbstractJqueryController對象

 

bookController.cs文件

namespace Books.WebController { [WebController]//是web控制器必須加上次標籤

    public class bookController : EFWCoreLib.WebFrame.Controller.AbstractJqueryController { [WebMethod] public void SaveBook() {        //從Http請求中的from表單裏的數據複製到book對象
            Book book = GetModel<Book>(); //更新到數據庫中
 book.save(); //返回界面提示
            TxtJson = ReturnSuccess("保存書籍成功!"); } [WebMethod] public void SearchBook() { string schar = ParamsData["schar"]; int flag = Convert.ToInt32(ParamsData["flag"]); BookDao bdao = NewDao<BookDao>(); //調用Dao裏面的操做
            DataTable dt = bdao.GetBooks(schar, flag); //返回數據到界面網格
            TxtJson = ToGridJson(dt); } } }
View Code

 

      4)編寫Web界面中的aspxjs代碼,其中aspx文件爲HTML界面代碼,JS文件主要爲向後臺發送請求的操做代碼;界面框架用的是JqueryEasyUI,不瞭解此界面框架的能夠網上學習下,也是一個用起來很簡單的框架;固然界面框架不必定就只能用JqueryeasyUI,其餘的同樣均可以一塊兒使用;

 

      使用JqueryEasyUI框架aspx頁面必須先引用這些文件;

 

 

Book.aspx文件代碼

<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>書籍管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link rel="stylesheet" type="text/css" href="../../../WebPlugin/jquery-easyui-1.3.4/themes/default/easyui.css"/>
    <link rel="stylesheet" type="text/css" href="../../../WebPlugin/jquery-easyui-1.3.4/themes/icon.css"/>
    <script type="text/javascript" src="../../../WebPlugin/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../../../WebPlugin/jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../../WebPlugin/jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
    <script src="../../../WebPlugin/JQueryCommon2.0.js" type="text/javascript"></script>
    <script src="Book.js" type="text/javascript"></script>
</head>
<body class="easyui-layout">
<div region="center" style="overflow:hidden;">
    <div id="grid-tool">
        <table cellpadding="0" cellspacing="0" style="width:100%">
            <tr>
                <td style="padding-left:2px">
                  <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-add" onclick="btn_add();">新增</a>
                  <a href="#" class="easyui-linkbutton" plain="true" iconCls="icon-edit" onclick="btn_alter();">修改</a>
                </td>
                <td style="text-align:right;padding-right:2px">
                    <input class="easyui-searchbox" data-options="prompt:'請輸入書籍名稱'" style="width:250px"></input>
                </td>
            </tr>
        </table>
    </div>
    <table id="bookGird" class="easyui-datagrid" toolbar="#grid-tool" fit="true" border="false" singleSelect="true">
         <thead>
            <tr>
                <th field="Id" width="100">序號</th>
                <th field="BookName" width="80">書籍名稱</th>
                <th field="BuyPrice" width="120">購書價格</th>
                <th field="BuyDate" width="200">購書時間</th>
                <th field="Flag" width="80">是否丟失</th>
            </tr>
        </thead>
   </table>
</div>

<%--彈出窗界面--%>
<div id="dialog-book" title="新增書籍" class="easyui-dialog" icon="icon-save" style="background:#fafafa;padding:10px;width:350px;height:250px;" buttons="#dlg-buttons1" resizable="true" modal="true">
    <form id="bookform" method="post">
        <table>
        <tr>
            <td><label>書籍名稱:</label></td>
            <td><input name="BookName" class="easyui-validatebox" style="width:200px;" type="text" required="true"></input></td>
        </tr>
        <tr>
            <td><label>購書價格:</label></td>
            <td><input name="BuyPrice" class="easyui-validatebox" style="width:200px;" type="text" required="true"></input></td>
        </tr>
        <tr>
            <td><label>購書日期:</label></td>
            <td><input name="BuyDate" class="easyui-datebox" style="width:200px;" type="text" required="true"></input></td>
        </tr>
        <tr>
            <td><label>是否丟失:</label></td>
            <td><input id="_flag" type="checkbox"/></td>
        </tr>
       </table>
       <input id="book_id" type="hidden" name="Id" ></input>
       <input id="book_flag" type="hidden" name="Flag" ></input>
    </form>
</div>
<div id="dlg-buttons1">
    <a href="#" class="easyui-linkbutton" onclick="btn_save();">肯定</a>
    <a href="#" class="easyui-linkbutton" onclick="$('#dialog-book').dialog('close');">取消</a>
</div>
</body>
</html>
View Code

 

Book.JS文件代碼

//初始化入口
$(function() { $('#dialog-book').dialog('close'); //加載網格數據
    $('#bookGird').datagrid('options').url = 'Controller.aspx?controller=bookController&method=SearchBook&schar=&flag=0'; //$('#bookGird').datagrid('reload');
}); //添加
function btn_add(){ $('#dialog-book').dialog({ title: '新增書籍' }); $("#bookform").form('clear'); $("#book_id").val(0); $("#book_flag").val(0); $("#_flag").removeAttr("checked"); } //修改
function btn_alter(){ $('#dialog-book').dialog({ title: '修改書籍' }); var selected = $('#bookGird').datagrid('getSelected'); if (selected) { $("#bookform").form("load", selected); if (selected.Flag == "1") $("#_flag").attr("checked", "true"); else $("#_flag").removeAttr("checked"); } } //保存
function btn_save() { var ckval=$("#_flag").attr("checked")=="checked"?1:0; $('#book_flag').val(ckval); formSubmit('#bookform', 'Controller.aspx?controller=bookController&method=SaveBook', function() { $('#dialog-book').dialog('close'); $('#bookGird').datagrid('reload'); }); }
View Code

 

       說明一下下面向後臺發ajax請求Url地址的參數意思:

$('#bookGird').datagrid('options').url = 'Controller.aspx?controller=bookController&method=SearchBook&schar=&flag=0';
  Controller.aspx  框架內置的請求解析文件
  controller=bookController  參數controller指定了後臺的控制器類名
  method=SearchBook   參數method指定了控制器中的方法名
  schar=&flag=0  傳遞的兩個參數schar和flag


      3.最後咱們看下圖,整理一下以上代碼文件的調用關係

 

      4.常見問題彙總:

      1)數據庫鏈接配置修改

 

      2)Web.config配置中不要忘記添加Books.dll

 

      3)由於界面是在測試環境下運行,必定要把Web.config中的TurnOnLoginRight參數關閉

 

 

EnterpriseFrameWork框架實例源代碼下載: 實例下載

相關文章
相關標籤/搜索