angularjs和ajax的結合使用 （一）

很久沒寫文了。這是一篇關於easyui配合ajax使用 的文章， 順帶介紹angularjs的使用 以及讓你感覺到angularjs的威力。網上對於ajax 的文也是多如牛毛 。我就不直接 從那種原生的httpxmlrequest 對象的js 寫起了哈。 看那種東西也存粹是瞭解 高層的東西是怎麼來的 原理是啥 真正作的時候寫那種東西 不是扯淡麼  你叼 你技術牛逼 整站的代碼你全用那種寫。html js 這種東西最開始設計出來就沒考慮周全 就是坨屎。還好如今有各類框架 能夠幫助咱們更容易的把這坨屎作的更美味。也還好因爲互聯網事業如日中天 的推進 讓瀏覽器端的這堆東西正在往統一規範的方向發展。 好了 正題。

 

咱們來創建一個webform頁面 HelloAjaxNet.aspx。先說下ajax 這裏我使用網上流傳甚廣的那個AjaxPro.2.dll  他的網站是 http://www.ajaxpro.info/ 這是一個我的做品 ，很好用。

原本新的asp.net 裏自帶了 服務端方法用webmethod 屬性聲明  客戶端pagemethods訪問 的方式 ，各類對象也能夠json數據化 ，功能跟上面同樣的。微軟自帶的是aspx的codebehind 代碼方法 必定要加static  ，至於webconfig 在新版的vs2013開發環境下無須配置 若是是老的則新建ajax網站項目則webconfig自動弄好了而後服務端頁面載入事件中 ScriptManager.GetCurrent(Page).EnablePageMethods = true; 客戶端 必須有runat=server 的form 和 <asp:ScriptManager ID="ScriptManager1" runat="server">        </asp:ScriptManager>  而後客戶端就能夠pagemethods 的方式訪問。

我始終仍是認爲上面那個更好用 。關於他的原理我就很少說了  ，經過頁面載入時註冊服務端對象 ，而後生成的html頁面上就多了這麼幾句

1 <script type="text/javascript" src="/ajaxpro/prototype.ashx"></script> 2 <script type="text/javascript" src="/ajaxpro/core.ashx"></script> 3 <script type="text/javascript" src="/ajaxpro/converter.ashx"></script> 4 <script type="text/javascript" src="/ajaxpro/WebApplication1.StudentsInfo,WebApplication1.ashx"></script> 5 <script type="text/javascript" src="/ajaxpro/WebApplication1.Grad,WebApplication1.ashx"></script> 6 <script type="text/javascript" 
src="/ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx"></script> 7 <script type="text/javascript" src="/ajaxpro/WebApplication1.DataEntity,WebApplication1.ashx"></script>

爲是什麼呢 爲的是引用一段js文件 ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx  

而後你就明白了噻 這段客供你進行客戶端js調用的腳本 是服務端自動生成的 跟你 服務端的名字如出一轍 而後你就能夠貌似像在客戶端回調服務端方法樣的 沒什麼神奇的，咱們主要就是想利用他的這個特性和json化數據的方便之處 來實現客戶端服務端數據的無縫傳遞。

關於json數據的序列化 要是之前就只有利用外部json庫 或者微軟自帶的來進行手動解析：

服務端：

 1 public string ServerProcerMethod4(string stu)  2  {  3 //System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();  4 //StuInfo s= jsSerializer.Deserialize<StuInfo>(stu);  5  6 System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();  7 List<StuInfo> s = jsSerializer.Deserialize<List<StuInfo>>(stu);  8 if (s != null && s.Count > 0)  9  { 10 StuInfo stu2= s[0]; 11 StringBuilder sb = new StringBuilder(); 12  jsSerializer.Serialize(stu2, sb); 13 return sb.ToString(); 14  } 15 else 16 return null; 17 }

客戶端：

1 //javascript 字符串轉json對象：
2 
3 var obj = JSON.parse(str);
4 
5 //javascript json 對象轉字符串：
6 
7 JSON.stringify(obj);

 

關於AjaxPro.2.dll  和ajax.dll的關係 ，網上說他們不同 其實壓根就是一我的搞的吧 我擦 。請在上面網站下載ajaxpro 這個纔是完善的版本

引用dll文件後須要配置webconfig httphandler 做用就是讓 上面的ashx請求轉到咱們的 ajaxpro代碼 ，進而讓咱們的客戶端js直接調用服務端方法調用成功。

1 <system.webServer>
2     <directoryBrowse enabled="true"/>
3     <handlers>
4       <add verb="*" path="*.ashx" name="myhandler" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
5       
6       <!--<add verb="POST,GET" path="ajax/*.ashx" name="myhandler" type="Ajax.PageHandlerFactory, Ajax" />-->
7     </handlers>
8   </system.webServer>

而後其餘的我就很少說了哈待會直接看服務端代碼。

 

easyui 你就能夠理解爲一堆擴展了的控件。就像jquery同樣 你把js對象 原生的html控件用他的東西一包 而後就能夠點得出他一些爲你寫好的方法 幫助你方便的處理數據。而且還有默認的還能夠的控件外觀，這點對於作企業管理類軟件來講 仍是真心不錯的，作其餘的就只能呵呵了。下載easyui的文件 放到項目中 並引入easyui 相關js和樣式文件 還有jquery：

1     <script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.min.js"> </script>
2     <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/default/easyui.css" />
3     <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/icon.css" />
4     <script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

 

而後 ，而後你就可使用easyui了 就像easyui 首頁 http://jeasyui.com/ 上介紹的那樣 經過css樣式 或者js代碼 把原生html控件渲染成easyui控件

1 <div class="easyui-dialog" style="width:400px;height:200px"
2     data-options="
3         title:'My Dialog',
4         iconCls:'icon-ok',
5         onOpen:function(){}">
6     dialog content.
7 </div>

1 <input id="cc" style="width:200px" />
2 
3 $('#cc').combobox({
4     url: ...,
5     required: true,
6     valueField: 'id',
7     textField: 'text'
8 });

是的 很是方便。其實國內還有好些js寫的比較牛的 弄了一些這樣ui 那樣ui 選來選去仍是用這個吧。用的最多的需求就是ajax服務端分頁 ，咱們來弄個吧。

咱們先說下這個easyui的datagrid  打他狗日的，客戶端html放個table標籤 ：<table id="studb"></table> 而後用js這麼一搞 $('#studb').datagrid() 他就給你渲染成easyui datagrid控件了 ，你能夠在document.ready()時作這個事情。咱們的數據表格是須要填充數據的 這些數據從哪來 顯示哪些列 怎麼分頁 每頁顯示多少條，這些都是參數，怎麼傳進去。easyui不少地方都接收json對象形式的一坨參數 ，好比這個datagrid：

 1 function bindDataToTb() {
 2             var keywordStr = $('#keyword').val();
 3             $('#studb').datagrid(
 4            {
 5                queryParams: { keyword: keywordStr },
 6                //url:"WebForm2.aspx/BindData",
 7                toolbar: '#searchBar',
 8                pagination: true,
 9                pageNumber: 1,
10                singleSelect: true,
11                pageSize: 5,
12                pageList: [5, 10, 20],
13                loader: function (param, success, error) {
14                    var da = WebApplication1.NewFolder2.HelloAjaxNet.BindData(param.keyword, param.page, param.rows)
15                    if (da.value.rows == null) {
16                        success();
17                    }
18                    else
19                        success(da.value);
20                },
21                pagePosition: 'bottom',
22                columns: [[
23                    { field: 'stuNo', title: 'Id', width: 100 },
24                    { field: 'name', title: '名字', width: 100 },
25                    { field: 'age', title: '年齡', width: 100 },
26                    { field: 'loginName', title: '登陸名', width: 100 },
27                    { field: 'loginPwd', title: '密碼', width: 100 },
28                    { field: 'GradId', title: '班級Id', width: 100 },
29                    { field: 'gradName', title: '班級', width: 100 },
30                    {
31                        field: 'none', title: '操做', width: 100, formatter: function (value, row, index) {
32                            var btn = '<a class="editcls" href="#" onclick="delstuClick(' + row.stuNo + ')">刪除</a>';
33                            return btn;
34                        }
35                    }
36                ]]
37            });
38 
39         }

具體看loader 和columns ，loader用於定義你以什麼形式載入數據 定義了loader上面的url就沒有必要了。

我這裏的WebApplication1.NewFolder2.HelloAjaxNet.BindData(param.keyword, param.page, param.rows) 天然也是服務端的方法 用於檢索數據的 。

關於這三個param.keyword, param.page, param.rows 是咱們用於實現loader時 easyui那種設計方式故意暴露給咱們的參數 方便咱們使用。

param.keyword 是咱們上面定義的 咱們點搜索的時候須要往服務端傳一個查詢關鍵詞 queryParams: { keyword: keywordStr }

param.page 是easyui本身的參數表示當前第幾頁 param.rows表示每頁行數，每當你 點表格的 上一頁 下一頁 的時候 就會自動往loader 發翻頁的參數 這個是自動的。

而後就從服務端獲取數據填充表格 ，就是這麼一個工做過程。 還有colums 我就不說了就是定義顯示哪些列 和自定義列 那個很容易看懂。

easyui控件有屬性 方法，調用方法 的形式總算像這樣 ：$('#studb').datagrid('reload')  這就至關於調用了#studb這個表格控件的reload方法了 而後數據就會自動刷新，每一個控件的具體見文檔。

服務端數據處理咱們仍是用entityframework 我通常都用codefirst的方式 這東西跟他本身的mssql數據庫 結合的很好 用起很方便。

 

服務端代碼：

 1 //查詢（帶分頁  2  [AjaxPro.AjaxMethod]  3 public static WebApplication1.DataEntity BindData(string keyword, int page, int rows)  4  {  5 //, ref int pageIndex, out int totalPage  6  7 if (keyword == null)  8 keyword = "";  9 10 int pageIndex = 1; 11 int pageSize = 3; 12 int totalPage; 13 if (page != 0) 14 pageIndex = page; 15 if (rows != 0) 16 pageSize = rows; 17 18 MyDb db = new MyDb(); 19 var data = from studentInfo in db.Students where studentInfo.name.Contains(keyword) select new 
{ stuNo = studentInfo.stuNo, name = studentInfo.name, age = studentInfo.age, gradName = studentInfo.grad.gradName }; 20 //var data = from studentInfo in db.Students where studentInfo.name.Contains(keyword) select studentInfo; 21 22 totalPage = data.Count() % pageSize == 0 ? data.Count() / pageSize : data.Count() / pageSize + 1; 23 24 if (pageIndex > totalPage) 25 pageIndex = totalPage; 26 else if (pageIndex < 1) 27 pageIndex = 1; 28 29 //var dt = DataList<object>.Create(data.OrderBy(r => r.stuNo), new StudentsInfo(), pageIndex, pageSize).Value; 30 object dt=null ; 31 if(data.Count()>0) 32 dt= DataList<object>.Create(data.OrderBy(r => r.stuNo), 33 new { stuNo = 1, name = "", age = 1, gradName = "" }, pageIndex, pageSize).Value; 34 35 WebApplication1.DataEntity result = new WebApplication1.DataEntity(); 36 result.total = data.Count(); 37 result.rows = dt; 38 return result; 39 }

 

關於數據部分 和EF linq 分頁那些我就不貼出來了 完整示例下載裏面有。走走看吧 試試看吧 徹底無刷新 服務端分頁，感受棒棒噠

搜索那個我也不想說了哈 就是從新載入下數據而已，刪除是經過自定義 列的方式 傳id到js函數 而後調用服務端刪除。而後要說下 錄入功能 以及easyui自帶 的表單驗證也是至關方便的。

新建一個div 做爲彈出層 裏面有一個錄入信息的表格 各類html控件 只要寫上easyui對應的樣式  就自動渲染了 看彈出層的  class="easyui-dialog" data-options="closed:true,title:'新學生註冊',modal:true"

其實很簡單噻看字面意思就明白了 這些參數 都在easyui的文檔裏有。驗證 也是在html元素上寫data-options 就能夠了， ：

 1 <div id="addBox" class="easyui-dialog" data-options="closed:true,title:'新學生註冊',modal:true" style="width: 400px; height: 150px">
 2 
 3             <table class="auto-style1">
 4                 <tr>
 5                     <td>學生姓名：</td>
 6                     <td>
 7                         <input id="stuname" class=" easyui-textbox" data-options="required:true,missingMessage:'必填項！',validType:'email',invalidMessage:'email格式不正確！'" type="text" /></td>
 8                 </tr>
 9                 <tr>
10                     <td>班級： </td>
11                     <td>
12                         <input class="easyui-combobox" id="grad" name="grad"
13                             data-options="valueField:'id',textField:'gradName',required:true,missingMessage:'必填項！'" /></td>
14                 </tr>
15                 <tr>
16                     <td>
17                         <input id="saveBtn" onclick="saveClick()" type="button" value="保存" /></td>
18                     <td>
19                         <input id="Button1" type="button" onclick="$('#addBox').dialog('close');" value="關閉" /></td>
20                 </tr>
21             </table>
22         </div>

新建按鈕：

1 <a id="Button1" onclick="$('#addBox').dialog('open');" class="easyui-linkbutton">加新的</a>

注意千萬別用button 元素  就是這種 <button>新加的</button>  這是個坑 ，折騰了很久。

保存按鈕調用 的js函數：

 1 //保存信息
 2         function saveClick() {
 3             var isvaliok = $("#addBox").form('validate');//包起來的須要提交信息的那個div框的id
 4             if (isvaliok == false) {
 5                 $.messager.show({ title: '提示', msg: '請完善不正確的項後再提交', showType: 'show' });
 6                 return;
 7             }
 8             var stu = {};
 9             stu.name = $("#stuname").val();
10             stu.age = 22;
11             stu.GradId = $("#grad").combobox('getValue');
12             stu.gradName = $("#grad").combobox('getValue');
13             if (isNaN(stu.GradId))
14                 stu.GradId = null;
15             var rst = WebApplication1.NewFolder2.HelloAjaxNet.addStu(stu);
16 
17             if (rst.value == "ok") {
18                 $('#addBox').dialog('close');
19                 $('#studb').datagrid('reload');
20 
21                 var gradData = WebApplication1.NewFolder2.HelloAjaxNet.getGrad().value;
22                 $('#grad').combobox({ data: gradData }).combobox('reload');
23             }
24             else {
25                 $.messager.show({ title: '提示', msg: rst.error.Message + rst.value, showType: 'show' });
26             }
27 
28         }

注意到了噻：

1 var isvaliok = $("#addBox").form('validate');//包起來的須要提交信息的那個div框的id
2             if (isvaliok == false) {
3                 $.messager.show({ title: '提示', msg: '請完善不正確的項後再提交', showType: 'show' });
4                 return;
5             }

在easyui裏進行驗證很簡單噻 只要在html代碼裏把驗證格式定義好了 ，只須要傳入一個最外面容器控件的id $("#addBox").form('validate') 就自動幫咱們驗證了。而且界面上還有提示 焦點自動放到第一個驗證不經過的控件上去了 徹底不須要咱們動手。

固然咱們在客戶端 document.ready()的時候 必需要綁定表格和下拉框的數據：

1 $(function () {
2             //頁面初始化
3             //載入表格數據
4             bindDataToTb();
5             //載入班級下拉框
6             var gradData = WebApplication1.NewFolder2.HelloAjaxNet.getGrad().value;
7             $('#grad').combobox({ data: gradData }).combobox('reload');
8             var fd = new FormData();
9         });

 

服務端保存的代碼：

 1 //添加
 2         [AjaxPro.AjaxMethod]
 3         public string addStu(StudentsInfo stu)
 4         {
 5             MyDb db = new MyDb();
 6             if(stu.GradId==null)
 7             {
 8                 if (string.IsNullOrEmpty(stu.gradName) == false)
 9                 {
10                     Grad grd = new Grad();
11                     grd.gradName = stu.gradName;
12 
13                     Grad grdOld = db.grads.FirstOrDefault(r => r.gradName == stu.gradName);
14                     if(grdOld!=null)
15                     {
16                         return "類別已存在";
17                     }
18                     else
19                     {
20                         db.grads.Add(grd);
21                         stu.grad = grd;
22                     }
23                 }
24             }
25             db.Students.Add(stu);
26             db.SaveChanges();
27             return "ok";
28         }

服務端代碼  若是咱們沒有這個id的類別咱們就認爲這個類別是新的 ，新加一個類別 而後當即綁定 perfect 完美 ，棒棒噠

 

看上去是否是有模有樣。作管理類軟件還行。

這樣ui 那樣ui當你須要自定義樣式的時候發現什麼ui都是浮雲，例如我說的國內的寫js比較牛的 就已經造出來不少ui了 ，表格是很漂亮 很強大。 其實不少功能你仍是用不到 你想改還很困難 固然個人js也是很菜的。 當你用到另外一套ui 的時候又要熟悉它那一套 。我只想用個簡簡單單的自定義分頁表格而已 或者像asp.net裏的服務器控件repeat 流式佈局 四個數據一行那種 你怎麼作。 仍是本身動手吧。php裏面有前端模板。

我這裏只是簡單從實際需求瞭解下angular的威力 php裏面模板什麼的都是浮雲   新建一個webform  HelloAjaxNetAngular.aspx

注意這個例子  服務端代碼我一概用上面的絲毫都不會變 只是前端變了，angularjs 的主打思想是mvvm 模式 就是wpf裏面那種依賴屬性 動態綁定 ，不知道大家用過沒 反正我用過 感受就一個字 爽 ，作這種數據庫平臺程序 mfc winform 都是渣。

angularjs 的基礎我就不介紹了 哈 直接從需求入手 作一個分頁表格 加 信息更新 功能

angularjs的網站是 http://www.angularjs.org/ 這個網址在國內也是訪問不了的。一些相關的其餘人的學習筆記有 http://www.angularjs.cn/ http://www.zouyesheng.com/angular.html

反正這兩個教程看了下對我沒 對我沒起到啥做用 感受跟嚼木渣樣的 ，angularjs的理念雖然是mvvm 可是angularjs自己仍是感受晦澀難懂。

我就在這樣一個半懂不懂的狀態下寫了這個例子 ，全部的操做 幾乎都徹底不須要向jquery那樣動dom 。真心感受到了他的強大。前端就一個controller函數 管整個頁面，怎麼一個一個的分 我也不明白 只知道controller 跟html限定同樣的樹狀結構。沒在範圍的html元素不能訪問其controller裏的 變量。
咱們來看這個controller 函數 ，我寫的時候也沒什麼感受 。就是感受很存粹 就只感受到兩個東西存在 。業務邏輯在操做數據。 就像在寫c#數據操做代碼樣：

 1 function myCtr($scope) {
 2             var mod = [{ name: 'xiang', age: 21 }, { name: 'xiang', age: 25 }, { name: 'xiang', age: 23 }];
 3             $scope.data = mod;
 4             $scope.curobj = {};
 5             $scope.pageEntity = { total: 0, rows: 5, page: 1, pgmsg: '' }
 6 
 7             //初始化默認第一頁
 8             $scope.initPage = function () {
 9                 var firstPage = WebApplication1.NewFolder2.HelloAjaxNetAngular1.BindData($("#txtkeyword").val(), $scope.pageEntity.page, $scope.pageEntity.rows);
10                 $scope.data = firstPage.value.rows;
11 
12                 var pageEntityMod = {};
13                 pageEntityMod.total = firstPage.value.total;
14                 pageEntityMod.rows = $scope.pageEntity.rows;
15                 pageEntityMod.page = $scope.pageEntity.page;
16                 var totalpage = pageEntityMod.total % pageEntityMod.rows == 0 ?
17                     parseInt(pageEntityMod.total / pageEntityMod.rows) :
18                     parseInt(pageEntityMod.total / pageEntityMod.rows) + 1;
19                 pageEntityMod.pgmsg = "共 " + pageEntityMod.total + "條記錄 每頁 " + pageEntityMod.rows
20                     + "條，共 " + totalpage + "頁 ，當前第 " + pageEntityMod.page + "頁";
21                 $scope.pageEntity = pageEntityMod;
22 
23                 $scope.curobj = {};
24             }
25 
26             //更新當前 選定的
27             $scope.modifyCur = function () {
28                 var rst = WebApplication1.NewFolder2.HelloAjaxNetAngular1.updateStu($scope.curobj)
29                 //刷新表格 當前選中信息 復原
30                 $scope.initPage();
31                 alert(rst.value);
32             }
33 
34             //下翻頁
35             $scope.nextPage = function () {
36                 var totalpage = $scope.pageEntity.total % $scope.pageEntity.rows == 0 ?
37                     parseInt($scope.pageEntity.total / $scope.pageEntity.rows) :
38                     parseInt($scope.pageEntity.total / $scope.pageEntity.rows) + 1;
39                 var pagenewnum = $scope.pageEntity.page + 1;
40                 if (pagenewnum <= totalpage)
41                     $scope.pageEntity.page += 1;
42                 $scope.initPage();
43             }
44             //上翻頁
45             $scope.previousPage = function () {
46                 var pagenewnum = $scope.pageEntity.page - 1;
47                 if (pagenewnum >= 1)
48                     $scope.pageEntity.page -= 1;
49                 $scope.initPage();
50             }
51             //搜索
52             $scope.search = function () {
53             }
54             //選中一行
55             $scope.del = function (sender, curobj) {
56                 //全部行的顏色還原//設置選中那一行的顏色
57                 var rows = $(sender.target).parent().parent().parent().find("tbody").find("tr");
58                 for (var i = 0; i < rows.length; i++) {
59                     $(rows[i]).css("background", "white");
60                 }
61                 $(sender.target).parent().css("background", "#ffe48d");
62                 $scope.curobj = curobj;
63             }
64 
65             //首次先調用下 以獲取第一頁
66             $scope.initPage();
67         }

界面部分：

 1 <div ng-controller="myCtr" id="mygrid">
 2                 <input id="txtkeyword" type="text" /><input ng-click="initPage()" type="button" value="搜索" />
 3                 <br />
 4                 <br />
 5                 <div style="height: 200px">
 6                     <table cellspacing="0" border="1" class="gridtable">
 7                         <thead>
 8                             <th width="150px">name</th>
 9                             <th width="150px">age</th>
10                         </thead>
11                         <tbody ng-repeat="stu in data">
12                             <tr ng-click='del($event,stu)' style="background-color: white">
13                                 <td>{{stu.name}}</td>
14                                 <td>{{stu.age}}</td>
15                             </tr>
16                         </tbody>
17                     </table>
18 
19                 </div>
20                 <div id="pager">
21                     <a href="#" ng-click="previousPage()">上一頁</a> <a href="#" ng-click="nextPage()">下一頁</a>
22                     <span>{{pageEntity.pgmsg}}</span>
23                 </div>
24 
25                 <div>
26                     姓名：<input type="text" value="{{curobj.name}}" ng-model="curobj.name" /><br />
27                     年齡：<input type="text" value="{{curobj.age}}" ng-model="curobj.age" />
28                     <input id="Button1" type="button" ng-click="modifyCur()" value="更改" />
29                 </div>
30             </div>

 

看到我本身搞了一個數據綁定函數 參照easyui裏datagrid的loader。  第一次請求獲得分頁信息後 我當即把數據綁定到表格 你能夠看到徹底就像作模板樣的，而後初始化本身的分頁控件。 在ng-click 的時候像原來同樣觸發客戶端單擊 而後調用controller裏的方法去更新數據 ，注意僅僅是根據業務邏輯去更新數據 其餘的不須要作。關於上面兩段代碼不明白的自行去看angularjs 入門和數據綁定 用不了10分鐘，

因爲有wpf那種雙向綁定機制，數據模型 數據更新了 頁面內容自動跟着變。甚至你能夠看到我編輯下面文本框裏的數據的時候 都還沒提交 上面表格的數據就跟着變 由於他們的數據是從同一個地方來的，看着恍惚都感受是ajax哈。

上面全部示例的項目源碼下載 可直接運行，因爲引了些外部庫進來十兆差點放不下

說點後話

其實照互聯網這樣推進發展下去的話 前端會統一 前端纔是王道 到時候一個網頁 就是一個系統 一個客戶端。 後端只負責數據和安全。 如今的什麼html5不是幾乎都成爲工業標準了麼 有些嵌入式設備都支持

暫時像博客園裏我看到的有幾個講的 先後端天人合一的那種mvc模式 前端後端操做同一個model 前端更新屬性了有一種機制自動就更新到後端持久化到數據庫去了  或者後端更新model的某個屬性 前端html頁面的值自動就變了。 不是說作不到 畢竟牛人這麼多 ，我以爲至少還不穩定吧。

各類ui有easyui ligerui fineui miniui  Devexpress 還有不少js框架 seajs requirejs JavaScriptMVC  backbone avalonjs knockout angular jquery jqueryui js真是屎同樣的東西啊各類框架學都學不完

尤爲是軟件行業突飛猛進 基於框架 和平臺的技術太多了 不精通某樣技術不要緊 能使用就行 ，可是做爲一個技術人員 你至少得精通同樣 或者一門技術 要否則就是個搬磚的 很遺憾 我基本還在搬磚的路上。寫業務代碼就是用一年的經驗混十年，寫業務代碼是他的工做 工做之餘還得有點精神追究 研究下事情的本質 ，只要是還不錯的程序員 作這種數據庫系統久了都會本身搞點能快速開發的所謂的小框架 積累一些本身的工具庫 和經驗。

在工做上不要有什麼偏見  只要他天天把業務代碼寫的出來 軟件開發也只是一門職業 你不是英雄 ，目的是解決問題 不是轉牛角尖。

 

我本人對js是不怎麼感冒的 js也很爛，當初設計這個東西的時候就不完善給咱們使用它形成了各類阻礙 ，可是你作web開發又不得不用它。這裏也並非對作前端的有什麼偏見 感謝那些前端吃的很透的人 像司徒正美那些高手 製造了這些工具讓咱們更容易的去完成這些網站程序。