菜单

【澳门太阳集团】js_脚本之家,代码规范

2020年4月5日 - 新闻中心
【澳门太阳集团】js_脚本之家,代码规范

澳门太阳集团,一:freeMarker的使用

这几天一直在做项目,没有总结,这样很不好!
总结一下,这几天遇到的问题,还有各个知识点。

1:java后台使用freeMarker是通过Model,将值传给前端:

js中的加号

js中加号不仅代表相加还表示字符串拼接
当加号一边是字符串的时候,实际上两侧都转换成为了字符串。

"1"+1="11"

这就是javascript中的隐式类型转换的一种

@Controllerpublic class MobileNewsFreeMarkerController { @RequestMapping public String Test(Model model,HttpServletRequest request){ //获取项目路径 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+""+request.getContextPath()+"/"; //将页面路径通过model传给前台 model.addAttribute; //通过HttpServletRequest 获取url中的值,如code值 String code = request.getParameter; //将获取的code参数传给前台 model.addAttribute; //页面跳转 return "page/test"; }}

隐式类型转换

JavaScript中的数据类型有null,undefined,string,number,Object,boolean。object是引用类型,其他五个是基本类型。

【澳门太阳集团】js_脚本之家,代码规范。类型转换例子
基本类型

console.log(null==undefined)//true
console.log("3"==3);//true,将字符串"3"转换成数字,然后再进行比较。
console.log("1"==true);//false,分别将"1"和true转换成数字,然后进行比较。

引用类型
两个重要的方法

澳门太阳集团 1

toString()和valueOf()

通常情况下我们认为,将一个对象转换为字符串要调用toString()方法,转换为数字要调用valueOf()方法,但是真正应用的时候并没有这么简单。

2:前端页面获取后台传输的值(freeMarker传输的值只能在html页面获取)

webview的传值跨页面的时候能不能不一直传?

注:这里是结合vue

mui框架实现页面传值

第一步:在js中定义vue的相关参数:

页面初始化时候,通过扩展参数传值

下面几个场景会执行初始化

mui.openWindow({
    url:'info.html',
    id:'info.html',
    extras:{
        name:'mui',
        version:'0.5.8'
    }
});

关于页面实现代码:

var self = plus.webview.currentWebview();
var name = self.name;
var version = self.version;
var vm = new Vue({ el: '#rrapp', data: { basePath:"", //项目路径 code : "", // code参数 },..........

fire传值

第一步:要有目标页面

  var roadLinePage = plus.webview.getWebviewById('choose_car.html');

//取得父页面
var parentWebview = plus.webview.currentWebview().opener(); // 获取父窗口webview

第二步:要有自定义事件 其中getQcCity就是事件

  mui.fire(roadLinePage,'getQcCity',{  
                    qcCityName:cityName,  
                    qcCityId:cityId  
                  });  


//通过mui.fire()方法可触发目标窗口的自定义事件
mui.fire(parentWebview, "finishSelect", {
    responseObj: responseObj,
    currentMaterial:currentMaterial,
    reqDetailId:currentMaterial.id
});

第三部:要在目标页面监听事件getQcCity

  window.addEventListener('getQcCity',function(event){  
            //获得事件参数  
            var id = event.detail.qcCityId;//获取传过来的值  
            document.getElementById("qcCity_").value=id;  
            console.log("取车城市"+id);  
            freshCarTable();//要执行的函数  
            });  


window.addEventListener('finishSelect', function (e) {  //获取参数值
            var responseObj = e.detail.responseObj;//注意这里的书写
    });

其他方法:
父页面在跳转的时候,链接带上参数

url:"sekffhdhh.html?"+eid

子页面获取参数

var href = location.href;
var eid = href.split("?")[1];

本地存储

localStorage.setItem(name,JSON.stringify(value))

var obj = localStorage.getItem(name);

第二步:再在页面接收后台传输的值

vue中为data中的属性设置新的字段

Vue.set(idleList[i], 'hadNum', 0);
eqList.$set(eqList[i], 'hadNum', 0);

原因:受到es5的限制,vue.js检测不到对象属性的添加或者删除。因为vue.js在初始化实例的时候将属性转换成getter/setter,所以属性必须在data对象上才能让
vue.js转换它,才能让它是响应的。

解决方法:
对于vue实例,可以使用$set(key,value)实例方法
key也支持test.name的写法

this.$set("test00",2222)//test00:2222  
this.$set('test01.name',1222);//test01:{sex:"boy",name:1222}  ok
  $.ready { <#if basePath??> vm.basePath="${basePath}"; </#if> <#if userId??> vm.code ="${code }"; </#if> }); 

合作

1.与后台对接方面,应该谈好数据的格式,了解各个接口!
2.后台提供url是什么?我应该发送给他的参数是什么?
3.项目中注意点,连接同一个局域网(自己开热点)!改掉localhost部分!还有tool.js上做修改!可以在postman上先运行看效果。

二:使用中主要遇到的问题

代码规范

周二开会讲解代码规范事宜,很多也值得自己学习
Web前端代码规范

1:Vue存在调用的先后顺序,虽然html页面将后台传输的值付给vue的data中的参数,但是在mounted中是无法使用的时候获取的还是创建的vue的时候data中赋的值,并不会使用html赋的值:

var vm = new Vue({ el: '#rrapp', data: { basePath: "", code :"", },mounted: function () {var _this = this;console.log;//输出的还是:"",并不会输出html赋的值,所有在这里无法使用}

2:但是在vue中methods内的方法是可以直接使用的;初始化如果需要html中传输的参数,可以使用以下方法:

$ { vm.getData;});var vm = new Vue({ el: '#rrapp', data: { basePath: "", code :"", },methods: { getData: function  { var _this=this; _this.basePath= baseUrlFlag; _this.code =codeFlag; //进行初始化业务操作! },}

总结

以上所述是小编给大家介绍的后台使用freeMarker和前端使用vue的方法及遇到的问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图