2015年3月31日 星期二

SPA專案架構

MVC書一次都教一堆東西...
RAZOR語法、實體資料庫模型、LINQ語法、IENUMERABLE型態...
實在有點懶的學

20150403補充:原來這個叫做SPA架構
前輩教的類MVC架構
1.Modal-就只是個Modal,放屬性欄位而已
2.DAL-資料庫存取相關功能(Data Access Level)
3.主要專案-前端功能

應用在網站專案、Console專案、winform等等都可

1.Visuao Studio建立空白解決方案
2.建立類別庫專案-Modal,想到再加入類別即可
3.建立類別庫專案-DAL
4.建立主要專案,以一般ASP.NET網站專案為例
網站專案加入參考Modal與DAL
DAL加入Modal參考
Modal不參考任何專案,獨立

5.假設要做一個客戶主檔維護功能,有新增刪除修改顯示(CRUD)基本功能
客戶主檔資料表:
SID、客戶名稱、客戶電話三個欄位就好

Modal底下建立客戶主檔類別
public class Customer
{
    ///

流水號
    public int SID{get;set;}
    ///客戶名稱
    public string Name {get;set;}
    ///客戶電話
    public string PhoneNumber {get;set;}
}

新增、更新、刪除時的訊息類別
public class msgCRUD
{
    public static const string STATUSSUCCESS="success";
    public static const string STATUS
ERROR="error";
    public string status {get;set;}
    public string msg {get;set;}
}

DAL底下建立類別
using Modal;
public class CustomerController
{
     public List searchData(out msgCRUD msg)
    {
         msg=new msgCRUD();
         List list=new List();
         DataTable dt=new DataTable();
         try
        {
             //資料庫處理,結果塞到DataTable
             if(dt.Rows.Count>0)
             {
                   foreach(DataRow dr in dt.Rows)
                  {
                       list.Add(new Customer(){
                           SID = dr["SID"].ToString(),
                           Name = dr["Name"].ToString(),
                           PhoneNumber = dr["PhoneNumber"].ToString()
                       });
                  }
             }
         }
         catch(Exception ex)
        {
             msg.status=msgCRUD.STATUS_ERROR;
             msg.msg="搜尋時發生錯誤:"+ex.ToString();
         }
         return list;
    }
}

網站專案底下建立ASP網頁
後端Customer.aspx.cs
[WebMethod]
protected string searchData()
{
    CustomerController cc=new CustomerController();
    List list=cc.searchData();
    string myJson=JsonConvert.SerializeObject(list);
    return myJson;
}

前端Customer.aspx
使用JQuery AJAX語法取得資料
...



到此即為基本的前端到後端,後端到資料存取層的資料傳輸方式
可以擺脫Server Control夾帶的垃圾CODE
又可以保持架構上的彈性

沒有留言:

張貼留言