什么是node.js???
chrome浏览器能运行前端所写的javascript代码,原因是浏览器内置了一个能够解析js的V8引擎。有人V8引擎单独抽取出来,后台进行运行。这就是现在大家看到的node.js。
node.js就是一个运行环境,后台运行js的环境。 [JVM:后台运行环境,后台运行的是java代码编译的class文件]
编写JS代码,以前是怎么写javascript代码,现在同样是怎么去写。
声明一个变量
var
声明一个函数
function funName(){
//业务操作
}
var a = 1;
var b= 2;
console.log(a+b);
//alert(a+b); //是不能使用的
导入和导出【JS和JS之间的方法互调】
导出 exports
a.js
exports.add=function(a,b){
return a+b;
}
导入 require
b.js
var demo = require(’./a’)
var rsult = demo.add(100,300);
node.js编写一个web服务
//require http从哪里来? 内置模块
var http = require(‘http’);
http.createServer(function (request, response) {
//request: 请求对象
//response: 响应对象
//200响应状态码 404 500 403…
//Content-Type: text/html(文本) text/plain(文本)
//text/json(山寨) application/json(正版) json数据类型
response.writeHead(200, {‘Content-Type’: ‘text/plain’});
response.end(‘
Hello World
’);}).listen(8888); //监听的端口
console.log(‘Server running at http://127.0.0.1:8888/’);
如果用户发送请求的时候携带了参数,参数该如何获取?
var url = require(“url”); //url内置模块
http.createServer(function(request,response){
response.writeHeader(200,{'Content-Type':'text/plain'});
var urlParam = request.url;
var rst = url.parse(urlParam,true);
console.log("******>"+JSON.stringify(rst));
var param = rst.query; // {"id":"1","name":"zhangsan"},
//var params = url.parse(request.url,true).query;
for(key in param){
console.log(key+"==="+param[key]);
}
}).listen(9999);
node.js中的包管理
npm / cnpm / nrm
node.js:是一个用来运行后台的js的运行环境。使用Js就可以编写很多组件(echarts).
要想使用别人写好的echarts工具,下载echarts.
如何下载?
npm:可以从远端下载使用js编写的一个工具/插件(举例:echarts).
npm的安装会随着node.js的安装进行。
下载:
全局下载:针对于电脑上的所有项目
npm install -g echarts 下载ehcarts命令
-g可以在echarts后面,也可以在前面
思考问题:下载的echarts在哪?
npm root -g 查看全局下载的目录
局部下载:针对于当前项目下载
(1)创建一个项目 npm init
(2)项目创建成功以后,自定生成一个package.json文件
package.json作用是用来记录当前项目运行所依赖的组件,类似于maven的pom.xml
(3)项目中添加echarts的插件 npm install echarts
(4)执行完npm install echarts后,当前项目多了一个node_modules目录
node_modules:用来存储当前项目所依赖的组件。类似于maven的仓库
(5)拷贝别人的项目,如果项目中缺少node_modules目录,该如何?
npm install 作用根据package.json记录当前项目所依赖的组件进行自动下载
问题:npm从哪个地址来下载这些组件的?
npm下载的时候,默认的地址是C盘,如何更改下载的目录???
从国外网站下载,遇到的问题下载速度非常慢。如何解决???
方式一
nrm切换npm的限制地址
方式二:
使用 cnpm进行下载
webpack
webpack是什么?
使用js编写的一个打包工具。要想使用webpack,通过npm/cnpm来下载webpack.
用webpack能干什么?
传智健康项目的页面上,导入过很多js echarts.js jquery.js elementui.js elementui.css…
webpack可以将镜像的js文件/css文件/images…进行打包,打包以后会生成一个js文件,以后我们只需要将这一个js文件导入到页面,就可以使用,上面导入之间的那些js/css里面的内容
使用webpack的好处是什么?
webpack在打包的过程中会对js/css…文件进行压缩(文件内容中的空格换行… [jquery.js / jquery.min.js]),这样做的好处(1)可以为用户节省流量 (2)代码更安全
具体如何来使用webpack?
bar.js
exports.info = function(str){
document.write(str);
}
logic.js
exports.add = function(a,b){
return a+b;
}
main.js
var bar = require(’./bar’)
var logic = require(’./logic’)
bar.info(logic.add(100,200));
结果页面上写一个300
var path = require(‘path’)
module.exports = {
entry:’./src/main.js’, //入口
output:{ //输出
path: path.resolve(__dirname,"./dist"),//__dirname获取当前项目的目录(__两个下杠)
filename:‘index.js’ //输出js的文件名
}
}
打包CSS:webpack可以打包css /js /images… 生成一个js文件,html页面引入打包生成js文件,就可以进行使用
var path = require(‘path’)
module.exports = {
entry:’./src/main.js’, //入口
output:{ //输出
path: path.resolve(__dirname,"./dist"),//__dirname获取当前项目的目录
filename:‘index.js’ //输出js的文件名
},
module:{
rules:[
{
test: /.css$/,
use:[‘style-loader’,‘css-loader’]
}
]
}
}
npm install css-loader style-loader --save-dev
npm install less less-loader --save-dev
生产环境只需要使用到最终打包生成js文件即可。
npm run dev:运行项目
npm run build:重新构建项目 类上域maven的compile