项目开发遇到的一些问题

2019年9月14日 158次阅读 来源: 数字字母下划线

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属性
《项目开发遇到的一些问题》

    原文作者：数字字母下划线
    原文地址: https://segmentfault.com/a/1190000012877430
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞