JavaScript的逆袭

白葵Helloword

已于 2022-03-11 18:10:47 修改

阅读量273

点赞数

文章标签： npm vue.js 前端 node.js

于 2022-03-07 23:11:03 首次发布

本文链接：https://blog.csdn.net/qq_36716097/article/details/123190940

版权

Node.js不是一门新的语言，Node.js 是一个开源和跨平台的 JavaScript 运行时环境。
node促成的服务器端的javascript领域的焕然一新，凭借V8高性能和异步I/O模型，将javascript推向高潮，现在node不仅满足javascript同时运行在前后端，而且性能十分高效，最重要的是：在这里吼一声万能的NPM，总能找到你需要的解决方案。接下来，让我们来一探究竟，就从如何搭建一个简单的node服务开始吧～

node模块

node中的模块有三种格式

内置模块 fs http child_process
第三方模块安装后再使用，用法和核心、内置模块一致
文件模块自己写的文件，需要通过相对路径或者绝对路径来进行引用

npm

npm 以其简单的结构帮助 Node.js 生态系统蓬勃发展
npm是随node一起安装的包管理工具，只要安装了node，就可以使用npm。
存储和分发第三方模块的仓库
1.允许用户从npm服务器下载别人写好的第三方模块到本地使用。
2.允许用户从npm服务器下载别人写好的命令行程序到本地使用。
3.允许用户上传自己写好的第三方模块和命令行程序到npm服务器上。

本地安装
npm install koa //把模块和命令行按照到当前文件夹下，只能在当前目录下使用，一般第三方模块都会在本地安装

npm install name -save-dev 
//简写（npm install name -D） 自动把模块和版本号添加到devdependencies。
//dev是在开发环境中要用到的 举例：gulp和webpack是用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，就要放在dev中所以要用 -D
npm install name -save 
//简写（npm install name -S） 自动把模块和版本号添加到dependencies。
// 项目插件：例如element ui、echarts这种插件要在运行中使用的，就要放在dep中所以就用 -S

全局安装
npm install nodemon -g //一般命令行工具安装在全局，以便随时随地调用。
npm镜像源
node的服务器是在国外的，下载是非常慢的。
如果想要下载的快，可以使用国内的镜像库

npm config get registry //查看当前使用镜像
npm config set registry https://registry.npm.taobao.org //配置镜像
registry=http://registry.npm.qima-inc.com //有赞 npmrc文件 
npm install @youzan/youzan-framework --registry http://registry.npm.qima-inc.com 
//https://doc.qima-inc.com/pages/viewpage.action?pageId=6823541

http server

创建服务

通过http node核心模块创建http 服务，监听端口
在这里插入图片描述

nodemon

每次修改服务端代码都需要重启服务器
nodemon 可以监听node服务

npm install nodemon -g
//使用：nodemon server.js

npm list -g //查看全局已安装npm包

req

//Buffer数据存储形式 以流的形式在传输
const arr=[]
  req.on('data',function(data){
    arr.push(data)
  })
  req.on('end',function(data){
    console.log(Buffer.concat(arr).toString())//buffer=>字符串
  })
//curl -X POST --data a=1 localhost:3000

res

 //res
  res.statusCode = 200
  res.statusMessage = "XXXXX"
  res.setHeader('token', 'ok')
  res.write('1') // 服务器给浏览器写入数据 可写流
  res.end('2')  //分片传输

静态服务

渲染html文件
浏览器将识别script/link标签去请求服务器js/css资源

 <link rel="stylesheet" type="text/css" href="./index.css">
 <script src="./index.js"></script>

mime 根据后缀查看当前文件类型

npx mime a.js
npx mime b.css

如何CUP密集型的难题

const server = http.createServer(function (req, res) {
  const { pathname } = url.parse(req.url);//后端路由，根据前端发送的请求，来识别我要做什么
  //node 服务不适合cpu密集型场景
  //同步事件
  // console.log(pathname)
  if (pathname === '/sum') {
    let sum = 0;
    for (let i = 0; i < 10000000000; i++) {
      sum += i
    }
    res.end(sum + '')
  } else {
    res.end('XXXXXX')
  }

  //异步事件 //fs.readFileSync-同步
  //node 服务更加适合io密集型场景,通过异步回调，可以这么理解，我们可以一边读取文件，
  //一边执行其他命令，在文件读取完成后，我们将文件内容作为回调函数的参数返回，
  // 这样在执行代码时就没有阻塞或等待文件 I/O 操作。这就大大提高了 Node.js 的性能，
  // 可以处理大量的并发请求，这完全得益于Google 的V8引擎对js天然的性能优势。
//   const filePath = path.join(__dirname,pathname) //根据路径读取文件，__dirname获取当前工作目录
//   fs.readFile(filePath,function(err,data){
//     console.log(err,data)
//     if(err){
//       res.statusCode=404
//       res.end('not found')
//     }else{
//       res.setHeader("Content-type",'text/html;charse=utf8')
//       res.end(data)
//     }
//   })
})

如何利用多进程


//极大的利用cpu资源，提高了性能
var os = require('os');
var child_process = require('child_process');

const cpuCount = os.cpus().length;
const startMillis = new Date().getTime();
const startNum = parseInt(process.argv[2]);
const endNum = parseInt(process.argv[3]);
console.log("start concurrency job!, from startNum[" + startNum + "] to endNum[" + endNum + "]");
var result = 0;
var concurrency = cpuCount;
var jobStart = startNum;
const split = Math.ceil((endNum - startNum) / cpuCount);
console.log("split [" + split + "]");
var jobArray = [];
for(let i = 0; i < cpuCount; i++) {
    var jobEnd = jobStart + split;
    if (jobEnd > endNum) {
        jobEnd = endNum;
    } 
    jobArray[i] = [jobStart, jobEnd];
    jobStart = jobEnd;
}
for(let i = 0; i < jobArray.length; i++) {
    const worker = child_process.fork('./worker.js', [jobArray[i][0], jobArray[i][1]])
    worker.on('message', function (msg) { //当子线程send的时候触发此方法
        concurrency--;
        result += msg;
        if (concurrency == 0) {
            const endMillis = new Date().getTime();
            console.log("final result is: " + result);
            console.log("finish concurrency job!, spend: " + (endMillis - startMillis) + "ms");
        }        
    });
}

koa

Koa 是一个新的 web 框架，由 Express 幕后的原班人马打造，致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件，而是提供了一套优雅的方法，快速而愉快地编写服务端应用程序。

基于http模块的封装, 基于promise
有自己的中间件机制

在这里插入图片描述
1 koa会将多个中间件进行组合处理，内部会将三个函数全部包装成promise,并且将这三个promise串联起来，只有第一个use执行完才算整个执行完 - 洋葱模型
2 koa的使用next前面必须加await这样才会有等待效果，必须等下promise完成，所以必须整加await,否则下面没有执行完毕，就直接继续后面的逻辑了
3.中间件的原理每次use 会把函数参数存储起来放到middewares中，调用时根据next递归调用

const Koa = require('koa');
//Koa类
//通过new的方式创建一个应用
const app = new Koa(); //createServer（function(res,req){}）

// 1 koa会将多个中间件进行组合处理，内部会将三个函数全部包装成promise,并且将这三个promise串联起来
//只有第一个use执行完才算整个执行完 - 洋葱模型
// 2 koa的使用next前面必须加await这样才会有等待效果，
// 必须等下promise完成，所以必须整加await,否则下面没有执行完毕，就直接继续后面的逻辑了
// 3.中间件的原理 每次use 会把函数参数存储起来放到middewares中，调用时根据next递归调用
const sleep = (time)=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            console.log('sleep')
            resolve();
        },time)
    })
}
app.use(async(ctx,next)=>{
    console.log(1);
    next();
    console.log(2);
    ctx.body='2'
})
app.use(async(ctx,next)=>{
    console.log(3);
    await sleep(1)
    next();
    console.log(4);
    ctx.body='4'
})
app.use(async(ctx,next)=>{
    console.log(5);
    await next();
    console.log(6);
    ctx.body='6'
})


app.listen(3000,function(){
    console.log('server start 3000')
})
app.on('error',function(err){
    console.log('err',err)
})

中间件中的异步事件

promise封装

app.use(async(ctx,next)=>{
    if(ctx.path === '/login'&& ctx.method=='POST'){
        ctx.body= await new Promise((resolve)=>{
            let arr=[]
            ctx.req.on('data',function(chunk){
                arr.push(chunk)
            })
            ctx.req.on('end',function(chunk){
                resolve(Buffer.concat(arr).toString())
            })
        })
    }else{
        next();
    } 
  })

koa和Vue的结合，创建静态服务


<body>
 <!-- 数据的双项绑定 -->
    <div id="app">
        {{ message }}
        <div class="from_box">
            <form action="">
                <input type="text" placeholder="请输入昵称" v-model="formMess.account">
                <input type="password" placeholder="请输入密码" v-model="formMess.act_pwd">
            </form>
            <span class="but" @click="onSubmit()">提交</span>
        </div>

    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: '表单提交',
                formMess: {
                    "account": "",
                    "act_pwd": ""
                }
            },
            methods: {
                onSubmit() {
                    let formData = {}
                    for (var key in this.formMess) {
                        formData[key]= this.formMess[key];
                    }

                    axios({
                        method: "post",
                        url: "/login",
                        data: formData
                    }).then((res) => {
                        console.log('dddd',res);
                    });
                }
            }
        })
    </script>
</body>