前端开发笔记

以你之姓@ 2022-11-16 13:42 301阅读 0赞

#### 1、input 标签的 required 属性 ####

*  required 属性规定必须在提交之前填写输入字段。
 *  如果使用该属性，则字段是必填（或必选）的。
 *  required 属性适用于以下 `<input>` 类型：text，search，url，telephone，email，password，date pickers，number，checkbox，radio 以及 file。
 *  required 属性是 HTML5 中的新属性。

#### 2、Layui 框架 ####

原生 HTML + CSS + JavaScript 经典开源前端框架。  
官网：https://www.layui.com/

#### 3、pako.js ####

pako.js：前端基于 pako.js 的压缩和解压缩工具。

#### 4、particles.js ####

超炫背景粒子jQuery插件，效果如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]

#### 5、zepto.js ####

Zepto 是一个轻量级的、针对现代高级浏览器的 JavaScript 工具库，它兼容 jQuery 的 API 。如果你会用 jQuery，那么你就已经会用 Zepto 了。Zepto 的设计目的是提供与 jQuery 兼容的 API，但并不是 100% 覆盖 jQuery API 。 Zepto 设计的目的是提供一个 5-10k 的通用库、下载并快速执行、有一套大家熟悉且稳定的 API， 所以你能把你可以把主要的精力放到应用开发上。Zepto 是一款开源软件，它采用的是对开发者和商业都很友好的开源协议 – MIT license。

#### 6、dialog.js ####

dialog.js 是一款 jQuery 对话框插件，全局弹出提示插件。

#### 7、AmazeUI 框架 ####

AmazeUI，妹子UI，中国首个开源 HTML5 跨屏前端框架。

#### 8、EasyUI 框架 ####

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。  
easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。  
使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。  
easyui是个完美支持HTML5网页的完整框架。  
easyui节省您网页开发的时间和规模。  
easyui很简单但功能强大的。

#### 9、css ####

$('#title').css('display', 'none');

#### 10、prepend 和 append ####

prepend() 方法在被选元素的开头（仍位于内部）插入指定内容。

$('#title').prepend("统计");

append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

$("#title").append("表格");

#### 11、要素查询 ####

var layer = new FeatureLayer({ 
    	url: mapUrl
    })
    var query = layer.createQuery();
    query.returnGeometry = true;
    query.outFields = ["*"];
    query.where = "pac = '" + xzqdm + "'";
    query.distance = 5;
    layer.queryFeatures(query).then({ });

#### 12、快照 ####

view.takeScreenshot(options).then({ });

#### 13、目录树 ####

#### 14、dojo 中的 all ####

require([
    	"dojo/dom",
    	"dojo/promise/all",
    	"dojo/domReady!"
    ], function(
    	dom,
    	All
    ) { 
    	All(mapPromiseObj).then(function(viewObj){ 
    		var mapObjPre = Object.getOwnPropertyNames(viewObj)
    		mapObjPre.forEach(function(obj) { 
    			views.push(viewsObj[obj]);
    			console.log(views[0])
    		});
    		views[0].when(function(){ 
    			changeView(xzqdm, views[0]);		// 选择不同地区时跳转到对应的区域
    		})
    	});
    })

#### 15、登录组件封装 ####

###### HTML 部分： ######

###### JavaScript 部分： ######

$("#js-btn-login").click(function() { 
    	var username = $("#username").val();
    	var password = $("#password").val();
    	if(username == null || username == ""){ 
    		alert("请输入用户名！");
    		return false;
    	}
    	if(password == null || password == "") { 
    		alert("请输入登录密码！");
    		return false;
    	}
    
    	var popupLoad = popup({  type: 'load', msg: "请等待", delay: null });
    	$.ajax({ 
    		url: basePath + '/plogin/login',
    		type: 'post',
    		dataType: 'json',
    		timeout: 10000,
    		data: { 
    			user_name: username,
    			password: password,
    			time: Math.random()
    		},
    		success: function(data) { 
    			popupLoad.close();
    			if(data && data.res_code === '00000') { 
    				var third_party_addr = GetUrlParamUnzip("third_party_addr");
    				if(third_party_addr != null && third_party_addr != ""){ 
    					var userInfo = getSessionInfo();
    					var para = "user_name" + username + "&password=" + userInfo.password + "&platform_type=1";
    					var baseUrl = zip(para);
    					location.href = third_party_addr + "?" + baseUrl;
    				} else { 
    					location.href = './index.html';
    				}
    			} else { 
    				popup({ 
    					type: 'error', msg: "操作失败", delay: 1000, callBack: function() { 
    						location.href = './error.html';
    					}
    				})
    			}
    		},
    		error: function() { 
    			popupLoad.close();
    			popup({  type: 'error', msg: "操作失败", delay: 1500});
    		}
    	});
    })

#### 16、axios 以 form-data 形式传递参数 ####

安装 axios：

npm install axios --save

安装 qs：

npm install qs

## axios/index.js
    
    import axios from 'axios'
    import qs from 'qs'
    
    axios.defaults.baseURL = ""
    axios.defaults.timeout = 10000;
    axios.defaults.headers.post['Content-Type'] = 'application/json';
    axios.defaults.headers.put['Content-Type'] = 'application/json';
    
    axios.interceptors.request.use(
        config => { 
            const token = localStorage.getItem("token")
            if (token) { 
                config.headers.Authorization = 'JWT ' + token
            }
            return config;
        },
        error => { 
            return Promise.error(error);
        })
    
    axios.interceptors.response.use(
        res => res.status === 200 || res.status === 204 || res.status === 202 ? Promise.resolve(res) : Promise.reject(res),
        error => { 
            if (error.response) { 
                if (error.response.status === 401) { 
                    // 跳转不可以使用this.$router.push方法、
                    // this.$router.push({path:'/login'})
                    window.location.href = "http://127.0.0.1:8080/"
                } else { 
                    // errorHandle(response.status, response.data.message);
                    return Promise.reject(error.response);
                }
            } else { 
    
                return Promise.reject(error.response);
            }
        });
    
    
    export function axios_get(url, params) { 
        return new Promise(
            (resolve, reject) => { 
                axios.get(url, { params: params})
                    .then(res => { 
                        resolve(res.data)
                    }).catch(err => { 
                    reject(err)
                })
            }
        )
    }
    
    export function axios_post(url, data) { 
        return new Promise(
            (resolve, reject) => { 
                axios.post(url, JSON.stringify(data))
                    .then(res => { 
                        resolve(res.data)
                    }).catch(err => { 
                    reject(err)
                })
            }
        )
    }
    
    export function axios_post_form_data(url, data) { 
        return new Promise(
            (resolve, reject) => { 
                axios.post(url, qs.stringify(data), { headers: { 'Content-Type': 'application/x-www-form-urlencoded'}})
                    .then(res => { 
                        resolve(res.data)
                    }).catch(err => { 
                    reject(err.data)
                })
            }
        )
    }
    
    export function axios_put(url, data) { 
        return new Promise(
            (resolve, reject) => { 
                axios.put(url, JSON.stringify(data))
                    .then(res => { 
                        resolve(res.data)
                    }).catch(err => { 
                    reject(err.data)
                })
            }
        )
    }
    
    export function axios_delete(url, data) { 
        return new Promise(
            (resolve, reject) => { 
                axios.delete(url, { params: data})
                    .then(res => { 
                        resolve(res)
                    }).catch(err => { 
                    reject(err)
                })
            }
        )
    }

## axios/api.js
    
    import {  axios_post_form_data } from './index.js'
    
    export const postRestServices = (params, headers) => axios_post_form_data("url", params, headers)

## components/Map.vue
    
    <script> import { postRestServices } from '../axios/api' export default { name: "Map", data() { return { } }, methods: { fetchData(){ postRestServices({ data:JSON.stringify({ "showprops": true, "props": [{ "code": "servicetype", "value": "xq", "exists": true}]}),p: "{n: 10}"}) .then(res => { console.log(res); }) .catch(error => { console.log(error); }) } } } </script>

#### 17、行政区划组件 ####

Vue 行政区划组件：v-region，组件官网：https://terryz.gitee.io/vue/\#/region/demo

#### 18、报错记录 ####

WebStorm 搭建 Node.js 项目时，报错：unresolved function or method require()，或者报错：unresolved variable or type \_dirname，解决方法为在 WebStorm 中添加 JavaScript Libraries：Node.js Core Modules，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221022/cd47f54807024f04a8478bd621657b7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/82c9d8fffe4a49898522de07839247fb.png