日常学习记录（不定期更）

模块化的出现

传统的js中有大量的业务会放入一个js文件中进行封装，以及大量的mvc出现导致我们模块没有按照模块划分，是开发难度加大，可读性差，同时不利于团队间协同开发

vue核心思想

数据驱动

组件化

vue框架和react框架对比

vue

模版和渲染函数的弹性选择
简单的语法和项目创建
更快的渲染和更小的提及

react

更适用于大型应用和更多的可测试性
同时用于web端和pc端原声app
更加生态的圈带来更多支持和工具

相同点

利用虚拟dom实现快速渲染
轻量级
服务端渲染
易于集成路由的工具，打包工具以及状态管理工具
优秀的支持和社区

路由

之前的路由是有服务端劫持将完成的内容返回给我们前端路由是我们根据不同的url匹配相应的页面展示一般在但页面应用的时候使用前端路由，大部分页面结构不变，只修改部分内容的时候使用

优点

用户体验好，不需要每次从服务端请求，快速展示给用户

缺点

不利于seo

动态路由

path: '/index/:indexId', 获取内容：$route.params.indexId

嵌套路由

在路由下添加自路由

命名路由

在标签上添加 <router-link :to="{name:"helloWorld" }">

编程式路由

用于js中，使用

this.$router.push({path:'list'})
this.$router.push("list")
this.$router.push({path:'list?id=123'})
this.$router.push({path:'list',query:{id:123}})
this.$router.go()

第6章商品列表模块实现

图片懒加载

vue-lazyload

第7章 Node.js基础

node的特点

基于chorem的 v8引擎

基于v8。可以扩展性的高性能服务器，在处理高并发上有优势，和c语言在性能上不相上下
单线程
common.js规范
- 导出
  - 默认导出
    
    module.exports 类似es6 中的 export default
  - 直接导出
    
    exports.a = 123 ES6中： expert let a=123
- 导入
  
  var modA = require( "./foo" ); es6 import
使用js开发后段代码
非阻塞IO

7-2 创建http Server容器

http
- http.createServer
  
  创建server后，客户端就可以访问了，可以创建静态服务
- http.ClientRequest
URL
- url.format
- url.parse
  
  将地址序列化
Util
- util.inspect
  
  将对象转为字符串

7-3 通过node加载静态页面

// 创建服务
let server = http.createServer((req, res) => {
    // 拿到请求文件路径
    let pathName = url.parse(req.url).pathname
    // 读取文件进行渲染
    fs.readFile(pathName.substring(1), (err, data) => {
        if (err) {
            res.writeHead(404, {
                'Content-Type': 'text/html'
            })
        } else {
            res.writeHead(200, {
                'Content-Type': 'text/html'
            })
            res.write(data.toString())
        }
        res.end()
    })
})

调用第三方接口

mongoDB基本用法

集合的增删改查

增：db.user.insert({id:123,name:'hello',age:99})
改：db.user. update({id:123},{$set:{id:456}})
删：db.user.remove({id:123})
查：db.user.find({id:123})
查第一条数据：db.user.findOne({id:23})。如果多个满足,返回查找到的第一个
格式化查找数据：db.user.find({id:123}.pretty()

小于$lt： db.user.find({age:{$lt:100}})
大于$gt：db.user.find({age:{$gt:80}})
大于等于$gte：db.user.find({age:{$gte:99}})
等于$eq：db.user.find({age:{{$eq:99}})
小于等于$lte：db.user.find({age:{$lte:99}})

数据操作

查看数据库：show dbs
创建数据库：use demo
删除数据库：db.dropDatabase()
创建集合：
- 方式1 :db.createCollection("user")；
- 方式2:db.user.insert({id:111,name:'miya'})
查看集合：show collections
删除集合：db.user.drop()

本地倒入数据库命令

mongoimport  -d db-demo(数据库名字)  -c users（集合名字） --file 路径