菜13前端的爬坑之旅(11.27)

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'))