目录
一.Vue框架前置-nodejs入门
1.Nodejs概念
Node.js 是一个构建于 Chrome V8引擎之上的一个Javascript 运行环境,Node是一个运行环境，作用是让js拥有开发服务端的功能
==圈重点== ： vue框架能够正常开发的前提是你的电脑必须要安装node环境
Nodejs作为vue框架之前一个内容,Nodejs有助于为后续Vue框架打下良好的基础
Node.js官网地址：Node.js(推荐)
Node.js中文地址:Node.js 中文网(不推荐,里面很多文档需要收费开通会员)
2.Nodejs的作用
Nodejs的作用 : 使用js语言开发服务器.(通俗来讲： 是做后台的，抢java和python饭碗 )
大体构造如下图所示:
二.Nodejs环境安装
如果电脑不支持最新版本，这个网站可以找到所有nodejs版本： Node.js
确认当前电脑已经安装好了Node环境
打开终端，输入node -v,如果能看到版本号则说明当前电脑已经安装Node环境，如果提示Node不是内部或外部命令，则表示未安装.
一旦安装了Node,则会自动一并安装npm
三.服务端js与客户端js区别
客户端JS由三部分组成
ECMAScript：确定js的语法规范
DOM：js操作网页内容
BOM：js操作浏览器窗口
服务端JS只有ECMAScript,因为服务端是没有界面的
注意:==在nodejs中使用dom与bom的api程序会报错==
四.Nodejs模块化介绍
1.模块化概念
模块化就是把一个大的文件拆分成很多个小文件，用特定的语法将各个文件（模块）组合到一起
一个js文件可以引入另一个文件, 这种开发方式就叫做模块化开发 (模块 === js文件)
2.模块化开发的好处
1.将功能分离出来
一个js文件只负责处理一个功能，这样做的好处是业务逻辑清晰，便于维护
2.按需导入
用到哪一个功能，就导入哪一个js文件。模块化开发是渐进式框架的共同特征。
3.避免变量污染
一个js文件(模块),都是一个独立的作用域。 互不干扰，不用考虑变量名冲突问题
五.Common模块化语法规范
导入模块 const 模块 = require('文件路径')
到导出模块module.exports={ }
六.fs模块
1.readFile读取文件
//1.导入文件模块
const fs = require('fs')
//2.读取文件
/**
* 第一个参数：文件路径
* 第二个参数：编码格式 （可选参数，默认为buffer二进制）
* 第三个参数：读取回调操作（异步操作）
* err:如果读取成功，err为null, 否则读取失败（一般文件路径错误或者找不到文件）
* data:读取到的数据
*/
fs.readFile('./data/aaa.txt','utf-8',(err,data)=>{
if(err){
console.log(err)
//抛出异常，throw的作用就是让node程序终止运行，方便调试
throw err
}else{
console.log(data)
}
})
console.log('11111')
//3.同步读取文件(了解即可，几乎不用,一般在异步的api后面加上Sync就是同步)
let data = fs.readFileSync('./data/aaa.txt','utf-8')
console.log(data)
console.log('2222')2.writeFile写入文件
//1.导入文件模块
const fs = require('fs')
//2.写文件
/**
* 第一个参数：文件路径
* 第二个参数：要写入的数据
* 第三个参数：文件编码 默认utf-8
* 第四个参数： 异步回调函数
* err: 如果成功，err为null.否则读取失败
*/
fs.writeFile('./data/bbb.txt','黑马程序员','utf-8',(err)=>{
if(err){
throw err
}else{
console.log('写入成功')
}
})七.path路径模块
//1.导入path模块
const path = require('path')
//2.使用模块
// (1) 获取一个文件的拓展名
/* 不关心此路径文件在不在, 就是处理这个字符串。 获取.后面的部分可以知道这个文件格式 */
console.log(path.extname('./data/aaa.txt'));//.txt
console.log(path.extname('./data/bbb.html'));//.html
console.log(path.extname('./data/ccc.css'));//.css
console.log(path.extname('./data/ddd.js'));//.js
// (2) 拼接相对路径, 使用join方法
/* 把多个字符串按照路径的方式拼接起来 */
console.log(path.join('a', 'b'))// a/b
// (3) 拼接绝对路径
/* 默认从磁盘根目录开始拼接出完整的路径 */
console.log(path.resolve('a', 'b'));// 文件路径/a/b
/* (4)获取当前文件所在的绝对路径 */
console.log(__dirname)// 文件路径
八.http模块(搭建服务器)
1.http模块大搭建服务器
// 1.导入http模块
const http = require('http')
// 2.创建服务器
const app = http.createServer((req, res) => {
// request : 请求报文
// decodeURI(req.url)字符串编码转换成字符串
console.log(req.url, decodeURI(req.url));
})
// 3.开启服务器
// 第一个参数 port : 端口号 node端口号范围[3000,3009]
// 第二个参数 hosthome : 主机名(ip地址)
// 第三个参数 calback : ()=>{}
app.listen(3000, () => {
console.log('服务器开启成功');
})2.根据不同请求响应不同数据
// index 响应 首页
// login 响应 登录
// 其他 响应 not found
// 1.导入http模块
const http = require('http')
// 2.创建服务器
const app = http.createServer((req, res) => {
if (req.url === '/index') {
// request : 请求报文
// 设置响应头:服务器告诉浏览器我给你的数据是什么格式
res.writeHead(200, {
'Content-Type': 'text/html;chartset=utf-8'
})
res.end('index')//响应体
} else if (req.url === '/login') {
res.writeHead(200, {
'Content-Type': 'text/json;chartset=utf-8'
})
// 后台只能响应字符串或者二进制,如果你想要响应其他数据需要转成json
// js=>json : JSON.stringify( js对象 )
res.end(JSON.stringify({ name: '荔枝', age: 18 }))
} else {
res.end('Not Found' + req.url)
}
})
// 3.开启服务器
// 第一个参数 port : 端口号 node端口号范围[3000,3009]
// 第二个参数 hosthome : 主机名(ip地址)
// 第三个参数 calback : ()=>{}
// 开启服务器
app.listen(3000, () => {
console.log('服务器开启成功');
})3.http响应客户端HTML文件
// 1.导入http模块
const http = require('http')
const fs = require('fs')
const path = require('path')
// 2.创建服务器
const app = http.createServer((req, res) => {
// (1)请求
if (req.url === '/index') {
// (2)处理:fs读取文件数据
fs.readFile(path.resolve('index.html'), (err, data) => {
if (err) {
throw err
} else {
// (3)响应:文件数据
res.end(data)
}
})
} else if (req.url === '/login') {
fs.readFile(path.resolve('login.html'), (err, data) => {
if (err) {
throw err
} else {
// (3)响应:文件数据
res.end(data)
}
})
} else {
fs.readFile(path.resolve('404.html'), (err, data) => {
if (err) {
throw err
} else {
// (3)响应:文件数据
res.end(data)
}
})
}
})
// 3.开启服务器
app.listen(3000, () => {
console.log('服务器开启成功');
})九.http响应HTML文件--天天果园网页
// 1.导入http模块
const http = require('http')
const fs = require('fs')
const path = require('path')
// 2.创建服务器
const app = http.createServer((req, res) => {
console.log(req.url);
// (1)判断请求路径
if (req.url === '/') {
// (2)处理:读取首页
fs.readFile(path.resolve('www', 'index.html'), (err, data) => {
if (err) {
throw err
} else {
// (3)响应:读取的数据
res.end(data)
}
})
} else {
// decodeURI(req.url) : 解析url里面的中文
// path.join(__dirname, 'www', decodeURI(req.url)拼接路径
// 获取当前文件所在的文件夹绝对路径 : __dirname
fs.readFile(path.join(__dirname, 'www', decodeURI(req.url)), (err, data) => {
if (err) {
throw err
} else {
// (3)响应:读取的数据
res.end(data)
}
})
}
})
// 3.开启服务器
app.listen(3000, () => {
console.log('服务器开启成功');
})网页实现效果图:
2515
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
