JavaWeb前端

Node.js

nodejs操作入门

//helloworldjs
//类似于:System.out.printIn("Hello world")
console.log("hello world!!!");//运行命令 node helloworld.js

nodejs实现Httpserver服务

//导入模块是require 就类似于 import java.io
const http =require('http');//1.创建一个httpserver服务
http.createServer(function(request,responese){//浏览器怎么认识hello server!!!responese.writable(200,{'Content-type':'text/plain'});//含义:告诉浏览器将以text-plain去解析hello server 这段数据//给浏览器输出内容responese.end("<strong>hello server!!!</strong>");
}).listen(8888);
console.log("你启动的服务是:http://localhpst:8888已启动成功!!");//2.监听一端口8888
//3.启动运行服务 node httpserver.js
//4.再浏览器访问http://localhost:8888

nodejs操作MySQL数据库

//导入mysql依赖包,mysql属于第三方的模块就类似于 java.sql一样的道理
var mysql = require("mysql");
const { createConnection } = require("net");//1.创建一个mysql的Connecion对象//2.配置数据连接的信息var connection=mysql.createConnection({host:"127.0.0.1",port:3306,user:"root",password:"123456",database:"testdb"
});//3.开辟连接
connection.connect();
//4.执行curd
connection.query("select * from nodejs_user",function(error,results,fileds){//如果查询出错,直接抛出if(error)throw error;//查询成功console.log("results=",results);
});
//5.关闭连接
connection.end();
//6.运行 node db.js 查看效果

ES6语法

let 和 const 的定义

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Decument</title></head><body><script>//传统定义变量和常量的方式 统一使用 varvar name="原神";var link="https://ys.mihoyo.com/main/";var PI=Math.PI;console.log(name);console.log(link);console.log(PI);//ES6定义的方式let name2="原神";let link2="https://ys.mihoyo.com/main/"//定义常量const PI2=Math.PI;console.log(name2);console.log(link2);console.log(PI2);</script></body>
</html>

let-const 命令和 var 的区别

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Decument</title></head><body><script>//let 和 const 解决//1.var 的变量穿透的问题//2.常量修改的问题for(var i=0;i<5;i++){console.log(i);}//这里就造成变量穿透//用 var 定义i 虽然是for循环中的局部变量,但仍可以在此被调用输出//console.log(i);//在此, var 定义的常量 PI 会被修改,而 const 定义的则不会var PI=Math.PI;PI=100;console.log(PI);//在实际开发和生产中,如果是小程序,uniapp或者一些脚手架中的,可以放心用let 和 const//如果室友web开发,仍旧使用var.因为一些低版本的浏览器还是不支持let 和 const</script></body>
</html>

模板字符串

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Decument</title></head><body><script>//字符串会牵涉到动态部分var person = {name:"原神",address:"米哈游",link:"https://ys.mihoyo.com/main/"}let address="我喜欢玩"+person.name+",由"+person.address+"开发,官网是"+person.link;console.log(address);//ES6的语法模板字符串let address2=`我喜欢玩${person.name},由${person.address}开发,官网是${person.link}`;console.log(address2);</script></body>
</html>

函数默认参数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Decument</title></head><body><script>//理论给参function sum(a,b){return a+b;}var result = sum(100,100);console.log("result = ",result);//默认参数function sum(a=100,b=100){return a+b;}var result = sum(100);console.log("result = ",result);</script></body>
</html>

箭头函数

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Decument</title>
</head><body><script>//箭头函数 - 重点 //在项目开发中:比如小程序,uniapp,一些常见的脚手架中大量使用var sum = function (a, b) {return a + b;};//箭头函数 - 改进var sum = (a, b) => {return a + b;}//箭头函数 - 改进var sum = (a, b) => a + b;//上述箭头函数优化实例的规律//1.去掉function//2.在括号后面加箭头//3.如果逻辑代码仅有 return 可以直接省去//如果有逻辑体,就不能省略//4.如果参数只有一个,可以把括号省去(如果有多个参数就不能省去)var sum2 = (a, b) => {var num = a + b;return num;}//这种情况就不能省略 return//var sum = (a,b)=>a+b;var arr = [1, 2, 3, 4, 5, 6];var newarr = arr.map(function (obj) {return obj * 2;});console.log(newarr);var arr = [1, 2, 3, 4, 5, 6];var newarr = arr.map((obj) => {return obj * 2;});console.log(newarr);var arr = [1, 2, 3, 4, 5, 6];var newarr = arr.map(obj => obj * 2);console.log(newarr);</script>
</body>
</html>

对象初始化简写

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Decument</title>
</head><body><script>var info = {title:"原神",link:"https://ys.mihoyo.com/main/",go:function(){console.log("老婆贴贴");}};//ES6//因为对象是key:value存在//1.如果key和变量的名字一致,可以只定义一次即可//2.如果value是一个函数,可以把`:function`全部去掉,只剩下()即可var title="神里凌华";var link="https://ys.mihoyo.com/main/character/inazuma?char=0";let info2={title,link,go(){console.log("老婆贴贴");}};console.log(info2);console.log(info2.title);console.log(info2.link);info2.go();</script>
</body>
</html>//案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Decument</title>
</head><body><form action=""><p>账号:</input></input><input type="text" id="account"></p><p>密码:</input>:</input></input><input type="text" id="account"></p><p><input type="button" value="登录" id="loginbtn"></p></form><script>// document.getElementById("loginbtn").οnclick=function(){}$("#loginbtn").on("click",function(){var account = $("#account").val();var password = $("#password").val();//对象简写的应用场景var params = {account:account,password:password};//执行异步请求$.ajax({type:"post",url:"",data:params,success:function(){}})})</script>
</body>
</html>

对象解构

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Decument</title>
</head><body><script>//对象是key:value存在,获取对象属性和方法的方式有两种//1.通过点例(.)//2.通过中括号([])var title = "神里凌华";var link = "https://ys.mihoyo.com/main/character/inazuma?char=0";let info2 = {title,link,go() {console.log("老婆贴贴");}};//通过.的方式console.log(info2);console.log(info2.title);console.log(info2.link);info2.go();//通过[]的方式console.log(info2);console.log(info2["title"]);console.log(info2["link"]);info2["go"]();//ES6对象结构 - 快速获取属性和方法的一种形式var { title, link } = info2;// 还原代码// var title = info2.title;// var link = info2.link;console.log(title, link);go();//为什么对象取值要提供两种方式 ./[] </script>
</body>
</html>

传播操作符

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Decument</title>
</head><body><script>//对象传播操作浮 ...var person = {name: "原神",address: "Mihoyo",link: "https://ys.mihoyo.com/",phone: 1234567,go() {console.log("可莉女儿,斯哈,快到碗里来");}};//解构var { name, address, ...person2 } = person;console.log(name);console.log(address);console.log(person2);//person2的内容//因为 name 和 address 已经被解构,所以剩下的内容全部被person2继承// go: ƒ go()// link: "https://ys.mihoyo.com/"// phone: 1234567// [[Prototype]]: Objec</script>
</body>
</html>//案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Decument</title>
</head><body><script>// java -- 后台// 数据格式: var userPage = {pages:10,user:[{},{}],pageNo:1,pageSize:100,total:100};// 异步请求// $.post("/user/search",function(res){//res = {pages:10,user:[{},{}],pageNo:1,pageSize:100,total:100};var userPage = {pages:10,users:[{},{}],pageNo:1,pageSize:100,total:100};var {users,...userpage2} = userPage;// })</script>
</body>
</html>

数组map和reduce方法使用

1.map

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Decument</title>
</head><body><script>// 要对arr数组每个元素*2var arr = [1, 2, 3, 4, 5, 6, 7];// 传统的方式let newarr = [];for (let i = 0; i < arr.length; i++) {newarr.push(arr[i] * 2);}console.log(newarr);// map -- 自带循环,并且会把处理的值回填对应的位置var newarr2 = arr.map(function (ele) {return ele * 2;})//简化var newarr2 = arr.map(ele => ele * 2)console.log(newarr2);// map处理对象的数据var users = [{ age: 10, name: "小学" }, { age: 12, name: "可莉" }, { age: 15, name: "科莱" }];var newusers = users.map((ele) => {ele.age = ele.age + 1;return ele;})console.log(newusers);</script>
</body></html>

2.reduce

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><title>Decument</title>
</head><body><script>var arr = [1,2,3,4,5,6,7,8,9,10];/*规则a=1 b=2 3a=3 b=3 6a=6 b=4 10...*/var result = arr.reduce(function(a,b){return a+b;});console.log("result = " ,result);</script>
</body></html>

NPM

npm构建、安装与卸载

npm : node package manager ,node包管理器,类似于maven
作用:1:快速构建node.js工程-npm init- 得到package.json 这个文件的内容如下:{"name": "npmpro", // 工程名"version": "1.0.0",   // 版本"description": "可莉女儿",    //描述"main": "index.js",   //入口js"scripts": {  //运行脚本"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["xiao"],"author": "风影",   //开发者"license": "ISC"  //授权协议}- 类似于: pom.xml 文件作用管理管理依赖。2:快速安装和依赖第三个模块。比如npm install mysql redis等等。2.1:快速安装依赖第三方模块- npm install xxx 或者 npm i xxx模块名2.2:安装模块的位置- 安装的模块会放入到项目的node_modules文件夹中2.3:安装模块如何使用- require// 导入模块 redis- const redis = require("redis");// 导入模块mysql- const mysql = require("mysql");2.4:模块和package.json的关系"dependencies": {"jquery": "^3.6.0","mysql": "^2.18.1","redis": "^3.1.2","vue": "^3.2.37"}- 通过npm install xxx 会记录再package.json这个文件中。- 就类似于 maven 中 pom.xml 一个含义,记录作用:复用。1:package.json 记录的依赖模块2:通过 npm install 可以之间把 package.json 所依赖的模块全部都自动下载下来这样就可以避免重复下载模块。便于第三方模块的集成3:不直接拷贝 nodel_modules 的原因下载的模块依赖过多文件过大,混乱文件很多2.5:模块安装很慢处理方法- npm install -g cnpm --registry=https://registry.npm.taobao.org2.6:运行方式- node xxx.js 运行过程.js是可以省去的 终止的命令行:CTRL+C 多次执行2.7:下载数量- npm install jquery vue redis mysql- cnpm install jquery vue redis mysql2.8:下载指定的版本号- npm intall xxx@版本号- 具体的版本号:查看官方网址3:如何卸载模块- npm uninstall vue jquery

Node.js 学习(持续更新)相关推荐

  1. Node.js学习笔记 更新完毕 2022 coderwhyWEB前端体系课

    一 Node.js是什么 官方对Node.js的定义: Node.js是一个基于V8 JavaScript引擎的JavaScript运行时环境 Node.js is a JavaScript runt ...

  2. 唤醒手腕 - 前端服务器端开发 Node.Js 学习笔记(学习中,更新中)

    唤醒手腕 - Node.Js 学习笔记 唤醒手腕个人的学习记录,时间在2021年12月13日 ~ 2021年12月14日,学习方式看官方文档和B站视频,如有错误或者代码问题的地方,欢迎C站大佬能够帮忙 ...

  3. node.js学习总结:node.js的内置模块,模块化,npm与包 express,前后端身份认证 JWT认证机制

    node.js学习总结 什么是node.js node.js的内置模块 fs系统模块 path路径模块 http模块 模块化 npm与包 express express路由 express+mysql ...

  4. 千锋Node.js学习笔记

    千锋Node.js学习笔记 文章目录 千锋Node.js学习笔记 写在前面 1. 认识Node.js 2. NVM 3. NPM 4. NRM 5. NPX 6. 模块/包与CommonJS 7. 常 ...

  5. node.js学习笔记

    # node.js学习笔记标签(空格分隔): node.js---## 一 内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...

  6. node.js学习笔记14—微型社交网站

    node.js学习笔记14-微型社交网站 1.功能分析 微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...

  7. Node.js学习笔记8

    Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...

  8. node.js学习笔记5——核心模块1

    node.js学习笔记5--核心模块1 Node.js核心模块主要内容包括:(1)全局对象 (2)常用工具 (3)事件机制 (4)文件系统访问 (5)HTTP服务器与客户端 一: 全局对象 Node. ...

  9. 《写给PHP开发者的Node.js学习指南》一2.2 预定义的PHP变量

    本节书摘来自异步社区<写给PHP开发者的Node.js学习指南>一书中的第2章,第2.1节,作者[美]Daniel Howard,更多章节内容可以访问云栖社区"异步社区" ...

最新文章

  1. 棋盘格检测--Automatic camera and range sensor calibration using a single shot
  2. flash里alert
  3. static_cast, dynamic_cast, const_cast
  4. python+selenium+Robot
  5. __slots__的作用
  6. 2 Redis基本知识
  7. C# MVC IOC、依赖注入
  8. php mencache扩展,【memcache缓存专题(3)】PHP-memcache扩展的安装以及使用
  9. c#初学12-07—常用正则表达式
  10. 洛谷 P2622 关灯问题II (状态压缩+BFS)
  11. Testbench编写常用语法和必备知识
  12. 无法复制文件到远程桌面的解决办法
  13. Autel Maxisys Elite Common FAQs
  14. OpenGLES2.0渲图步骤:绘几何图形、图片处理、离屏渲染(3)
  15. java高校心理测评管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
  16. Linux编译之(1)C语言基础
  17. 已知一个字符串,将字符串中的大写英文字母转变/转化成小写字母,小写字母转变为大写字母,并将转变后的字符串输出
  18. 基于Android的健康医疗论坛的设计与开发(android studio)
  19. javaScript基础面试题 ---闭包
  20. echarts3实现柱状图和饼图详解

热门文章

  1. Kafka-我发的消息都发到哪儿去了?
  2. IT工作人员颈椎自我疗法-推荐
  3. 35岁程序员如何转型
  4. 期货开户寻找交易确定性
  5. Cesium|xt3d加载中国地形
  6. uniapp配合colorUI制作简单的信封
  7. SNP芯片探针回帖基因序列
  8. FPGA系统性学习笔记连载_Day7【16位比较器设计】 【原理及verilog实现、仿真】篇
  9. 华硕无双性能、体验双升级,“里子”“面子”精致又强悍
  10. migo初始化库存 s4_【S4 MM】S4中继续使用MB系统事务代码