1. Vue单页面引入 v-for显示item问题:
scene:在前后端不分离的项目中,引入单页面的Vue,使用v-for渲染时 出现的{{item}} 不能直接使用v-show来判断数据是否存在
reason: 在还没有加载出VueJs之前,页面解析按照浏览器的渲染机制进行解析
method:无数据前使用 层叠样式表(CSS: display:none
) 强制控制数据隐藏 但被渲染的元素 依然要使用 v-show 待到Vue引入之后由 v-show 来接管CSS的控制
2.跨域问题:
scene: Vue单页面 发送Ajax请求 发生跨域 $.ajax发送json数组 需要请求添加请求头
Content-Type:"application/json; charset=utf-8"
记一次 springMVC 接收前端数组对象的爬坑记录a.先说后台,后端使用@RequestBody List
entityList 的形式接收
没什么问题。
b.该次爬坑主要集中在js部分 ajax请求的形式上b1.不能使用$.post形式 因为要指定一些特殊属性 否则会出现 415,406,等各种请求报错的信息
b1.不能使用$.post形式 因为要指定一些特殊属性 否则会出现 415,406,等各种请求报错的信息
可行的实例如下
var objArr = [{'pid': 10, 'name': 'song'}, {'pid': 11, 'name': 'xxx'}]
console.log(objArr.toString())
$.ajax({
contentType: "application/json; charset=utf-8",
type: 'POST',
dataType: "json", //表示返回值类型,不必须
data: JSON.stringify(objArr),
url: '/temp/requestList',
success: function () {
}
});
-- RequestBody 注解可用于接收 contentType为 application/json的请求
-- contentType 默认值并不是 application/json
故需要显示指定
-- type 为必须指定的 默认为 get
-- dataType 不需要特殊指定
-- data 需要JSON stringify() 一下. 该方法返回字符串类型,不经过该方法 向后台发送的是 一些奇怪的东西
本例中为 song=&xxx=
2.参考文章链接: https://blog.csdn.net/wabiaoz...
3.ajax参数介绍
http://www.w3school.com.cn/jq...4.最后补刀:如果参数json中包含日期, 将其格式写为 'yyyy-mm-dd' 的形式 不要加 时分秒之类的;
后发现 配置后台 Access-Control-Allow-Origin:*
依旧不能获取数据 经一番查找 后发现 CORS 若不配置 就不接收 设置过Content-Type
的添加完整代码后 跨域解决
res.header('Access-Control-Allow-Origin','*');
res.header('Access-Control-Allow-Methods','GET,POST,PUT,DELETE,PATCH');
res.header('Access-Control-Allow-Headers','Origin,X-Requested-With,Content-Type,Accept,Authorization');
注意:在本地开发时 后台可配置 若部署线上建议去掉
3.Vue Computed 计算属性 缓存
scene:意外收获 使用自制三项数据绑定(滑稽:根据三项之力改的名字) 读取该数据时 因为初始化改数值 导致计算属性的值 读取为0
guess: 每次读取该属性 调用该值初始化
method:
getNumSum: {
//cache:false,
get :function(){
let getNumSum = 0;
for (let i=0;i< this.a1Num.length;i++){
getNumSum += (this.a1Num[i].selfAssessScore * this.a1Num[i].weight)
}
return getNumSum;
}
应该是没多大用 当做一个知识点吧 cache属性可以配置computed是否缓存
Vue单页面引用函数传值问题
@click 传Vue中的值不再是this.XXX 而是
外套一层该组件(此为:app)
Vue v-for中 v-model控制值
v-model = "item.titleName == '总分'? getNumSum : a1[index].selfAssessScore"
idea中一些前端技巧
idea 是一款前端比较少用的编辑器 但是不能否认他的强大
下载插件VueJs.jar
数组方法排序
function compare(property){
return function(a,b){
var value1 = a[property];
var value2 = b[property];
if(ArrsortFlag == true){
return value2 - value1; //倒序 value1-value2 正序
}else{
return value1 - value2;
}
}
}
this.a1 = this.a1.sort(compare('selfAssessScore'))