Faith's Blog.

水文气象系统总结

project
字数统计: 2.6k阅读时长: 16 min
2019/06/17 Share

界面

本项目前后端分离，主要采用了bootstrapV4.3的布局框架，混合各类jQuery插件实现，后端采用flask。总结本次开发一些知识点和封装一些好用的函数。

使用的插件

  • Browser.js
  • toastr.js
  • wangEditor.js
  • wangEditor.js
  • font-awesome.css
  • animate.css

浏览器检查

Browser.js 采用原生js写法
用法：

1
2
3
4
5
6
7
8
9
10
11
12
var info = new Browser();  
if(info.browser=="Chrome"){  
  toastr.success("浏览器"+ info.browser+   		//这里toastr下面会使用到
    "版本"+info.version+"<br>"+  
    "内核"+info.engine+  
    "操作系统"+info.os+  
     info.osVersion+"<br>"+  
    "设备"+info.device+  
    "语言"+info.language);  
}else{  
      ……  
}

源文件解读：

1
2
self 可以查看是否嵌套在iframe中
node 没有self

基于jQuery的弹出框提示

toastr.js
用法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//常规消息提示，默认背景为浅蓝色    
toastr.info("你有新消息了!");    
//成功消息提示，默认背景为浅绿色   
toastr.success("你有新消息了!");    
//警告消息提示，默认背景为橘黄色   
toastr.warning("你有新消息了!");    
//错误消息提示，默认背景为浅红色   
toastr.error("你有新消息了!");    
//带标题的消息框  
toastr.success("你有新消息了!","消息提示");    
//另一种调用方法  
toastr["info"]("你有新消息了!","消息提示");  
  
自定义参数：   
javascript  
//参数设置，若用默认值可以省略以下面代  
  toastr.options = {
    "closeButton": false,                       //是否显示关闭按钮
    "debug": false,                             //是否使用debug模式
    "positionClass": "toast-top-full-width",    //弹出窗的位置
    "showDuration": "300",                      //显示的动画时间  
    "hideDuration": "1000",                     //消失的动画时间  
    "timeOut": "5000",                          //展现时间  
    "extendedTimeOut": "1000",                  //加长展示时间  
    "showEasing": "swing",                      //显示时的动画缓冲方式  
    "hideEasing": "linear",                     //消失时的动画缓冲方式  
    "showMethod": "fadeIn",                     //显示时的动画方式  
    "hideMethod": "fadeOut"                     //消失时的动画方式  
	};

positionClass //消息框在页面显示的位置 

1
2
3
4
5
6
7
8
toast-top-left           //顶端左边  
toast-top-right          //顶端右边  
toast-top-center         //顶端中间  
toast-top-full-width     //顶端，宽度铺满整个屏幕  
toast-botton-right       //底端右边  
toast-bottom-left        //底端左边
toast-bottom-center      //底端中边
toast-bottom-full-width

基于css的动画插件库

anmiate.css
用法：
简单的使用方法推荐https://www.cnblogs.com/xiaohuochai/p/7372665.html

不错的模板网站

http://www.dowebok.com/

Jinjia2 语法

简略使用

1
2
3
4
{{……}} 装载一个变量，模板渲染的时候，会使用传进来的同名参数这个变量代表的值替换掉。
{% ... %}：装载一个控制语句。
{# ... #}：装载一个注释，模板渲染的时候会忽视这中间的值。
循环的索引 {{loop.index}}

全局font-awesome

这是一个很好用的字体图标，可缩放的矢量图标，用法也很简单

prompt 对话输入框

prompt
如果你点击取消的话，返回null（根据浏览器，个人主要使用chrome），填入后点击确认返回输入的值，但是什么都不输入也不等于‘ ’，这让判断是否为空成了问题（未解决）
一般没什么必要也不要使用这种阻塞式的弹窗，用户体验也不好，毕竟项目急，再加山自身功力底蕴一般，迫于开发便利，想出损招。

JQuery的ajax

在学ajax的时候，看到原声的js，xhr对象，感觉就颇为繁琐，但是这些都是基础底子，对于了解ajax的方方面面都有巨大的好处，学习的过程中发现了jQuery比较便利，就偷了个懒，然后之前的请求也都未做总结，实在遗憾，这次要好好总结ajax
用法:

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({  
        url: "",                                //路由 
        type: "POST",  
        headers: {                              //头部信息，json格式  
            "Content-Type": "application/json;charset=utf-8"  
        },  
        contentType: 'application/json; charset=utf-8',  
        // dataType: "json",                    规范后端返回的值的格式设置  
        data: JSON.stringify(arr),              //规范后端返回的值的格式设置  
        success: function (msg) {  
        }  
})

语法:js对象转换成json

JSON.stringify(value[, replacer [, space]])

JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串，如果指定了replacer是一个函数，则可以选择性的替换值，或者如果指定了replacer是一个数组，可选择性的仅包含数组指定的属性。

Form 传值，只需要在form表格内中的表单元素添加name就可以了。
在很多情况下，会显示假的input，真的input表单元素直接hidden隐藏掉

Select默认选中
在select选择框中，如果要设置默认选中选中就可以使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**  
 * 设置select选中  
 * @param selectId select的id值  
 * @param checkValue 选中option的值  
*/    
function setSelectChecked(selectId, checkValue){    
    var select = document.getElementById(selectId);    
    for(var i=0; i<select.options.length; i++){    
        if(select.options[i].innerHTML == checkValue){    
            select.options[i].selected = true;    
            break;    
        }    
    }    
};

但是select的苦难并没有结束，不能向普通表单元素一样，通过添加readonly属性来只显示只读，解决方案：添加disabled=”disabled” 这样的话表单元素也不能提交上去,如果有需要的话就用js来删除属性。

foreach

数组的循环回调方法

1
2
3
4
5
6
maxObjArr.forEach(function(x,index,a){          //foreach x内容 index索引  
    if (x==true){  
        str+=tableTr[index].name+" ";  
        nostr+=tableTr[index].name+"%";  
    }  
})

Jquery 总结

jquery 选择器

1
2
var arr = $("#mask [required]"); //拿到遮罩下input 属性为required 的元素 
$("#tr"+msg)[0].innerHTML="good";  //可以使用变量来接

js 拿取某id的input值

1
document.getElementById(“id”).value;

jquery 拿取某id的input值

1
$(“#id”).val()

css设置值

1
$('body').css('overflow', 'hidden');

jQuery设置input的选中

1
$("#reg"+id).prop("checked",true); //布尔值代表状态

JQuery浏览器高度设定

1
$(document).scrollTop(0);

JS总结

跳转下载

1
window.open("../output_file/"+data[0]+".xlsx"); //新打开一个地址

本地跳转

1
window.location.href=newUrl;

阻断式弹窗

1
confirm(“xxxxx”) //返回值是一个布尔

总结本次弹窗

本次系统主要采用新建div 修改其innerhtml加es6的反印号做的，关闭弹框也是较为粗暴的直接

1
$("#mask").remove();

jquery选中id后直接remove（） 从文档流上删除。
加入的过场动画也是较为简单的用jquery添加anmiate类

1
2
3
$("#open-mask").removeClass('fadeInDownBig');  
$("#open-mask").addClass('fadeOutUp');  
$("#open-mask").addClass("animated fadeInDownBig faster");

加减天数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function calcDate() {  
    var sc = $("#inputrk_time").val();          //本次系统使用2个input
    var zq = $("#inputjd_cycle").val();         //通过onchange来触发 
    if(sc!==""&&zq!==""){  
    var sc = new Date(sc);  
     //通过添加秒数来追加时间.getTime()返回距 1970 年 1 月 1 日之间的毫秒数：
    var dataValue = new Date(sc.getTime() + (1000 * 60 * 60 * 24 * zq));  
    var Y = dataValue.getFullYear();  
    var M = dataValue.getMonth() + 1;  
    var D = dataValue.getDate();  
    var times = Y + (M < 10 ? "-0" : "-") + M + (D < 10 ? "-0" : "-") + D;  
                                                //如何显示
    console.log(times);  
    document.getElementById("inputjd_time").value = times;  
    }else{  
        console.log("没做什么");  
    }  
}

file文件格式大小判断

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    <!-- 需要上传文件的时候，要添加编码格式enctype -->  
    <form action="" enctype="multipart/form-data">  
    <!-- accept 只是给一个默认呈现格式，关键还是要js来判断 -->  
    <!-- multiple 多选属性 -->  
    <input type="file" name="faith" onchange="Fufiletake(this)" accept=".xlsx," multiple>  
    </form>
<script>  
    // 处理上传文件格式大小等，可选用input的onchange事件，传递this，单选处理  
    // FileList对象看起来是个类数组，有length属性。  
    // 浏览器为了安全性的考虑，把FileList对象的内容设为了不可更改，只可以手动置空，但不能修改内容  
    // 这里做一个简单的识别和判定，不合格都输出原因，并且设置为空       

    //console.log(ele.files);                           //所有上传文件列表  
    //console.log(ele.files.length);                    //上传文件数量
    
    function Fufiletake(ele){  
    var _config={  
        format:/.(xlsx)$/,                              //正则匹配,使用|分隔  
        Maxsize:2,                                      //上传大小,Mb为单位  
        }

    for(var i=0;i<ele.files.length;i++){  
        if(!_config.format.test(ele.files[i].name)){  
            console.log('你上传的文件格式不符，全部清空，请重新核对');  
            ele.value='';  
        }else if(((ele.files[i].size).toFixed(2))>=_config.Maxsize*1024*1024){  
            console.log('你上传的文件大于'+_config.Maxsize+'Mb，全部清空，请重新核对');  
            ele.value='';  
        }else{  
         console.log('你上传的资源匹配');  
        }  
    }  
}  
</script>

Fueditor.js

基于wangEditor，修改图片，视频，上传后的判断，添加视频的本地上传。

图片原型4345行
视频原型4092行
内部对象 config 547：数组ziyuan，字符串proName
检查对象内有没有视频或者图片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function tijiao(obj) {  
    var data = obj.txt.html();  
    function getCaption(str) {  
        var index = str.lastIndexOf("\/"); //就是找到最后一个标识所在的地址  
        str = str.substring(index + 1, obj.length);  
        return str;  
    }  
    obj.customConfig.ziyuan = [];  
    var reg = new RegExp("(<.*src=\"\.*?\>)"); //正则表达式  
    data.match(reg); 
//从字符串str中查找src="/ckfinder/userfiles/images/qi_cym.jpg"这段字符串  
    var re = /src="([^"]*)"/g; 
//只查找 /ckfinder/userfiles/images/qi_cym.jpg 这段路径  
    while (arr = re.exec(data)) {  
        obj.customConfig.ziyuan.push(getCaption(arr[1]))  
    }  
    console.log(obj.customConfig.ziyuan);  
}

创建富文本对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function editorCreate(obj, id, ImgServer, VedioServer, proName) {  
    var E = window.wangEditor  
    var str=obj;  
    console.log(str);  
    var obj = new E('#' + id);  
    // editor1.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > //测试bug  
    // editor1.customConfig.pasteIgnoreImg = false; //不允许复制图片  
    obj.customConfig.showLinkImg = false // 隐藏“网络图片”tab  
    obj.customConfig.uploadImgServer = ImgServer // 上传图片到服务器  
    obj.customConfig.uploadVedioServer = VedioServer; // 上传视频到服务器  
    obj.customConfig.ziyuan = [];  
    obj.customConfig.proName = proName;  
    // editor1.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片  
    obj.create();  
    window[str]=obj;  
   }

BootstrapV4.3

  • 侧边栏
  • 中文汉化
    hover提示
    1
    2
    3
    4
    5
    6
    7
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">  
      Tooltip on bottom  
       </button>  
       // 使所有title提示变得好看
       $(function () {  
           $('[data-toggle="tooltip"]').tooltip();  
       })

原文作者：FTH

原文链接：https://fujs.top/2019/06/17/水文气象系统总结/

发表日期：June 17th 2019, 2:33:26 pm

更新日期：November 6th 2019, 10:42:15 am

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. 使用的插件
  2. 2. 浏览器检查
  3. 3. 基于jQuery的弹出框提示
  4. 4. 基于css的动画插件库
  5. 5. 不错的模板网站
  6. 6. Jinjia2 语法
  7. 7. 全局font-awesome
  8. 8. prompt 对话输入框
  9. 9. JQuery的ajax
  10. 10. foreach
  11. 11. Jquery 总结
  12. 12. JS总结
  13. 13. 总结本次弹窗
  14. 14. 加减天数
  15. 15. file文件格式大小判断
  16. 16. Fueditor.js
  17. 17. BootstrapV4.3
Total : 6
2019
2018
Vue Ubuntu git hexo project
Vue Ubuntu git hexo project