大前端进阶
Node.js
Node.js 就是运行在服务端的 JavaScript。
安装
# 测试是否安装成功
node -v
# 测试自带的npm是否正常
npm -v
# 例如出现下列版本号,则安装成功
C:\Users\MyPingPing>node -v
v14.3.0
C:\Users\MyPingPing>npm -v
6.14.5
运行
//类似于Java的System.out.println("hello,world!");
console.log("hello,world!");
//NodeJs是一门计算机语言,运行在v8引擎内部,后缀名为js的文件可以直接使用: node 文件名.js 运行
# node 文件名.js
node helloworld.js
# 打印
hello,world!
运行在服务端
// 导入模块是require
const http = require("http");
//1.创建一个httpserver服务
//2.监听一个端口:8080
//3.启动运行服务:ndoe server.js
//4.在浏览器访问:http://127.0.0.1:8080
http.createServer(function (request, response) {
//浏览器识别hello,server
response.writeHead(200, { "content-type": "text/html" });
//输出内容给浏览器
response.end("<h1>hello,server!</h1>");
}).listen(8080);
console.log("服务启动成功 http://127.0.0.1:8080");
# 终端运行
PS D:\web\NodeJs> node .\server.js
服务启动成功 http://127.0.0.1:8080
访问监听的8080端口
NodeJs操作数据库
//1.导入依赖
var mysql = require("mysql");
//2.创建连接对象:connection
//3.配置数据库连接的信息
//4.执行crud
//5.关闭连接
var connection = mysql.createConnection({
host: "127.0.0.1",
port: 3306,
user: "root",
password: "root",
database: "test",
});
connection.connect();
connection.query("select * from car", function (error, res, fields) {
//如果Error,直接抛出
if (error) throw error;
//查询成功
console.log("results=", res);
});
connection.end();
打印部分结果
ES6
ECMAScript 6.0(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标,是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
ES6新语法:let和const
// let 和 const 解决:
//1.var的变量穿透问题
//2.常量的修改问题
for(var i=0;i<5;i++){
console.log(i);
}
console.log(i);//会打印出5
//而使用let则不会出现这样的问题
//使用const修饰的常量无法对其进行修改
//在实际的开发和生产中,如果是小程序、uniapp或者一些脚手架中,可以大胆的使用let和const
//如果是普通的web开发,建议还是使用var,因为在一些低版本的浏览器中不支持let和const
ES6新语法 模板字符串
//字符串会牵涉到动态部分
var person = {
name: "cds",
address: "四川",
};
// 传统拼接
let address = "我现在的位置是在:" + person.address;
// ES6新语法,就像JSP中的EL表达式
let address2 = `我现在的位置还是在:${person.address}`;
console.log(address);
console.log(address2);
两种拼接的效果是一样的!
ES6新语法:函数默认参数与箭头函数
//函数默认参数
function sum(a=100, b=100) {
return a + b;
}
var result = sum();
console.log("result=", result);
//箭头函数 (重点,在很多项目开发中,小程序,uniapp,一些常见的脚手架都有大量使用)
var sum = function (a, b) {
return a + b;
};
//箭头函数-改进1
var sum = (a, b) => {
return a + b;
};
//箭头函数-改进2(仅限于大括号中的逻辑代码只有return 语句)
var sum = (a, b) => a + b;
//规律
//1.去掉function
//2.在括号后面加箭头
//3.如果大括号中的逻辑代码只有return 语句,可以省略大括号和return
//4.如果参数只有一个,可以把括号也省去
ES6新语法:对象初始化简写
var info = {
title: "美女写真",
img: "http://cdn.jcds.site/5.jpg",
go: function () {
console.log("美女写真");
},
};
//es6简写
//因为对象是key:value存在
//1.如果key和变量的名字一致,可以只定义一次即可
//2.如果value是一个函数,可以把`:function`去掉,之剩下()即可
var title = "美女写真";
var img = "http://cdn.jcds.site/5.jpg";
var info2 = {
title,
img,
go() {
console.log("美女写真");
}
};
console.log(info2.title);
console.log(info2.img);
info2.go();
ES6新语法:对象的解构
var title = "美女写真";
var img = "http://cdn.jcds.site/5.jpg";
var info2 = {
title,
img,
go() {
console.log("美女写真");
},
};
//对象解构
//对象是key:value的形式存在,获取对象属性和方法的方式有两种
//1.通过.的方式
console.log(info2.title);
//2.通过中括号的方式
console.log(info2["title"]);
//es6新语法
var { title, img, go } = info2;
//还原代码
//var title=info2.title;
//var img=info2.img;
console.log(title, img);
go();
ES6新语法:传播操作符
把一个对象的属性传播到另一个对象中
//对象传播操作符 ...
var person = {
name: "cds",
address: "四川",
url: "https://minghui_dada.gitee.io",
phone: 15089032091,
go() {
console.log("开始学习了");
},
};
//解构出来
var { name, address, ...person2 } = person;
console.log(name);
console.log(address);
console.log(person2);
//因为name和address已经被取走了,所以使用传播操作符之后只能取剩下的属性和方法
var { ...person3 } = person;
console.log(person3);
打印结果
cds
四川
{url: 'https://minghui_dada.gitee.io', phone: 15089032091, go: ƒ}
{name: 'cds', address: '四川', url: 'https://minghui_dada.gitee.io', phone: 15089032091, go: ƒ}
NPM包管理器
类似于Java中的maven,它是一个前端的node包管理器,也有自己的仓库。官方地址
作用一:快速构建nodjs工程
# 初始化工程
npm init # 得到一个package.json的文件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ajCNr8yV-1611883828972)(http://cdn.jcds.site/image-20210128092337036.png)]
{
"name": "npmtest", //工程名
"version": "1.0.0", //项目版本
"description": "npm测试工程", //描述
"main": "index.js", //入口js文件
"scripts": { //运行脚本
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "cds", //开发者
"license": "ISC" //授权协议
}
上面就是执行npm init后,得到一个package.json的文件,有点类似于:pom.xml文件
作用二:快速安装第三方模块
# 1.快速安装第三方模块
npm install 模块名
# 或者
npm i 模块名
# 2.安装在什么地方?
安装的模块会放入到项目中的一个叫node_moudles文件夹中
// 3.如何导入?
//导入模块redis
const redis = require("redis");
//创建客户端连接
const client = redis.createClient();
client.on("error", function(error) {
console.error(error);
});
client.set("key", "value", redis.print);
client.get("key", redis.print);
# 4.npm下载慢怎么办?
# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安装成功后下载依赖就可以使用以下命令
cnpm install 依赖名
# 5.模块和package.json到底有什么关系?
# 执行npm install 可以把package.json中记录的所有依赖下载下来
{
"name": "npmtest",
"version": "1.0.0",
"description": "npm测试工程",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "cds",
"license": "ISC",
"dependencies": { # 类似于pom.xml文件中的依赖坐标
"mysql": "^2.18.1",
"redis": "^3.0.2"
}
}
# 6.如何卸载?
npm uninstall 依赖名
Babel
主要用于将ES6版本的JavaScript代码转为ES5等向后兼容的JS代码,从而可以运行在低版本浏览器或其它环境中。
Babel的安装
npm install -g babel-cli
# 或者
cnpm install -g babel-cli
# 验证安装
babel --version
# 6.26.0 (babel-core 6.26.3)
Babel的使用
-
1、创建babel文件夹
-
2、初始化项目
npm init -y
-
3、创建文件src/example.js,下面是一段ES6的代码:
//转码前 //定义数据 let input=[1,2,3] //将数组的每个元素+1 input=input.map(item=>item+1) console.log(input)
-
4、配置.babelrc
Babel 的配置文件是babelrc,存放在项目的根目录下,该文件用来设置转码规则和插件,基本格式如下:
{
"presets":[],
"plugins":[]
}
presets字段设置转码规则,将es2015规则加入.babelrc:
{
"presets":["es2015"],
"plugins":[]
}
- 5、安装转码器,在项目中安装
npm install --save-dev babel-preset-es2015
- 6、转码
# npm install --save-dev csv-loader xml-loader
# 转码结果写入一个文件
mkdir dist
自定义脚本
1、改写package.json
{
//....
"scripts":{
//....
"build":"babel src\\example.js -o dist\\compiled.js"
},
}
2、转码的时候执行以下命令:
mkdir dist
npm run build
模块化
CommonJS规范
CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。require方法用于加载模块。
一个直观的例子:
// moduleA.js
module.exports = function( value ){
return value * 2;
}
// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2(4);
CommonJS 是同步加载模块,但其实也有浏览器端的实现,其原理是现将所有模块都定义好并通过 id
索引,这样就可以方便的在浏览器环境中解析了
ES6规范
ES6 模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
// main.js
import {firstName, lastName, year} from './profile';
function setName(element) {
element.textContent = firstName + ' ' + lastName;
}
webpack
安装
cnpm install -g webpack webpack-cli
# 验证安装,如果出现版本号则安装成功
webpack -v
基本使用:合并JS
1、创建一个node.js项目
npm init -y
2、创建一个src目录
3、在src存放两个需要合并的util.js和common.js
4、准备一个入口文件main.js,其实就是模块集中进行引入
5、在根目录下定义一个webpack.config.js文件配置打包的规则
//webpack.config.js
//导入path模块
const path = require("path");
//定义JS打包的规则
module.exports = {
//入口函数从哪里开始进行编译打包
entry: "./main.js",
//编译成以后把内容输出到哪里去
output: {
//定义输出的指定的目录__dirname当前项目根目录,生产一个dist文件夹
path: path.resolve(__dirname, "./dist"),
//合并的js文件存储在dist/bundle.js中
filename: "bundle.js"
}
}
6、执行查看结果
webpack
Vue-element-admin
vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。
官网地址:https://panjiachen.github.io/vue-element-admin-site/zh/
运行工程和编译工程
# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
# 进入项目目录
cd vue-element-admin
# 安装依赖
npm install
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
# 本地开发 启动项目
npm run dev
注意如果老是安装失败:
- 请删除 node-modules 然后执行npm install
- 或者换个网络
启动完成后会自动打开浏览器访问 http://localhost:9527, 你看到下面的页面就代表操作成功了。