鸿 网 互 联 www.68idc.cn

当前位置 : 服务器租用 > 网络程序脚本 > 其它 > >

ASP.NET MVC4+BootStrap 实战(五)

来源:互联网 作者:佚名 时间:2015-01-03 08:51
从本篇文章开始,我们就开始实战头条网后台管理。记得我写过webApp实战一,里面提到了头条网,我打算围绕这个头条网做一个后台管理系统,然后再实现头条网移动站

从本篇文章开始,我们就开始实战头条网后台管理。记得我写过webApp实战一,里面提到了头条网,我打算围绕这个头条网做一个后台管理系统,然后再实现头条网移动站点。因为现在公司也迟迟不能进行web项目的开发,一直都是银光,这样下去,恐怕我把web开发都忘光了。所以不管是J2EE还是ASP.NET总要持续学习,否则你就跟不上时代了。


废话不多说了,我们先看一下头条网后台管理Solution。

wKiom1SmRsKSNxXuAADdz4QlXgo944.jpg

OK,三层架构,最简单的架构。我们现在看一下第一个页面

@{     Layout = null; } <!DOCTYPE html> <html> <head>     <meta name="viewport" content="width=device-width" />     <title>登录</title>     <link rel="stylesheet" type="text/css" href="~/BootStrap/css/bootstrap.min.css" />     <link rel="stylesheet" type="text/css" href="~/BootStrap/css/bootstrap-theme.css" />     <link rel="stylesheet" type="text/css" href="~/Content/Login.css" />     @Scripts.Render("~/bundles/jquery")     @Scripts.Render("~/bundles/bootStrap")     <script type="text/javascript" src="~/Scripts/angular.js"></script> </head> <body>     <div id="main_layout" ng-app="loginModule" ng-controller="loginController">         <div class="panel panel-primary">             <div class="panel-heading">                 <h3 class="panel-title">                     <img src="~/Images/Base/userlogin.png" style="width:25px;height:25px" />                     <b>用户登录</b>                 </h3>             </div>             <form ng-submit="loginIn()" role="form">                 <div class="div-panel-content">                     <div class="row">                         <div class="col-md-12 col-md-margin">                             <div class="input-group">                                 <span class="input-group-addon bg_user">                                     <img src="~/Images/Base/usermng.jpg" />                                 </span>                                 <input ng-model="userNo" type="text" class="form-control" autofocus="autofocus" placeholder="请输入用户名" maxlength="15" required>                             </div>                         </div>                         <div class="col-md-12 col-md-margin">                             <div class="input-group">                                 <span class="input-group-addon bg_pwd">                                     <img src="~/Images/Base/pwd.jpg" />                                 </span>                                 <input ng-model="pwd" type="password" class="form-control" placeholder="请输入密码" required maxlength="15">                             </div>                         </div>                         <div class="col-md-12 col-md-margin form-inline">                             <div class="input-group col-md-8">                                 <span class="input-group-addon bg_pwd">                                     <img src="~/Images/Base/validateCode.png" />                                 </span>                                 <input ng-model="validateCode" type="text" class="form-control" placeholder="请输入验证码" required maxlength="5">                             </div>                             <div class="col-md-4" style="float:right">                                 <img id="img_ValidateCode" src="../../Handler/ValidateCodeCreate.ashx" ng-click="getValidateCode()">                             </div>                         </div>                         <div class="col-md-12 col-md-margin" style="text-align:center;margin-bottom:10px">                             <button type="submit" class="btn btn-primary">登录</button>                             <button type="reset" class="btn btn-primary">取消</button>                         </div>                         <div id="div_login_process" class="col-md-12 col-md-margin" style="text-align:center;display:none">                             <img src="~/Images/Base/loading.gif" />                             <label style="color: #003399">正在登录,请稍候......</label>                         </div>                     </div>                 </div>             </form>         </div>     </div>     <script>         var appModule = angular.module('loginModule', []);         appModule.controller("loginController", function ($scope) {             $scope.loginIn = function () {                 $.ajax({                     url: "/Login/LoginIn",                     type: "POST",                     dataType: "json",                     data: {                         requestJson: JSON.stringify({                             userNo: $.trim($scope.userNo),                             pwd: $.trim($scope.pwd),                             validateCode:$.trim($scope.validateCode)                         })                     },                     beforeSend: function () {                         $("#div_login_process").show();                     },                     complete: function () {                         $("#div_login_process").hide();                     },                     success: function (data) {                         if (data.suc == 1) {                             window.location.href = "/Home/Index";                         }                         else {                             $("#div_login_process").hide();                             alert(data.msg, "提示信息");                         }                     },                     error: function () {                         $("#div_login_process").hide();                     }                 });             }             $scope.getValidateCode = function () {                 $("#img_ValidateCode").attr("src", "../../Handler/ValidateCodeCreate.ashx?param=" + new Date().toTimeString());             }         });     </script> </body> </html>
网友评论
<