本文学习并分析App.Hosting项目中后台管理页面的_AminLayout.cshtml模版页面和登录页面。

_AminLayout.cshtml模版页面

  后台管理页面中的大部分页面都使用_AminLayout.cshtml作为模板页面，如下图所示，后台页面的视图内容放置在表单中，使用layui的表单样式渲染，同时根据当前页面地址设置响应的元素类名，以便使用css/public.css文件渲染样式。在模板页面中引用layui.js、cache.js、axios.js文件，同时调用layui.config和extend函数指定并加载扩展模块，已支撑不同页面调用和应用。

登录页面

  后台用户通过登录页面登录后台配置人员、角色、文章等信息，整个页面使用了layui中的表单组件及public.css设置样式，使用login.js文件调用Main/LoginController中的相关函数获取或提交数据。

  输入用户名和密码。使用layui表单组件的layui-form-item和layui-input预设类设置样式，采用lay-verify属性检查内容输入内容不能为空，同时在login.js文件中定义输入框的click、focus、blur响应函数以设置输入效果。
  输入验证码。调用Main/LoginController的ValidateCode函数获取并显示验证码图片，并将验证码值保存在HttpContext.Session中。同时设置图片的onclick事件，以支持点击图片时刷新验证码，这里还有个技巧是在调用url后加随机数，避免浏览器不发送GET请求，直接从缓存中读取之前的数据，详细介绍见参数文献4。这里还存在判断逻辑，如果博客项目的appsettings.json的SysConfig节的UseGeetest属性为true，则隐藏输入验证码，转为Geetest方式登录。
  提交按钮。login.js文件设置如果使用Geetest方式登录，则调用极验官方gt.js进行验证，否则设置表单提交按钮的响应函数，调用Main/LoginController的Login函数验证用户名和密码，验证通过则将用户信息保存到Session并跳转到后台主页面（/Main/Home/Index），不通过则依然停在登录页面。
  js文件。引用的login.js专用于本页面的初始化及函数定义，主要函数已在上方说明，在此不再赘述。

参考文献：
[1]https://gitee.com/miss_you/Blog
[2]https://layui.dev/docs/2/
[3]https://animate.style/
[3]https://www.cnblogs.com/zhengwk/p/5318422.html
[4]https://blog.csdn.net/weixin_45459209/article/details/132325048