NodeJS是什么

NodeJS是什么?

实现请求响应

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//导入模块
const http = require('http');

//创建httpServer服务
http.createServer(function(request,response){
//设置响应头,声明这个响应的类型
response.writeHead(200,{'Content-type':'text/plain'});
//响应到浏览器
response.end("hello nodejs")
}).listen(8888);

console.log("启动服务8888")
//监听端口
//启动运行服务

操作mysql数据库

首先在npm导入mysql

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//导入mysql依赖包
var mysql = require("mysql");

//创建mysql连接对象
//配置连接信息

var connection = mysql.createConnection({
host:"localhost",
port:3306,
user:"root",
password:"123456",
database:"nodejs_db"
});
//创建连接

connection.connect();
//执行crud

connection.query("SELECT * FROM `kss-user`",function(error,results,fields){
//有错即抛出
if(error) throw error;

console.log("results",results);
});

//关闭连接

connection.end;

ES6

let&const

  • ES6中变量使用let定义

  • 常量使用const定义

  • 解决了js中var定义变量穿透的问题

模板字符串(套接字``)

解决字符串套接的问题

传统方式套接字符串时使用字符串变量+新的var或者var的属性进行套接

ES6则使用``外飘字定义字符串是一个套接字符串,并且使用${var}进行取值套接

1
2
3
4
5
6
7
8
9
10
var person = {
name:"loh",
address:"guang xi",
link:"https://www.baidu.com"
};
let address = "guang dong"+person.address;
console.log(address);

address = `guang dong${person.address}`;
console.log(address);

函数默认参数&箭头函数

函数默认参数

1
2
3
4
5
6
function sum(a,b){
return a + b;
};

let result = sum(100,200);
console.log("result=",result);

给函数方法参数赋默认值

1
2
3
4
5
6
function sum(a=100,b=200){
return a + b;
};

let result = sum(100,200);
console.log("result=",result);
  • 避免方法参数忘记赋值时引起的错误。

箭头函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var sum = function(a,b){
return a+b;
}

//箭头函数 1
var sum = (a,b) =>{
return a+b;
}

//箭头函数 2
var sum = (a,b) => a+b;


//去掉function
//在括号后加箭头指向
//如果逻辑代码中只有return,可以直接省略{}
var sum2=(a,b)=>{
var num = a+b;
return num;
}

对象初始化简写

  • js对象是以key:value的形式存在
  • 如果键值名称一致,则可以省略,只写一次即可
  • 如果value是一个函数,可以把function去掉,只剩下()和函数体

对象解构

ES6中快捷获取对象属性的方法

传统方式获取对象属性

通过.

1
person.name

通过[key]

1
person["name"]

ES6解构

ES6中可以通过解构的方式进行获取

1
2
3
4
5
6
var{name,say}=person;

//等价于

var name = person.name
var say = person.say

传播操作符

对象解构后使用…可以把剩余参数传给你指定的属性

假如有这样一个对象

1
2
3
4
5
person{
name:"loh",
address:"guang xi",
phone:13663423523
}

我们解构person的name和address并把phone传给person2

1
var{name,address,...person2}=person

那么我们可以分别得到一个name,address和一个person2对象

数组map reduce方法

map

假设有个数组

1
var users = [{age:10,name:"小"},{age:12,name:"中"},{age:14,name:"大"}];

那么可以这样操作map

1
2
3
4
users.map(function(ele){
ele.age += 1;
return ele;
})

reduce

reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数,且该函数为升序执行,并将其结果汇总为单个返回值。

对数组中的每个元素都执行一次我们定义的reduce函数

npm

node包管理器:node package manager

  • npm init

    • 带参数-y即按默认方式配置

    • -g (globel)代表全局安装

    • 初始化命令、初始化npm的参数等等

    • –save 等同于 -S (常用,可保存在package.json文件中),
      -S, –save 安装包信息将加入到dependencies(生产阶段的依赖,也就是项目运行时的依赖,就是程序上线后仍然需要依赖)

    • –save-dev 等同于 -D
      -D, –save-dev 安装包信息将加入到devDependencies(开发阶段的依赖,就是我们在开发过程中需要的依赖,只在开发阶段起作用。)

  • npm install 包名 或npm i 包名

    安装模块,模块位置存储在项目下node_modules下

  • 运行

    node xxxx.js

package.json保存着当前项目所依赖的模块,可以直接复制文件,执行npm install进行复用,相当于maven的pom.xml

镜像

安装cnpm

Babel

babel用来将es6的代码转码成es5的代码,防止某些环境不支持

安装babel

1
npm install -g babel-cli

项目下创建babel配置文件.babelrc

我使用的配置

1
2
3
{   "presets": ["es2015"],
"plugins": []
}

模板配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
{
"presets": [
["@babel/env", {
"targets": {
"node": "current"
}
}]
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-object-rest-spread"
]
}

安装转码器

1
npm install --save-dev babel-preset-es2015

生成转码

1
2
3
babel src -d dist

//babel 转码目录 -d转码 转码目录

也可以在packjson中定义一个命令,把上面的生成代码通过key:value的形式定义进去,

然后我们可以使用npm run 你定义的的命令,进行输出

模块化

CommonJS

有一个01-CommonJS-exports.js,里面定义两个方法,使用export导出

1
2
3
4
5
6
7
8
9
10
11
12
const sum = function(a,b){
return a+b;
}
const sub = function(a,b){
return a-b;
}

module.exports = {
//方法名和你要导出的方法名相同时,可以省略
sum:sum,
sub:sub
}

在另外的02-CommonJS-require.js使用require导入

1
2
3
const r = require('./01-CommonJS-exports.js');

console.log(r.sum(1,3));

ES6

在03-ES6-export.js导出,使用export function导出

1
2
3
4
5
6
7
export function a(){
console.log("f-a");
}

export function b(){
console.log("f-b");
}

在04-ES6-import.js导入,使用import引入

1
2
3
4
import {a,b} from "./03-ES6-export";

a();
b();

但是在实际生产中会把所有方法定义在一起导出

1
2
3
4
5
6
7
8
export default{
ea(){
console.log("f-a");
},
eb(){
console.log("f-b");
}
}

在引入时引入到对象里,再使用对象.方法使用

1
2
import ex from "./03-ES6-export";
ex.ea();
  • export导出
  • import导入

webpack

用来打包静态资源

安装

1
npm install -g webpack webpack-cli

安装好查看版本

1
webpack -v

配置文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
//导入path模块(nodejs的内置模块)
const path = require("path");

module.exports = {
//入口从哪里开始编译打包
entry:"./src/main.js",
//编译后的内容输出目录和文件名
output:{
path:path.resolve(__dirname,"./dist"),
filename:"bundle.js"
}
}

webpack打包css

默认情况下,webpack只处理js模块,如果要处理其他类型,就需要使用loader

  • css-loader 将css装载到JavaScript
  • style-loader 让JavaScript识别css
1
npm install --save-dev style-loader css-loader

修改webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//导入path模块(nodejs的内置模块)
const path = require("path");

module.exports = {
//入口从哪里开始编译打包
entry:"./src/main.js",
//编译后的内容输出目录和文件名
output:{
path:path.resolve(__dirname,"./dist"),
filename:"bundle.js"
},
module:{
rules:[
{
test:/\.css$/,//打包项目中所有css
//使用的loader是什么?
use:['style-loader','css-loader']
}
]
}
}

编译

1
2
3
4
5
webpack -w
//实时监听并编译

webpack
//一次编译

在src下创建style.css

在main.js第一行中引入style.css

1
require('./style.CSS')

编译命令

1
npm run dev

UI框架了解

vue-element-admin


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!