題外話：
踩坑之路確實是自己踏入正式編程以來走過的坑，坑多，基本過了的都踩了遍，沒辦法，太菜。
踩坑之路不出意外，應該都是用VS2019和MSSQL做的，沒辦法，太菜。
不過這個demo我先使用的MVC做的，后來換成了靜態頁面，改成了WebApi，不該沖動的。。導致后台的Filter配置直接廢了- -。換成了API的。
好了扯遠了，進入正題。第一次使用博客園，不太會用，尷尬。
首先呢，為了速度，選擇用的靜態頁面。
為什么使用靜態頁面，基於速度...
詳情可以研究下靜態頁面和動態頁面的區別，雖然我也是一時沖動，想純粹的前后端分離。
一.LayUI
選擇LayUI是方便上手，也是第一次學，本來是用BootStrap做的，然后坑就來了。
不過官方說的“低門檻開箱即用的前端 UI 解決方案”確實香。
這里就不多做介紹了。
1.下載包
官方地址就有下載，官方文檔也很全，這里不多介紹，下面用到的地方會有詳細代碼展示。
2.引入
我采用的是模塊方式加載，而LayUI的模塊加載確實好用。
./layui/css/layui.css
./layui/layui.js
只需兩個就好了。
接下來是第一個坑。我們自己做需求時可能會需要自己的封裝JS代碼，那么就涉及到擴展LauUI模塊問題，所以重點來了，如何擴展。
（1）新建文件夾extention
文件夾下新建JavaScript文件，命名import.js。
layui.use('layer', function () {
layui.config({
//存放拓展模塊的根目錄 （大坑，沒認真看文檔的下場就是按頭深思）
base: '/lib/extention/'
}).extend({
//設定模塊別名
Luoextention: 'Luoextention'
});
});
(2) 自己的擴展JS，我這是Luoextention.js.
layui.define()方法。通過這個方法可以把自己需要的依賴模塊通過數組格式加載進來。
layui.define(['jquery', 'form', 'layer'], function (exports) {
var layer = layui.layer
, form = layui.form
, $ = layui.jquery
//這里暫且只需要這些
};
exports('Luoextention', Luoextention); //模塊名必須和use時使用的模塊名一致
});
接下來就是寫上自己需要的JS，我這里寫上一個擴展的Ajax方法。
layui.define(['jquery', 'form', 'layer'], function (exports) {
var layer = layui.layer
, form = layui.form
, $ = layui.jquery，//看見這個，了嗎，這個坑，我就不止按頭深思了，而是差點懷疑人生了。沒有逗號，自一定的擴展方法會一直提示找不到！！！
Luoextention = { //這個就是你要調用的時使用的名字
ajax: function (url, method, param, fun) {
$.ajax({
url: url,
type: method,
data: param,
beforeSend: function (XHR) {
XHR.setRequestHeader('Authorization', 'BasicAuth ' + sessionStorage.getItem("ticket"));
},
success: function (res) {
fun(res)
}, datatype: "json"
});
}
}；
};
exports('Luoextention', Luoextention);
});
我們擴展Ajax中的brforeSend方法，為了做FormsAuthenticationTicket身份驗證。通過Ajax在請求頭中加入我們的票據信息，從而去判斷Request Headers中有無'Authorization'，進而可以去設置Api的權限，后面會有API的權限設置講解。這樣就不需要每次使用ajax時，都擴展方法，從而避免重復代碼。
因為是靜態頁面和WebApi的結合，如果需要一個像后台Session的東西去進行存儲一些重要數據，那么可以通過FormsAuthenticationTicket將用戶的身份發回到客戶端的Cookie，去進行權限設置及判斷。而Jquery自帶的瀏覽器存儲方法，所以我這里使用的是sessionStorage，Key/value的方式去存儲后台發送的ticket數據，使用格式sessionStorage.ticket = data;
那么調用時 ，使用layui.use()方法。
使用時導入剛擴展的js文件，切記，引入這個之前一定要導入一個Jquery包，不要問我為什么。
<!--導入文件-->
<script src="/lib/extention/import.js"></script>
<script>
layui.use(['form', 'element', 'Lextention'], function () {
var form = layui.form,
element = layui.element,
Luoextention = layui.Luoextention;
//模塊化加載之后，使用同理
Luoextention.ajax("api地址","post/get", {}, fun);
});
</script>
基於此，LayUI 我覺得入門最重要的部分講完了，之后會涉及到頁面彈出層以及表格加載和模塊引擎。
那么，就開始前台頁面編寫。
（3）登入
新建文件夾Static,文件夾下新建Login.html,Index.html。
界面太丑我就不展示了，放主要代碼。
LayUI提供自己的表單方法。
前端代碼：
<button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button> //lay-submit,lay-filter屬性很重要很重要...一定要有
layui.use(['form', 'layer','Luoextention'], function () {
var form = layui.form,
layer = layui.layer,
Luoextention = layui.Luoextention;
// 進行登錄操作
form.on('submit(login)', function (data) { //
var data = data.field; //layUI內部方法，取到的是name屬性值
//還是這樣好
//var account = $("#account").val() ,var account = $("#account") ，看有什么區別嗎？
//是的，我寫快了，找這個BUG找了快一個小時，差點放棄LayUI****,因為會一直提示，提示什么來着我給忘了，反正不會告訴你這個東西
if (data.Role == '') {
layer.msg('請選擇身份');
return false;
}
var fun = function(res){
if(res == 200){
layer.msg("登錄成功",function(data){
sessionStorage.ticket = data.ticket;
location.href = "Index.html";
});
}
Luoextention.ajax('/api/User/Login','post',data,fun);
}
});
這樣前台就寫完了，其實我習慣是先寫API的。
后台代碼 ：
WebApi配上Post方法真是太爽了，不過坑我也踩完了。
關於Post提交方法，這里我總結了兩種：
第一種：單個參數
后台API控制器上接收一定要用[FromBody]
例如：
Q：
$.ajax({
url:"/api/A",
dataType:"json",
data:{heihei:"sssb"},
success:function(data){
alert(data);
}
})
H:
[HttpPost]
public string A([FromBpdy] string heihei){
return heihei;
}
然后你就會發現，始終得不到SB兩字，不對，sssb，[HttpPost]也寫了，[FromBody]也寫了，為什么呢？修改一下：
$.ajax({
url:"/api/A",
dataType:"json",
data:{" ":"sssb"},
success:function(data){
alert(data);
}
});
這樣就會發現彈出了並且得到了夢寐以求的sssb.
第二種：多個參數（兩個或兩個以上）
將上述.ajax方法改動一個地方，data:{" ":"哈哈哈哈", " ":"嘻嘻嘻嘻"}; 接收改為public string A([FromBody] string heihei,[FromBody] haha){ },
我確實舉一反三，所以F12調試得到的永遠是：Status Code: 500 Internal Server Error.很不錯，還行吧，誇下自己。
錯了就改：
前台：
$.ajax({
url:"/api/A",
dataType:"json",
data:{heihei:"嘿嘿嘿嘿",haha:"嘻嘻嘻嘻"},
success:function(data){
alert(data);
}
});
后台：
public class modelB{
public string heihei{ get; set; }
public string haha{ get; set; }
}
[HttpPost]
public string A(modelB model) {
return string.Format("{0},{1}",model.heihei,model.haha);
}
一運行，完美。
所以建議是寫一個公共的Model類去處理Post請求。
當然，還有一種是JObject類型接受或者dynamic，不過要記得json序列化。
而JObject要引用Newtonsoft.Json.Linq.會涉及到dll的版本沖突問題，至今這坑沒解決，往下適配無效。
接下來剩的就是后台WebApi的代碼了，因為涉及到AuthorizeAttribute，比較麻煩。
下次寫，要回家做飯了，餓了。