我又回来
百度坐标转换为Gps
新年记录第一弹
1 | var tools = {} |
ajax ie9请求不到的问题
项目在ie9上，ajax请求总是走到error的回调，调试发现根本就没有走到请求
经过调试发现，是因为浏览器的限制导致不能访问，这里也是上网查阅了很多资料
原文https://www.cnblogs.com/lxy1023-/p/9679326.html
而且如果是ie9 引入了 jquery.xdomainrequest.min.js 将ajax的请求转化为url请求
同时设置了：
async:true,
crossDomain:true,
cache:false
为了防止ie浏览器的缓存 同时对url加上了 时间戳 :’&’+new Date().getTime()
测试后发现还没有起作用，后来发现需要 加上dataType:json 的配置项
IE对于datatype是非常严格的，楼主在一顿操作之后发现还是不行，结果是datatype的问题。
原文https://www.jianshu.com/p/a45fdd0a5a56
ios移动端禁止inpput弹出键盘
1 | onclick 或者 onfocus |
前端技术汇总he
本文汇总整理了自己用到的一些基础css，可用作基础的base.css引用到项目中
前端技术汇总
由于前端相对后端框架、插件库更加的多样化，以及不同项目ui设计稿的多样性，定制化开发的各种需求，前端项目很难做到都是用统一的框架，所以此文档更多的是对以后项目进行总结已供参考。
本文档主要作用：
- 整理目前技术中心前端项目中所用的技术
- 目前前端项目中所用到的第三方插件库汇总
- 通过此文档对现有前端项目进行一个初步了解
- 对以后前端项目选型的参考
[TOC]
##一、项目概览
此文档将项目分类成为 门户类 和 后管类 。
1. 门户类
门户类项目中门户网站的排版非常重要。信息的呈现方式以及门户页面的样式不同不仅会影响到信息的浏览量，也会影响到用户体验。
目前的门户类项目大致如下：
- 信用江苏 http://www.jscredit.gov.cn/
- 淄川可视化 待补充地址
- 长春新区统一门户 http://39.104.101.87:8080/cc_portal
- 广州公租房（诚壹宜居pc 公众号）https://www.c1yj.com/
2. 后管类
后台管理系统最大的作用就是对用户业务的支撑，大多数以表格、图标为主。界面样式大多不会复杂，要求统一、简洁。
目前的后管项目大致如下：
- pass后台管理系统
- 长春新区门户后台管理系统
- 待补充
##二、技术概览
1. 门户类
门户类前端的技术栈现基于es5、jQuery、template.js、axios、flex、rem、bootstrap、layui等，部分前后端未分离的项目使用了freemarker模板。你的本地环境需要视项目情况安装node或者tomcat,以及对应的版本控制工具。
1.1、可视化大屏门户：
该门户大多需要兼容大屏以及响应式。
1.2、政府类、企业类、个人门户：
技术栈基于html+css+js，数据渲染使用了jquery、template.js、freemarker，前端请求使用ajax或者axios库，布局使用bootstrap-ui以及layui弹窗提示。
1.3、公众号
公众号主要采取rem的方式进行适配，css布局中也会使用到flex布局，以及WEUI的插件使用。其中数据交互以及逻辑代码为js原生或者jquery。
rem适配：
function rem() {
var psd_width = 设计稿宽度,
win_width = document.documentElement.clientWidth,
viewport = document.querySelector('meta[name="viewport"]'),
dpr = window.devicePixelRatio || 1,
scale = 1 / dpr,
rem;
var style = document.createElement('style');
rem = win_width / psd_width * 100;
style.innerHTML = "html{font-size:" + rem + "px!important;}";
document.querySelector("head").appendChild(style);
}
2. 后管类
后管平台现在大多是基于vue-cli，去进行二次开发。你的本地环境需要安装 node 和 git。我们的技术栈基于 ES2015+、vue、vuex、vue-router 以及 element-ui，bootstrap,layui，echarts,所有的请求数据都使用Mock.js模拟，axios进行接口交互，提前了解和学习这些知识会对使用本项目有很大的帮助。
##三、插件总结
这里列出一些使用过的插件，当然如果你有更多更方便的插件请你继续使用。
1.1、布局：
1.1.1、flex布局
多用于大屏以及移动端布局,是一种自适应的弹性布局。Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.box{display: flex;}
行内元素也可以使用 Flex 布局。
.box{display: inline-flex;}
Webkit 内核的浏览器，必须加上-webkit前缀。
.box{
display: -webkit-flex; /* Safari */
display: flex;
}
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
flex容器的6个属性：
- flex-direction 属性决定主轴的方向（即项目的排列方向）
- flex-wrap flex-wrap属性定义，如果一条轴线排不下，如何换行
- flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
- justify-content 属性定义了项目在主轴上的对齐方式
- align-items 属性定义项目在交叉轴上如何对齐。
- align-content 属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex布局详细用法 Flex 布局教程：语法篇
1.1.2、栅格布局
项目中多使用bootstrap-ui,element-ui自带的栅格布局，也能满足响应式以及自适应的布局需求。
- bootstrap栅格布局 bootstrap栅格系统
- element栅格布局 element栅格系统
1.2、表格：
1.2.1、element表格
1.2.2、原生表格
1.3、时间选择器：
1.4、弹窗：
1.5、图表：
1.6、穿梭框：
1.7、上传：
1.7.1、element中的上传
后管项目中一般使用的都是基于elementui的上传组件。 upload上传
1.7.2、weui中的上传
此上传用于移动端实例 带lzr压缩的上传
注：不同版本可能插件的使用方法会有不同
附：带lzr压缩的移动端weui上传code
<!--uparea -->
//同时需要引入对应的weui.css
<div class="upload_op_area">
<div class="weui-gallery" id="gallery">
<span class="weui-gallery__img" id="galleryImg"></span>
<div class="weui-gallery__opr">
<a href="javascript:" class="weui-gallery__del">
<i class="weui-icon-delete weui-icon_gallery-delete"></i>
</a>
</div>
</div>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
</ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*"><!--去除可以一次多张不然压缩可能会卡死-->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
//引入js
<script src="/static/wechat/js/frame/compressImg/lrz.bundle.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
//上传图片mock
$('.uplaod_tab div').on('click', function () {
$(this).addClass('selected')
$(this).siblings().removeClass('selected')
});
var tmpl = '<li class="weui-uploader__file pr" style="background-image:url(#url#)"><div class="type"><span></span></div></li>',
$gallery = $("#gallery"),
$galleryImg = $("#galleryImg"),
$uploaderInput = $("#uploaderInput"),
$uploaderFiles = $("#uploaderFiles"),
count = 0,
oldCode = '',
formData = new FormData();
var mainPc = 0;
$uploaderInput.on("change", function (e) {
var src, url = window.URL || window.webkitURL || window.mozURL,
files = e.target.files;
if (mainPc > 0 && $('.uplaod_tab .selected').attr('code') == 'mainpic') {
$.alert('只能上传1张封面图');
stopScroll($('.weui-mask'));
$uploaderInput.val('')
return false;
}
if (count >= 12 || files.length > 12) {
$.alert('最多上传12张图片');
stopScroll($('.weui-mask'))
return false;
}
var isOver = false;
$.showLoading('图片处理中请稍等~')
for (var i = 0, len = files.length; i < len; ++i) {
var file = files[i];
var fileName = file.name;
lrz(file)
.then(function (rst) {
$.hideLoading()
console.log('压缩后：' + rst.fileLen)
file = rst.file;
imgWrapList.forEach(function (item, index) {
if (file.size == item.size && file.name == item.name) {
isOver = true
$.alert('图片重复', function () {
isOver = false
$("#uploaderInput").val('')
});
stopScroll($('.weui-mask'))
return false;
}
})
if (isOver) {
return
}
if (file.size > 10 * 1024 * 1024) {
$.alert('请上传不超过10M的图片');
stopScroll($('.weui-mask'))
return false;
}
if(fileName){
file.name=fileName;
}
transformFileToFormData(file)
if (url) {
src = url.createObjectURL(file);
} else {
src = e.target.result;
}
count++;
var str = '';
var tmpl1 = (tmpl.split('<span>')[0] + '<span>' + str + tmpl.split('<span>')[1])
$uploaderFiles.append($(tmpl1.replace('#url#', src)));
//$(tmpl).find('.type').find('span').text(str)
$.ajax({
timeout: 30000,
type: "POST",
url:,
data: formData,
beforeSend: function () {
$.showLoading('图片上传中...')
},
contentType: false, // 注意这里应设为false
processData: false, // 告诉jquery不要处理发送的数据
success: function (res) {
if (res.code === 200) {
if (!oldCode) {
var code = $('.uplaod_tab .selected').attr('code');
oldCode = code
roomPictypes += code //图片所属的类型
roomPics += res.data.name
} else {
var code = $('.uplaod_tab .selected').attr('code');
if (oldCode != code) {
if (roomPictypes.indexOf(code) < 0) {
oldCode = code
roomPictypes += (',' + code)
roomPics += (';' + res.data.name)
} else {
var index = roomPictypes.replace(',', '').indexOf(code)
var tempArr = roomPics.split(';')
var str = tempArr[index]
str += (',' + res.data.name)
tempArr[index] = str
roomPics = tempArr.join(';')
}
} else {
roomPics += (',' + res.data.name)
}
}
}
},
complete: function () {
$("#uploaderInput").val('');
formData.delete('type');
// size
formData.delete('size');
// name
formData.delete('name');
// lastModifiedDate
formData.delete('lastModifiedDate');
// append 文件
formData.delete('file');
$.hideLoading();
},
error: function (error) {
delHandle($uploaderFiles.length - 1)
$.alert('图片上传失败，请重试');
}//请求出错
});
})
}
});
var index; //第几张图片
$uploaderFiles.on("click", "li", function () {
index = $(this).index();
$galleryImg.attr("style", this.getAttribute("style"));
$gallery.fadeIn(100);
});
1.7.3、tinyUpload
引入文件
<script src="../../js/jquery.js"></script>
<link rel="stylesheet" href="../../css/tinyImgUpload.css">
<script src="../../js/tinyImgUpload.js"></script>
`/**
* tinyImgUpload
* @param ele [string] [生成组件的元素的选择器]
* @param options [Object] [对组件设置的基本参数]
* options具体参数如下
* path 图片上传的地址路径 必需
* onSuccess(res) 文件上传成功后的回调 参数为返回的文本 必需
* onFailure(res) 文件上传失败后的回调 参数为返回的文本 必需
* @return [function] [执行图片上传的函数]
* 调用方法
* tinyImgUpload('div', options)
*/
function tinyImgUpload(ele, options) {
// 判断容器元素合理性并且添加基础元素
var eleList = document.querySelectorAll(ele);
if(eleList.length == 0){
console.log('绑定的元素不存在');
return;
}else if(eleList.length>1){
console.log('请绑定唯一元素');
return;
}else {
eleList[0].innerHTML ='<div id="img-container" >'+
'<div class="img-up-add img-item"><div class="up_title">上传电脑图片</div><span class="img-add-icon"><img src="../../img/add_img_icon.png" alt="" width="64px"></span> </div>'+
'<div class="prev_area">'+
'<input type="file" name="files" id="img-file-input" multiple ">'+
'</div>';
var ele = eleList[0].querySelector('#img-container');
ele.files = []; // 当前上传的文件数组
}
// 为添加按钮绑定点击事件，设置选择图片的功能
var addBtn = document.querySelector('.img-up-add');
addBtn.addEventListener('click',function () {
document.querySelector('#img-file-input').value = null;
document.querySelector('#img-file-input').click();
return false;
},false)
// 预览图片
//处理input选择的图片
function handleFileSelect(evt) {
var files = evt.target.files;
for(var i=0, f; f=files[i];i++){
// 过滤掉非图片类型文件
if(!f.type.match('image.*')){
continue;
}
// 过滤掉重复上传的图片
var tip = false;
for(var j=0; j<(ele.files).length; j++){
if((ele.files)[j].name == f.name){
layer.alert('图片已存在')
tip = true;
break;
}
}
if(!tip){
// 图片文件绑定到容器元素上
if(ele.files.length>=12){
layer.alert('最多12张');
return false
}
ele.files.push(f);
var reader = new FileReader();
reader.onload = (function (theFile) {
return function (e) {
var oDiv = document.createElement('div');
oDiv.className = 'img-thumb img-item border_all';
// 向图片容器里添加元素
oDiv.innerHTML = '<img class="thumb-icon" src="'+e.target.result+'" />'+
'<a href="javscript:;" class="img-remove">x</a>'
ele.insertBefore(oDiv, addBtn);
// $('.prev_area').append(oDiv)
uploadImg()
};
})(f);
reader.readAsDataURL(f);
}
}
}
document.querySelector('#img-file-input').addEventListener('change', handleFileSelect, false);
// 删除图片
function removeImg(evt) {
if(evt.target.className.match(/img-remove/)){
console.log('3',ele.files);
// 获取删除的节点的索引
function getIndex(ele){
if(ele && ele.nodeType && ele.nodeType == 1) {
var oParent = ele.parentNode;
var oChilds = oParent.children;
for(var i = 0; i < oChilds.length; i++){
if(oChilds[i] == ele)
return i;
}
}else {
return -1;
}
}
// 根据索引删除指定的文件对象
var index = getIndex(evt.target.parentNode);
ele.removeChild(evt.target.parentNode);
if(index < 0){
return;
}else {
ele.files.splice(index, 1);
//对应删除库里的图片？
}
console.log('4',ele.files);
}
}
ele.addEventListener('click', removeImg, false);
// 上传图片
function uploadImg() {
console.log(ele.files);
var xhr = new XMLHttpRequest();
var formData = new FormData();
for(var i=0, f; f=ele.files[i]; i++){
formData.append('files', f);
}
console.log('1',ele.files);
console.log('2',formData);
$.ajax(
{
type:"POST",//通常会用到两种：GET,POST。默认是：GET
url:options.path,//(默认: 当前页地址) 发送请求的地址
beforeSend:function () {
},
data:formData,
contentType: false, // 注意这里应设为false
processData:false, // 告诉jquery不要处理发送的数据
success:options.onSuccess, //请求成功
error:options.onFailure,//请求出错
complete:function () {
$('#img-file-input').val('')
}//请求完成
});
}
return uploadImg;
}`
1.8、分页：
1.8.1、移动端分页
mescroll连接
移动端分页目前采用第三方插件库mescroll.js （也可使用其他第三方插件比如iscroll）
1.8.2、pc端分页
pc端分页目前采用第三方插件库laypage、kkpager、element-ui分页等
1.9、轮播：
1.9.1、swiper轮播组件
第三方的轮播组件swiperswiper使用文档
1.9.2、bootstrap轮播
bootstrap carousel bootstrap轮播
1.9.3、其他轮播插件
基础样式
本文汇总整理了自己用到的一些基础css，可用作基础的base.css引用到项目中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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
font-family: 微软雅黑 !important;
}
a {
text-decoration: none;
}
.pr {
position: relative;
}
.pa {
position: absolute;
}
.fixed {
position: fixed;
}
.fl {
float: left;
}
.fr {
float: right;
}
ul li {
list-style: none;
}
.clearfix {
zoom: 1;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.pointer {
cursor: pointer;
}
/*滚动条样式*/
::-webkit-scrollbar { /*滚动条整体样式*/
width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
height: 5px;
}
::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(42, 41, 59, 0.2);
background: rgba(42, 41, 59, 0.2);
}
::-webkit-scrollbar-track { /*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, 0.2);
border-radius: 0;
background: rgba(250, 255, 255, 0.1);
}
/*移动端1px像素*/
.border_all, .border_bottom, .border_top, .border_left, .border_right {
position: relative;
}
.border_all:before {
content: "";
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
position: absolute;
width: 200%;
height: 200%;
left: 0;
top: 0;
/*border-radius: 0.8rem;
-webkit-border-radius: 0.8rem;
-moz-border-radius: 0.8rem;*/
border: 1px solid #D8D8D8;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
transform: scale(0.5);
transform-origin: 0 0;
}
.border_bottom:before {
content: "";
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
position: absolute;
width: 100%;
height: 0;
left: 0;
bottom: 0px;
/*border-radius: 0.8rem;
-webkit-border-radius: 0.8rem;
-moz-border-radius: 0.8rem;*/
-webkit-transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
-moz-transform: scaleY(0.5);
-moz-transform-origin: 0 0;
transform: scaleY(0.5);
transform-origin: 0 0;
border-top: 1px solid #D8D8D8;
}
.border_top:before {
content: "";
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
position: absolute;
width: 100%;
height: 1px;
left: 0;
top: 0;
/*border-radius: 0.8rem;
-webkit-border-radius: 0.8rem;
-moz-border-radius: 0.8rem;*/
-webkit-transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
-moz-transform: scaleY(0.5);
-moz-transform-origin: 0 0;
transform: scaleY(0.5);
transform-origin: 0 0;
border-bottom: 1px solid #D8D8D8;
}
.border_left:before {
content: "";
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
position: absolute;
width: 1px;
height: 100%;
left: 0;
top: 0;
/*border-radius: 0.8rem;
-webkit-border-radius: 0.8rem;
-moz-border-radius: 0.8rem;*/
-webkit-transform: scaleX(0.5);
-webkit-transform-origin: 0 0;
-moz-transform: scaleX(0.5);
-moz-transform-origin: 0 0;
transform: scaleX(0.5);
transform-origin: 0 0;
border-right: 1px solid #D8D8D8;;
}
.border_right:before {
content: "";
pointer-events: none; /* 防止点击触发 */
box-sizing: border-box;
position: absolute;
width: 1px;
height: 100%;
right: 0;
top: 0;
/*border-radius: 0.8rem;
-webkit-border-radius: 0.8rem;
-moz-border-radius: 0.8rem;*/
-webkit-transform: scaleX(0.5);
-webkit-transform-origin: 0 0;
-moz-transform: scaleX(0.5);
-moz-transform-origin: 0 0;
transform: scaleX(0.5);
transform-origin: 0 0;
border-left: 1px solid #D8D8D8;;
}
/*
输入框placeholder*/
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
color:rgba(0,0,0,.4);
}
input::-moz-placeholder,textarea::-moz-placeholder{ /* Mozilla Firefox 19+ */
color:rgba(0,0,0,.4);
}
input:-moz-placeholder,textarea::-moz-placeholder{ /* Mozilla Firefox 4 to 18 */
color:rgba(0,0,0,.4);
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder{ /* Internet Explorer 10-11 */
color:rgba(0,0,0,.4);
}
/*禁止复制*/
.no_copy{
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
/*禁止选中*/
.no_selected{
-moz-user-select:none; /*火狐*/
-webkit-user-select:none; /*webkit浏览器*/
-ms-user-select:none; /*IE10*/
-khtml-user-select:none; /*早期浏览器*/
user-select:none;
}
/*移动禁止选中 copy*/
.no_touch {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
hexo迁移
-这不是前几天电脑坏了 用了自己的电脑后就想把自己的blog文件整个copy到新电脑，结果cv大法后，安装了hexo后报错了
结果是node的版本太低了 于是顺便升级了一下 node和npm：
升级npm:npm install npm@latest -g
升级node:官网下载你想要的版本覆盖
ps：11-11 我的生成的public的文件夹的css/main.css是个空文件，一开始考虑packpage.json的版本问题 后来发现修改后不管用 直接 hexo clean 然后重新生成-.-
ps:最近想新增一下 leetcode 的记录
Hexo next下自定壹鼠标样式
打开themes\next\source\css_custom\custom.styl文件，添加如下代码：
1 | * { |
其实就是 写css了 图片地址记得使用外链的哦 本地应该也可以注意路径我没试过 （我的图片是从别人网站扒的哈哈）
Hexo next下点击爱心效果
上来先贴一个原文链接
原文https://asdfv1929.github.io/2018/01/26/click-love/
创建js文件
在/themes/next/source/js/src下新建文件 clicklove.js ，接着把该链接下的代码拷贝粘贴到 clicklove.js 文件中。
代码如下：1
!function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
修改_layout.swig
在\themes\next\layout_layout.swig文件末尾添加js引用就好了
请求设置formdata形式
项目里的登录接口，再postman中已form-data形式和params都可以调通，之前是已params形式但是参数都显示再了url里会有安全问题，
新增了form-data的格式，所以前端也要调整为formdata模式，用的axios具体的上代码了:
主要是设置了请求头以及 formdata对象的append 这里做一个记录
1 | export function loginByUsername(user, password) { |