大前端快速入门

最新推荐文章于 2023-03-07 08:40:09 发布

早上真起不来！

最新推荐文章于 2023-03-07 08:40:09 发布

阅读量213

点赞数

本文链接：https://blog.csdn.net/qq_51998352/article/details/117339413

版权

本文是大前端学习的入门教程，涵盖了前端开发工具如VSCode的配置，Node.js的安装和快速入门，Es6的新特性，Npm包管理，Babel的使用，模块化管理和Webpack打包编译。通过实例讲解，帮助读者快速上手大前端开发。

摘要由CSDN通过智能技术生成

笔记整理来源 B站UP主狂神说Java https://space.bilibili.com/95256449/

大前端学习

Nodejs、ES6、Babel、WebPack

1、前端开发工具和前端开发工具

下载vscode https://code.visualstudio.com/Download

在这里插入图片描述

汉化
- 第一种：搜索Chinese下载插件
- 第二种：ctrl+shift+p—搜索Configure Dispaly Language—zh-cn
在我们的项目路径中新建文件----vscode打开文件
设置字体大小

左边栏Manage—settings—搜索fonts—Font size
开启Emmet语法支持（自动补全）

设置中搜索Emmet—启用—重启

2、Nodejs安装及快速入门

安装

安装Node.js https://nodejs.org/en/download/ 一路下一步
node -v 出现版本号 —>安装成功

快速入门

创建node文件
vs打开文件—创建hello.js—console.log(“hello”)-----ctrl+s保存
ctrl+` 打开命令终端：node hello.js-----输出hello

Node-实现请求响应

文档官网（很多模块） https://nodejs.org/dist/latest-v14.x/docs/api/

创建helloserver.js
编写代码

const http = require('http');						//导入模块是require 就类似于import java.io

//1. 创建一个httpserver服务
http.createServer(function(request,response){
   
    //浏览器怎么认识hello httpserver
    //告诉浏览器将以text/html去解析hello httpserver的数据 text/plaint 文本方式解析
    response.writeHead(200,{
   'Conten-type':'text/html'});
    //给浏览器输出内容,text/html就会去解析我们的h1
    response.end("<h1>hello httpserver </h1>");
}).listen(8888);
//2.监听端口8888
//3.启动运行服务 node helloserver.js
//4.在浏览器中访问http://localhost:8888/
console.log("启动成功！！！");

Node-操作Mysql数据库

安装mysql依赖,第三方模块(所以我们要手动获取，不能在文档官网中找到)
npmjs官网找第三方模块：https://www.npmjs.com/
```
/项目路径下
npm install mysql
```

创建db.js

//导入MySQL依赖包，mysql属于第三方的模块就类似于 java.sql 一样的道理
var mysql = require("mysql")

//1.创建一个MySQL的Connection对象
//2.配置数据连接的信息
var connection = mysql.createConnection({
     
    host:"127.0.0.1",
    user:"root",
    port:3306,
    password:"1234",
    database:"testdb"  //数据库名
});
//3.开辟连接
connection.connect();
//4.执行curl
connection.query("select * from user",function(error,results,fields){
     
    //如果查询出错，直接抛出
    if(error) throw error;
    //查询成功
    console.log("results = ",results);
});
//5.关闭连接
connection.end();
//最后一步：运行node db.js

3、Es6的新语法

let和const命令

创建新项目Es6—创建01-let和const定义.html----shitf+1自动添加html

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>
        //传通定义变量和常量的方式 统一使用var
        var name = "学相伴";
        var link = "https://www.kuangstudy.com";
        var PI = Math.PI;
        console.log(name);
        console.log(link);
        console.log(PI);

        //Es6定义方式
        let name2 = "学相伴2";
        let link2 = "https://www.kuangstudy.com";

        //定义常量
        const PI2 = Math.PI;

        console.log(name2);
        console.log(link2);
        console.log(PI2);
    </script>
</body>
</html>

在这里插入图片描述

创建02- let-const和var的区别.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>
        // let 和 const解决
        //1.var的变量穿透的问题
        for(var i = 0;i<5;i++){
            // 我们改成let就会报错，不会有变量穿透问题
            console.log(i);
        }

        // 这里就造成变量穿透 会打印出5 在Java中就是编译出错
        console.log(i);

        //2.常量修改的问题
        var PI = Math.PI;  //我们修改为const就会报错 常量不能修改
        PI = 100; //用var定义的是可以修改的
        console.log(PI);

        //在实际的开发和生产中，如果是小程序，uniapp或者一些脚手架中的，可以大胆的使用我们的let和const
        //但是如果你是web开发，建议还是使用var 因为在一些低版本的浏览器不支持let和const
    </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>
        //字符串会牵涉到动态部分
        var person = {
     
            name: "飞哥",
            address:"广东学相伴",
            link:"http://www.kuangstudy.com",
        };

        //传统的方式
        let address = "传统的--我是"+person.name+"，正在"+person.address+"讲课，讲课的内容会上传到官网："+person.link+"平台上";
        console.log(address);

        //es6的语法模板字符串
        let address2 = `Es6的--我是${
       person.name}，正在${
       person.address}讲课，讲课的内容会上传到官网：

最低0.47元/天解锁文章

早上真起不来！

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
大前端快速入门

笔记整理来源 B站UP主狂神说Java https://space.bilibili.com/95256449/大前端学习Nodejs、ES6、Babel、1、前端开发工具和前端开发工具下载vscode https://code.visualstudio.com/Download汉化第一种：搜索Chinese下载插件第二种：ctrl+shift+p—搜索Configure Dispaly Language—zh-cn在我们的项目路径中新建文件----vscode打开文件
复制链接

扫一扫