大前端

1、vscode安装

2、Node.js

类比jvm

快速入门

Node 实现请求响应

//导入模块的方式 require
const http = require('http');

//1：创建一个httpserver服务
http.createServer(function(request,response){
    //浏览器怎么认识hello server！！
    response.writeHead(200,{'Content-type':'text/html'});//告诉浏览器将
    //以text/html的方式去解析hello server这段数据
    //给浏览器输出内容
    response.end("<strong>hello server!!!</strong>");
}).listen(8888);

console.log("你启动的服务是：http://localhost:8888");
//2：监听一端口8888
//3：启动运行服务node httpserver.js
//4：在浏览器访问http://localhost:8888

Nodejs操作mysql数据库

安装mysql依赖

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",
    password:"123456",
    database:"testdb"
});
// 3：开辟连接
connection.connect();
// 4: 执行curd
connection.query("select * from user",function(error,results,fields){
    // 如果查询出错，直接抛出
    if(error)throw error;
    // 查询成功
    console.log("results = ",results);
});
// 5: 关闭连接
connection.end();
// 最后一步：运行node db.js 查看效果

新建数据库testdb和表user

3、ES6

3.1 let和const

<!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>
        //let和const解决
        //1：var的变量穿透的问题
        //2：常量修改的问题
        for (let i = 0; i < 5; i++) {
            console.log(i);
        }

        //这里就造成变量穿透 用let替代var就会报错
        console.log(i);

        var PI = Math.PI;
        PI = 100;
        console.log(PI); 

        
        
    </script>

</body>
</html>

在实际开发和生产中，如果是小程序，uniapp或者一些脚手架，可以大胆的使用let和const

但是如果你是web开发，建议大家还是使用var，因为在一些低版本的浏览器还是不支持let和const

3.2 模板字符串

<!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>
        //字符串会牵扯到动态部分
        var person = {
            name : "飞哥",
            address : "广东学相伴",
            link : "https:www.kuangstudy.com"
        };
        let address = "我是"+person.name+"，正在"+person.address+"讲课，讲课的内容会上传到官网："+person.link+"平台上";
        console.log(address);

        //ES6的语法模板字符串语法
        let address2 = `我是${person.name}，正在${person.address}讲课，讲课的内容会上传到官网：${person.link}"平台上`;
        console.log(address2);

    </script>

</body>
</html>

3.3 函数默认参数和箭头函数

<!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>

        //函数默认参数
        function sum(a=100,b=100){
            return a + b;
        }

        var result = sum(100,100);
        console.log(result);

    </script>

</body>
</html>

箭头函数 ★

在未来的开发项目中，比如小程序，uniapp，一些常见的脚手架大量使用

<!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>
        //箭头函数
        var sum = function(a,b){
            return a + b;
        }

        //改进1
        var sum = (a,b)=>{
            return a + b;
        }

        //改进2
        var sum = (a,b)=>a + b;

        //改进3
        var sum = (a,b)=>a + b;
        //1.去掉function
        //2.在括号后面加箭头
        //3.如果逻辑代码仅有return可以直接省去，如果你有逻辑体，就不能省略
        //4.如果参数只有一个，可以把括号也省去

        var arr = [1,2,3,4,5,6];
        var newarr = arr.map(obj=>obj*2);
        console.log(newarr); 

    </script>

</body>
</html>

3.4 对象初始化简写

<!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>
        let info = {
            title : "广东学相伴",
            link : "https://www.kuangstudy.com",
            go : function(){
                console.log("我骑着小蓝车来公司上班");
            }
        };

        //ES6 简写
        //因为对象是以key:value存在
        //1.如果key和value的名字一致，可以只定义一次即可
        //2.如果value是一个函数，可以把`:function`全部去掉，只剩下()即可
        var title = "广东学相伴";
        var link = "https://www.kuangstudy.com";
        let info2 = {
            title,
            link,
            go(){
                console.log("我骑着小蓝车来公司上班");
            }
        };

        console.log(info2);
        console.log(info2.title);
        console.log(info2.link);
        info2.go();


    </script>

</body>
</html>

对象简写案例

<!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>
   
   <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>

       //document.getElementById("loginbtn").onclick = 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>

</body>
</html>

3.5 对象解构

<!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>
        
        var title = "广东学相伴";
        var link = "https://www.kuangstudy.com";
        let info2 = {
            title,
            link,
            go(){
                console.log("我骑着小蓝车来公司上班");
            }
        };

        //通过.的方式
        console.log(info2); 
        console.log(info2.title); 
        console.log(info2.link); 
        info2.go();  

        //通过[]的方式
        console.log(info2); 
        console.log(info2["title"]); 
        console.log(info2["link"]); 
        info2["go"](); 

        //ES6对象解构--快速获取属性和方法的形式
        var {title,link,go} = info2;
        //还原代码
        //var title = info2.title;
        //var link = info2.link;
        console.log(title,link);
        go();

    </script>
</body>
</html>

3.6 对象传播操作符

<!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>

        //对象传播操作符
        var person = {
            name : "学相伴",
            address : "广东",
            link : "https://www.kuangstudy.com",
            phone : 1234567,
            go(){
                console.log("开始上班了");
            }
        }

        //解构出来
        var {name,address,...person2} = person;
        
        console.log(name);
        console.log(address);
        console.log(person2);
 
    </script>

</body>
</html>

实例

<!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>
        //java ---后台
        //数据格式： var userPage = {pages:10,users:[{},{}],pageNo:1,total:100}
        //异步请求
        // $.post("/user/search",function(res){
            // res = {pages:10,users:[{},{}],pageNo:1,total:100}
            var userPage = {pages:10,users:[{},{}],pageNo:1,total:100};
            var {users,...userPage2} = userPage;
        //})
    </script>

</body>
</html>

3.7 数组Map

<!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>
        //要对arr数组每个元素*2
        let arr = [1,2,3,4,5,6,7];
        //传统的方式
        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;
            ele.check = true;
            return ele;
        });
        console.log(newusers);

    </script>


</body>
</html>

3.8 数组Reduce

<!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>
        var arr = [1,2,3,4,5,6,7,8,9,10];
        var result = arr.reduce(function(a,b){
            return a + b;
        })
        console.log("result = ",result);
    </script>

</body>
</html>

4、NPM包管理器

类似于java的maven，用来快速构建nodejs工程，安装和依赖第三个模块，比如npm install mysql redis等等

快速构建nodejs工程

npm init (-y)

得到package.json 这个文件里的内容如下

{
  "name": "npmpro", //工程名
  "version": "1.0.1",  //版本
  "description": "我是一个node工程", //描述
  "main": "index.js", //入口js
  "scripts": { //运行脚本
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "\"学相伴\",", // 开发者
  "license": "ISC"  // 授权协议
}

类似于pom.xml

快速安装和依赖第三方模块

npm install xxxx 或者 npm i xxx模块名
安装的模块放到node_modules文件夹中
导入模块用require
node xxx.js 运行过程，js是可以省去的，终止的命令行crtl+c
模块和package.json有什么关系？
- ```
"dependencies": {
    "jquery": "^3.5.1",
    "mysql": "^2.18.1",
    "redis": "^3.0.2",
    "vue": "^2.6.12"
}
```
- 通过npm install xxx 会记录在package.json这个文件中，实现复用
- 通过npm install 可以直接把package.json所依赖的模块全部自动下载下来，这样就可以避免重复下载模块
安装很慢怎么办（镜像）

npm install -g cnpm --registry=https://registry.npm.taobao.org
卸载

npm uninstall vue jquery

5、Babel

安装

cnpm install -g babel -cli

babel --version

posted @ 2021-04-21 19:28 Barrymeng 阅读(222) 评论(0) 收藏举报

刷新页面返回顶部

Barrymeng

大前端

大前端