nodejs(5)-使用EXPRESS+MONGODB+EJS+

##### 功能实现（主要技术点）

1. 登陆注册、登陆信息判断

2. 轮播图 使用服务端渲染的方式，因为轮播部分在用户使用过程中不会出现再次操作数据的情况，初始化的时候显示就可以。 后端接收到请求首页后，获取轮播图数据，然后在渲染ejs，模板的时候将数据载入

```

// node router...

connect_mongo((db)=>{//连接数据库

db.collection('banner').find({}).toArray((err,results)=>{//查找数据

if(err) throw err;

res.render('index', {banners:results});//渲染模板

})

})

// ejs...

<% banners.forEach((item,i)=>{ %>

<% }) %>

  ```

##### ejs模板语法：

1. 所有ejs语句都要用 <% %>来包裹，类似于php中的?php ?

2. 输出内容用 <%= value %>

3. 输出内容需要解析成html，使用 <%- %>,在很多时候，数据库里存储的数据很可能是一个标签格式的字符串，需要使用这种方式来渲染

4. 在一个ejs模板里可以引入另一个ejs模板  <%= include(url) %>

##### 回流和重绘

回流和重绘是在前端开发中浏览器经常出现的一种情况

回流：当我们使用js等方法来动态改变页面中某一个元素的宽高、大小、浮动等等操作的时候（更改了文档流结构的时候）

重绘：当我们使用js等方法来动态改变页面中某一个元素的背景颜色、color等等操作的时候(没有更改大的dom文档结构),

避免回流能visibility：none就不要dispaly：none

##### 数据缓存

当用户来回的在多个页内标签页间切换的时候，会持续的产生数据请求，而请求的数据很可能是和之前请求到的是一样的，所以我们可以做一个缓存机制，当一次获取数据后将获取到的数据存在一个变量、cookie中，每次产生用户操作后都去判断缓存是否存在，如果存在的话就直接使用，否则重新获取并存人缓存，需要注意的是，为缓存做一个生命周期，定期销毁，保证当有新数据的时候也可以请求到。

分类： 手机 1  衣服 2  书 3goods

db.goods.insertMany([{name:"华为7X","price":1820,imgurl:"/images/goods/phone/hw-7x-1820.jpg",classid:1,hot:1658},{name:"华为V8","price":1699,imgurl:"/images/goods/phone/hw-v8-1699.jpg",classid:1,hot:9864},{name:"iphone 8Plus","price":6088,imgurl:"/images/goods/phone/ip-8p-6088.jpg",classid:1,hot:4596},{name:"锤子坚果pro","price":1499,imgurl:"/images/goods/phone/jg-pro-1499.jpg",classid:1,hot:9654},{name:"oppoR11S","price":2999,imgurl:"/images/goods/phone/op-r11-2999.jpg",classid:1,hot:865},{name:"小米note3","price":2099,imgurl:"/images/goods/phone/xm-n3-2099.jpg",classid:1,hot:4986},{name:"白棉袄","price":249,imgurl:"/images/goods/clothes/1.jpg",classid:2,hot:896},{name:"黑棉袄","price":299,imgurl:"/images/goods/clothes/2.jpg",classid:2,hot:1468},{name:"蓝棉袄","price":589,imgurl:"/images/goods/clothes/3.jpg",classid:2,hot:542},{name:"黑夹克","price":199,imgurl:"/images/goods/clothes/4.jpg",classid:2,hot:863},{name:"白T恤","price":99,imgurl:"/images/goods/clothes/5.jpg",classid:2,hot:4561},{name:"颠覆者","price":35,imgurl:"/images/goods/book/dfz.jpg",classid:3,hot:156},{name:"全球通史","price":20,imgurl:"/images/goods/book/qqts.jpg",classid:3,hot:25},{name:"世界简史","price":156,imgurl:"/images/goods/book/sjjs.jpg",classid:3,hot:265},{name:"行为心理学","price":33,imgurl:"/images/goods/book/xwxlx.jpg",classid:3,hot:126},{name:"美术入门","price":155,imgurl:"/images/goods/book/msrm.jpg",classid:3,hot:565}])