您的位置:银河国际手机网址2949 > 银河2949s官网 > ASP.NET Core 一步步搭建个人网站(2)_一键部署和

ASP.NET Core 一步步搭建个人网站(2)_一键部署和

发布时间:2019-12-28 02:51编辑:银河2949s官网浏览(183)

    常言说,磨刀不费砍柴工。为了更方便人民群众的进展项目管理,大家先将民用网址项目布置一下,满足以下2个对象:

    • ASP.NET Core 一步步搭建个人网站(2)_一键部署和用户注册登录。VS2017中帮助Git存款和储蓄库,绑定Github项目,完结地点VS程序与线上Github风姿罗曼蒂克键代码提交和意气风发道;
    • 搭建服务器FTP站点,VS2017中配备生龙活虎键配备网址文件到服务器;

    有了上述的配置,我们能够不要每一回拉取和联合大家的主次到Github中,也不用每一遍在地头公布,拷贝服务器,大家只用在VS2017中简易的生机勃勃键同步到Github或网址服务器。那样大家的付出功能有了超级大的提升,也方便线上证实大家的程序代码。

    VS2017支持Github

    ASP.NET Core 一步步搭建个人网站(2)_一键部署和用户注册登录。选用 工具-->扩大和换代,搜索GitHub,安装GitHub的VS插件

    图片 1

    ASP.NET Core 一步步搭建个人网站(2)_一键部署和用户注册登录。ASP.NET Core 一步步搭建个人网站(2)_一键部署和用户注册登录。设置完插件,张开视图-->团队能源微处理器,大家能够观望Git插件菜单。通过菜单大家可以新建Git存款和储蓄库,能够付出校订的代码,并风度翩翩键同步交付后的代码到本身的GitHub项目中。

    图片 2        图片 3

    再展开GitHub,能够看大家的代码已经联合签字了,是还是不是很有益于?

    图片 4

    VS2017扶助FTP远程发布

    ASP.NET Core 一步步搭建个人网站(2)_一键部署和用户注册登录。要VS扶持FTP公布,首先要将网址服务器配置成FTP服务器。

    Server二零一零增加新的角色,选中文件服务并设置新剧中人物:

    图片 5

    再次入选已安装的IIS服务,扩充FTP服务器相关的角色:

    图片 6

    紧接着,在IIS网址右键选择“增加FTP站点”,选用FTP文件物理路线和增多站点名称:

    图片 7

    端口暗许21,不用选用SSL证书,身份验证这里接纳基本评释(为了一定的安全性,不要勾选无名),授权访谈里,钦定administrator技能访谈FTP站点,并保有读取和写入的权柄;

    图片 8

    做到后,大家建好的FTP就活动运营了,这时候浏览器中输入ftp://localhost,输入客商名和密码,就能够访谈对应的文件目录了。当然,大家外网依旧不能够访谈,为啥吧?相信大家看过上黄金时代篇,应该驾驭是防火墙的原故,大家依据上生龙活虎篇的安排,扩充FTP 21端口的允许入站法则,那样我们外网就经过FTP访问网址公布目录。

    配置完外网服务器,大家来安顿一下本土VS2017,右键项目-->发表,接纳FTP发布,选项配置如下:

    图片 9

    如此那般大家就曾经配备好本地后生可畏键宣布站点到长途服务器了。以后直接点公布按钮,就可以观察自动将转换的拆穿文件,同步到网址服务器:

    图片 10

    轮换前端框架

    策画干活做完,浏览器输入网址服务器IP,能够看来能够健康访谈,然则.net core mvc帮大家自动生成的分界面,不必然符合我们的需要,那仍然本身找叁个前端的UI框架,替换一下既有分界面。这里笔者接收的是 AdminLTE ,这是三个依据bootstrap 的轻量级后台模板,相关的资料我们能够去官方网站研商一下。

    大家把下载的文书解压缩到wwwroot/lib目录下,第一步先重构一下记名的分界面:

     1 @model LoginViewModel
     2 
     3 @{
     4     Layout = null;
     5     ViewData["Title"] = "登录";
     6 }
     7 
     8 <!DOCTYPE html>
     9 <html>
    10 <head>
    11     <meta charset="utf-8" />
    12     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    13     <title>@ViewData["Title"] - LanceL0t</title>
    14 
    15     @await Html.PartialAsync("_SiteCssPartial")
    16 </head>
    17 <body class="hold-transition login-page">
    18     <div class="login-box">
    19         <div class="login-box-body">
    20             <p class="login-box-msg">欢迎,由此登录</p>
    21             <form asp-route-returnurl="@ViewData["ReturnUrl"]" method="post">
    22                 <div asp-validation-summary="All" class="text-danger"></div>
    23                 <div class="form-group has-feedback">
    24                     <input asp-for="Email" class="form-control" placeholder="邮箱">
    25                     
    26                 </div>
    27                 <div class="form-group has-feedback">
    28                     <input asp-for="Password" class="form-control" placeholder="密码">
    29                     
    30                 </div>
    31                 <div class="row">
    32                     <div class="col-xs-8">
    33                         <div class="checkbox icheck">
    34                             <label asp-for="RememberMe">
    35                                 <input asp-for="RememberMe"> @Html.DisplayNameFor(m => m.RememberMe)
    36                             </label>
    37                         </div>
    38                     </div>
    39                     <div class="col-xs-4">
    40                         <button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
    41                     </div>
    42                 </div>
    43             </form>
    44             <div class="social-auth-links text-center">
    45                 <p>- 或者 -</p>
    46                 <a href="#" class="btn btn-block btn-social btn-facebook btn-flat">
    47                     <i class="fa fa-facebook"></i> Sign in using
    48                     Facebook
    49                 </a>
    50                 <a href="#" class="btn btn-block btn-social btn-google btn-flat">
    51                     <i class="fa fa-google-plus"></i> Sign in using
    52                     Google+
    53                 </a>
    54             </div>
    55             <a asp-action="ForgotPassword">忘记密码</a><br>
    56             <a asp-action="Register" asp-route-returnurl="@ViewData["ReturnUrl"]" class="text-center">立即注册</a>
    57         </div>
    58     </div>
    59 </body>
    60 </html>
    61 
    62 @await Html.PartialAsync("_SiteScriptsPartial")
    63 @await Html.PartialAsync("_ValidationScriptsPartial")
    

    跟着第二步,优化一下事情未发生前的新顾客注册分界面:

     1 @model RegisterViewModel
     2 
     3 @{
     4     Layout = null;
     5     ViewData["Title"] = "注册";
     6 }
     7 
     8 <!DOCTYPE html>
     9 <html>
    10 <head>
    11     <meta charset="utf-8" />
    12     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    13     <title>@ViewData["Title"] - LanceL0t</title>
    14 
    15     @await Html.PartialAsync("_SiteCssPartial")
    16 </head>
    17 <body class="hold-transition login-page">
    18     <div class="login-box">
    19         <div class="login-box-body">
    20             <p class="login-box-msg">欢迎,注册新用户</p>
    21             <form asp-route-returnurl="@ViewData["ReturnUrl"]" method="post">
    22                 <div asp-validation-summary="All" class="text-danger"></div>
    23                 <div class="form-group has-feedback">
    24                     <input asp-for="Email" class="form-control" placeholder="请输入邮箱">
    25                     
    26                 </div>
    27                 <div class="form-group has-feedback">
    28                     <input asp-for="Password" class="form-control" placeholder="请输入密码">
    29                     
    30 
    31                 </div>
    32                 <div class="form-group has-feedback">
    33                     <input asp-for="ConfirmPassword" class="form-control" placeholder="请确认密码">
    34                     
    35                 </div>
    36                 <div class="row">
    37                     <div class="col-xs-8">
    38                         <div class="checkbox icheck">
    39                             <label asp-for="IsAgree">
    40                                 <input asp-for="IsAgree"> 阅读并接受《<a href="#">用户协议</a>》
    41                             </label>
    42                         </div>
    43                     </div>
    44                     <div class="col-xs-4">
    45                         <button type="submit" class="btn btn-primary btn-block btn-flat">注册</button>
    46                     </div>
    47                 </div>
    48             </form>
    49             <div class="social-auth-links text-center">
    50                 <p>- 或者 -</p>
    51                 <a href="#" class="btn btn-block btn-social btn-facebook btn-flat">
    52                     <i class="fa fa-facebook"></i> Sign in using
    53                     Facebook
    54                 </a>
    55                 <a href="#" class="btn btn-block btn-social btn-google btn-flat">
    56                     <i class="fa fa-google-plus"></i> Sign in using
    57                     Google+
    58                 </a>
    59             </div>
    60             <a asp-controller="Account" asp-action="Login">已有账号</a><br>
    61         </div>
    62     </div>
    63 </body>
    64 </html>
    65 
    66 @await Html.PartialAsync("_SiteScriptsPartial")
    67 @await Html.PartialAsync("_ValidationScriptsPartial")
    

    此间的学识很简短,就不在祥述了,可是因为用的是.net core提供的identity顾客管理和注脚,某个个人境遇的主题素材,笔者照旧列出来,以防再走弯路。

    自定义的劳务器端和客商单的辨证

    诸如,新客商注册时,要保障客商已勾选“阅读并接收用户协商”。而MVC本身校验机制还未有提供bool型必需为true的校验,这里大家精诚团结实现贰个服务器端属性的校验,需求延续

      ValidationAttribute和IClientModelValidator:

     1 /// <summary>
     2 /// 复选框必须选中验证
     3 /// </summary>
     4 [AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = false)]
     5 public sealed class MustBeTrueAttribute : ValidationAttribute, IClientModelValidator
     6 {
     7     //服务器端验证
     8     public override bool IsValid(object value)
     9     {
    10         return value != null && (bool)value;
    11     }
    12 
    13     public void AddValidation(ClientModelValidationContext context)
    14     {
    15         MergeAttribute(context.Attributes, "data-val", "true");
    16         var errorMessage = FormatErrorMessage(context.ModelMetadata.GetDisplayName());
    17         MergeAttribute(context.Attributes, "data-val-mustbetrue", errorMessage);
    18     }
    19 
    20     private bool MergeAttribute(
    21         IDictionary<string, string> attributes,
    22         string key,
    23         string value)
    24     {
    25         if (attributes.ContainsKey(key))
    26         {
    27             return false;
    28         }
    29         attributes.Add(key, value);
    30         return true;
    31     }
    32 }
    

    再加上客商端的注明格局:

     1 <script>
     2     //必须复选框勾选验证
     3     $.validator.addMethod("mustbetrue",
     4         function (value, element, parameters) {
     5             return value === "true";
     6         });
     7 
     8     $.validator.unobtrusive.adapters.add("mustbetrue", [], function (options) {
     9         options.rules.mustbetrue = {};
    10         options.messages["mustbetrue"] = options.message;
    11     });
    12 </script>
    

    identity的本地化

    最近利用identity暗中同意的不当描述是希腊语,这里大家供给出示成汉语,所以新扩张叁个IdentityExtensions类,世袭IdentityErrorDescriber,重写错误描述 

     1 public class IdentityExtensions : IdentityErrorDescriber
     2 {
     3     public override IdentityError PasswordRequiresNonAlphanumeric()
     4     {
     5         return new IdentityError
     6         {
     7             Code = nameof(PasswordRequiresNonAlphanumeric),
     8             Description = "密码至少包含1位非数字字母的特殊字符"
     9         };
    10     }
    11 
    12     public override IdentityError PasswordRequiresDigit()
    13     {
    14         return new IdentityError
    15         {
    16             Code = nameof(PasswordRequiresDigit),
    17             Description = "密码至少包含1位数字('0'-'9')"
    18         };
    19     }
    20 
    21     public override IdentityError PasswordRequiresLower()
    22     {
    23         return new IdentityError
    24         {
    25             Code = nameof(PasswordRequiresLower),
    26             Description = "密码至少包含1位小写字符 ('a'-'z')"
    27         };
    28     }
    29 
    30     public override IdentityError PasswordRequiresUpper()
    31     {
    32         return new IdentityError
    33         {
    34             Code = nameof(PasswordRequiresUpper),
    35             Description = "密码至少包含1位大写写字符 ('A'-'Z')"
    36         };
    37     }
    38 }
    

    重写普通话错误描述后,我们还得在Startup.cs文件中的服务配置中登记:

     1 public void ConfigureServices(IServiceCollection services)
     2 {
     3     services.AddDbContext<ApplicationDbContext>(options =>
     4     options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
     5 
     6     services.AddIdentity<ApplicationUser, IdentityRole>()
     7     .AddEntityFrameworkStores<ApplicationDbContext>()
     8     .AddDefaultTokenProviders()
     9         .AddErrorDescriber<IdentityExtensions>();
    10 
    11     // Add application services.
    12     services.AddTransient<IEmailSender, EmailSender>();
    13 
    14     services.AddMvc();
    15 }
    

    登入和登记新客户并未难题了,再来改动一下记名后主页的布局,把_Layout布局视图分割成顶端区域、左侧导航菜单、内容区域、尾巴部分区域、左边侧面栏,并用某些视图分别渲染:

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <meta charset="utf-8" />
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     6     <title>@ViewData["Title"] - LanceL0t</title>
     7 
     8     @await Html.PartialAsync("_SiteCssPartial")
     9 </head>
    10 <body class="hold-transition skin-blue sidebar-mini">
    11     <div class="wrapper">
    12         <!-- 顶部区域 -->
    13         @await Html.PartialAsync("_LayoutHeaderPartial")
    14         <!-- 导航栏 -->
    15         @await Html.PartialAsync("_LayoutNavbarPartial")
    16         <!-- 内容区域 -->
    17         <div class="content-wrapper">
    18             <section class="content-header">
    19                 <h1>
    20                     Dashboard
    21                     <small>Version 2.0</small>
    22                 </h1>
    23                 <ol class="breadcrumb">
    24                     <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
    25                     <li class="active">Dashboard</li>
    26                 </ol>
    27             </section>
    28             <section class="content">
    29                 @RenderBody()
    30             </section>
    31         </div>
    32         <!-- 底部区域 -->
    33         @await Html.PartialAsync("_LayoutFooterPartial")
    34         <!-- 侧边栏 -->
    35         @await Html.PartialAsync("_LayoutSidebarPartial")
    36     </div>
    37 
    38     @await Html.PartialAsync("_SiteScriptsPartial")
    39     @RenderSection("Scripts", required: false)
    40 </body>
    41 </html>
    

    这么,大家登入和注册成效大要完结了,大家看下效果:

    图片 11

    本文由银河国际手机网址2949发布于银河2949s官网,转载请注明出处:ASP.NET Core 一步步搭建个人网站(2)_一键部署和

    关键词: