• 后端——模块化、npm、package.json 文件、AJAX（笔试面试题）、MVC

    目录

    一、模块化

    1、模块化概念：

    2、模块化语法：

    3、模块化的笔试题/面试题

    4、require("fs1")的相应位置

    二、npm

    1、下载(常用)

    2、更新/删除

    三、package.json 文件 （项目配置文件）

    四、AJAX

    五、MVC

    一、模块化

    1、模块化概念：

    （把一系列相似功能的，封装到一个模块中，然后供使用）

    node.js的开发是模块化开发的思想 具有一些相同功能的代码 集成为一个模块

    模块主要是由: node系统自带的模块 、 第三方模块  、 自定义模块组成

    第三方模块几乎都是由npm来管理 ==>npm是一个集成了当前世界上最多开源库的生态系统

    nodejs环境中的全局函数：require（）        （window中的全局函数是global）

    在前端中不用require，引用前端的js文件，用import

    在后端运行时，引入第三方js文件，就用require（） 也可以用import（es6语法）

    import 是es6的语法 ==>导出 export defualt xxx

    require是node能读懂的语法==>导出 moudel.exports={}

    2、模块化语法：

    nodejs中有3种模块：

    var fs=require("fs")                // 内置模块 / 核心模块 node.js安装时，自己就装好了的模块

    var mime=require("mime")    //第三方模块，下载后使用  npm i mime 

    var myquerystring=require("./qureystring.js")      //自定义模块

    自定义模块，需导入导出：

    在index.js目录中打开cmd小黑窗，执行 node indedx.js 会打印66666 和 网址

    ==>与import 的用法很相像

    1. //导入：index.js文件中的内容
    2. var myquerystring=require("./myquerystring.js")
    3. myquerystring.tool()   
    4. console.log(myquerystring.url)
    1. //导出：myquertstring.js文件中的内容
    2. module.exports={
    3. 	tool(){
    4. 		console.log(6666666)
    5. 	},
    6. 	url:"网址"
    7. }  //如果里面没写内容，打出来就是一个空对象

    3、模块化的笔试题/面试题

    笔试题：commonJS 中的 require/exports  和  ES6 中 import/export 的区别是什么

    commonJS 中的 require/exports：

    commonJS 模块的重要特性是 加载时执行，及脚本代码在 require 的时候，就会全部执
    行。一 旦出现某个模块被“循环加载”就只输出已经执行的部分，还没有执行的部分是不输
    出的。require可以用在函数、事件里面，跟懒加载相似
    ES6 中 import/export：
    ES6 模块是动态引用，如果使用 import 从一个模块加载变量，那些变量不会缓存，而
    是成 为 一个指向被加载模块的引用,import/export 最终都是编译为 require/exports 来执
    行的。 import它只能写在顶部、开始部分。

    4、require("fs1")的相应位置

    如果输入：  require("fs1")，就会去相应的位置找：

    1、先去当前项目中的node_modules文件夹中找fs1文件夹 中的package.json中main字段对应的路径，然后引用

    2、没有就去node的安装包中的全局安装路径中找

         （我自己设置的是node里面的golbal的node_modules里）

    3、还是没有就去核心库

         （nodejs中的node_modules的npm的node_modules）

    例子1：（第三方模块==>自己下载）

    1、在index.js中输入 var mime=require（“mime”）

    2、经过上面三步都没有找到，就需要下载 : npm i mime --save

    (i可以写全：install  --save就下载到这个文件的内部，如果写-g就下载到全局)

    3、在小黑窗指令输入后，在index.js同级目录层就会多两个文件：node_modules  package-lock.json

    4、这个时候node_modules中就有一个文件夹mime了

    例子2：自定义模块

    一般是写：  var my1=require("./my1.js")

    如果我写： var my2=require("my2")==>想让它代表一个文件夹，也不想它是自己的，就有两种方式下载：

    1、将其传到 npm社区里，就可以用了

    2、模仿上面下载mime后生成的文件 ==> 自己手动在node_modules里创建一个my2文件，然后在小黑窗输入： npm init ,然后一直敲回车 ，然后my2下就有package-lock.json生成，里面就有一个对象装着名字、版本、描述、作者等信息 （也可以不通过小黑窗，自己手动创建package-lock.json，写入那些信息）。同时需要在package-lock.json同级目录创建一个index.js，里面写导出。（！！！但是一般做项目不会在node_modules下创建文件夹写东西，一般都是下载）

    注：

    1、npm init这个指令，文件夹的路径必须是非中文的  

    2、npm init也可以写npm init -y  这样就不用敲回车了，就会直接生成文件夹package-lock.json。代表默认全部为yes

    3、.json中不用 // 来写注释

    二、npm

    提供项目中模块/插件的 下载相关功能

    1、下载(常用)

    npm i/install 模块名字/模块名字  

    npm i 模块名 //安装到本地

    npm i 模块名 -g//安装到全局

    npm i 模块名 --save//安装到项目依赖

    1、npm i  模块名字x1 模块名字x2 模块名字x3 -g  //把模块x1  x2  x3这个三个模块下载到全局安装路径

    2、npm i  模块名字x1 模块名字x2 模块名字x3        或者

     npm i  模块名字x1 模块名字x2 模块名字x3 --save

    //把模块x1  x2  x3这个三个模块下载到项目安装路径(就是当前项目内部 的node_modules)

    3、下载了第三方模块后 npm会在项目配置文件中的依赖项中写入下载的第三方模块名和版本

    4、 npm i  ：按照package.json（配置文件夹）项目清单，把所有的依赖项全部下载出来

    5、npm -v 看版本

    6、 npm run dev：小黑窗的指令==> 就是运行当前文件里面的package.json里面的script字段里面的dev指令 （"dev" : "node index.js"）

    2、更新/删除

    npm update 模块名 //帮你更新到最新版本 npm update 模块名@版本 //帮你更新到指定版本 npm uninstall 模块名 //删除模块

    三、package.json 文件 （项目配置文件）

    项目的配置文件  用于记录整个项目的一些信息

    (比如：项目名、作者信息、"scripts":{"dev":"node index.js"}  ==>启动指令 ==>主要用于小黑窗的npm启动 npm run dev  、"dependencies" ==>项目依赖）

    每一个项目 构建时 先构建一个package.json文件 它代表了这个项目的一些结构和配置信息(项目的清单)

    构建指令: 在项目文件夹下 npm init -y 初始化一个项目清单文件 npm i 是按照项目清单文件去安装所有的依赖项

    1、main字段  ==> 项目入口

    2、scripts字段  ==>cmd的指令   

    3、dependencies字段  ==>当项目中需要依赖，比如axios工具 （npm i axios），就会在这个字段中做记录==>为了以后把node_modules删除了，可以下载回来 （npm i）

    dependencies翻译为依赖项

    四、AJAX

    丢包：比如在下载mime的时候，几万个文件在过程中，因为网络原因、网络波动等，有几个没下就是丢包。

    解决方案：将mime删除，重新下载（npm i mime）。也可以不删，直接再下一次。一般是删除了重新下载

    前端刷新页面有两种技术:

    1) 整页面刷新： 重新 跳转到一个新的网页html

    2) 局部刷新 ： 网页不变，依然是我原本的html文件。用js去做网络请求 ，然后请得到的数据 动态的渲染的DOM (添加到页面)  ==>  AJAX技术

    ==> 其中：

    1、可以点击刷新：写一个button，然后点击就运行一个函数。

    2、也可以直接页面加载就刷新：将代码写在winodw.onload里面

    这个网络请求的技术是AJAX，AJAX是一个技术，将这个技术封装到window对象的一个方法（XMLHttpRequest==>构造函数）里面==> window.XMLHttpRequest ，它是全局变量，所以把window去掉

    笔试题：

    手写原生AJAX的代码，就是下面index.js文件中的代码

     前端index.js文件

    （xhr.status==200 如果不写，默认是200）

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 	head>
    7. 	<body>
    8. 		<button onclick="load1()">ajax请数据button>
    9. 		<script>
    10. 			// 前端刷新页面有两种技术:
    11. 			// 整页面刷新  跳转到一个新的网页html
    12. 			// 局部刷新  用js去做网络请求  然后请得到的数据 动态的渲染的DOM
    13. 			function load1(){
    14. 				//AJAX技术    ==>window.XMLHttpRequest
    15.  
    16. 				//1.创建ajax对象 （创建一个能做网络请求的对象）
    17. 				let xhr=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP")	  //兼容性写法	，前面是现代浏览器的写法		
    18. 				
    19. 				//2.配置连接信息 ==> 请求方式是GET还是POST，以及要请求公司的网址url（绝对网络路径、相对网络路径（常用）都可以）和 是否异步请求，默认是true
    20. 				xhr.open("GET",`http://192.168.6.60:8080/ajax1?name=karen&count=20`,true)				
    21. 				
    22. 				//3.发送网络请求  括号里只能填字符串，字符串不会发给后端，只有上面是POST的时候，菜发给后端
    23. 				xhr.send()				
    24. 				
    25. 				//4.等待
    26. 				//xhr对象里有一个readyState属性，用来监听管道
    27. 				//1：与其它电脑连接，并且连上了，建立了连接
    28. 				//2：后端正在处理信息
    29. 				//3：重新连另外一个管道了
    30. 				//4：后端将数据发过来了，我可以收了
    31. 				while(xhr.readyState!=4){}  //就可以写一个while循环，一直判断是否等于4。
    32. 				//如果不等于4，就死循环，下面的代码就不会运行，这就相当于同步了，所以不好。因此就有了下面这个事件：
    33. 				xhr.onreadystatechange=function(){  //让这个对象监听onreadystatechange这个属性，只要这个属性改变了，它就会调用这个函数
    34. 					console.log(xhr.readyState)
    35. 					if(xhr.readyState==4&&xhr.status==200){  //xhr.status代表状态码，可以代表数据（业务）是否正确，由程序员来设定等于多少就正确或者错误
    36. 						//比如我现在前端设定的是200的状态码，那这个就是正确的数据/业务
    37. 						console.log(xhr.responseText)  //xhr.responseText表示后端发过来的数据
    38. 					}else if(xhr.readyState==4&&xhr.status==404){ //xhr.readyState==4就代表网络请求成功  404不代表网络请求失败
    39. 						console.log(xhr.responseText)
    40. 						var obj=JSON.parse(xhr.responseText) //将json数据转换为对象，供后面使用
    41. 						console.log(obj)
    42. 					}
    43. 				}
    44. 			}
    45. 		script>
    46. 	body>
    47. html>

     后端index.js文件

    1. var http=require("http")
    2. var fs=require("fs")
    3. var url=require("url")
    4. var querysting=require("querystring")
    5. var mime=require("mime")
    6. var app=http.createServer((req,res)=>{
    7. 	let pathname=url.parse(req.url).pathname
    8. 	fs.readFile(__dirname+"/src"+pathname,(err,data)=>{
    9. 		if(!err){
    10. 			res.setHeader("content-Type",mime.getType(pathname))
    11. 			res.end(data)
    12. 		}else if(pathname=="/ajax1"){
    13. 			res.writeHead(200,{"content-Type":"text/json"})  //200是自己写的状态码
    14. 			res.end('{"name":"karen","age":20}')  //'{"name":"karen","age":20}'这是Json数据
    15. 		}else{
    16. 			res.setHeader("content-Type","text/json")
    17. 			res.end("404 没有找到")
    18. 		}
    19. 	})
    20. })
    21. app.listen(8080)

    五、MVC

    这个MVC框架不需要自己设计，后面可以直接使用框架

    M：Model 数据模型层

    V：View  试图层

    C：Controller  逻辑控制层

    因为代码很多，就需要分类进行写，使用模块化的思想，就分为MVC这三类进行写代码

    会使用框架

    index.js

    1. var http=require("http")
    2. var router=require("./router.js")
    3. var controller=require("./controller.js")
    4. var controller2=require("./controller2.js")
    5. http.createServer(router).listen(8080)
    6. //静态托管
    7. router.static(__dirname+"/src")
    8. //注册
    9. router.get("/login",controller.fm)
    10. router.get("/register",controller.register)
    11. router.get("/register2",controller2.register2)
    12. router.get("/ajax1",controller2.fn)

    router.js

    1. var fs=require("fs")
    2. var url=require("url")
    3. var querysting=require("querystring")
    4. var mime=require("mime")
    5. let urls={}
    6. let router=function(req,res){
    7. 	//这个函数每次用户访问时运行
    8. 	let pathname=url.parse(req.url).pathname
    9. 	fs.readFile(router.basepath+pathname,(err,data)=>{
    10. 		if(!err){
    11. 			res.setHeader("content-Type",mime.getType(pathname))
    12. 			res.end(data)
    13. 		}else{
    14. 			if(!urls[pathname]){res.end("404 not found-mymvc")}
    15. 			else{urls[pathname](req,res)}
    16. 		}
    17. 	})
    18. }
    19. //这个比上面那段代码还先执行
    20. router.static=function(path){
    21. 	this.basepath=path
    22. }
    23. router.get=function(url,cb){
    24. 	urls[url]=cb
    25. }
    26. router.basepath=__dirname+"/public"
    27. module.exports=router;

    controller.js

    1. module.exports={
    2. 	ajax1(req,res){},
    3. 	ajax2(){},
    4. 	fn(){},
    5. 	fm(req,res){
    6. 		res.end("login success6666 今天结束了")
    7. 	},
    8. 	register(req,res){
    9. 		res.end("6666")
    10. 	}
    11. }

    Tip：

    JSON中对象转字符串，后面可以填5个基本数据

    var str=JSON.stringify(arr)

  • 相关阅读:
    Docker容器内时区相差8小时
    SigmaStudio定时器实验1
    计组 | 各程序员、用户 可见 / 不可见 寄存器总结
    Linux CookBook
    日志打印的碎碎念总结
    python绘制组合图（柱状图和折现图）及图例显示问题解决
    PHP 与底层 linux 命令 混合开发 类
    【算法刷题第二题】牛客题:旋转数组的最小数字
    Redis之Lua的应用（四）
    Spock单元测试框架介绍及在美团优选的实践_第二章(static静态方法mock方式)
  • 原文地址：https://blog.csdn.net/qq_52301431/article/details/126048993