验证中...
Languages: 其他
Categories: 其他
Latest update 2019-05-20 21:43
day1
hh
node_Day01.md
Raw Copy

NodeJs Day01

##学习目标

1.会使用nodejs里面常用的api

2.结合之前学过的前端知识,自己使用nodejs编写接口,完善数据

3.debugger bug调试

4.console.log()

5.增强自己的学习能力 (自学能力,阅读文档能力)

前后端都做些什么

前端

1.切图

2.根据设计图 写HTML CSS js

3.通过ajax请求数据,并且完成渲染

后端

1.给前端暴露数据接口 (api的概念 就是一串地址 给前端请求)

2.处理数据库 (sql mysql mongodb(nosql) .....)

3.优化后端业务

1.Node.js介绍

基于 Chrome 的V8 JS 解析引擎之上,解放了Javascript的编程能力,为 Javascript 提供了 后端编程的能力; 所以说,Node.js 是 一个让javascript进行后端编程的一个运行平台;

v8引擎: V8引擎是一个JavaScript引擎实现,最初由一些语言方面专家设计,后被谷歌收购,随后谷歌对其进行了开源。V8使用C++开发,js在v8引擎下运行媲美二进制的速度

1.编译型语言 linux java c++ c#

2.解析性语言 js

作用:可以在nodejs的平台上 使用js语法来编写后台逻辑

##2.开发环境搭建

LTS 和 Current 版本区别

  1. LTS 是长期稳定版的意思(这个安装包用起来比较稳定)【推荐在企业中使用】
  2. Current 是最新特征版,这个安装包中有最新的Node特性,但是,可能有一些潜藏的Bug未解决;【推荐学习或尝鲜去使用】

下载安装

下载完成之后,直接安装在默认的c盘就可以了

查看 Node 版本号

打开终端,在命令行输入命令node -v即可 如何进入终端呢?

  1. 使用快捷键windows徽标 + R打开运行面板,输入 cmd 后直接回车;
  2. 在任意目录的空白位置,先按住shift键不松开,然后,在空白位置,鼠标右键单击,会出来一个右键菜单,选择在此处打开 powershell/cmd 窗口【将来第二种方式用的会多一些】
  3. 这两种方法不同之处在于,后者打开的路径是不一样

##3.环境变量

什么是环境变量

Path环境变量的作用:能够让我们通过命令行的形式,快速启动一些应用程序;

系统环境变量和用户环境变量的区别

  1. 用户环境变量,是每个用户私有的,用户之间不会共享;
  2. 全局环境变量,是共享的,只要你能登录这台计算机,就能访问到全局的环境变量;【今后在配置环境变量的时候,推荐直接配置到系统环境变量】

通过命令行快速启动应用程序时,路径的查找规则

  1. 先在当前 cmd 终端的目录中查找,如果有则直接运行;
  2. 如果当前目录中没有,则去全局的path环境变量中查找;

4.前后端协作流程

  • 后端给我们暴露数据请求的接口,我们直接请求数据
  • 协作开发的时候和后端人员沟通好
  • 我们现在就开始学习node后端开发响应知识了
  • 如何书写接口,提供给我们的前端

模块与包管理工具

5. 编辑器 vscode

下载编辑器,下载之后 ctrl+shift+x 打开拓展商店搜索Chinese (Simplified) Language Pack for Visual Studio Code

安装并重启

###常用快捷键

编辑器与窗口管理

  1. 打开一个新窗口: Ctrl+Shift+N
  2. 关闭窗口: Ctrl+Shift+W
  3. 同时打开多个编辑器(查看多个文件)
  4. 新建文件 Ctrl+N
  5. 文件之间切换 Ctrl+Tab
  6. 切出一个新的编辑器(最多 3 个) Ctrl+\,也可以按住 Ctrl 鼠标点击 Explorer 里的文件名
  7. 左中右 3 个编辑器的快捷键 Ctrl+1 Ctrl+2 Ctrl+3
  8. 3 个编辑器之间循环切换 Ctrl+
  9. 编辑器换位置, Ctrl+k然后按 LeftRight

代码编辑

####格式调整

  1. 代码行缩进 Ctrl+[Ctrl+]
  2. Ctrl+CCtrl+V 复制或剪切当前行/当前选中内容
  3. 代码格式化: Shift+Alt+F,或 Ctrl+Shift+P 后输入 format code
  4. 上下移动一行: Alt+UpAlt+Down
  5. 向上向下复制一行: Shift+Alt+UpShift+Alt+Down
  6. 在当前行下边插入一行 Ctrl+Enter
  7. 在当前行上方插入一行 Ctrl+Shift+Enter

6.nodejs的组成部分

浏览器的组成部分

EcmaScript+dom+bom

nodejs里面的组成部分

1.模块 nodejs会把每个独立的js当成是一个模块

2.EcmaScript + 模块成员 + 全局成员

7.CommonJS模块

[CMD(sea.js) AMD(require.js) Es6 import export default...]

定义了模块的语法

1.什么是commonJS

  • commonjs就是为了实现javascript模块化,而制定的一套规范

2.为什么要使用commoJs

  • 为了统一一大家写模块时的规则,方便各个模块之间的依赖和调用,所以commonJs就产生

3.commonJS 到底是个什么东东

  • 定义了什么是模块

  • 定义了模块与模块之间如何去引用,如何去暴露 require() module.exports exports()

  • 如果没有commonJS的规范,肯定是不行

  • 大家遵循这个规范,共同协作,方便他人方便自己

8.全局对象

小提示:在cmd命令里面 输入cls 可以清空当前cmd里面的诸多命令

1.通过gloabl全局对象 挂载一个 变量或者任意的值

在1.js里面
var g = "这是一个全局变量"
global.g = g;
在2.js里面
require("./1.js")
console.log(g) // "这是一个全局变量"

2.在另外一个js里面首先require()声明全局变量的js文件

EcmaScrpt 其实就是一本书,这里面记录了所有的定义,规范了所有的书写语法

exports 和 moudle.exports

exports 其实 是对 module.exports的引用

var a = 20;
//exports暴露数据
exports.a = a;
//module.exports暴露
module.exports = a

练习:利用commomjs模块 封装一个加减乘除的模块 然后在其他js里面调用;

小提示:通过 cd 绝对路径 可以切换终端运行的目录

9.package 包

在nodejs里面有三种包 package

  1. 内置的包
  2. 第三方包
  3. 用户自定义的包

包的组成:

1.bin 文件夹 可以用来放置一些二进制的文件

2.lib 所有的 js文件都要放在这个目录下面

3.doc 这里放置一些文档

4.test 这里面放置一些测试文件

nodejs 对于包的文件要求不是非常严谨 只要在最顶层目录有package.json 即可

package文件里面 需要的属性,必须遵循json的格式

  • name 包的名字

  • version 版本号

  • main 文件的主要入口

初始化一个package.json

//指令
npm init

快速初始化一个package.json

npm init -y

10.预习 fs模块

stat 读取文件信息

/fs.stat() 去取文件的信息
// fs.stat("./event事件.js", function (err,info) {
//    if(err) throw err;
//    console.log(info.size)
// })readFile 读取文件

readFile读取文件

var fs = require("fs");
//fs.readFile(路径,options,回调函数)
fs.readFile(__dirname+"/test.txt","utf-8",function(err,data){
    if(err) throw err;
    fs.writeFile('url',data,(err)->{
  	if(err) throw err;
  	console.log("SUCCESS")
})
    console.log(data);
})writeFile 书写文件

写入文件 writeFile

// fs里面的读写文件是异步执行的 
 var fs = require("fs");
  fs.writeFile("./test02.txt","今天天气好晴朗,处处好风光,蝴蝶儿也忙呀,蜜蜂儿也忙...",function(err){
      if(err) throw err;
      console.log("写入成功")
  }) //2s

追加文件内容 appendFile

var fs = require("fs")
fs.appendFile("./test02.txt","让我们背起书包上学",function(err){
    if(err) throw err;
    console.log("写入成功")
})//1s

//追加文件内容  appendFile
```

mkdir 创建文件夹

// fs.mkdir("./test",function(err){ //创建文件夹
//     if(err) throw err;
//     console.log("success")
// })

readdir 读取所有文件夹下的文件名字

//读取文件夹下的文件名

fs.readdir("./",function(err,msg){
    if(err) throw err;
    console.log(msg)
})

rename 重命名文件

var fs = require("fs")
		     //oldPath   newpath         callback
fs.rename("./test999","test999.txt",function(err){
    console.log("success")
})

rmdir unlink 删除文件目录 删除文件

/移除文件夹

// fs.rmdir("./test",function(err){
//     if(err) throw err;
//     console.log("移除成功")
// })

//删除文件
var fs = require("fs");

fs.unlink("./test.txt",function(err){
    if(err) throw err
    console.log("删除成功")
})

查询文件是否存在 fs.existsSync( Path )

//查询文件是否存在 如果存在返回ture 不存在返回false

var fs = require("fs")
var result = fs.existsSync("./test2.txt") // 传入路径

console.log(result)

11.HTTP模块

在php里面 要依赖于一个环境 apache phpstudy 把文件放在www文件夹里面就可以处理请求 , 在node里面是没有相应的软件,node就需要自己手动搭建一个服务器了

createServer

12.nodemon

用来监听nodejs变化 并且实时更新

1.下载

cnpm i nodemon -g

2.使用

nodemon 你的node应用

13.Node 中的 Web 快速开发框架 - Express

定义什么是Express:

  1. 基于 Node.js 后端Javascript平台之上,开发出来的一套Web开发框架;
  2. Express中,基于 原生Node的特性,做了进一步的封装,提供了一些更加好用的方法,来提高Web开发的体验;
  3. Express中,并没有覆盖或者删除原生的http模块方法;

提示:项目发给别人的时候 要删除node_modules,因为里面文件太多了,把需要依赖的三方模块在 cnpm install的时候 一定要 --save 保存到依赖 ,别人拿到项目,首先直接 cnpm i (npm i )补齐依赖

##14.express 框架的安装和基本使用

  1. 直接运行 npm install express-generator -g 就可以安装Express框架了

  2. express my-app

  3. cd my-app

  4. cnpm i 补齐依赖

  5. npm start 启动项目

  6. 使用express简单搭建一个服务,通过postman测试接口

    const express = require("express");
    const app = express();
    
    app.get('/',(req,res)=>{
        res.send("success")
    })
    
    app.listen(3000,'localhost',()=>{
        console.log("localhost:8080")
    })

    文件目录 增加views->home.html 当路径为/home的时候 sendFile()给前端 注意路径问题 先示范错误

    1539792352242

15.使用 express 快速托管静态资源

  1. 如果我们网站中,有很多静态资源需要被外界访问,此时,使用 res.sendFile 就有点力不从心了,这时候,express 框架,为我们提供了一个 内置的(中间件) express.static('静态资源目录') , 来快速托管指定目录下的所有静态资源文件;

  2. 用法: app.use(express.static('public'));

    • 其中, express.static 是一个express的内置中间件;
    • app.use() 方法,是专门用来注册 中间件;
  3. 当使用 第二步中的方法,把指定目录托管为静态资源目录之后,那么,这一层被托管的目录,不应该出现在 资源访问的 URL地址中;

  4. 在一个Web项目中,我们可以多次调用app.use(express.static())

  5. 在多次调用 express.static 的时候,如果文件名称有重复的,则以先注册的中间件为主!

  6. 如果项目要部署了,推荐大家配置一个叫做compression的中间件,它能够开启服务器的GZip压缩功能;

##16.为 express 框架配置模板引擎渲染动态页面

  1. 安装 ejs 模板引擎` cnpm i ejs -S`   -S(保存到依赖) -D(保存到开发依赖)

  2. 使用 app.set() 配置默认的模板引擎 `app.set('view engine', 'ejs')`
  3. 使用 app.set() 配置默认模板页面的存放路径 `app.set('views', './views')`
  4. 使用 res.render() 来渲染模板页面`res.render('index.ejs', { 要渲染的数据对象 })`,注意,模板页面的 后缀名,可以省略不写!

循环语法

      <!-- ejs文件 -->
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>Document</title>
      </head>
      <body>
        <%for(var i=0;i<json.arr.length;i++){%>
          <div>user:<%=json.arr[i].user%> pass:<%=json.arr[i].pass%><div>
        <%}%>
      </body>
      </html>
  ### 转义输出
      <%= 变量名 %>

这个是转义输出,可以把变量名替换成自己需要的东西. 我们可以这么使用.

 // js文件
  ejs.renderFile('./views/test.ejs',{name:'wzz'},function(err,data){
    if(err){
      console.log(err);
    }else{
      console.log(data);
    }
  });
  <!-- ejs文件 -->
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <%=name%>
  </body>
  </html>

不转义输出

<%- 变量名%>

不转义输出可以把定义的字符串不转义的输出. 我们可以这么用,这边我们省略了第二个不使用的json数据

// js文件
ejs.renderFile('./views/test.ejs',function(err,data){
  if(err){
    console.log(err);
  }else{
    console.log(data);
  }
});
<!-- ejs文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <% var str='<div><div>'; %>
  <%-str %>
  <%=str %>
</body>
</html>

17.使用 express 框架中提供的路由来分发请求

  1. 什么叫做路由:前端请求的URL地址,都要对应一个后端的处理函数,那么 这种URL地址到 处理函数之间的对应关系,就叫做后端路由;

  2. 在Express中,路由主要负责 分发请求处理的;

  3. 在Express中,如何 定义并使用路由呢?

  4. 使用path.resolve 发送一个页面

  5. 需求 /api/sign的时候进入user路由 sign注册页面

  6. 使用req.query获取前端query参数 req.params动态路由参数

    res.set("Content-type","text/plain;chart=uutf-8")

    let {usn,psw} = req.query;

  7. 使用body-parser中间件 获取post请求参数 npm搜索 然后用法

  8. 把user /sign 路由函数代码抽离出来 新建一个controller文件夹 建一个controller.js 建一个对象 属性为sign:fn 暴露对象

  9. user路由 引入暴露的controller.js 调用 controller(req,res)

  10. 再建文件夹 module 定义一个函数 userModel={save:()=>{"succ"}}专门用于返回结果

  11. art-template

  // 1. 封装单独的 router.js 路由模块文件
  const express = require('express')
  // 创建路由对象
  const router = express.Ro9uter()

  router.get('/', (req, res)=>{})
  router.get('/movie', (req, res)=>{})
  router.get('/about', (req, res)=>{})

  // 导出路由对象
  module.exports = router
  1. express创建的 app 服务器,如何使用 路由模块呢?
  // 导入自己的路由模块
  const router = require('./router.js')
  // 使用 app.use() 来注册路由
  app.use(router)

18.rmvc案例

//步骤

//1.在server2.js 页面上引入中间件 body-parser....

//2.在和package.json平级的文件夹里 创建一个routes文件夹 并且在里面创建一个user.js

//3.在user.js里面使用路由 post("/sign") 并且module.exports router

//4.在server.js里面 app.use( user路由 要先引入进来 )

//5.在和package.json平级的文件夹 创建 controller文件夹 并且创建一个userController.js

//6.在userController.js里面创建一个sign的方法 里面的req,res需要通过 routes文件夹里面的user.js调用 userCotroll.js里面的方法并传递实参(req,res)

//7.创建一个module文件夹,并且创建userModule.js 写一个save的方法 并且 return一个值

//8.在userController里面调用save的方法

练习:

今天的代码过一遍 并且消化

利用Express重构Webserver并将项目迁移到Express服务器中。

通过fs模块 完成一个复制粘贴的功能

Comment list( 0 )

You need to Sign in for post a comment

Help Search

Gitee_sixth 5th_float_left_close