学习Node.js

最新推荐文章于 2024-07-11 06:18:29 发布

一只松

最新推荐文章于 2024-07-11 06:18:29 发布

阅读量300

点赞数 1

文章标签： node.js

本文链接：https://blog.csdn.net/weixin_42623421/article/details/107253484

版权

npm

node package Manager: node包管理器（仓库）
管理第三方的包（一个功能的集合） express vue jquery ，你也可以开发包

使用

测试

命令行输入 npm -v

初始化项目

方便项目迁移做包的获取
项目目录cmd ： npm init 或者 npm init -y 会自动在项目根目录创建一个package.json

安装包

npm install 包名@版本号 --save
npm install 包名@版本号 -S
npm install 包名@版本号 --save-dev
npm install 包名@版本号 -D
npm install 包名@版本号 --g
npm i 包名@版本号 -g
版本号可选不写默认安装最新版
-S 安装到 package.json 的dependencies属性生产环境
-D devDependencies 开发环境
-g 全局安装

安装包很慢？

全局安装 nrm 可以切换包管理器的下载地址,因为可以使用国内镜像
npm i nrm -g
nrm ls 列出有哪些可选的镜像
nrm test 测试速度
nrm use taobao

项目迁移

npm i

nodejs代码

// 1 通过requer导入http模块，并且返回一个对象
var http=require("http");
// 2 创建服务器，设置回调函数
var server=http.createServer(function(){
console.log("服务器运行了");
})
// 3 监听端口,
server.listen("8888");
console.log("监听成功");

npm 5.0版本之后，npm install后都会有一个package-lock.json,作用是什么？

锁定安装时的包的版本号，需要上传到git，保证大家的依赖包一致。
^ 是npm默认的版本符号, 当你使用npm install --save时, npm会自动在package中添加^加上版本号. 例如: npm install --save angular会在package.json中添加"angular": “^1.3.15”.这个符号会告诉npm可以安装1.3.15或者一个大于它的版本, 但是要是主版本1下的版本.
~同样被用来做npm得版本控制, 例如~1.3.15, 代表了npm可以安装1.3.15或者更高的版本, 与^的区别在于, ~的版本只能开始于次版本号1.3. 它们的作用域不同. 你可以通过npm config set save-prefix=’_'将设置为默认符号.

状态码：

是用以表示网页服务器超文本传输协议响应状态的3位数字代码。所有状态码的第一个数字代表了响应的五种状态之一。

五种状态

消息
成功
重定向
请求错误
服务器错误

中间件：

中间件是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的。

中间件=平台+通信，这也就限定了只有用于分布式系统中才能叫中间件，同时也把它与支撑软件和实用软件区分开来。

restful Api

RESTful API就是REST风格的API，即rest是一种架构风格，跟编程语言无关，跟平台无关，采用HTTP做传输协议。使前后端分离，规范多种形式的前端和同一个后台的交互方式。

路由(前端后端)

什么是路由？

路由是根据不同的 url 地址展示不同的内容或页面；

前端路由

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的；页面不刷新

后端路由

通过用户请求的url导航到具体的html页面；每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回HTML，也可以是直接返回模板HTML，然后由前端js再去请求数据，使用前端模板和数据进行组合，生成想要的HTML。页面刷新

get / post 的区别

参数：

GET传递的参数只能带URL后面，为字符串，一般有长度限制，提交到服务器端的数据量小。

POST可以传递纯文本或二进制的body参数。提交到服务器端的数据量大。
用途：

GET用于从服务器端获取数据，包括静态资源(HTML|JS|CSS|Image等等)、动态数据展示(列表数据、详情数据等等)。

POST用于向服务器提交数据，比如增删改数据，提交一个表单新建一个用户、或修改一个用户等。
缓存：

GET时默认可以复用前面的请求数据作为缓存结果返回.

POST一般则不会被这些缓存因素影响。
安全性：

GET请求的报文会被记录

POST来说，请求的报文却不会被记录,POST更安全一些。

GET产生一个TCP数据包；POST产生两个TCP数据包。

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

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

总的来说：
1. GET在浏览器回退时是无害的，而POST会再次提交请求。
2. GET产生的URL地址可以被Bookmark，而POST不可以。
3. GET请求会被浏览器主动cache，而POST不会，除非手动设置。
4. GET请求只能进行url编码，而POST支持多种编码方式。
5. GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
6. GET请求在URL中传送的参数是有长度限制的，而POST么有。
7. 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
8. GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
9. GET参数通过URL传递，POST放在Request body中。

请求方式 get post delete put ————> restful api

url从输入到页面展示经历了什么？

https://blog.csdn.net/weixin_45013926/article/details/97395235

DNS 解析:将域名解析成 IP 地址
TCP 连接：TCP 三次握手
发送 HTTP 请求
服务器处理请求并返回 HTTP 报文
浏览器解析渲染页面
断开连接：TCP 四次挥手

全局安装 express-generator 脚手架

npm i express-generator -g

使用脚手架快速搭建项目

express 项目名 -e

cd 项目名

npm install

启动项目:npm start

npm 启动项目

1、node 文件名
改package.json 文件里面的script 属性:
默认名是start，start: node ./bin/www 则启动方式为 npm start
其他名字例如dev: dev: node ./bin/www 则启动方式为 npm run dev

mvc – model数据模型 view视图 controller控制器
v — ejs
m – 数据模型 mysql
c

ajax：

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

原生ajax创建

1、创建xhr对象上下文

let xhr=new XMLHttpRequest()

2、设置回调函数

xhr.onreadystatechange=function(){
    6、处理数据 并更新部分dom
    let res=JSON.stringify(xhr.responseText)//把js对象 转为 json字符串
    let res=JSON.parse(xhr.responseText)//把json字符串 转为 js对象
}

3、打开连接服务器 / 发送数据

get：
```
xhr.open('get','url')
xhr.send(null)
```
post
```
xhr.open('post','url')
xhr.send(data)
```

5、服务器拦截请求并处理

封装ajax

function ajax(obj){
    let params = formsParams(obj.data)
    let xhr=new XMLHttpRequest()
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            obj.success&&obj.success(xhr.responseText);
        }else{
            obj.error&&obj.error(xhr.status);
        }
    }
    if(obj.type=='get'){
        xhr.open('get',obj.url+ "?"+ params)
        xhr.send(null)
    }else if(obj.type=='post'){
        xhr.open('post',obj.url)
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(params)
    }else{
        alert('请求错误')
    }
    function formsParams(data){
        var arr = [];
        for(var prop in data){
            arr.push(prop + "=" + data[prop]);
        }
        return arr.join("&");
    }
}

 ajax({
        url: "/api/userList",
        type: 'get',
        data: '',
        success: function (res) {
            console.log(res);
            let data = JSON.parse(res)
            let str=''
            data.data.forEach(val=>{
                str+=`<li>
                        <p>用户名:${val.name}</p>
                    </li>`
            })
            box.innerHTML=str
     }
})

一只松

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习Node.js

npmnode package Manager: node包管理器（仓库）管理第三方的包（一个功能的集合） express vue jquery ，你也可以开发包使用测试命令行输入 npm -v初始化项目方便项目迁移做包的获取项目目录cmd ： npm init 或者 npm init -y 会自动在项目根目录创建一个package.json安装包npm install 包名@版本号 --savenpm install 包名@版本号 -Snpm instal
复制链接

扫一扫