2

6月份的时候做过一段时间的vue开发,之后换工作,了解到目前所在的公司是打算使用node来做服务端渲染,当时对node的接触很少,或许可以通过这个项目,可以让我对node有更多的了解,所以就决定接受目前这家公司的offer。在开发过程中遇到了很多问题,在这里做记录备忘。
express + jade + layui

express通过post请求跳转页面

在项目首页,点设置按钮会调转到用户的设置中心页面,刚开始是直接通过更改location.href的路径并且将一些参数拼接到url后面的方式来做页面跳转,但是这样貌似看着不是很好看,所以就决定将跳转的方式改为post的方式,将需要渲染的数据通过post的方式传给express路由,下面上一个小例子:

$.ajax({
    url:userPath+'/menu',
    type:'POST',
    async:false,
    data:{
        menuArr:JSON.stringify(menuArr)
    },
    success:function(res){
        if(res === 'OK'){
            location.href = userPath+'/userinfo-company'
        }
    },
    error:function(error){
        console.log(error);
    }
})
router.post('/menu', function(req, res, next) {
    menuArr = JSON.parse(req.body.menuArr);
    res.send('OK');
    
});

router.get('/userinfo-company', function(req, res, next) {
    subMenuArr = menuArr[0];
    res.render(
        'userInfo/company',
        { 
            title: '企业资料',
            menuArr: menuArr,
            subMenuArr:subMenuArr
        }
    );
});

menu需要从后台请求,通过jade来渲染,所以需要将menu的数组通过post的方式来传递给index路由。

用js给select标签的option选项设置选中状态

做三级联动的时候,需要给的select动态加载option选项,并且需要动态设置默认状态,我当时首先想到的就是

$(".selector").find("option[text='xxx']").attr("selected",true);

但是经过测试这种方法没有起作用,因为[]是attribute选择器,text是property,所以选不到,这里可以用JQuery的

$(".selector").find("option:contains('pxx')").attr("selected",true);

选择器给option设置默认选中状态。

attribute和property的不同

<p>property是DOM中的属性,是JavaScript里的对象,每一个dom节点都是一个对象,这些dom对象有很多属性,例如:clientHeight,className,innerHTML,innerText等;</p>
<p>attribute是HTML标签上的特性(即:标签所特有的属性),它的值只能够是字符串,例如:class,id,value等;</p>
下面一行代码看懂attribute和property:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="box" id='obox' title='divTitle' name='divName'></div>
    <script type="text/javascript">
        var obox = document.getElementById('obox');
        console.dir(obox);
    </script>
</body>
</html>

打印的输出结果如下,同时我们还可以在第四行看到attribute属性


数字字母下划线
368 声望7 粉丝