20190226杂七杂八

内容区向上滚动时如何让它不遮盖网页头部

我们知道我们可以通过position:fixed来实现网页头部和两侧不随滚动条滚动而滚动，但是我们想要实现的滚动效果是内容区滚动时好像是从头部下面滚上去的，头部没有被遮挡。解决方法就是对头部区域设置z-index属性，该值用来设置堆叠规则。

Unhandled rejection CastError: Cast to ObjectId failed for value "articleList" at path "_id" for model "Note"

这个错误是我使用axios访问后台api时产生的，如下，articlelist是url中的

 app.get('/v1/note/articleList', Note.getList)
复制代码

后来我直接修改了后台api，将上面的url缩短了就问题就没出现了

app.get('/article', Note.getList)
复制代码

箭头函数返回对象字面量时不用使用大括号

若要使用单行箭头函数直接返回一个对象字面量，请使用一个括号包裹改对象字面量，而不是直接使用大括号，否则ES6解析引擎会将其解析为一个多行箭头函数

       const ids = [1, 2, 3];const users = ids.map((id,index) => ({index:index, content: id})) console.log(users)  //[{index: 0,content:1},{index: 1,content:2},{index: 2,content:3}]
复制代码

利用axios与expres后台传递数据的方式

通过req.body(post请求) req.body可能有多种格式，具体由Content-Type决定,而且req.body```位于请求报文的请求实体.解析 body 不是 nodejs 默认提供的，你需要载入 body-parser 中间件才可以使用 req.body
```
 //前台axios.post('/users/login', { user, pwd }).then().catch()//后台router.post('/login',(req,res,next)=>{/*  const {user,pwd} = req.body;*/const user = req.body.user;const pwd = req.body.pwd;})
复制代码
```

通过req.query(get请求) req.query位于请求报文的第一行,它是来获取url中的参数的

//前端，在axios配置params参数使得url中带上了page,pagesize和title三个参数，后台就可以通过req.query获取
axios.get('http://localhost:3000/article',{params:{page,pageSize,title}}).then().catch()
//后端
getList=(req,res,next)=>{//注意不是通过req.params获取，const {page,pageSize=10,title}=req.query;
}
复制代码

通过req.params nodejs默认提供，无需载入其他中间件。例如，如果你有route/user/：name，那么“name”属性可作为req.params.name。req.params包含路由参数（在URL的路径部分），而req.query包含URL的查询参数（在URL的？后的参数）.

// GET /user/tj
req.params.name
// => "tj"
复制代码

TypeError: res.json is not a function

这个错误可以说是一个经常见的错误了，出现的原因就是代码中标识符res有重复的，一般出现的地方是一个（res)签名下又有一个(res)签名，两个函数嵌套关系，比如我遇到这个问题时的错误代码是

    Note.find({},function(err,res){if(err) return res.json({status:1,message:'请求失败'});let all=res.length;Note.find().sort({"date":-1}).skip(((parseInt(page))-1)*parseInt(limit)).limit(parseInt(limit)).exec(function(err,docs){if(err){console.log(err);return res.json({status:1,message:'请求失败'});}/*console.log(docs)*/return res.json({status:0,message:'请求成功',total:all,list:docs})})
})
复制代码

把上面外层的res改成ress即可解决问题

    Note.find({},function(err,ress){if(err) return res.json({status:1,message:'请求失败'});let all=ress.length;Note.find().sort({"date":-1}).skip(((parseInt(page))-1)*parseInt(limit)).limit(parseInt(limit)).exec(function(err,docs){if(err){console.log(err);return res.json({status:1,message:'请求失败'});}/*console.log(docs)*/return res.json({status:0,message:'请求成功',total:all,list:docs})})
})
复制代码

我不知道的React.Fragment

Fragments的比div的好处就是它可以让你聚合一个子元素列表，并且不在DOM中增加额外节点，<></> 是 <React.Fragment/> 的语法糖。

render() {return (<><ChildA /><ChildB /><ChildC /></>);
}
复制代码

这个优点对于我们写组件有很大的帮助，比如本来我们写的是

class Columns extends React.Component {render() {return (<div><td>Hello</td><td>World</td></div>);}
}class Table extends React.Component {render() {return (<table><tr><Columns /></tr></table>);}
}
复制代码

那么上面的Table组件最后的输出如下，这显然会出错

<table><tr><div><td>Hello</td><td>World</td></div></tr>
</table>
复制代码

这时Framents会帮助我们解决这个问题

class Columns extends React.Component {render() {return (<><td>Hello</td><td>World</td></>);}
}
复制代码