Node.js
运行在服务端的JavaScript
-
开发工具：VScode
-
自行下载安装node.js
hello.js
console.log("hello world!");
执行即可看到终端输出
http-server.js
//导入模块是用require 类似导包
const http = require(‘http‘);
//1.创建一个httpserver服务
http.createServer(function (request, response) {
//浏览器怎样认识我们们要传的hello server
//这是告诉浏览器要以‘text/plain‘的（文本）方式去解析我们的数据
//还可以设置成‘text/html‘就是以html的去解析
response.writeHead(200, { ‘Content-type‘: ‘text/html‘ });
//给浏览器输出内容
response.end("<h1>hello server</h1>");
}).listen(8888);
console.log("你启动的服务是：http://localhost:8888 已启动成功")
//2.监听一端口8888
//3.启动运行服务 http-server.js
//4.在浏览器访问http://localhost:8888
?
//有点像tomcat中的servlet
//服务端的语言
运行后可看到终端输出
同时在浏览器中进入http://localhost:8888可见
db.js
首先要下载依赖包
npm install mysql
之后我们的目录下会增加一个文件夹
//1.导入mysql依赖包，mysql属于第三方的模块就类似于导入java.sql
var mysql = require("mysql");
//1.创建一个mysql的Connection对象
//2.配置数据连接信息
var connection = mysql.createConnection({
host: "127.0.0.1",
port: 3306,
user: "root", //这里似乎不能使用自己定义的worker的用户
password: "abc123",
database: "bookdb"
});
//3.开辟连接
connection.connect();
//4.执行crud
connection.query("select * from book", function (error, results, fields) {
//如果出错，则抛出
if (error) throw error;
//查询成功
console.log("results = ", results);
});
//5.关闭连接
connection.end();
//最后，运行node db.js 查看效果
这里自行配置数据库的信息，执行后即可查看到我们要查询的信息
ES6
概述
ECMAScript是一种由
let与const
-
变量与常量的严格区分。
<script>
//传统定义变量和常量的方法 统一使用var
var PI = Math.PI;
var name = "张三";
var link = "https://www.baidu.com";
?
//ES6定义的方式
//定义变量
let name2 = "李四";
let link2 = "https://www.baidu.com";
//定义常量
const PI2 = Math.PI;
</script>
let，const 与 var的区别
-
主要还是解决 var 中变量穿透和常量修改的问题
<script>
//let 和 const 解决
//1.var的变量穿透的问题
//2.常量修改的问题
for (var i = 0; i < 5; i++) {
console.log(i);
}
//若此时
console.log(i);
//（js这里可以编译通过）这里就会输出5，这就造成了变量穿透的问题
//若我们这样写
for (let j = 0; i < 5; i++) {
console.log(i);
}
// console.log(j);
//这样在编译的时候就不会通过，这里的j就不会输出
?
//常量
var PI = Math.PI;
//此时的PI是可以修改的
PI = 100;
console.log(PI);//输出100
//若我们使用
const PI1 = Math.PI;
//若我们去修改的话，编译就不会通过,会说他不能修改
// PI1 = 100;
//在实际开发和生产中，如果是小程序，uniapp或者一些脚手架中的，可以大胆的去使用let和const
//但是如果你是web开发。建议大家还是使用var.因为在一些低版本的浏览器还是不支持let和const
</script>
模板字符串
-
以前我们的字符串都是使用‘‘ (单引号)或者"" (双引号)括起来
-
现在我们使用``（反引号）
<script>//模板字符串
//字符串会牵涉到动态部分
var person = {
name: "张三",
addr: "万达广场",
link: "https://www.baidu.com"
};
//以前我们是这样拼接字符串的
let things = person.name + "正在" + person.addr + "使用手机登陆" + person.link;
console.log(things);
?
//现在ES6的模板字符串是这样的,有点像jsp中的el表达式，也支持换行，打印出来也是换行的
let things2 = `ES6-${person.name}正在${person.addr}使用手机登陆${person.link}`;
console.log(things2);
</script>
默认参数
<script>//默认参数
function sum(a, b) {
return a + b;
}
//此时输出的就是200
console.log(sum(100, 100));
//如果我们只传一个参数甚至不传参数呢
console.log(sum(100)); //输出NaN
//在js中我们不传的话他默认的b值是undefined的形式存在的
//我们这样写
function sum(a, b = 100) {
return a + b;
}
console.log(sum(100));//此时输出200,因为我们在定义函数时给b设置的默认参数是100
</script>
箭头函数
<script>
//箭头函数 -（重点）在未来的项目开发中：比如小程序，uniapp，一些常见的手脚架大量使用
var a = function (a, b) {
return a + b;
}
//ES6改进箭头函数 - 改进1
var sum = (a, b) => {
return a + b;
}
//改进2
var sum = (a, b) => a + b;
//可以找出规律
//1.去掉function
//2.在括号后面加箭头
//3.如果逻辑代码中仅有return可以直接省去（如果有逻辑体就不能省略
//4.如果参数只有一个，可以把括号也省去
//例：
var arr = [1, 2, 3, 4, 5, 6];
var newarr = arr.map(function (obj) {
return obj * 2;
});
console.log(newarr); //[2,4,6,8,10,12]
//我们可以改写
var newarr1 = arr.map((obj) => obj * 2);
console.log(newarr1); //[2,4,6,8,10,12]
</script>
对象初始化简写
-
它是指:如果一个对象中的key和value的名字一样的情况下可以定义成一个。
<script>//对象初始化
let person = {
name: "张三",
link: "https://www.baidu.com",
go: function () {
console.log("去考科目二");
}
}
//ES6简写
//因为对象是key:value存在
//1.如果key和变量的名字一致，可以只定义一次即可
//2.如果value是一个函数，可以把：‘:function‘去掉，只剩下()即可
var name = "张三";
var link = "https://www.baidu.com";
let person1 = {
name,
link,
go() {
console.log("去考科目二");
}
}
console.log(person1.name);
console.log(person1.link);
console.log(person1.go);
</script>
<!--例：-->
<form action="">
<p>账号：<input type="text" id="account"></p>
<p>密码：<input type="text" id="password"></p>
<p><input type="button" value="登陆" id="loginbtn"></p>
</form>
<script>
$("#loginbtn").on("click", function () {
var account = $("#account").val();
var password = $("#password").val();
//执行异步请求
$.ajax({
type: "post",
url: "xxx",
data: { account: account, password: password },
success: function () {
//执行相应操作
}
})
})
//我们可以进行简写
$("#loginbtn").on("click", function () {
var account = $("#account").val();
var password = $("#password").val();
//对象简写
var params = { account, password };
//执行异步请求
$.ajax({
type: "post",
url: "xxx",
data: params,
success() {
//执行相应操作
}
})
})
</script>
对象解构
-
对象解构 --- es6提供一些获取快捷获取对象属性和行为方式
<script>
//对象是以key:value存在，获取对象属性和方法的方式有两种
//1.通过.
//2.通过[]
var name = "张三";
var link = "https://www.baidu.com";
let person1 = {
name,
link,
go() {
console.log("去考科目二");
}
}
//通过.的方式
console.log(person1.name);
console.log(person1.link);
person1.go();
//通过[]的方式
console.log(person1["name"]);
console.log(person1["link"]);
person1["go"]();
//ES6对象结构 --- 其实就是快速获取属性和方法的一种形式
var { name, link, go } = person1;
console.log(name);
console.log(link);
go();
</script>
传播操作符
-
把一个对象的属性传播到另外一个对象中。
<script>//对象传播操作符
var person = {
name: "张三",
address: "福州",
link: "https://www.baudu.com",
phone: 123456,
go() {
console.log("去练科目二");
}
}
//解构出来
var { name, address, ...person2 } = person;
//我们把name和address取出来后，他就会把person其他元素赋给person2
console.log(name);
console.log(address);
console.log(person2);
</script>
<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, user: [{}, {}], pageNo: 1, pageSize: 100, total: 100 };
//这样我们就可以很方便的取值
var { users, ...userPage2 } = userPage;
//)
</script>
数组map
<script>
//要对arr数组中的每个元素*2
let arr = [1, 2, 3, 4, 5];
//传统方式
let newarr = [];
for (let i = 0; i < arr.length; i++) {
newarr.push(arr[i] * 2);
}
console.log(newarr);
//map的做法 --- 自带的循环，并且会把处理的值回填到对应的位置
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(function (ele) {
ele.age = ele.age + 1;
return ele;
});
console.log(newusers);
//用新语法修改下
var newusers1 = users.map(ele => {
ele.age = ele.age + 1;
return ele;
});
console.log(newusers1);
</script>
reduce()
reduce(function),初始值(可选))∶ 接收一个函数(必须)和一个初始值（可选)，该函数接收两个参数:
-
第一个参数是上一次reduce处理的结果
-
第二个参数是数组中要处理的下一个元素
reduce()会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数。
<script>
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
//先是a=1,b=2,得出 3
//a=3,b=3 得出 6
//a=6 b=4 得出 10 依此类推
var res = arr.reduce(function (a, b) {
return a + b;
});
console.log("res=", res);
</script>
ES6可以在node.js，uniapp，微信小程序中得到广泛的支持。
Npm包管理器
简介
NPM全称Node Package Manager，是Node js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的，也是Nodejs的包管理工具，相当于前端的Maven。
在命令行使用npm -v可以看到当前npm的版本。
实验一
新建个npmpro文件夹vscode打开，打开终端
npm init
问你是否要给我们项目取一个包的名字，我们直接回车，之后是我们的版本号和填写一些简单的描述，之后他们问我们的入口函数是什么，默认的是index.js，我们保持默认不变就好了，之后是测试命令和我们可以放置的git仓库，之后是关键词，也可以直接回车，之后是作者名，最后是许可证，直接回车，然后会展示我们刚填的数据，输入yes即可。
之后我们就可以看到我们的目录中多出一个package.json
作用：
1. 快速构建node.js工程
-npm init
-得到package.json 这个文件内容如下
{
"name": "npmpro", //工程名
"version": "1.0.1", //版本
"description": "我是一个node工程", //描述
"main": "index.js", //入口js
"scripts": { //运行脚本
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Plokit", //开发者
"license": "ISC" //授权协议
}
类似与 pom.xml文件作用管理依赖
实验二
我们继续新建一个nodenpm的文件夹再用vscode打开，打开终端，我们可以使用命令
npm init -y
省去中间的步骤，使用默认值的方式全部生成
同时生成对应文件
我们主要看这几个问题
2-1:快速安装依赖第三方模块? 2-2:安装模块放在什么地方? 2-3:安装模块如何使用呢? 2-4:模块和package.json有什么关系呢? 2-5:如果安装模块很慢怎么? 2-6:如何运行? 2-7:如何下载多个?
-
2-1 快速安装依赖第三方模块?
npm install xxxx 或者 npm i xxx模块名
拿之前那个mysql的为例
npm insatll mysql
之后我们的目录中就会多出node_modules的文件夹，其中也会有mysql以及文件夹
我们再试一个npm i redis
该文件夹中也会相应的增加内容
-
2-2:安装模块放在什么地方?
安装的模块放放入到项目的node_modules文件夹中
-
2-3:安装模块如何使用呢?
直接在js文件中导入即可使用 -require
//导入模块redis const redis = require("redis"); //导入模块mysql const mysql = require("mysql");我们在文档中也可以看到使用的方法案例，像：
-
2-4:模块和package.json有什么关系呢?
我们打开这个文件就可以看到我们刚才导入的两个依赖坐标
我们再添加试试
npm i jquery vue这样我们文件中就会增加这两个
通过npm install xxx 会记录在package.json中。
类似于maven中的pom.xml一个含义，记录的作用：复用
像我们如果要开发的一个工程和我们之前开发过的某个工程其中所需的依赖一样的话，我们就可以直接复制我们的package.json过来，然后在该工程cmd中执行
npm install就能自动下载我们所需要的全部依赖。1: package.json记录的依赖模块 2: 通过npm install 可以直接把package.json所依赖的模块全部自动下载下来这样就可以避免重复下载模块。很方便去集成的第三模块。
3.为什么不直接拷贝node_modules呢？当然可以，因为下载模块的依赖过多文件过大，混乱文件很多。
-
2-5:如果安装模块很慢怎么?
npm install -g cnpm --registry=https://registry.npm.taobao.org我们只要在任意位置执行该条命令就可以，之后就可以在我们的命令行处执行
cnpm -v看到我们相应的版本信息那之后我们安装就也可以使用
cnpm install xxx来安装，速度会快很多 -
2-6:如何运行?
node xxxx.js 运行过程.js是可以省去的 终止命令行：Ctrl+c (多次执行)
-
2-7:如何下载多个
npm install jquery vue redis mysqlcnpm install jquery vue redis mysql如果安装时想指定版本号名字后加@加版本号即可，例
npm install jquery@2.1.x不加版本号的默认是下载最新的，具体的版本号:查看官方网址 https://www.npmjs.com/package/redis
卸载模块
将 install 换成 uninstall 即可
例： npm uninstall vue jquery
Babel
简介
ES6的某些高级语法在浏览器环境甚至是Node.js环境中无法执行。
Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。
这意味着，你可以现在就用ES6编写程序，而不用担心现有环境是否支持。
安装
创建一个新的文件夹babelpro，在这里打开命令行，使用命令npm install -g babel-cli进行安装。
如果太慢的话可以使用cnpm install -g babel-cli这个会很快。
之后执行命令babel --version 即可查看我们所安装的babel的版本
Babel的使用
我们在工程中执行npm init -y快速创建出我们的工程，其中再创建出我们的src文件夹
再在src中创建出一个example.js的文件，写一些简单的内容
//es6 let name = "张三"; const title = "学生"; let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; let newarr = arr.map(a => a * 2); console.log(name); console.log(title); console.log(newarr);
执行一下，可以看到
我们先进行babel的配置，在我们的根目录下创建.babelrc文件，在这个文件中要定义要编译成什么版本的es
{
"presets":["es2015"],
"plugins":[]
}
执行命令cnpm install --save-dev babel-preset-es2015安装转码器
执行babel src -d dist之后就会输出一个内容，就是我们转好的文件
我们可以打开看一下
"use strict";
//es6
var name = "张三";
var title = "学生";
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var newarr = arr.map(function (a) {
return a * 2;
});
console.log(name);
console.log(title);
console.log(newarr);
可以看到他成功的将我们的src中的全部文件进行了转换。
自定义脚本
我们可以自己修改下我们的package.json来用我们的npm来管理babel
之后我们要转码的时候就可以直接运行命令npm run dev 即可
这只是将其用我们的npm一起来管理，其中dev和dist的名字可以自己定义
模块化
简介
模块化产生的背景 随着网站逐渐变成”互联网应用程序”，嵌入网页的Javascript代码越来越庞大，越来越复杂。 Javascript模块化编程，已经成为一个迫切的需求，理想情况下，开发者只需要实现核心的业务逻辑，其他部分可以加载别人已经写好的模块。但是，Javascipt不是一种模块化编程语言，它不支持”类(class)，包(package”等概念，也不支持”模块”(module).
模块化规范
-
CommonJS模块化规范
-
ES6模块化规范
CommonJS规范
-
每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。
我们先创建一个四则运算的js
//工具类
const sum = function (a, b) {
return a + b;
}
const sub = function (a, b) {
return a - b;
}
const mul = function (a, b) {
return a * b;
}
const di = function (a, b) {
return a / b;
}
//导出给别人使用
// module.exports = {
// sum: sum,
// sub: sub,
// mul: mul,
// di: di
//}
module.exports = {
sum,
sub,
mul,
di
}
之后再进行测试
const m = require(‘./四则运算.js‘) //必需要导出了才能使用 console.log(m.sum(1, 2)) console.log(m.sub(1, 2)) console.log(m.mul(1, 2)) console.log(m.di(1, 2)) //commons js模块化开发 exports 导出 require 导入
运行结果：
ES6规范
-
ES6使用export和import来导出、导入模块。
我们创建一个es6文件夹，其中创建一个userapi.js
export function getList() {
//在真实业务中,异步获取数据
console.log("获取数据列表");
}
export function save() {
//在真实业务中,异步获取数据
console.log("保存数据");
}
再创建usertest.js
import { getList, save } from ‘./userApi.js‘
getList()
save()
如果我们直接node usertest.js执行的话是不行的
因为默认不支持es6语法的import
我们重构下这个工程 npm init -y变成node工程，创建src目录，将两个js放进去
创建babel的配置文件.babelrc
{
"presets":["es2015"],
"plugins":[]
}
安装babel的转码器
cnpm install --save-dev babel-preset-es2015
增加脚本
运行npm run build
即可看到我们转码后的文件位置，我们进去运行dist/usertest.js
这个就可以运行成功
这还是我们比较复杂的写法，每个都要专门去写出来，所以es6还进行了改进
我们可以直接将userapi.js写成这样
//前端开发中,经常看到这样的代码
export default {
getList() {
//在真实业务中,异步获取数据
console.log("获取数据列表");
},
save() {
//在真实业务中,异步获取数据
console.log("保存数据");
}
}
同样usertest.js也可以改进直接导出成一个对象user
import user from ‘./userapi.js‘ user.getList() user.save()
更改完后再转码后运行下
可以看到也是可以成功运行。
Webpack
简介
Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源js、css、less转换成一个静态文件，减少了页面的请求。
安装
打开cmd 执行命令
cnpm install -g webpack webpack-cli
之后执行webpack -v查看版本号 即安装成功
webpack合并JS
-
创建一个nodejs项目 npm init -y
-
创建一个src目录
-
在src中存放要合并的两个js文件（util.js和common.js)
-
准备一个入口文件main.js，其实就是模块集中进行引入
-
在根目录下定义个webpack.config.js文件配置打包的规则
-
执行webpack查看效果
util.js
//相加函数 exports.add = (a, b) => a + b;
common.js
//输出
exports.info = function (str) {
//往控制台输出
console.log(str);
//往浏览器输出
document.write(str);
}
main.js
//导入util
const util = require("./util");
//导入common
const common = require("./common");
common.info("Hello world," + util.add(100, 100));
webpack.config.js
//导入path模块 nodejs内置模块
const path = require("path");
//定义JS打包的规则
module.exports = {
//入口从哪里开始进行编译打包
entry: "./src/main.js",
//编译成功后把内容输出到哪里去
output: {
//定义输出的指定的目录__dirname 当前项目的根目录，生成一个dist的文件夹
path: path.resolve(__dirname, "./dist"),
//合并的js文件存储在dist/bundle.js文件中
filename: "bundle.js"
}
}
之后执行命令 webpack
之后我们的目录中就会多出dist的目录，其中有压缩加密后的文件bundle.js
(()=>{var o={648:(o,r)=>{r.info=function(o){console.log(o),document.write(o)}},891:(o,r)=>{r.add=(o,r)=>o+r}},r={};function n(t){var e=r[t];if(void 0!==e)return e.exports;var d=r[t]={exports:{}};return o[t](d,d.exports,n),d.exports}(()=>{const o=n(891);n(648).info("Hello world,"+o.add(100,100))})()})();
我们可以在dist的目录下新建一个index.html的文件，其中只要引入我们的bundle.js文件即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
在浏览器打开，即可看到我们要输出的内容
我们webpack.config.js文件中的__dirnames是一个固定的常量，我们可以在文档看
webpack还有其他的一些功能，像webpack -h即可查看我们webpack的一些命令帮助
还有webpack的一个监听功能 webpack -w
执行这个后webpack就会一直处于监听的状态，假如我们在common.js中新增些内容，保存后之后会马上重新编译和打包，之后我们直接刷新浏览器就可以了，得到一个实时的效果。
webpack打包css
安装style-loader 和 css-loader
webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，就需要使用loader进行转换。
Loader可以理解为是模块和资源的转换器。 首先我们需要安装相关Loader插件
-
css-loader是将css装载到javascript
-
style-loader 是让javascript认识css
npm install --save-dev style-loader css-loader
配置webpack.config.js
在之前的那个中继续添加module的部分
//导入path模块 nodejs内置模块
const path = require("path");
//定义JS打包的规则
module.exports = {
//入口从哪里开始进行编译打包
entry: "./src/main.js",
//编译成功后把内容输出到哪里去
output: {
//定义输出的指定的目录__dirname 当前项目的根目录，生成一个dist的文件夹
path: path.resolve(__dirname, "./dist"),
//合并的js文件存储在dist/bundle.js文件中
filename: "bundle.js"
},
module: {
rules: [{
test: /\.css$/, //把项目中所有的.css结尾的文件进行打包
use: ["style-loader", "css-loader"]
}]
}
}
在src下创建我们的css文件，style.css
body{
background-color: pink;
}
之后在main.js中导入我们的css
//导入util
const util = require("./util");
//导入common
const common = require("./common");
//导入css
require("./style.css");
common.info("Hello world," + util.add(100, 100));
之后命令行执行webpack即可看到效果
VueElementAdmin初体验
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
启动
npm run dev
注意如果老是安装失败:
-
请删除node-modules 然后执行npm install
-
或者换个网络
启动完成后会自动打开浏览器访问http://localhost:9527，你看到下面的页面就代表操作成功了。
进去后可以查看具体的界面和功能等。
通过查看这个项目的具体源码可以先了解下一个标准的项目结构，代码等。