java-Nodejs

2021/4/17 12:25:30

编程Tag： js nodejs npm css var console Java log

本文主要是介绍java-Nodejs，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Nodejs

一，Nodejs概述

官网地址：https://nodejs.org/en/download/
在这里插入图片描述

Node.js是一个可以在js中接收和处理web请求的应用平台。

测试控制台输出：

在这里插入图片描述
在这里插入图片描述

模块化编程

可以使用exports将js方法导出，并使用require引入对应的js模块，然后再引入之后可以使用对应的方法。

demo3_1.js

//导出
exports.add = function (a,b){
    return a + b;
}

demo3_2.js

//引入模块demo3_1
var demo = require("./demo3_1");
console.log(demo.add(400,600));

在这里插入图片描述

创建web服务器

可以利用node.js创建web服务器

demo4.js

//引入node.js内置http模块
var http = require("http");

//创建并监听web服务器
http.createServer(function (request,response) {

    //发送http头部
    //参数1：响应状态码，200表示成功
    //参数2：响应头部信息Content-Type内容类型：纯文本
    response.writeHead(200,{"Content-Type":"text/plain"});

    //发送响应数据
    response.end("Hello world \n ")
}).listen(8888);
console.log("服务器运行在 http://127.0.0.1:8888 ");

在这里插入图片描述

在这里插入图片描述

处理Nodejs Web请求参数

需求：http://127.0.0.1:8888?id=123&name=heima 获取到请求路径上中参数及值并输出
实现步骤：
（1）创建web服务器
（2）引入url模块
（3）利用url解析请求地址中的参数和值并输出
（4）启动测试

在node.js中可以引入url内置模块对请求地址进行处理

//引入node.js内置http模块
var http = require("http");
var url = require("url");

//创建并监听web服务器
http.createServer(function (request,response) {

    //发送http头部
    //参数1：响应状态码，200表示成功
    //参数2：响应头部信息Content-Type内容类型：纯文本
    response.writeHead(200,{"Content-Type":"text/plain"});

    //解析请求地址
    //参数1：请求地址
    //参数2：true的话使用query解析参数到一个对象，默认false
    var params = url.parse(request.url,true).query;
    for (var key in params){
        response.write(key + " = " + params[key]);
        response.write("\n");
    }

    //发送响应数据
    response.end("Hello world \n ")
}).listen(8888);
console.log("服务器运行在 http://127.0.0.1:8888 ");

在这里插入图片描述

包资源管理器NPM

npm是一个node.js的管理和分发工具，可以根据package.json下载js库。
本地安装：将下载的模块安装到当前目录（项目）；
全局安装：将下载的模块安装到全局的目录（npm root -g）

在命令提示符输入 npm -v 可查看当前npm版本
在这里插入图片描述

初始化工程

建立一个空文件夹或者工程中，在命令提示符进入该文件夹 执行命令初始化
npm init
在这里插入图片描述
在这里插入图片描述

本地安装

npm install express
在这里插入图片描述
执行完命令，在该目录下已经出现了一个node_modules文件夹 和package-lock.json
node_modules文件夹用于存放下载的js库（相当于maven的本地仓库）
package-lock.json是当 node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新

在这里插入图片描述

全局安装

执行命令查看全局目录路径
npm root -g

全局安装jquery， 输入以下命令

# 安装之后在全局目录下会存在对应的jquery目录，其里面的dist则包含有对应的jquery.js文件
npm install jquery -g

在这里插入图片描述

批量下载

从网上下载某些代码，发现只有package.json，没有node_modules文件夹，这时需要通过命令重新下载这些js库.
进入目录（package.json所在的目录）输入命令
npm install

切换NPM镜像

两种方式：
使用nrm切换镜像源
使用cnpm下载

1、如果使用切换镜像源的方式，可以使用一个工具：nrm
首先安装nrm，这里 -g 代表全局安装

# 管理员身份 打开cmd执行如下命令
npm install nrm -g

在这里插入图片描述

然后通过 nrm ls 命令查看npm的仓库列表,带*的就是当前选中的镜像仓库

在这里插入图片描述

通过 nrm use taobao 来指定要使用的镜像源
在这里插入图片描述

2、如果使用cnpm的方式，则先安装cnpm，输入如下命令

# 如果不使用nrm 切换，可以在安装cnpm的时候指定镜像仓库
npm install -g cnpm --registry=https://registry.npm.taobao.org

安装后，我们可以使用以下命令来查看cnpm的版本 cnpm -v

使用cnpm：

cnpm install 需要下载的js库；一般只有在下载模块的时候才使用cnpm，其它情况还是一样使用npm;

二，Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
Webpack作用：可以将多个静态资源js，css等打包成一个js文件。

Webpack安装

全局安装

npm install webpack -g
npm install webpack-cli -g

在这里插入图片描述

安装后查看版本号

webpack -v

在这里插入图片描述

Webpack快速入门

目标：创建2个js文件，使用webpack命令打包js文件到 dist/bundle.js 文件中并测试。
实现步骤：
（1）创建两个js文件
（2）创建入口文件main.js
（3）创建webpack的配置文件
（4）运行webpack命令
（5）创建index.html页面进行测试

创建src文件夹，创建bar.js

exports.info = function (str){
    document.write(str);
}

src下创建logic.js

exports.add = function (a,b){
    return a+b;
}

src下创建main.js

//引入js文件并应用
var bar = require("./bar");
var logic = require("./logic");
bar.info("100+200="+logic.add(100,200));

webpack打包js的配置文件：
创建配置文件webpack.config.js ，该文件与src处于同级目录

var path = require("path");

module.exports = {
    //入口文件
    entry:"./src/main.js",
    output:{
        //路径
        path:path.resolve(__dirname,"./dist"),
        filename:"bundle.js"
    }
}

执行编译命令

webpack

在这里插入图片描述
创建index.html ,引用bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>nodejs测试</title>
    <script src="dist/bundle.js"></script>
</head>
<body>

</body>
</html>

浏览器上访问index.html文件，会发现有内容输出。
在这里插入图片描述

webpack打包css

目标：安装style-loader css-loader组件，创建并使用css文件，使用webpack命令打包js文件到dist/bundle.js文件中并测试。
实现步骤：
（1）安装转换css的组件
（2）修改配置文件
（3）创建css文件
（4）修改入口文件，加载css文件
（5）打包测试

安装style-loader和 css-loader
Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

cnpm install style-loader css-loader --save-dev

在这里插入图片描述

cnpm install less less-loader --save-dev

在这里插入图片描述

修改webpack.config.js

var path = require("path");

module.exports = {
    //入口文件
    entry:"./src/main.js",
    output:{
        //路径
        path:path.resolve(__dirname,"./dist"),
        filename:"bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

在src文件夹创建css文件夹,css文件夹下创建css1.css

body{
    background-color: blue;
}

修改main.js ，引入css1.css

//引入js文件并应用
var bar = require("./bar");
var logic = require("./logic");
require("./css/css1.css");
bar.info("100+200="+logic.add(100,200));

在这里插入图片描述

重新运行webpack
在这里插入图片描述
运行index.html看看背景
在这里插入图片描述

注意：webpack打包css文件需要安装转换的组件，并修改配置文件

三，ES6

ES6？就是ECMAScript第6版标准。编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。

let 和const命令

目标：使用let和const定义变量说出区别；模板字符串的好处以及对象初始化简写

使用let定义变量
es-demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es6 测试</title>
    <script type="text/javascript">
        for (var i = 0; i < 5; i++) {
            console.log(i)
        }
        console.log("var 循环外：" +i);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

使用const定义变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es6 测试</title>
    <script type="text/javascript">
        for (let i = 0; i < 5; i++) {
            console.log(i)
        }
        console.log("let 循环外：" +i);
    </script>
</head>
<body>

</body>
</html>

在这里插入图片描述

let所声明的变量只能在let命令所在的代码块中使用
const声明的变量是常量，也就是值不可改变
模板字符串：可以不用通过反斜杠拼接多行字符，直接使用 `
对象初始化简化：可以在返回的对象时，不用指定属性名。

解构表达式

目标：将数组，对象中的值或属性使用解构表达式设置到对应变量

数组解构
在这里插入图片描述

对象解构
在这里插入图片描述

解构表达式：可以对数组，对象的元素或者属性按顺序，名称的方式进行赋值到对应变量中。

函数优化

目标：箭头函数的好处；对象的函数属性简写，箭头函数与解构表达式的应用
箭头函数：可以不用编写基础函数的解构（如：function），直接使用 =>

        var print = function (obj){
            console.log(obj);
        };
        print("print");

        //箭头函数
        var print2 = obj => console.log(obj);
        print2("print2")

        var sum = function (a,b){
            return a+b;
        };
        console.log(sum(1,2));

        //箭头函数
        var sum2 = (a,b) => a + b;
        console.log(sum2(1,2));

        var sum3 = (a,b) => {
            console.log(a+b);
            return a+b;
        };
        console.log(sum3(1,2));


        let person = {
            "name" : "heima",
            learn1:function (course="java"){
                console.log(this.name+" 在学习 "+course);
            },
            //箭头函数
            learn2:(course) =>console.log(person.name+"在学习 "+course),
            //简写
            learn3(course){
                console.log(this.name+"在学习"+course);
            }
        };
        person.learn1("java");
        person.learn2("js");
        person.learn3("css");

        const person = {
            name:"heima",
            age:13,
            language:["java","js","css"]
        };
        function hello(person){
            console.log("hello "+person.name);
        }
        hello(person);

        //箭头函数，解构表达式
        //var hello2 = (person) => console.log("hello " + person.name);
        var hello2 = ({name}) => console.log("hello " + name);
        hello2(person);
map和reduce

数组中map方法的应用场景
map方法可以将原数组中的所有元素通过一个函数进行处理并放入到一个新数组中并返回该数组。
在这里插入图片描述

数组中reduce方法的应用场景
reduce方法会从左到右依次把数组中的元素用函数处理（reduce方法的第一个参数），会返回一个执行结果。
在这里插入图片描述
在这里插入图片描述

promise

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

可以通过Promise的构造函数来创建Promise对象，并在内部封装一个异步执行的结果

promise是一个对象，保存着预期事件执行的结果；可以应用在异步操作的时候，指定异步操作的成功与失败的结果。

        const promise = new Promise(function (resolve,reject){
           setTimeout(()=>{
               let num = Math.random();
               if (num<0.5){
                   resolve("操作成功！ num="+num);
               }else {
                   reject("操作失败！ num="+num);
               }
           },300);
        });
        promise.then(function (msg) {
            console.log(msg);
        }).catch(function (msg) {
            console.log(msg);
        });
对象的扩展方法使用

ES6给Object拓展了许多新的方法，如：
keys(obj)：获取对象的所有key形成的数组
values(obj)：获取对象的所有value形成的数组
entries(obj)：获取对象的所有key和value形成的二维数组。格式： [[k1,v1],[k2,v2],…]
assign(dest, …src) ：将多个src对象的值 拷贝到 dest中（浅拷贝）。

在这里插入图片描述

数组的扩展方法使用

ES6给数组新增了许多方法：
find(callback)：把数组中的元素逐个传递给函数callback执行，如果返回true，则返回该元素
findIndex(callback)：与find类似，不过返回的是匹配到的元素的索引
includes（element）：判断指定元素是否存在

在这里插入图片描述

安装babel

babel是JavaScript 语法的编译器，可以将es6的语法进行转换并执行。

babel转换配置,项目根目录添加 .babelrc 文件；注意不要忘记了这个文件中的 .
.babelrc

{
"presets" : ["es2015"]
}

安装es6转换模块

cnpm install babel-preset-es2015 --save-dev

在这里插入图片描述
全局安装命令行工具

cnpm install babel-cli -g

在这里插入图片描述
使用：可以通过命令去执行对应的js文件

babel-node js文件名

export和import联合应用

使用export导出模板文件，import引入模板文件
export1.js

//方式1
export let name = "heima";
export let age = 13;
export let gender = "男";
export let say = function (str) {
    console.log(str);
};

import1.js

import {name,age,gender,say} from "./export1";

console.log(name,age,gender);

say("hello heima");

在这里插入图片描述

默认
export2.js

//方法1
/*
export default function (str) {
    console.log(str);
}
*/

//
export default {
    eat(sth){
        console.log("eat " + sth);
    },
    drink(sth){
        console.log("eat " + sth);
    }
}

import2.js

//导入default的模块不需要使用{}
/*
import heima from "./export2"
heima("hello heima ");*/

//方式2
import abc from "./export2"
abc.eat("meat");
abc.drink("water");

在这里插入图片描述

可以通过export导出模块，通过import导入模块并使用其内容。
导出有两种方式：命名导出和默认导出
因为浏览器默认不支持export和import命令，所以需要安装babel对export和import进行解析和执行。

遇到的问题

问题描述

通过 nrm ls 命令查看npm的仓库列表时出现下图错误：
在这里插入图片描述

解决方案

在这里插入图片描述
找到这个路径下的文件cli.js，修改第17行

//const NRMRC = path.join(process.env.HOME, '.nrmrc'); (删除)
const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');

问题解决
在这里插入图片描述



这篇关于java-Nodejs的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！


相关编程文章

更多>
本站官方QQ
官方QQ:
23002807

沪ICP备2023033072号-1

     

扫一扫关注最新编程教程