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失败执行catchaxios.get("data.json").then(response => {//response是请求返回的数据console.log(response.data.data.person)this.userList=response.data.data.personconsole.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. 进行打包查看
   
   此时网页的背景变成了红色

尚硅谷在线教育四：尚硅谷在线教育前端的知识相关推荐

1. 尚硅谷《全套Java、Android、HTML5前端视频》

   尚硅谷<全套Java.Android.HTML5前端视频> (百万谷粉推荐:史上最牛.最适合自学的全套视频.资料及源码) [尚硅谷官网资料导航] 谷粒学院在线学习:http://www.g ...

2. 教育机构如何提升在线教育技术能力？ | 云+社区技术沙龙

   教育机构如何提升在线教育技术能力? 如何给用户稳定.清晰流畅的在线互动体验? AI和大数据的发展会给行业带来哪些变革? 腾讯云结合自身优势,从在线教育的业务营销.教学业务应用与管理方面助力行业合伙发展 ...

3. 在线教育直播系统 一对一在线直播平台解决方案

   在线教育直播系统 一对一在线直播平台解决方案 在线教育直播系统功能模块 在线教育直播系统讲师端功能 在线教育直播系统学生端功能 一对一在线教育系统功能介绍 一对一在线教育系统优势 在线教育直播系统功能 ...

4. 下面哪项属于计算机在教育教学中的应用,东师现代教育技术18秋在线作业2答案...

   现代教育技术18秋在线作业2-0005 试卷总分:100    得分:0 一. 单选题 (共 10 道试题,共 25 分) 1.不仅具有路由的功能,而且能对两个网络段中使用不同传输协议的数据进行互相的 ...

5. 北师大计算机在线作业9,北师大网络教育《计算机动画》在线作业-20210614020942.pdf-原创力文档...

   北师大网络教育<计算机动画>在线作业 以下哪个工具不可以用来绘制或者调整路径 ( ) . [线条工具] [铅笔工具] [选择工具] [手形工具] 如果想要改变绘制图形的线条颜色 , 应该使 ...

6. 校宝在线的延迟满足：做教育产业互联网平台

   8月23日,教育产业服务平台校宝在线主办的"SEE 2019教育服务共建大会"在杭州云栖小镇召开,SEE 2019首届大会主题是"新教育",来自全国各地的数千名 ...

7. 教育软件开发与在线教育之间的联系

   如今互联网与科技的发展用日新月异来形容也不为过,同时结合与传统的在线教育也在不断走向成熟,其形式与内容已经逐渐走向了多样化.现今越来越多的学校和教育培训机构以及个人企业开始向教育软件开发靠拢.到目前为 ...

8. 四六级考试中的计算机类文章,毕业设计论文-基于web的英语四六级模拟在线考试系统.doc...

   毕业设计论文-基于web的英语四六级模拟在线考试系统 基于web的英语四六级模拟在线考试系统 摘要 随着科学技术的不断提高,计算机科学技术日渐成熟,其强大的功能已为人们深刻认识,它已进入人类社会的各个 ...

9. 在线教育、精品课程、直播课、课程交流、历史观看、订单、收藏、余额、推荐、关注、购买课程、充值、产品设计、线上教育、视频课程、教育app、在线课堂、网络教学、远程教育、教学辅导、学习平台、K12教育

   在线教育.精品课程.直播课.课程交流.历史观看.订单.收藏.余额.推荐.关注.购买课程.充值.产品设计.线上教育.视频课程.教育app.在线课堂.网络教学.远程教育.教学辅导.学习平台.K12教育 A ...

10. 基于html5的在线教育,基于HTML5的在线学习系统的设计与实现

    基于HTML5的在线学习系统的设计与实现 发布时间:2019-11-18所属分类:科技论文浏览:1次 摘 要: 摘 要: 在线课程学习网站的发展迅速,吸引了广大用户.基于 HTML5 的在线学习系统经 ...

最新文章

1. 最新 30 道 Dubbo 面试题及答案
2. 154. 寻找旋转排序数组中的最小值 II(有手就行)
3. Nginx 部署 Vue 项目刷新页面出现404
4. Angular 9 新功能摘要
5. java 判断顺序_通过指令码来判断Java代码的执行顺序（++问题与return和finally的问题）...
6. android 抓log暗码,「有用功」强大的安卓暗码命令 你都知道吗？
7. Binary Tree Preorder Traversal @leetcode
8. Redis中的管道有什么用？
9. SpringData JDBC
10. 毕设题目：Matlab图像拼接
11. 手机vnc远程控制软件，2步完成手机vnc远程控制软件的安装和使用
12. 大数据告诉你：逃离北上广的人最后都去了哪里？
13. 计算机电子表格编辑栏,怎么在Excel中添加开发工具到工具栏
14. 计算机专业大学分数线低的,成绩徘徊在985、211分数线边缘，这4所大学考上容易，退档率极低...
15. python爬虫：抓取道指成分股数据
16. ikbc pocker键盘 快捷键说明
17. 疫情之下，普通人高薪就业指南：学软件测试，路就不会遥远
18. element-ui换肤，全局换肤
19. linux ip_tos,IP_TOS选项
20. 低通，高通，带通，带阻滤波器的定义

热门文章

1. 云商之softlayer与saltstack
2. 经典Robocode例子代码--SnippetBot
3. 隐私保护与隐私计算研讨会 | 余维仁：大数据时代下需要各界更新对个人隐私保护的固有认识
4. 基于C语言开发Linux平台的协议分析软件
5. 携手阿里和暴风重磅发布的小辣椒PLAYER到底有哪些黑科技？
6. 2007我的找工作之旅 - 洛丽塔之痒 - 洛丽塔之痒 - 和讯博客
7. 数字签名是什么？公钥和私钥是什么
8. 图像分割中阈值的自动选取的研究及其算法实现
9. matlab21世纪论坛,compressive sensing 压缩感知（转） 21世纪最火的研究方向
10. 【Transformers】第 9 章：跨语言和多语言语言建模