node.js学习笔记

Node.js

编写服务端网址

const http = require("http");
http.createServer(function(request,response){
    //浏览器以什么样的方式去识别hello,world
    response.writeHead(200,{"Content-type":'text/html'});//以text/html去识别hello，world,
    //如果是text/plain就会打印带标签的文字
    //给浏览器输入内容
    response.end("<strong>hello,world</strong>")

}).listen(8888)  //监听一个端口8888

console.log("你启动的服务是http://localhost:8888")

操作数据库mysql

首先安装外部第三方模块mysql
npm install mysql

//1:导入mysql依赖包，类似java.sql
const { throws } = require("assert");
const { connect } = require("http2");
//2:创建一个mysql的连接对象
var mysql = require("mysql")
 
//3:配置数据库的信息
var connection = mysql.createConnection({
    host:"127.0.0.1",
    user:"root",
    port:3306,
    password:"root",
    database:"go_test"
});
//4:开辟连接
connection.connect();
//5:执行curd命令
connection.query("select * from user",function(error,result,fields){
    //如果异常，抛出
    if(error)throw error;
    //查询成功
    console.log("result:",result)
})
//6:关闭连接
connection.end();
//运行db.js

let和const

最开始只有var定义变量，因为var会造成变量穿透，而后出现了let和const

变量穿透就是i还会被读到，i为5，for里的var作用域 外面也能收到，换成let就不会出现这个问题了。

模板字符串

类似格式化fmt.printf的作用
使用person的名字是${person.name}

箭头函数

取对象字段，方法的方式

对象传播操作符…

类似继承，将除了name,address的属性给了person2

数组map

数组reduce

将数组里的元素迭代相加

npm

类似java2个作用，
1，快速构建项目 npm init,会让你填各种信息，名称描述等，npm init -y默认参数安装
2，快速安装和依赖第三方模块，如npm install mysql redis 等到node_models,指定版本号加@

构建后会生成package.json文件，可以进行复用，将此文件拖走后，直接执行npm install就可以下载依赖中的文件，不直接拷贝node_models的原因是源文件过大，混乱文件过多
安装第三方包过慢的话，安装国内阿里云cnpm插件。
npm install -g cnpm --registry=https://registry.npm.taobao.org

卸载npm uninstall mysql redis

babel

有时候es6在nodejs环境中无法运行，可以用babel给es6降级为es5
安装命令 npm install -g babel-cli
要搭配转换器，安装转换器命令，

1.创建babel文件夹
2.初始化项目npm init -y
3.创建文件src/xxx.js
4.配置.babelrc

{
    "presets": ["es2015"],
    "plugins": []
}

5.安装转换器 cnpm install --save-dev babel-preset-es2015这条命令在系统shell下执行,不能在vscode里执行，不然会报错
6.执行babel命令 babel src -d dist 将src目录下的文件转码后放到dist目录下

图片里的dev对应的命令，可以用npm run dev来进行执行。

模块化开发

类似java的导包，可以将代码封装成工具类，供其他人使用。

common.js模块

1.先创建一个a.js文件，使用module.exports ={}进行方法导出。

//工具类
let sum = function(a,b){
    return a+b
}
let sub = function(a,b){
    return a-b
}
//导出给其他人使用
module.exports={
        sum,
        sub
}

2.在创建一个b.js文件使用a里的方法。

//导入
var m = require("./a")
var a=m.sum(1,2)
var b=m.sub(1,2)
console.log(a,b)

ES6模块化

老版：
1、首先创建一个userApi.js里面搭配export写2个方法，

export function getList(){
    console.log("获取列表")
}
export function save(){
    console.log("保存")
}

2、在创建一个userTest，import导入userApi里的方法

import {getList,save} from './userApi'

getList()
save()

3、由于默认不支持es6的import语法，所以需要利用babel进行降级处理
4、操作为 先npm init -y将所在文件变成nodejs文件，然后创建.babelrc,在packjson里设置命令，
“build”: “babel src -d dist”
5、执行npm run build

新版
1、

export default {
    getList(){
        console.log("获取列表")
    },
    save(){
        console.log("保存")
    }

}

2、
useri可以自己定义名字

import useri from './userApi'

useri.getList()
useri.save()

webpack

前端项目中有很多的js，css，png文件，平时如果将源码泄露出去会不安全，于是可以用webpack将多个文件打包成一个文件，提升网页响应效率。
安装命令：cnpm install -g webpack webpack-cli，这条命令下载完查看版本报错，指定版本下载，cnpm install -g webpack@5.16.0 webpack-cli@4.4.0
安装成功后用 webpack -v 查询版本
webpack -w可以监听代码，不需要保存，实时更新。

打包js实战

1.创建一个项目，使用npm init -y 初始化为nodejs项目
2.创建一个src目录
3.在目录下创建2个文件，一个until.js，一个common.js
代码分别为

//输出
exports.info = function(str){
    //往控制台输出
    console.log(str);
    //往浏览器输出
    document.write(str);
}

exports.add=(a,b)=>a+b;

4.准备一个main.js文件，集中引入文件

const util = require('./util')
const common = require('./common')

common.info("helloWorld"+util.add(100,100))

5.根目录下定义一个webpack.config.js 文件配置打包的规则

//导入path模块，nodejs系统内置的
const path = require('path')
//定义打包规则
module.exports = {
        //定义要打包的入口函数的地址
        entry:"./src/main.js",
        //编译成功后输出的位置，名字
        output:{
            //_dirname是一个常量，表示当前项目的根目录
            path:path.resolve(__dirname,"./dist"),
            filename:"bundle.js"
        }
}

6.执行webpack查看效果
如果执行报错如下：
webpack : 无法加载文件 C:\Users\LENOVO\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?Link
ID=135170 中的 about_Execution_Policies。

解决方案：
关闭vscode，以管理方式重新打开vscode，在终端执行set-ExecutionPolicy Remotesigned可解决

css打包实战

1、安装loader依赖，npm install --save -dev style-loader css-loader
2、更改上面的打包规则，增加一条

module:{
            rules:[{
                test:/\.css$/,
                use:["style-loader","css-loader"]
            }]
        }

3、src目录下增加一个styel.css样式文件

body{
    background:yellow;
}

4、main.js中增加引入包
require(“./style.css”)
5、重新webpack执行编译查看网页变成黄色了。