nodejs&es6_day01

nodejs&es6_day01

内容回顾

搭建Elasticsearch的集群

​ (1)数据的扩容(2)数据的备份

​ cluster、node、分片、复制

​ Elasticsearch天生支持集群操作，比Solr在这方面要优秀很多。

Java通过TransportClient操作的Elasticsearch

TransportClient client = new PreBuiltTransportClient(Settings.EMPTY)
                .addTransportAddress(new TransportAddress(InetAddress.getByName("127.0.0.1"), 9300))
                .addTransportAddress(new TransportAddress(InetAddress.getByName("127.0.0.1"), 9301))
                .addTransportAddress(new TransportAddress(InetAddress.getByName("127.0.0.1"), 9302));

​ TransportClient

1.创建索引库
2.删除索引库
3.为索引库添加映射
4.为索引库添加文档
5.修改文档
6.删除文档
7.根据ID查询文档
8.条件查询文档
	idsQuery、termsQuery、termQuery、wildcardQuery[* ?]、matchAllQuery、queryStringQuery
9.分页、排序、高亮[keyword,高亮域，高亮的前缀，高亮的后缀]

SpringDataElasticsearch操作Elasticsearch[封装了TransportClient]

1.创建索引库
2.删除索引库
3.为索引库添加映射
4.为索引库添加文档
5.修改文档
6.删除文档
7.根据ID查询文档
8.条件查询文档
	idsQuery、termsQuery、termQuery、wildcardQuery[* ?]、matchAllQuery、queryStringQuery
9.分页、排序、高亮[keyword,高亮域，高亮的前缀，高亮的后缀]

(1)如何使用SpringDataElasticsearch原生接口中的API方法
(2)可以自定义的方式 findBy|getBy... + 模型类的属性名 [+ And/Or...模型类的属性名...]
(3)使用TransportClient原生的API
	NativeSearchQuery的使用

SpringBoot+SpringDataElasticsearch

今天内容

Node.js

ECMAScript6的语言

Node.js

chrome浏览器能运行JS语言的原因是浏览器内置了一个能解析JS的V8引擎。

Node.js其实运行环境，后台运行js的环境。 [JVM:后台运行java代码的运行环境]

模块化开发

​ JS声明一个变量 : var

​ JS声明一个方法:function funName(){}

​ 导出: exports

​ 导入: require

NodeJS开发web服务

接收请求

var http = require('http'); //引入http模块
http.createServer(function (request, response) {
    //request:封装的所有的请求数据
    //reponse：封装响应数据
    //200：成功的状态码
    // text/html 返回文件，浏览器会解析文本中的标签   text/plain [返回纯文本]
    // text/json   application/json这两个都是返回json串
    response.writeHead(200, {'Content-Type': 'text/html'});
    response.end('<h1>Hello World</h1>');
}).listen(8888); //listen:设置监听的端口

console.log('Server running at http://127.0.0.1:8888/');

接收数据

var http = require('http');
var url = require("url");
http.createServer(function(request,response){

    response.writeHeader(200,{'Content-Type':'text/plain'});

    //var params = console.log(request.url);
    //console.log(params);
    //console.log(url.parse(request.url,true).query);
    var params =url.parse(request.url,true).query;
    for(var key in params){
        //key --->json的属性名
        //属性值--->params[key]
        console.log(key+"="+params[key]);
        response.write(key+"="+params[key]+"<br/>");
    }
    // var params = url.parse(request.url,true).query;
    //
    // for(var key in params){
    //     response.write(key+"="+params[key]);
    //     response.write("<br/>");
    // }
    response.end('');

}).listen(9999);

npm/cnpm/nrm/webpack

nodejs是后台的运行js的运行环境。使用js可以开发很多组件（echarts）

​ npm:可以从远端下载使用js编写的一些工具/插件。

下载：

局部下载:npm install echars

​ npm init :初始化NodeJS的前端项目。 [脚手架:构建开发的项目结构]

​ package.json: 当前的目录下出现一个文件package.json: 类似于Maven的pom.xml,作用:记录当前nodejs项目运行所依赖的工具/插件

​ npm install echars

​ 当前目录会出现一个目录node_modules，该文件夹下放的就是当前项目运行所依赖的工具/插件

​ npm install

​ 当获取到的前端项目中没有node_modules,需要根据package.json中记录的当前项目运行所需要的工具/插件进行下载

全局下载:npm install echars -g

​ npm root -g

​ 查看当前全局安装下载的插件所在的目录。

​ npm config 来修改下载的目录

cnpm: npm默认是从国外网站下载的，cnpm淘宝提供的一个国内下载工具/插件的地址。

切换下载地址:nrm ls 列出所有的下载地址列表，nrm use xxxx更换下载的地址

webpack

webpack是用js编写的一个打包工具。要使用，第一步要先将其下载到本地，第二步：使用webpack

将项目中的所有静态资源(js/css/image…)打包成一个js文件，这么做的好处:

​ (1) 只需要在页面中导入一次js就可以将所有依赖的资源导入

​ (2) 打包的过程中会将静态资源文件中的空格换行符通过去掉，文件的大小就会降低，减少用户的流量使用

​ (3) 更安全

​ (4)打包的过程中会将一些高级别的语法(ECMAScript6)翻译成低级别的语法。

安装流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EPRCwIb7-1603890400202)(assets/1575437633591.png)]

打包目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Emkdo6bo-1603890400204)(assets/1575431451145.png)]

js打包

src:

main.js

var bar = require('./bar')
var logic = require('./logic')

bar.info(logic.add(100,200));

bar.js

exports.info = function(str){
    document.write(str);
}

logic.js

exports.add = function(a,b){
    return a+b;
}

页面写一个300

webpack.config.js要和src是同一级目录

var path = require('path')

module.exports = {
    entry:'./src/main.js',
    output:{
        path: path.resolve(__dirname,"./dist"),
        filename:'index.js'
    }
}

通过cmd进入webpack.config.js所有目录,执行 webpack命令，打包成功后，会在dist目录下生成一个index.js,

只需要在自己的页面通过引入index.js就可以进行使用。

Css进行打包

webpack-dev-server:动态打包的插件。 vue-cli的脚手架构建vue的项目

ES6

ECMAScript6:前端js的语法规范，javascript完全遵从了改语法规范。

声明变量

var (全局的) / let (局部的) / const(常量，不可以进行修改)

模板字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery.min.js"></script>

</head>
<body>
    <table style="width:100%">
        <tr>
            <td>编号</td>
            <td>名称</td>
        </tr>
        <tbody id="tby">

        </tbody>
    </table>


    <script>
        let name = '赵敏';
        console.log("name为:"+name);
        console.log(`name为${name}`);

        var userList = [
            {'id':1,"name":'张三','color':'red'},
            {'id':2,"name":'张三1','color':'green'},
            {'id':3,"name":'张三2','color':'yellow'},
            {'id':4,"name":'张三3','color':'#aabbcc'},
            {'id':5,"name":'张三4','color':'blue'}
        ]

        var html = "";
        for(var i = 0 ; i < userList.length;i++){
            //html+="<tr style='background-color:"+userList[i].color+"'><td>"+userList[i].id+"</td><td>"+userList[i].name+"</td></tr>";
            html+=`
                <tr style="background-color:${userList[i].color}">
                    <td>${userList[i].id}</td>
                    <td>${userList[i].name}</td>
                </tr>
            `;
        }
        $("#tby").append(html);
    </script>
</body>
</html>

对象声明:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
       function person(name,age){
            return {"name":name,"age":age};
       }

       console.log(JSON.stringify(person('张无忌',29)));

       function person2(name,age){
           return {name,age};
       }
       console.log(JSON.stringify(person2('张三丰',99)));
    </script>
</head>
<body>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LEELGUkC-1603890400206)(assets/1575443007815.png)]

箭头函数

function method(params){

}

method => (params){

}

对象中使用箭头函数

<script>
        var vue = new Vue({
            el:"#app",
            data:{

            },
            methods:{
                method1:function(){
                    alert(1);
                },
                method2:()=>{
                    alert(2);
                },
                method3(){
                    alert(3);
                }
            },
            mounted(){
                this.method1();
                this.method2();
                this.method3();
            }
        });
    </script>

<script>
        var vue = new Vue({
            el:"#app",
            data:{

            },
            methods:{
                method1:function(params){
                    alert(params.name);
                    alert(params.age);
                },
                method2:({name,age})=>{
                    alert(name);
                    alert(age);
                },
                method3(){
                    alert(3);
                }
            },
            mounted(){
                this.method1({"name":"张三","age":18});
                this.method2({"name":"李四","age":28});
                this.method3();
            }
        });
    </script>

数组map的方法

<script>
        var arr = ["1","2","4","8","10"];
        for(var i = 0 ; i < arr.length;i++){
            arr[i] = parseInt(arr[i]);
        }
        console.log(arr);

        arr.map(j=>parseInt(j));
        
        console.log(arr);
    </script>

数组的push/join

var arr = ["1","2","4","8","10"];
        arr.push("22");
        console.log(arr);

        var rst = arr.join(",");
        console.log(rst);

数组reduce的方法

<script>
        var arr = ["1","2","4","8","10"];
       	arr.reduce((a,b)=>{return parseInt(a)+parseInt(b)});
        console.log(arr);
    </script>

Promise

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/util.js"></script>
    <script>
        function dw(){

            //get('rst3.json');
            //alert("444444");

            //问题:将请求发送后获取结果，然后再执行后续的业务操作(alert("444444"))
            //permise:
            //语法:
            // new Promise(function(resovle,reject){
            //  resovler执行成功后调用的方法
            //  reject执行失败后调用的方法。
            // });

            //then中的函数就是Promiese的function中的resolve
            //catch中的函数就是Promiese的function中的reject
            get2('rst.json').then((data)=>{
                alert(JSON.stringify(data));
                alert("44444444");
            }).catch(()=>{
                alert("执行失败了");
            });


        }
    </script>
</head>
<body>


    <input type="button" value="点我" onclick="dw()"/>
</body>
</html>

rst.json

{
  "id":1,"name":"张三丰","age":108
}

util.js

function get(url){
    axios.get(url).then((res)=>{
        alert(JSON.stringify(res.data));
    }).catch(()=>{
        alert("调用失败");
    })
}

function get2(url){
    return new Promise(function(resolve,reject){
        axios.get(url).then((res)=>{
            resolve(res.data);
        }).catch(()=>{
            reject();
        })
    });
}

对象的扩展方法（Object)

Object.keys({属性名:属性值});
Object.values({属性名:属性值});

数组的扩展方法（数组)

var arr = [10，20，21，33];
find查找，返回符合记录的集合
findIndex,返回符合记录的索引集合
includes:是否包含

Babel

export default

exports

require[ES5]---->import[ES6] 浏览器不支持import这种写法。

babel将高级语法转换成低版本语法，让浏览器能认识解析这些语法。

npm/cnpm install babel-preset-es2015 --save-dev
npm/cnpm install babel-cli -g

.babelrc

{
  "presets":["es2015"]
}

命名导出

let name='李四';
let age = 19;
let say = function(str){
    console.log(str);
}

export {name,age,say}

import * as api from './export1'

console.log(api.name);
console.log(api.age);
api.say("hello world")

默认导出

export default {
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      };
    }
  };

import api from './export1'

api.xxxxx

总结

nodeJS
	概念:
		node.js是chrome浏览器中的V8引擎抽取出来形成，主要的作用就是后台解析Javascript代码。是后台Javascript的运行环境。
			JVM:运行的java--->class
			node.js:运行的js
	语法:
		声明变量: var / let /const
		声明一个方法: function methodName(){} 
		exports导出  require[ES5]导入
		nodeJS编写一个web服务[http]
			var http = require('http');
			http.createServer(function(request,reponse){
				//request中获取数据
				//response响应到页面
			}).listen(8080);
			
	npm:从国外网站下载前端项目所需要的工具/插件/组件....
		缺点:速度慢
	cnpm:淘宝提供的类似于npm的功能
	nrm: 更换下载的url地址
	npm config:设置下载的默认目录
	下载:  npm/cnpm install 名称 [-g]
	npm init:初始化node.js的项目
	npm install ：根据项目中的package.json中记录的当前项目需要的工具/插件/组件....来进行下载
	
	webpack:就是用js编写的一个打包工具。作用将js/css/image....静态资源进行打包操作，形成一个js文件，在html页面中只需要引入
		打包后生成js文件，就可以包含所有的功能。
		（1）导入方便
		（2）打包的过程中会对文件的内容进行压缩，帮用户节省流量同时更安全
		（3）可以将高级的语法自动翻译成低级语法 [浏览器不支持高级语法]
		webpack.config.js:记录的是打包的相关属性信息。
ECMAScript6语法
	如何声明变量 var  let  const
	模板字符串解决字符串拼接的问题
	箭头函数的使用
	数组的方法 map /push/json/reduce/find/findIndex/includes
	对象的扩展方法  keys  values