ASP.NET Core 一步步搭建个人网站(2)_一键部署与用户注册登录。MyEclipse中Git的运。

俗话说,磨刀不费砍柴工。为了还便利之拓路管理,我们先用民用网站项目配置一下,满足以下2个目标:

1、安装Git插件

  • VS2017负支持Git存储库,绑定Github项目,实现当地VS程序与线及Github一键代码提交和齐;
  • 搭建服务器FTP站点,VS2017备受布置一键部署网站文件及服务器;

       
Myeclipse老版本可能要安装Git插件(window->preference->Team下冒出Git就说明安装成功),高版本被早已装好了。我所运用的是MyEclipse2016,不欲设置Git插件,所以于此虽未以切实可行描述安装Git插件的步骤。

发生了以上的布,我们好绝不每次拉取和共同我们的次序及Github中,也未用每次在本土发布,拷贝服务器,我们只是所以在VS2017惨遭简易的同一键同步到Github或网站服务器。这样我们的开发效率来矣杀挺的滋长,也方便线上证实我们的程序代码。

2、生成MyEclipse的一个SSH的验证号

VS2017支持Github

挑 工具–>扩展及更新,搜索GitHub,安装GitHub的VS插件

必威电竞外围网站 1

安装了插件,打开视图–>团队资源管理器,我们可见见Git插件菜单。通过菜单我们得以新建Git存储库,可以提交修改的代码,并一键同步交付后底代码到自己的GitHub项目中。

必威电竞外围网站 2     
  必威电竞外围网站 3

更打开GitHub,可以拘留我们的代码都联合了,是未是颇有利?

必威电竞外围网站 4

      
由于Github的代码是开源的,每个人还可以查看代码,但是只有和睦能修改代码。Github通过SSH
Key识别出提交的代码是用户自身推送的,才能够针对相应的代码进行操作。即地面Git仓库和GitHub仓库之间的导是通过SSH加密的,所以待地方创建SSH
Key并在GitHub服务器上安装SSH
Key,从而创造本地与Guthub服务器的干:window->preferences–>general–>Network
Connections–>SSH2

VS2017支持FTP远程发布

假设VS支持FTP发布,首先要将网站服务器配置成FTP服务器。

Server2008添加新的角色,选中文件服务并安装新角色:

必威电竞外围网站 5

再次当选已设置之IIS服务,增加FTP服务器相关的角色:

必威电竞外围网站 6

随着,在IIS网站右键选择“添加FTP站点”,选择FTP文件物理路径和增长站点名称:

必威电竞外围网站 7

端口默认21,不用选择SSL证书,身份验证这里选择基本证明(为了一定的安全性,不要勾选匿名),授权访问里,指定administrator才能够访问FTP站点,并持有读取和写入的权杖;

必威电竞外围网站 8

完了后,我们建造好之FTP就机关启动了,这时浏览器被输入ftp://localhost,输入用户称以及密码,就好看对应之文件目录了。当然,我们外网还是无法访问,为什么呢?相信大家看了上平等首,应该知道凡是防火墙的缘故,我们以上同首的配备,增加FTP
21端口的同意入站规则,这样我们外网就透过FTP访问网站宣布目录。

布局了外网服务器,我们来布局一下地方VS2017,右键项目–>发布,选择FTP发布,选项配置如下:

必威电竞外围网站 9

这般咱们就算都布置好当地一键发布站点至长途服务器了。以后直接点发布按钮,就可以看到活动将变的披露文件,同步到网站服务器:

必威电竞外围网站 10

2.1、General中之值也用户主目录下的.ssh文件和欠目录下的id_rsa和id_rsa.pub文件(这片独就是是SSH
Key的秘钥对,id_rsa是私钥,不克泄露出来,id_rsa.pub是公钥,可以放心地报告任何人)

轮换前端框架

预备干活召开了,浏览器输入网站服务器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用户管理与证明,有些个人必威电竞外围网站遇到的题材,我还是排出来,以免再度走弯路。

必威电竞外围网站 11

由定义之劳务器端和客户单的印证

准,新用户注册时,要保用户都勾选“阅读并接受用户协商”。而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>

.ssh的路径

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>

这样,我们登录以及注册功能大体完成了,我们看下效果:

必威电竞外围网站 12

2.2、本地创建SSH Key:点击Key Management 中的Generate RSA
Key…生成SSH认证号,然后点击Save Pravite
Key进行封存(注意:不要以我们之前的公钥和密钥给覆盖了,我们得选另外的目录进行封存),然后点击Apply

必威电竞外围网站 13

SSH认证号

3、在GitHub上安SSH
Key,从而创造本地同Guthub服务器的涉及
将转移的公钥添加到Github中失

3.1、拷贝公钥文件id_rsa.pub的始末:找到刚刚保存公有秘钥的路线(如下),可以据此Notepad打开文件并复制内容

必威电竞外围网站 14

国有密钥的保留路径

3.2、将从id_rsa.pub公有密钥文件被复制的情节上加至Github的ssh key
设定里:

(1)注册Github账号:打开Github主页https://github.com进行注册,按要求填写用户称、密码和信箱,并开展邮箱验证

(2)打开github网站的“settings”中之SSH
Keys或者直接页面访问https://github.com/settings/ssh  

(3)点击右侧上角 Add SSH key  

(4)输入title(任意填写,这里以gittest为条例),然后以复制的公有密钥复制粘贴到key中

必威电竞外围网站 15

Github中丰富公有密钥

丰富完成后结果

必威电竞外围网站 16

长公钥成功

留神:私有密钥和国有密钥是成对的有数独文件,私有文件保留于投机的本机,公有密钥保存至其它一样端的服务器、网站 
等。github就是平等种植网站。只有保存了私家密钥的机械才能够顾远程的服务器等。使用该键的裨益是毫无采用密码,而是为密钥的法证明用户。要想如果本机能访问github。有三只步骤:(1)
创建私有密钥和国有密钥(2)将国有密钥放到github里。(3)测试是否设置成(4)修改本地git配置文件并颁发

4、在Github上开创好之代码仓库

4.1、Github注册成功后,点击右侧上斗的“+”号,选择New
repository开创建代码仓库

(1)Resository name:填写自己定义之库名(必填项)

(2)Description:填写描述(选填项)

(3)Public:保持选中(如果选Private可以选取谁能够看出哪位能交到,public只会选谁会交付,private是如果钱之)

(4)Initialize this repository with a
README:决定是否别一个README文件来初始化仓库(可摘可不选)

(5)Create repository:点击生成代码仓库

必威电竞外围网站 17

创建代码仓库

4.2、获取代码仓库的地方:点击Create
repository后生成http地址便是欠代码仓库的地址,如下图所示

必威电竞外围网站 18

代码仓库地址

5、创建本地git仓库

5.1、在MyEclipse中开创项目(如gittest)

5.2、右键项目–>team–>share project来共享项目

必威电竞外围网站 19

以Git进行路共享

点击Next,出现如下界面,进行Git代码库配置

必威电竞外围网站 20

配置Git代码库

点击Finish,我们的工程显示也NO-HEAD,即意味着不曾指针指为

必威电竞外围网站 21

项目gittest

6、首坏提交项目及远程

入选项目右键–>team–>commit

(1)Commit message:填写提交信息

(2)Status:选中需要提交的文件

(3)Commit and Push:提交至地面并推送到Github服务器

(4)Commit:提交至本地

必威电竞外围网站 22

交给项目

6.1、这里我们捎提交并推送按钮,会面世以下如下界面

必威电竞外围网站 23

Git代码库地址

(1)首先我们要填写github中仓库地址(4.2受到曾经得到),同时填写用户称、密码,选中记住

必威电竞外围网站 24

master分支

(2)然后点击Next

必威电竞外围网站 25

分推向远程

(3)然后会开展长距离通信,如果网络不好或者会见微微问题

必威电竞外围网站 26

长途连接着

(4)远程连接成后,会冒出如下界面

必威电竞外围网站 27

远程连接成

(5)点击Finish

必威电竞外围网站 28

推送远程结果

(6)此时路状态如下:即意味着尚未指针指向的“NO-HEAD”已经不复存在,项目展示在master分支上

必威电竞外围网站 29

6.2、查看提交信息

(1)查看本地提交信息:右键项目–>team–>Show in
History来查阅提交信息

必威电竞外围网站 30

提交历史

(2)查看Github服务器上之提价信息:访问https://github.com/sewenfengqing/development查看提交信息(提交所在分层、提交描述、提交时等)

必威电竞外围网站 31

Github上之付出信息

怎以MyEclipse中的gittest已经由此项目右键–>team–>Commit多次,且通过项目右键–>team–>Show
in
History查看到了付出信息,问啊在Guithub中特能查及第一不良的提交信息,之后也查无至?(注意:通过品种右键–>team–>commit只是付诸到地头,而由此品种右键–>team–>push
to upstream或者commit中commit and push才会上传来Github服务器)

7、修改代码提交到地方Git

必威电竞外围网站 32

付至地面

这时候仅于当地有付出信息,Github上从未有过

必威电竞外围网站 33

本地提交历史

8、修改代码提交至远程仓库Github

直接项目右键–>team–>commit–>commit and
push推送项目及服务器,出现如下问题

必威电竞外围网站 34

付出出错

为了用远程推送,您必须指定至少一个URI和至少一个REF映射

必威电竞外围网站 35

配置Push

釜底抽薪方案:

(1)创建分支:项目右键–>team–>Switch to–>New Branch

必威电竞外围网站 36

新分支

(2)项目展示就于bliy分支上

必威电竞外围网站 37

分支liy

(3)提交新建的文本

1>右键文件–>team–>Add to Index;

必威电竞外围网站 38

新建文件

2>此时新建的公文前会油然而生“+”号,右键文件–>team–>commit,选择commit;

3>而后我们重展开推送team–>Push branch liy

(后少步可轮换为:右键文件–>team–>commit–>commit and
push)

必威电竞外围网站 39

授并推送新文件

(4)重新提交修改代码并推送至服务器

文件右键–>team–>commit–>commit and push

必威电竞外围网站 40

推送分支到长途

必威电竞外围网站 41

推送成功

(5)Giithub上亮提交信息

必威电竞外围网站 42

Github服务器上之交给信息

9、合并分支

(1)首先切换回主分支:team–>Switch to –>master

(2)之后:team–>Merge

必威电竞外围网站 43

旁合并

(3)选中liy分支,点击Merge

必威电竞外围网站 44

统一结果

(4)点击ok之后更进行提交推送

10、通过使用egit插件来进展版本控制

10.1、从服务器克隆代码仓库到本土

种类右键–>import–>Git–>Projects from Git

必威电竞外围网站 45

版本控制

点击Next

必威电竞外围网站 46

点击Next

必威电竞外围网站 47

克隆URI

点击Next,仓库就从远程Clone(克隆)到当地

必威电竞外围网站 48

库本地路径

尔后以myeclipse中导入该类型,更改代码后的交给方式要圈上面的第六步。

10.2、提交修改的代码到Github服务器

(1)将改变的代码标记
    项目右键–>team–>synchronize workspace

必威电竞外围网站 49

一齐工作空间

点击Yes后

必威电竞外围网站 50

来得修改的文书

类型右键–>Add to Index ,修改的公文标记为“*”

必威电竞外围网站 51

号修改的代码

(2)将工作空间的代码提交到当地仓库

  项目右键–>team–>commit

(3)将长途仓库的代码pull(合并)到本地仓库

 项目右键–>team–>pull (这同样步可能要缓解代码冲突,合并代码 )

(4)将地面仓库代码push(推送)到长途仓库
品种右键–>team–>push to upstream

相关文章

admin

网站地图xml地图