HTML+LayUI+WebApi 简单个人demo教程 ----《.Net踩坑之路(一)》

题外话：

踩坑之路确实是自己踏入正式编程以来走过的坑，坑多，基本过了的都踩了遍，没办法，太菜。

踩坑之路不出意外，应该都是用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，比较麻烦。

下次写，要回家做饭了，饿了。