尚硅谷在线教育四：尚硅谷在线教育前端的知识

于 2021-08-18 11:00:56 发布
阅读量500 收藏
点赞数
分类专栏： 前端 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45432976/article/details/119577406
版权

文章目录

1.axios

1.1 axios简介

axios是独立的项目，不是vue里面的一部分，使用axios经常和vue一起使用实现ajax操作

1.2使用前景

前端发送ajax请求到后端接口
后端接口返回数据到前端

1.3axios的使用

1.3.1创建HTML文件，引入包含vue和axios的js文件

<script src="vue.min.js"></script>
<script src="axios.min.js"></script>

1.3.2编写axios代码

  1. 编写json类型的请求数据
{
    "success":true,
    "code":200,
    "message":"ok",
    "data":{
       "person":[
            {"name":"tom","age":18},
            {"name":"李四","age":28},
            {"name":"王五","age":43}
        ]
    }
}
  1. 请求数据并访问
 <script >
        new Vue(
            {
                el:'#app',
                data: {//定义变量和初始值
                    userList: []
                },
                created(){//页面渲染之前执行
                    //调用定义的方法
                    this.getUserList()
                },
                methods: {//编写具体的方法
                         //创建方法
                         getUserList(){
                             //使用axios发送axios请求
                             //axios.请求方式（“请求路径”）.then().catch()  成功执行then失败执行catch
                             axios.get("data.json")
                             .then(response => {
                                  //response是请求返回的数据
                                  console.log(response.data.data.person)
                                  this.userList=response.data.data.person
                                  console.log(this.userList)
                             })
                             .catch(error => {

                             })
                         }
                }



            }
        )
    </script>
  1. 请求数据的查看
<div id="app">
         <div v-for="user in userList" >
            {{user.name}}--->{{user.age}}
         </div>
    </div>

2. node.js

2.1node.js是什么

简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
不需要浏览器，可以直接访问JavaScript代码

2.2node.js能干什么

如果你是一个前端程序员，你不懂得像PHP、Python或Ruby等动态编程语言，然后你想创建自己的服务，那么Node.js是一个非常好的选择。
Node.js 是运行在服务端的 JavaScript，如果你熟悉Javascript，那么你将会很容易的学会Node.js。
当然，如果你是后端程序员，想部署一些高性能的服务，那么学习Node.js也是一个非常好的选择。

2.3使用node.js执行javascript代码

  1. 创建一个js目录，写js代码
    例如我创建了一个名为01.js的文件
console.log("hollow node.js")

  1. 打开文件所在的目录
    在这里插入图片描述

  2. 用cmd命令打开，输入node 文件名会执行响应的技术文件
    在这里插入图片描述

2.4 在vscode工具中打开cmd命令，进行js代码执行

2.4.1找到文件目录，右键，选择在集成终端中打开

在这里插入图片描述

2.4.2在vscode的下面会出现终端

在这里插入图片描述

2.4.3同样输入node 01.js命令

在这里插入图片描述

3.npm

3.1npm是什么

NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。
在后端开发中，使用maven构建项目，管理jar依赖，联网下载依赖
npm类似于maven，用在前端中，管理前端js依赖，联网下载js依赖，比如jQuery

3.2npm使用

3.2.1使用npm进行项目管理

  1. 创建文件夹npm
  2. 项目初始化
#建立一个空文件夹，在命令提示符进入该文件夹  执行命令初始化（打开终端）
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改
#如果想直接生成 package.json 文件，那么可以使用命令(一切默认)
npm init -y

在该文件中会生成一个名为pagecage.json的文件，存放在相关的信息类似于后端的pom.xml文件
在这里插入图片描述

3.2.2npm下载依赖命令

命令为： npm install 依赖名称

#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
npm install jquery


#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目


#如果安装时想指定特定的版本
npm install jquery@2.1.x


#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖

#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint


#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack

3.2.3其他命令

#更新包（更新到最新版本）
npm update 包名

#全局更新
npm update -g 包名

#卸载包
npm uninstall 包名

#全局卸载
npm uninstall -g 包名

4. babel

4.1babel是什么

babel是一个转码器，吧es6的代码换成es5的代码
我们通常写的是es6代码，但es6的代码浏览器兼容性很差，而es5的代码浏览器兼容性好
我们通常编写es6的代码然后通过babel将其转换为es5

4.2 babal安装

npm install --global babel-cli
#查看是否安装成功
babel --version

4.3 babel的使用

  1. 初始化项目
npm init -y
  1. 创建文件
    js/01.js并写入一下代码
// 转码前

// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)
  1. 配置.babelrc
    Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下。
{
    "presets": [],
    
    "plugins": []
    }

presets字段设定转码规则，将es2015规则加入 .babelrc：

{
    "presets": ["es2015"],
    
    "plugins": []
    }

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

  2. 转码

# 转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel src/example.js --out-file dist1/compiled.js
# 或者
babel src/example.js -o dist1/compiled.js


# 整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2

5. 前端模块化

5.1 模块化是什么

在后端开发中类与类之间的调用称为后端模块化
在前端开发中js与js的调用称为前端模块化

5.2 es5代码模块化

需求：有两个js文件分别为01.js和02.js，在02.js中调用01.js
01.js中的代码书写如下

//定义js方法
const sum = function(a,b){
        return parseInt(a) + parseInt(b)
    }

const subtract = function(a,b){
    return parseInt(a) - parseInt(b)
}
const multiply = function(a,b){
    return parseInt(a) * parseInt(b)
}
const divide = function(a,b){
    return parseInt(a) / parseInt(b)
}
//定义哪些方法可以被js调用
module.exports ={
    sum,
    subtract,
    multiply,
    divide
}
  1. 在02.js中调用
//调用01.js中的方法
//引入01.js
const m=require('./01.js')
console.log(m.sum(1,2))
console.log(m.subtract(1,2))
  1. 运行结果
    在这里插入图片描述

5.3es6代码模块化

注意：
如果使用es6语法写模块化操作，在node.js的环境中不能直接运行的，需要使用babel把es6的代码转化成es5的代码，才可以在node.js中运行
一定要安装babel

5.3.1 方法1

需求
在02.js文件中调用01.js中的方法
在modulejs1中创建名为01.js和02.js的文件

  1. 在01.js中
export function get() {
    console.log('get方法')
}

export function save() {
    console.log('save方法')
}
  1. 在02.js中
import {get,save} from './01.js'

get()
save()
  1. babel转换
    在这里插入图片描述
  2. 调用方法
    在这里插入图片描述

需求
在02.js文件中调用01.js中的方法
在modulejs2中创建名为01.js和02.js的文件## 5.3.2
01.js

export default{
    get(){
        console.log("get");
    },
    save(){
         console.log("save");
    }
}

02.js

import m from './01.js'

m.get()
m.save()

babel转换
在这里插入图片描述
执行结果
在这里插入图片描述

6.Webpack

6.1Webpack是什么

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

6.2使用步骤

6.2.1 webpack安装

  1. 全局安装 ： npm install -g webpack webpack-cli
  2. 查看版本：Webpack -v

6.2.2项目初始化

  1. 创建一个Webpack文件夹，进入目录执行命令： npm init -y
  2. 创建一个src文件夹
  3. 在src文件夹下创建三个文件common.js,utils.js和01.js
    common.js
const info = function(str) {
    console.log(str);
}

module.exports={
    info
}

utils.js

const add = function(a,b)
{
    console.log(a+b)
}

module.exports ={
    add
}

01.js

const common = require('./common.js');
const util = require('./utils.js');

common.info("111")
util.add(13,2)

6.2.3 JS打包

  1. webpack目录下创建配置文件webpack.config.js
    以下配置的意思是：读取当前项目目录下src文件夹中的01.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js
const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/01.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    }
}

6.2.4 执行编译命令

webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并惊醒了代码压缩

在这里插入图片描述
在这里插入图片描述

6.2.5webpack目录下创建index.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 src="./dist/bundle.js"></script>
</body>
</html>

打开浏览器进行查看

6.3 CSS打包

  1. 安装style-loader和 css-loader
    Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
    Loader 可以理解为是模块和资源的转换器。
    首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css
    npm install --save-dev style-loader css-loader
  2. 在src目录下创建style.css
body {
    background-color: red;
}
  1. 修改webpack.config.js(加上module即CSS模块)
const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/01.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}
  1. 修改01.js将css文件引入进来
const common = require('./common.js');
const util = require('./utils.js');

//css文件引入
require("./style.css")

common.info("111")
util.add(13,2)
  1. 进行打包查看
    在这里插入图片描述
    此时网页的背景变成了红色
smilecb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值