大前端进阶

VScode的安装

下载地址我们直接到官网进行下载即可，安装没什么好说的一直下一步即可，最好先汉化一下，插件里面搜索chinese即可

NodeJS

Nodejs快速安装和了解

安装的话直接到官网无脑下一步即可下载 | Node.js 中文网 (nodejs.cn)

cmd输入node -v出现版本号 表示安装成功

运行第一条node指令

Nodejs实现HttpServlet服务

// 导入http模块 这里使用require关键字
const http = require('http');

//1.创建httpserver服务
http.createServer(function(request,response){
    response.writeHead(200,{"Content-type":"text/plain"});
    response.end("Hello mygod!");
}).listen(8888);
//2.监听端口配置为8888
//3.启动服务 node指令
//4.在浏览器访问

Nodejs操作mysql数据库

首先需要下载mysql的资源npm install mysql

执行之后会发现我们的项目中新增了一个node_modules文件夹，然后我们就可以使用了

//导入mysql依赖 mysql属于第三方的模块
var mysql=require("mysql");
//1.创建mysql的连接对象
//2.配置数据连接的信息
var connection=mysql.createConnection({
    host:"127.0.0.1",
    user:"root",
    password:"233",
    database:"test",
    port:3306
});
//3.开辟连接
connection.connect();
//4.执行sql
connection.query("select * from user",function(err,results,filed){
    if(err) throw err;
    console.log(results);
})
//5.关闭连接
connection.end();

ES6

let和const命令

ES6之前，定义常量和变量都是使用var关键字，let和const的出现是为了解决变量穿透和变量的值可以改变的问题

如果使用let

const则是不能改变变量的值，需要注意的是有些低版本的浏览器不支持let和const语法也就是不支持es6

模板字符串

<script>
       var me={
           name:"lwl",
           address:"济南",
           link:"http://weilong98.com"
       }
        var chuantong=me.name+"的网站是"+me.link+",在"+me.address+"上班";
        console.log(chuantong)
        var es6=`${me.name}的网站是${me.link},在${me.address}上班`;
        console.log(es6)

    </script>

简单来说使用`和${}的方式来拼接字符串，并且他可以识别换行

函数默认参数与箭头函数

默认参数比较好理解，就是声明函数的时候默认给形参赋值

function sum(a=0,b=0){
            return a+b;
       }
console.log(sum(100));

如果不赋默认值那么结果为NAN

箭头函数：

<script>
     var sum=function(a,b){
        return a+b;
     }
     //使用箭头函数
     //1.去掉function
     //2.在括号后面加箭头
     //3.如果逻辑代码仅有return可以直接省去(如果有逻辑体不能省略)
     //4.如果参数只有一个，可以把括号也省去（多个或者没有参数不能省）
     //所以上面的函数可以改写为
     var sum=(a,b)=>a+b;

    </script>

对象初始化

<script>
     var name="展示干";
     var id="123";

     let person={
         name:name,
         id:id,
         go:function(){
             console.log("我是小狗勾");
         }
     }
	 //ES6的语法
     let person2={
         name,
         id,
         go(){
            console.log("我是小狗勾"); 
         }
     }
    </script>

如果key和变量的名字一致，可以只定义一次，如果value是一个函数可以把:funbction去掉

对象解构

可以快捷获取对象的属性和行为

<script>
     var name="展示干";
     var id="123";

     let person={
         name:name,
         id:id,
         go:function(){
             console.log("我是小狗勾");
         }
     }
     //之前的方式
     //var name=person.name;
     //var id=person.id;
     //或者
     //var name=person["name"];
     //var id=person["id"];
     //person["go"]();

     //ES6对接解构，语法可以写成
     var {name,id} =person;
     console.log(name,id)
     
    </script>

这样可以快速的获取对象的属性和方法

传播操作符

快速把对象的值赋值给另外一个对象

<script>
     var name="展示干";
     var id="123";

     let person={
         name:name,
         id:id,
         go:function(){
             console.log("我是小狗勾");
         },
         phone:1234
     }
     var {name,...newperson}=person;
     console.log(newperson)
     
    </script>

可以看到除了我们取出来的name的值，person的其他的值赋值给了newperson，这个的使用具有特定的场景只有有这个需求的时候才能理解他的作用

Map和Reduce数组

map数组：

<script>
     var arr=[1,2,3,4,5]
     var newarr=arr.map(function(e){
        return e*e;
     })

     var newarr2=arr.map(e=>e*e)


     var studentlist=[{name:"小红",age:1},{name:"小白",age:5},{name:"小蓝",age:31}]

     var newlist=studentlist.map(student=>{
         student.age=student.age+1;
         student.check=true;
         return student;
     })
     console.log(newarr2)
     console.log(newlist)
    </script>

Reduce数组：

<script>
     var arr=[1,2,3,4,5]
     var sum=arr.reduce((a,b)=>a+b)
     console.log(sum)
    </script>

计算方式是先算前两个 然后合并成一个值再和后面的值进行计算

总结：这些ES6的语法可以在nodejs、uniapp、微信小程序中使用

NPM包管理器

简介

官网npm (npmjs.com)

npm全称Node Package Manager，是NodeJS的包管理工具，里面所有的模块都是开源免费的，也是Node的包管理工具，相当于前端的maven

作用：1.快速构建nodejs工程 2.快速安装和依赖第三方模块 上面用的mysql redis等

构建nodejs工程

只需要输入指令npm init，然后会让你输入包名版本等按照默认的确定即可(后面加上-y 会生成默认的属性)，最后会生成一个package.json的文件，也可以在这里修改刚才定义的属性

{
  "dependencies": {
    "mysql": "^2.18.1"
  },
  "name": "src",
  "version": "1.0.0",
  "main": "db.js",
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "lwl",
  "license": "ISC",
  "description": ""
}

其作用类似于maven项目中的pom.xml

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

安装第三方模块的指令为npm install xxx或者npm i xxx参考上面使用的npm install mysql具体某个版本号在后面加上@即可

安装路径可以看到在项目node_modules下同样在package.json中可以看到安装的版本，在node中使用只需要require关键字即可

package.json中的依赖 使用npm install命令可以直接全部下载

卸载模块nom uninstall vue jquery

Babel

简介

ES6中的有些语法在浏览器或者Node.js中无法执行，Babel是一个广泛使用的转码器可以将ES6的代码转为ES5的代码从而在现有环境使用

安装

安装命令行代码工具

npm install -g babel-cli

查看版本babel --version

使用

1. 创建babel文件夹

2. 初始化项目npm init -y

3. 创建node文件

   let arr=[1,2,3];
   const newarr=arr.map(res=>res*2);
   console.log(newarr)
   ``
   4. 配置.babelrc，在项目根目录下，改文件用来设置转码规则和插件，基本格式为
   
   ```proper
   {
       "presets":["es2015"],
       "plugins": []
   }

4. 安装转码器，在项目中安装npm install --save-dev babel-preset-es2015

5. 执行（最好在cmd下）babel src -d dist表示把src下所有的node文件都转换到dist目录下

在dist下可以看到确实转换成es5的语法了

自定义脚本

通过上面的执行命令虽然可以运行，但是比较繁琐，还可以通过改写package.json的方式实现

"scripts": {
    "build": "babel src -d dist"
  }

然后执行npm run build即可运行，原理其实是一样的

模块化

CommentJS规范

先定义一个js，然后把他导出

var sum=(a,b)=>a+b;
var sub=(a,b)=>a-b;
var mul=(a,b)=>a*b;
var div=(a,b)=>a/b;

module.exports={
    sum,sub,mul,div
}

然后像引入第三方模块一样导入即可使用，与面向对象相似了

ES6规范

同样先创建一个js文件使用ES6语法格式

export function getuserlist(){
    console.log("获取列表")
}
export function getuser(){
    console.log("获取用户")
}
//下面是第二种写法
export default{
    getuserlist(){
        console.log("获取列表")
    },
    getuser(){
        console.log("获取用户")
    }
}

如果上面使用第二种方式应写为

import user from "./userApi";
user.getuser();
user.getuserlist();

需要注意的是node默认不支持es6的语法 所以需要使用babel进行降级，这里不再重复演示了

Webpack

Webpack是一个前端资源加载、打包工具，他能根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成相应的静态资源，简单来说就是可以将多种静态资源js、css、less转换成一个静态文件，减少页面请求

安装

执行指令npm install -g webpack webpack-cli

安装后查看版本号webpack -v

使用

首先创建一个新的文件夹项目webpack并且src下生成main.js,common.js,util.js并且使用npm init -y生成一个nodejs项目

util.js我们使用上面的即可

var sum=(a,b)=>a+b;
var sub=(a,b)=>a-b;
var mul=(a,b)=>a*b;
var div=(a,b)=>a/b;

module.exports={
    sum,sub,mul,div
}

common.js

module.exports.info=function(){
    console.log("啦啦啦")
}
module.exports.log=function(){
    console.log("我是日志")
}

main.js

const util=require("./util");
let common=require("./common");

common.info();
console.log(util.sub(4,1));

接着创建一个webpack.config.js文件配置打包规则

const path=require("path")
//定义js打包的规则
module.exports={
    //编译打包的入口
    entry:"./src/main.js",
    output:{
        //定义输出的指定目录
        path:path.resolve(__dirname,"./dist"),
        //合并的js文件名称
        filename:"bundle.js"
    }
}

然后执行webpack就可以得到合并的js文件，并且生成一个html页进行测试得到确实生成为一个js文件了

Webpack合并css文件

Webpack本身只能处理JavaScript模块，如果要处理其他类型的文件，需要使用loader进行转换

css-loader是将css装载到JavaScript ；style-loader是让JavaScript认识css

安装命令npm install --save-dev style-loader css-loader

然后修改webpack.config.js文件如下

const path=require("path")
//定义js打包的规则
module.exports={
    //编译打包的入口
    entry:"./src/main.js",
    output:{
        //定义输出的指定目录
        path:path.resolve(__dirname,"./dist"),
        //合并的js文件名称
        filename:"bundle.js"
    },
    module:{
        rules:[{
            test:/\.css$/,//把项目中所有的css文件打包
            use:["style-loader","css-loader"]
        }]
    }
}

在src下创建一个css文件

body{
    background: yellow;
}

main.js中加入这个css文件

require("./style.css");

package.json中加入webpack的执行脚本 方便执行

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack -w"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^6.7.1",
    "style-loader": "^3.3.1",
    "webpack-cli": "^4.9.2"
  }
}

使用npm run dev 即可看到效果，如果打包其他类型的文件需要下载不同的loader文件即可

Vue-element-admin初体验

首先是项目地址，克隆到本地即可git clone https://github.com/PanJiaChen/vue-element-admin.git

然后使用vscode打开此文件夹之后终端输入npm install即可把所有的依赖下载完毕，启动的话本地npm run dev然后http://localhost:9527 即可打开，观察源码可以看到上面的知识点大部分都用到了