Node.js初步学习笔记（一）

Node.js

推荐视频：https://www.bilibili.com/video/BV1Ns411N7HU

each 和 forEach

each

 <ul class="list-group">
      {{each comments}}
    <li class="list-group-item">{{$value.name}}.Say:{{$value.message}}
      <span class="pull-right">{{$value.dateTime}}</span>
    </li>
      {{/each}}
  </ul>

each 是art-template的模板语法，专属的

forEach

是es5中数组遍历函数

CommonJS模块化规范

什么是模块化

1. 文件作用域
2. 通信规则
   • 加载require
   • 导出

---

在Node中的javaScript还有一个很重要的概念：模块系统

1. 模块作用域

2. 使用require方法加载

3. 使用exports接口对象来导出

   • 导出多个（必须在对象中）

     exports.d={
     	foo:'bar'
     }
     
     module.exports = {
     	add:'xxx',
     	bdd:'ccc'
     }
     

   • 导出单个

     module.exports= 'bar
     

   • 以下情况会覆盖

     module.exports= 'bar
     
     module.exports= function(x,y){
     	return x + y
     }
     

     Express

使用框架 可以简便操作

https://www.expressjs.com.cn/

1. 自动修改你传入的回应 发送的是html还是文本

2. //提供静态资源服务
   //这样做就可以直接访问public目录中所有资源
   app.use('/public/',express.static('./public'))
   

   1   npm init
   2   npm install express --save
   

Path路径操作模块

https://www.runoob.com/nodejs/nodejs-path-module.html

Node中的其他成员

在每个模块中，除了require、exports等模块相关API之外，还有两个特使成员

• __dirname可以用来获取当前文件模块所属目录的绝对路径
• __filename可以用来获取当前文件的绝对路径

console.log(__dirname)
console.log(__filename)

在文件中 用相对路径不可靠 在node中文件操作的路径被设计为相对于执行node命令所处的路径

解决代码写完自动重启

第三方工具 nodemon

npm install --global nodemon //全局安装

安装后使用：

nodemon app.js

基本路由

get：

app.get('/',function (req,res) {
    res.send('hello world')
})

post：

app.post('/',function (req,res) {
    res.send('hello world')
})

区别

1. 安全性

2. 对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

   而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

   也就是说，GET只需要汽车跑一趟就把货送到了，而POST得跑两趟，第一趟，先去和服务器打个招呼“嗨，我等下要送一批货来，你们打开门迎接我”，然后再回头把货送过去。

静态资源

//静态资源获取 以/public/ 开头可以到此目录下寻找
 app.use('/public/',express.static('./public'))
//当省略第一个参数时 不用添加 /public就行
app.use(express.static('./public'))

在express中使用art-template模板引擎

https://aui.github.io/art-template/express/官方文档

安装

npm install --save art-template
npm install --save express-art-template

配置

var express = require('express');
var app = express();

// view engine setup
//必须要有
app.engine('art', require('express-art-template'));

app.set('view', {
    debug: process.env.NODE_ENV !== 'production'
});
//希望修改views目录可以替换
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'art');

// routes
app.get('/', function (req, res) {
    res.render('index.art', {
        user: {
            name: 'aui',
            tags: ['art', 'template', 'nodejs']
        }
    });
});

express中获取表单get数据

直接使用

req.query

在express获取表单post数据

需要使用第三方插件 body-parser

安装

npm install --save body-parser

配置

var express = require('express')
var bodyParser = require('body-parser')
 
var app = express()
 
// parse application/x-www-form-urlencoded

//加入次配置 在req对象中添加上一个属性body
//就可以直接通过req.body获取
app.use(bodyParser.urlencoded({ extended: false }))
 
// parse application/json
app.use(bodyParser.json())
 
app.use(function (req, res) {
  res.setHeader('Content-Type', 'text/plain')
  res.write('you posted:\n')
  res.end(JSON.stringify(req.body, null, 2))
})

使用

req。body

什么是 XMLHttpRequest 对象？

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您能够：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

基于原生XMLHttpRequest封装get方法

XMLHttpRequest 对象用于在后台与服务器交换数据

 function get(url,callback) {
            var oReq = new XMLHttpRequest()

            //当请求加载成功后 调用指定的函数
            oReq.onload = function () {
                console.log(oReq.responseText)
                callback(oReq.responseText)
            }
            oReq.open("get","data.json",true)
            oReq.send()
        }

        get('data.json',function (data) {
            console.log(data)
        })

package.json和package-lock.json

package-lock.json保存所有依赖信息

package.json保存所有依赖的一些信息描述

package-lock.json 是在 npm install时候生成一份文件，用来记录当前状态下实际安装的各个npm package的具体来源和版本号

封装ajax 通过回调函数获取数据

eg:

 function get(url,callback) {
     var oReq = new XMLHttpRequest()
     oReq.onload = function () {
         console.log(oReq.responseText)
         callback(oReq.responseText)
     } //onload当页面载入完成
     oReq.open('get',url,true)
     oReq.send()
 }

get('data.json',function (data) {
	console.log(data)
})

ion get(url,callback) {
var oReq = new XMLHttpRequest()
oReq.onload = function () {
console.log(oReq.responseText)
callback(oReq.responseText)
} //onload当页面载入完成
oReq.open(‘get’,url,true)
oReq.send()
}

get(‘data.json’,function (data) {
console.log(data)
})