1.前言

神奇从登录开始！我们经过“千难险阻”终于到达了“世界大门”前。登录的钥匙马上就要拿到了。本章将实现母版页面、登录页面。

2.母版页

什么是母版页？简而言之，就是公共页面。母版页面可以为其他页面提供公共布局及功能。

我们要从Pear Admin Layui 项目中抽出公共部分来创建我们的母版页面。同学们可以打开view文件内的页面分析一下。经过查看您会发现，每个页面都有头部和尾部。哦，这好像是句废话，不过这不重要。这里我拿登录页来做例，基本上每个页面都是相同的头部和尾部，那么我们可以把头部和尾部给抽出来放到母版页中，而中间的内容就是具体页面的内容。

2.1 创建母版页

看图！打开Views/Shared/_Layout.cshtml文件，此为项目的默认母版页，为什么？请看文件_ViewStart.cshtml，这个文件从名字就可以知道视图起始页，打开后就会发现就一句话：

Layout = "_Layout"; // 表示布局指向_Layout，即指向Views/Shared/_Layout.cshtml文件。

我们打开_Layout.cshtml文件，清空内容，将我们需要的功能内容从Pear Admin Layui项目中复制过来。

敲黑板！！！

同学有没有看到上图中自动引入css和js，是的自动引入之前我们要制定一个规则：那就是看下图！

是的，我们定义：文件夹名称是控制器名称，内文件名是方法名称。这样我们可以根据页面请求自动引入相关css和js。

敲黑板！！！重点！！！

asp-append-version=true注意看这句，它的作用就是随机版本字符串，是的，它会在文件访问的时候自动追加随机版本字符串，在文件内容修改后再次访问时会自动变化版本字符串，例如：

它解决了一个大问题，那就是页面缓存。注意：不要撇嘴，这是个对于不懂电脑的客户来说是一个免去您费心费力地去教客户如何清理浏览器缓存的问题。这样的客户是非常非常多的。

好了，言归正传。

// 可以理解为样式占位，这句在母版页中声明，然后子页面在其内编写样式，在页面渲染后，相关样式就会呈现在占位的位置
@await RenderSectionAsync("Styles", required: false)
 // 可以理解为脚本占位，这句在母版页中声明，然后子页面在其内编写脚本，在页面渲染后，相关样式就会呈现在占位的位置   
@await RenderSectionAsync("Scripts", required: false)

至此，母版页面已创建完毕！是不是很简单啊

3.登录页

从登录页中复制出登录页所拥有的内容，去除母版页公共内容。在Controllers文件夹内创建LoginController.cs,并创建登录视图Index.cshtml。如何创建就不用讲了，相比聪明的您是完全可以胜任的。

如上图，该图内容就是从前端Pear Admin Layui登录页中复制出相关内容。

至此，登录页已经移植完毕。

4. 查看登录页

我们启动项目，在浏览器地址栏输入https://localhost:7298/Login/Index，即可访问到我们希望的登录页。

4.结语

本章比较简单，我们创建了母版页面，登录页面，下一章我们继续实现登录逻辑及身份鉴权和认证。各位同学在阅读实践过程中有看不懂或有其他想法的可以在评论区留言或者私信。教程有帮助的话请各位同学帮忙评论点赞关注三连，感谢大家！

----------------------------------------------------

私信： 校园图书管理系统 可以获取Gitee的链接