NodeJS是什么?
实现请求响应
| const http = require('http');
http.createServer(function(request,response){ response.writeHead(200,{'Content-type':'text/plain'}); response.end("hello nodejs") }).listen(8888);
console.log("启动服务8888")
|
操作mysql数据库
首先在npm导入mysql
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
| var mysql = require("mysql");
var connection = mysql.createConnection({ host:"localhost", port:3306, user:"root", password:"123456", database:"nodejs_db" });
connection.connect();
connection.query("SELECT * FROM `kss-user`",function(error,results,fields){ if(error) throw error;
console.log("results",results); });
connection.end;
|
ES6
let&const
ES6中变量使用let定义
常量使用const定义
解决了js中var定义变量穿透的问题
模板字符串(套接字``)
解决字符串套接的问题
传统方式套接字符串时使用字符串变量+新的var或者var的属性进行套接
ES6则使用``外飘字定义字符串是一个套接字符串,并且使用${var}进行取值套接
1 2 3 4 5 6 7 8 9 10
| var person = { name:"loh", address:"guang xi", link:"https://www.baidu.com" }; let address = "guang dong"+person.address; console.log(address);
address = `guang dong${person.address}`; console.log(address);
|
函数默认参数&箭头函数
函数默认参数
1 2 3 4 5 6
| function sum(a,b){ return a + b; };
let result = sum(100,200); console.log("result=",result);
|
给函数方法参数赋默认值
1 2 3 4 5 6
| function sum(a=100,b=200){ return a + b; };
let result = sum(100,200); console.log("result=",result);
|
箭头函数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| var sum = function(a,b){ return a+b; }
var sum = (a,b) =>{ return a+b; }
var sum = (a,b) => a+b;
var sum2=(a,b)=>{ var num = a+b; return num; }
|
对象初始化简写
- js对象是以key:value的形式存在
- 如果键值名称一致,则可以省略,只写一次即可
- 如果value是一个函数,可以把function去掉,只剩下()和函数体
对象解构
ES6中快捷获取对象属性的方法
传统方式获取对象属性
通过.
通过[key]
ES6解构
ES6中可以通过解构的方式进行获取
1 2 3 4 5 6
| var{name,say}=person;
var name = person.name var say = person.say
|
传播操作符
对象解构后使用…可以把剩余参数传给你指定的属性
假如有这样一个对象
1 2 3 4 5
| person{ name:"loh", address:"guang xi", phone:13663423523 }
|
我们解构person的name和address并把phone传给person2
1
| var{name,address,...person2}=person
|
那么我们可以分别得到一个name,address和一个person2对象
数组map reduce方法
map
假设有个数组
1
| var users = [{age:10,name:"小"},{age:12,name:"中"},{age:14,name:"大"}];
|
那么可以这样操作map
1 2 3 4
| users.map(function(ele){ ele.age += 1; return ele; })
|
reduce
reduce() 方法对数组中的每个元素执行一个由我们提供的reducer函数,且该函数为升序执行,并将其结果汇总为单个返回值。
对数组中的每个元素都执行一次我们定义的reduce函数
npm
node包管理器:node package manager
package.json保存着当前项目所依赖的模块,可以直接复制文件,执行npm install进行复用,相当于maven的pom.xml
镜像
安装cnpm
Babel
babel用来将es6的代码转码成es5的代码,防止某些环境不支持
安装babel
1
| npm install -g babel-cli
|
项目下创建babel配置文件.babelrc
我使用的配置
1 2 3
| { "presets": ["es2015"], "plugins": [] }
|
模板配置文件
1 2 3 4 5 6 7 8 9 10 11 12 13
| { "presets": [ ["@babel/env", { "targets": { "node": "current" } }] ], "plugins": [ "@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-object-rest-spread" ] }
|
安装转码器
1
| npm install --save-dev babel-preset-es2015
|
生成转码
也可以在packjson中定义一个命令,把上面的生成代码通过key:value的形式定义进去,
然后我们可以使用npm run 你定义的的命令,进行输出
模块化
CommonJS
有一个01-CommonJS-exports.js,里面定义两个方法,使用export导出
1 2 3 4 5 6 7 8 9 10 11 12
| const sum = function(a,b){ return a+b; } const sub = function(a,b){ return a-b; }
module.exports = { sum:sum, sub:sub }
|
在另外的02-CommonJS-require.js使用require导入
1 2 3
| const r = require('./01-CommonJS-exports.js');
console.log(r.sum(1,3));
|
ES6
在03-ES6-export.js导出,使用export function导出
1 2 3 4 5 6 7
| export function a(){ console.log("f-a"); }
export function b(){ console.log("f-b"); }
|
在04-ES6-import.js导入,使用import引入
1 2 3 4
| import {a,b} from "./03-ES6-export";
a(); b();
|
但是在实际生产中会把所有方法定义在一起导出
1 2 3 4 5 6 7 8
| export default{ ea(){ console.log("f-a"); }, eb(){ console.log("f-b"); } }
|
在引入时引入到对象里,再使用对象.方法使用
1 2
| import ex from "./03-ES6-export"; ex.ea();
|
webpack
用来打包静态资源
安装
1
| npm install -g webpack webpack-cli
|
安装好查看版本
配置文件 webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12
| const path = require("path");
module.exports = { entry:"./src/main.js", output:{ path:path.resolve(__dirname,"./dist"), filename:"bundle.js" } }
|
webpack打包css
默认情况下,webpack只处理js模块,如果要处理其他类型,就需要使用loader
- css-loader 将css装载到JavaScript
- style-loader 让JavaScript识别css
1
| npm install --save-dev style-loader css-loader
|
修改webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
| const path = require("path");
module.exports = { entry:"./src/main.js", output:{ path:path.resolve(__dirname,"./dist"), filename:"bundle.js" }, module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] } ] } }
|
编译
在src下创建style.css
在main.js第一行中引入style.css
编译命令
UI框架了解
vue-element-admin