项目源码与所需资料
链接：https://pan.baidu.com/s/1azwRyyFwXz5elhQL0BhkCA?pwd=8z59
提取码：8z59
文章目录
demo04-前端技术
1.VsCode的安装和使用
1.1下载安装VsCode
1.为了避免以后出bug,我下载的VsCode版本和老师的一样,都是1.29.1版本,在Chrome的url输入下载地址:https://update.code.visualstudio.com/1.29.1/win32-x64/stable并按回车即可下载
2.如果使用官网下载很慢,可以复制下载链接用迅雷进行下载,嘎嘎快!
3.下载完成后直接进行傻瓜式安装即可
1.2给VsCode安装插件
1.点击方框圈的地方
2.在搜索栏搜索并安装如下四个插件(安装完这四个插件后重启VsCode以便使我们安装的插件生效):
Chinese (Simplified) Language Pack for Visual Studio Code —— 中文语言包
Live Server —— 以内嵌服务器方式打开。以前我们想要访问静态页面1.html需要将1.html放到tomcat服务器上,然后使用ip和端口号来访问1.html,有了这个插件就可以直接以内嵌服务器方式打开1.html
Vetur —— 语法高亮、智能感知、Emmet 等 包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个 Ctrl 需要同时按着）
vue-helper—— 在代码前加el即可加载完整的elementUI代码片段
1.3创建工作区
1.在本地创建一个空文件夹
2.使用vscode打开上一步创建的空文件夹
3.将文件夹保存为工作区
①点击文件–>将工作区另存为…
②选中在第1步创建的空文件夹vs1010,给工作区起一个名字(随意起名)
1.4创建文件夹&文件
①右键点击vs1010选择"新建文件夹",这里我们创建一个名为demo1的文件夹
②右键点击demo1选择"新建文件",这里我们创建一个名为demo1的文件
③在01.html中编写代码
④在空白处右键选择"Open with Live Server",然后就会使用默认浏览器显示01.html(这是我们在"1.2给VsCode安装插件"中安装的Live Server插件的功劳)
⑤顺便看一下如果直接从本地打开01.html是什么样的:
2.es6语法
2.1let定义变量
// var 声明的变量没有局部作用域
// let 声明的变量 有局部作用域
{
var a = 0
let b = 1
}
console.log(a) // 0
console.log(b) // ReferenceError: b is not defined
// var 可以声明多次
// let 只能声明一次
var m = 1
var m = 2
let n = 3
let n = 4
console.log(m) // 2
console.log(n) // Identifier 'n' has already been declared
2.2const声明常量(只读变量)
// 1、声明之后不允许改变
const PI = "3.1415926"
PI = 3 // TypeError: Assignment to constant variable.
// 2、一但声明必须初始化，否则会报错
const MY_AGE // SyntaxError: Missing initializer in const declaration
2.3解构赋值
解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
//1、数组解构
// 传统
let a = 1, b = 2, c = 3
console.log(a, b, c)
// ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)
//2、对象解构
let user = {
name: 'Helen', age: 18}
// 传统
let name1 = user.name
let age1 = user.age
console.log(name1, age1)
// ES6
let {
name, age} = user//注意：结构的变量必须是user中的属性
console.log(name, age)
2.4模板字符串
模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。
// 1、多行字符串
let string1 = `Hey,
can you stop angry now?`
console.log(string1)
// Hey,
// can you stop angry now?
// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let name = "Mike"
let age = 27
let info = `My Name is ${
name},I am ${
age+1} years old next year.`
console.log(info)
// My Name is Mike,I am 28 years old next year.
// 3、字符串中调用函数
function f(){
return "have fun!"
}
let string2 = `Game start,${
f()}`
console.log(string2); // Game start,have fun!
2.5声明对象简写
const age = 12
const name = "Amy"
// 传统
const person1 = {
age: age, name: name}
console.log(person1)
// ES6
const person2 = {
age, name}
console.log(person2) //{age: 12, name: "Amy"}
2.6定义方法简写
// 传统
const person1 = {
sayHi:function(){
console.log("Hi")
}
}
person1.sayHi();//"Hi"
// ES6
const person2 = {
sayHi(){
console.log("Hi")
}
}
person2.sayHi() //"Hi"
2.7对象拓展运算符
拓展运算符（…）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
// 1、拷贝对象
let person1 = {
name: "Amy", age: 15}
let someone = {
...person1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age = {
age: 15}
let name = {
name: "Amy"}
let person2 = {
...age, ...name}
console.log(person2) //{age: 15, name: "Amy"}
2.8箭头函数
箭头函数提供了一种更加简洁的函数书写方式。基本语法是：
参数 => 函数体
箭头函数多用于匿名函数的定义
// 传统
var f1 = function(a){
return a
}
console.log(f1(1))
// ES6
var f2 = a => a
console.log(f2(1))
// 当箭头函数没有参数或者有多个参数，要用 () 括起来。
// 当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，
// 当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。
var f3 = (a,b) => {
let result = a+b
return result
}
console.log(f3(6,2)) // 8
// 前面代码相当于：
var f4 = (a,b) => a+b
3.vue
3.1vue入门案例
1.在工作区下vs1010下创建文件夹vuedemo,并在该文件夹下创建文件01-vue入门.html。然后使用vscode的快捷键!生成html代码
2.在html中引入js文件
①js文件在资料中
②将js文件粘贴到第1步创建的vuedemo文件夹中
③在01-vue入门.html文件中引入js文件
<script src="vue.min.js"></script>
3.在html页面创建div标签,并给该div标签添加id属性
<!-- id标识vue作用的范围 -->
<div id="app">
</div>
4.编写vue代码(vue代码就是如下这样固定的结构)
<script>
// 创建一个vue对象
new Vue({
el: '#app',//绑定vue作用的范围
data: {
//定义页面中显示的模型数据
message: 'Hello Vue!'
}
})
</script>
el: '#app'作用是得到id为app的标签,向标签里面写内容,底层实际上就是以前学的$(“#app”)
5.使用插值表达式获取data里面定义的值
<!-- {
{}} 插值表达式，绑定vue中的data数据 -->
{
{ message }}
6.完整的html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- id标识vue作用的范围 -->
<div id="app">
<!-- {
{}} 插值表达式，绑定vue中的data数据 -->
{
{ message }}
</div>
<script src="vue.min.js"></script>
<script>
// 创建一个vue对象
new Vue({
el: '#app',//绑定vue作用的范围
data: {
//定义页面中显示的模型数据
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
7.在空白处右键选择"Open with Live Server",去页面中看效果
3.2抽取代码片段
1.选择"文件–>首选项–>用户代码片段"
2.点击"新建全局代码片段文件…"
3.随意起个名字，点击"保存"后vscode会自动打开这个文件
4.将该文件中的所有代码都删掉
5.将如下代码复制粘贴到该文件中
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
6.在vuedemo文件夹下创建文件"02-测试代码片段.html",并在文件中敲出vue,这时vscode就会给我们提示,我们点击这个提示后就会自动补全代码
3.3基本数据渲染和指令
v-bind特性被称为指令。指令带有前缀v-
除了使用插值表达式{ {}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（: ）
new Vue({
el: '#app',
data: {
content: '我是标题',
message: '页面加载于 ' + new Date().toLocaleString()
}
})
<div id="app">
<!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
此时title中显示的是模型数据
-->
<h1 v-bind:title="message">
{
{content}}
</h1>
<!-- v-bind 指令的简写形式： 冒号（:） -->
<h1 :title="message">
{
{content}}
</h1>
</div>
3.4单向、双向数据绑定
使用v-model进行双向数据绑定
new Vue({
el: '#app',
data: {
searchMap:{
keyWord: '尚硅谷'
}
}
})
<div id="app">
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" v-bind:value="searchMap.keyWord">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="searchMap.keyWord">
<p>您要查询的是：{
{searchMap.keyWord}}</p>
</div>
- 这里的单向绑定是
v-bind:value="..."双向绑定是v-model="...",这里的双向相比于单向不用写:value - 单向绑定是:从data中取值,自身值的改变不会促使data中值的改变
- 双向绑定是:不仅可以从data中取值,自身值的改变也会促使data中值的改变
3.5绑定事件
new Vue({
el: '#app',
data: {
//查询结果
result: {
}
},
methods:{
search(){
console.log('search')
this.result = {
"title":"尚硅谷",
"site":"http://www.atguigu.com"
}
}
}
})
<div id="app">
<!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
<button v-on:click="search()">查询1</button>
<!-- vue绑定事件简写 -->
<button @click="search()">查询2</button>
<p><a v-bind:href="result.site" target="_blank">{
{result.title}}</a></p>
</div>
如下是打开的页面初始样子:
在打开的页面中点击查询1或查询2:
3.6修饰符
修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
即阻止事件原本的默认行为
new Vue({
el: '#app',
data: {
user:{
}
},
methods:{
onSubmit() {
if (this.user.username) {
console.log('提交表单')
} else {
alert('请输入用户名')
}
}
}
})
<div id="app">
<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：
即阻止表单提交的默认行为 -->
<form action="save" v-on:submit.prevent="onSubmit">
<label for="username">
<input type="text" id="username" v-model="user.username">
<button type="submit">保存</button>
</label>
</form>
</div>
这个例子就是:本来点了"保存"按钮是要提交的,但是因为用了修饰符.prevent，所以这里不再提交,而是调用我们自己写的onSubmit方法
如下是打开的页面初始样子:
输入框中什么也不写点击"保存"后会弹出提示框:
输入框中随便写点东西点击"保存"后会在控制台打印"提交表单"
3.7条件渲染
3.7.1v-if条件指令
new Vue({
el: '#app',
data: {
ok: false
}
})
<div id="app">
<input type="checkbox" v-model="ok">是否同意
<!-- v:if条件指令：还有v-else、v-else-if 切换开销大 -->
<h1 v-if="ok">同意</h1>
<h1 v-else>不同意</h1>
</div>
如果是ok: true那么默认就勾选这个复选框。这里是ok: false所以默认不勾选这个复选框,打开页面初始样子就是没勾选的:
勾选复选框后:
3.7.2v-show条件指令
new Vue({
el: '#app',
data: {
ok: false
}
})
<div id="app">
<input type="checkbox" v-model="ok">是否同意
<h1 v-show="ok">同意</h1>
<h1 v-show="!ok">不同意</h1>
</div>
3.7.3v-if和v-show的区别
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。- 相比之下，
v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 - 一般来说，
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
3.8列表渲染
例1:简单的列表渲染
new Vue({
el: '#app'
})
<div id="app">
<ul>
<li v-for="n in 5"> {
{ n }} </li>
</ul>
<ol>
<!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
<li v-for="(n, index) in 5">{
{ n }} -- {
{ index }}</li>
</ol>
</div>
例2:遍历数据列表
new Vue({
el: '#app',
data: {
userList: [
{
id: 1, username: 'helen', age: 18 },
{
id: 2, username: 'peter', age: 28 },
{
id: 3, username: 'andy', age: 38 }
]
}
})
<div id="app">
<table border="1">
<!-- <tr v-for="item in userList"></tr> -->
<tr v-for="(item, index) in userList">
<td>{
{index}}</td>
<td>{
{item.id}}</td>
<td>{
{item.username}}</td>
<td>{
{item.age}}</td>
</tr>
</table>
</div>
3.9组件
3.9.1局部组件
定义组件:
new Vue({
el: '#app',
// 定义局部组件，这里可以定义多个局部组件
components: {
//组件的名字(随便起名)
'mxy': {
//组件的内容
template: '<ul><li>首页</li><li>学员管理</li></ul>'
}
}
})
使用组件:
<div id="app">
<mxy></mxy>
</div>
3.9.2全局组件
上面创建的局部组件只能在当前页面使用。我们可以通过创建全局组件使得任何页面都可以用我们创建的组件
1.在vuedemo文件夹下创建文件夹components,并在该文件夹下创建文件mxy.js,然后在该文件中编写代码
// 定义全局组件
Vue.component('mxymxy', {
template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})
2.创建一个html页面,使用"3.2抽取代码片段"中的方法快捷生成html代码后,在body标签内添加两行代码
3.去页面中查看效果
3.10实例生命周期
实例的生命周期如下:
我们只需要重点知道created方法(在页面渲染之前执行)和mounted方法(在页面渲染之后执行)
3.11路由
1.在vuedemo文件夹下创建文件"12-vue路由.html",然后在该文件中使用"3.2抽取代码片段"中的方法快捷生成html代码
2.路由需要引入vue-router库
①资料中有vue-router的js文件
②将js文件粘贴到vuedemo文件夹中
③引入vue-router的js文件
<script src="vue-router.min.js"></script>
注意:一定要先引入vue.min.js，然后再引入vue-router.min.js
3.编写html
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>
to="/"、to="/student"、to="/teacher"就是跳转的路径- 我们点击"首页"或"会员管理"或"讲师管理"肯定要显示内容对吧,内容显示到哪里呢?显示到router-view标签中
4.编写js(用下面的代码替换页面中的第三个script标签)
<script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Welcome = {
template: '<div>欢迎</div>' }
const Student = {
template: '<div>student list</div>' }
const Teacher = {
template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{
path: '/', redirect: '/welcome' }, //设置默认指向的路径
{
path: '/welcome', component: Welcome },
{
path: '/student', component: Student },
{
path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
</script>
5.代码编写完成后自行去页面中查看效果
4.axios
axios是独立的项目,不是vue里面的一部分,axios经常和vue一起使用,实现ajax操作
1.在工作区下创建文件夹axiosdemo,在该文件夹中创建文件01.html,然后在该文件中使用"3.2抽取代码片段"中的方法快捷生成html代码
2.资料中有vue和axios的js文件
3.将这两个js文件粘贴到第1步创建的axiosdemo文件夹中
4.快捷生成的html代码中已经引入了vue的js文件,所以我们只需要在html中引入axios的js文件
<script src="axios.min.js"></script>
5.使用axios发送ajax请求时有一个固定的结构,我们在01.html中编写如下固定结构:
//固定的结构
new Vue({
el: '#app',
data: {
//在data定义变量和初始值
},
created() {
//该方法在页面渲染之前执行,我们一般在该方法中调用定义的方法
},
methods:{
//编写具体的方法
}
})
6.实际应用中我们肯定要用ajax请求调用后端的接口来获取数据。调接口时有很多知识还没讲,所以这里我们不调接口,而是自己在文件中做一组模拟的数据,然后请求这个文件得到数据。
所以这里我们先在axiosdemo文件夹中创建一个文件data.json并在该文件中编写模拟数据:
{
"success":true,
"code":20000,
"message":"成功",
"data":{
"items":[
{
"name":"lucy","age":20},
{
"name":"mary","age":30},
{
"name":"jack","age":40}
]
}
}
7.使用axios发送ajax请求,请求第6步创建的文件data.json,得到数据,并将得到的数据在页面显示
①将01.html中的new Vue({...})改为如下代码
//固定的结构
new Vue({
el: '#app',
data: {
//在data定义变量和初始值
//定义变量:值空的数组
userList:[]
},
created() {
//该方法在页面渲染之前执行,我们一般在该方法中调用定义的方法
//调用定义的方法(this表示当前vue对象)
this.getUserList()
},
methods:{
//编写具体的方法
//创建方法用来查询所有用户数据
getUserList() {
//使用axios发送ajax请求
//格式：axios.提交方式("请求的接口/文件的路径")
axios.get("data.json")
.then(response => {
//请求成功就执行then方法
//response就是请求成功之后返回的信息
console.log(response)
})
.catch(error => {
//请求失败就执行catch方法
})
}
}
})
- 因为我们想要得到的数据是data.json中的items,且这个数据是一个数组,所以在data中写这行代码:
userList:[] - 请求接口/文件成功后返回的信息赋值给.then(response => …)中的response。注意:不是必须写response,是可以随便写的
- 请求接口/文件失败后返回的错误信息赋值给.then(error => …)中的error。同理,不是必须写error,是可以随便写的
②在页面中看控制台的打印
.then中的response是请求成功之后返回的信息,也就是上图用大方框圈起来的部分,但是我们只想要这些信息中的items,所以需要用response.data.data.items ,这行代码最后取得的数据就是我们想要的数组数据
③那么我们就可以给.then(…)中添加如下代码使得我们可以取到我们想要的数据并且将数据赋值给userList
//将数组数据赋值给userList
this.userList = response.data.data.items
④接下来我们需要将userList数组里面的数据显示出来。在div标签中编写如下代码:
<!-- 把userList数组里面的数据显示 -->
<div v-for = "user in userList">
{
{user.name}} -- {
{user.age}}
</div>
⑤去页面中查看
⑥body标签完整代码:
<body>
<div id="app">
<!-- 把userList数组里面的数据显示 -->
<div v-for = "user in userList">
{
{user.name}} -- {
{user.age}}
</div>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
//固定的结构
new Vue({
el: '#app',
data: {
//在data定义变量和初始值
//定义变量:值空的数组
userList:[]
},
created() {
//该方法在页面渲染之前执行,我们一般在该方法中调用定义的方法
//调用定义的方法(this表示当前vue对象)
this.getUserList()
},
methods:{
//编写具体的方法
//创建方法用来查询所有用户数据
getUserList() {
//使用axios发送ajax请求
//格式：axios.提交方式("请求的接口/文件的路径")
axios.get("data.json")
.then(response => {
//请求成功就执行then方法
//response就是请求成功之后返回的信息
console.log(response)
//将数组数据赋值给userList
this.userList = response.data.data.items
})
.catch(error => {
//请求失败就执行catch方法
})
}
}
})
</script>
</body>
5.element-ui
官网:https://element.eleme.cn/#/zh-CN
6.node.js
6.1node.js简介
1.什么是node.js:
简单来说node.js就是运行在服务端的JavaScript
2.node.js有什么用:
①我们学java时想要运行程序需要jdk环境。node.js对JavaScript的作用,就相当于jdk对java的作用:node.js是JavaScript的运行环境,用于执行JavaScript代码。我们前面都是将js文件引入到html页面中(如:<script src="vue.min.js"></script>),然后通过浏览器访问这个html页面才可以使得js文件执行,有了node.js后,不需要浏览器,直接使用node.js就可以运行JavaScript代码
②模拟服务器效果,比如tomcat
6.2下载安装node.js
1.在Chrome地址栏输入https://nodejs.org/en/进入官网,然后点击"Other Downloads"
2.点击"All download options"
3.点击"…/"进入到上一级目录
4.找到和视频中版本一样的10.14.2点击进入
5.我的电脑是64位的,所以点击"node-v10.16.3-x64.msi"进行下载(我是复制下载链接用迅雷下载的)
6.下载完成后进行傻瓜式安装即可(注意:最好默认安装到c盘,不要去修改它的安装地址)
7.检查是否安装成功:
打开命令行窗口输入node -v命令,如果能看到版本号就说明安装成功
6.3使用node.js执行JavaScript代码
1.在axiosdemo文件夹下创建文件01.js并编写代码
console.log('hello nodejs')
2.找到上一步创建的01.js所在的文件夹,在地址栏输入cmd并按回车
3.在打开的命令行窗口输入node 01.js
6.4模拟服务器(了解)
1.在在axiosdemo文件夹下创建文件02.js并编写代码
const http = require('http');
http.createServer(function (request, response) {
// 发送 HTTP 头部
// HTTP 状态值: 200 : OK
// 内容类型: text/plain
response.writeHead(200, {
'Content-Type': 'text/plain'});
// 发送响应数据 "Hello World"
response.end('Hello Server');
}).listen(8888);
// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');
2.找到上一步创建的02.js所在的文件夹,在地址栏输入cmd并按回车进入该路径下的命令行窗口,在命令行窗口中输入node 02.js运行服务器程序
3.在地址栏输入http://localhost:8888/可以看到输出的html页面
4.在命令行窗口按ctrl+c停止服务
6.5在vscode打开cmd窗口,执行js代码
我们js代码是在vscode写的,但是执行js代码却是去命令行窗口执行,这样很不方便,解决办法是:直接在vscode中打开命令行窗口
1.右键axiosdemo选择"在终端中打开"
2.此时会跳出一个弹框,我们点击"自定义"
3.cmd和powershell都可以,我这里用的是cmd
4.在cmd窗口输入node 01.js可能提示'node'不是内部或外部指令,也不是可运行的程序或批处理文件。,如果提示这段话那就重启vscode试试,如果问题还没有解决那就以管理身份运行vscode(我重启vscode后问题就解决了)
5.将vscode重启后就可以正常执行01.js的js代码了
7.npm包管理工具
7.1npm简介
1.什么是npm:
NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，管理前端js依赖，联网下载js依赖。相当于后端的Maven 。
7.2安装npm
在安装node.js时会自动把npm也安装上。node.js默认安装的npm包和工具的位置:node.js目录\node_modules
在任意一个命令行窗口使用命令npm -v查看npm是否安装成功
7.3npm初始化项目
1.在工作区中创建一个npmdemo文件夹,然后右键该文件夹选择"在终端中打开"
2.使用命令npm init初始化该文件夹为一个前端项目
3.此时卡在这里了是吧,这是在等我们设置包名,如果我们我们什么也不输入就按回车那么包名就是括号中默认的npmdemo
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#package name: 项目包名/名称
#version: 项目版本号
#description: 项目描述
#entry point: 程序入口(后端入口一般是main方法,前端入口一般是js文件)
#keywords: {Array}关键词，便于用户搜索到我们的项目
我们这里都用默认的,什么也不用输入,一路回车就可以了
4.一路回车直到让我们确认信息时输入yes
5.至此,前端项目初始化完成,可以看到在npmdemo文件夹下有一个package.json文件,这个是包的配置文件,相当于maven的pom.xml,我们之后也可以根据需要对package.json进行修改
6.如果以后初始化的某个前端项目的package name、version、description等等都用默认的,上面的2、3、4这三步太繁琐了,可以直接用一个命令代替这三步:npm init -y
7.4npm下载js依赖
7.4.1配置npm使用淘宝镜像
如果不配置npm使用淘宝镜像就会从外网下载js依赖,很慢甚至会下载失败
在vscode的命令行窗口执行如下命令:
npm config set registry https://registry.npm.taobao.org
使用如下命令查看npm配置信息,看看我们是否配置淘宝镜像成功:
npm config list
7.4.2命令npm install 依赖名称@版本号
下载依赖的命令是npm install 依赖名称@版本号,如果不写@版本号就会下载最新版本的,为了避免以后有坑,我们用如下命令下载和老师版本一样(3.4.1版本)的jquery依赖。并且我们会发现下载jquery依赖后多了两个东西:文件夹node_modules和文件package-lock.json
npm install [email protected]
-
下载的依赖就在node_modules文件夹中
-
package-lock.json文件的作用:锁定当前下载的依赖的版本,只能下这个版本的,不能下别的版本的
7.4.3命令npm install
如果别人给我发的项目中没有存放依赖的node_modules文件夹(多数情况下都没有node_modules文件夹,因为这个文件夹通常会很大,小文件很多,部分依赖还不能跨平台 ),只有package.json和package-lock.json,那么我们通过如下命令就可以下载package-lock.json中记录的指定版本的依赖
npm install
7.4.4package.json和package-lock.json的区别
区别一:
- package.json中依赖的版本号都有一个^,这表示向后(新)兼容依赖,因为jquery最新版本超过3.4.1并且最新版本的大版本和3.4.1版本的大版本(什么是大版本:3.4.1的大版本是3)相同,所以使用npm install命令下载jquery依赖时会下载最新版本的jquery依赖而不是下载package.json中记录的3.4.1版本的
- 但是执行npm install一定会下载package-lock.json中记录的指定版本的依赖,没有向后(新)兼容依赖这种说法
拿我们这个项目来举例并证明:
package.json中记录有jquery依赖:"jquery": "^3.4.1"我们这样做:①将项目中的node_modules文件夹和package-lock.json删掉
②在终端执行npm install命令下载依赖,执行完毕后就会给我们生成node_modules文件夹和package-lock.json
③发现我们刚刚下载的jquery依赖是最新版的3.6.0版本的而不是package.json中记录的3.4.1版本的
④我刚刚把"7.4.2命令npm install 依赖名称@版本号"中执行npm install [email protected]命令后生成的package-lock.json文件中的代码复制下来了,如下:
{
"name": "npmdemo",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
"jquery": {
"version": "3.4.1",
"resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.4.1.tgz",
"integrity": "sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw=="
}
}
}
⑤我们先将第③步生成的package-lock.json文件中的代码全部删掉,然后将第④步列出的代码复制粘贴到package-lock.json文件中
⑥将node_modules文件夹删掉
⑦在终端执行npm install命令下载依赖
⑧执行完命令后会生成node_modules文件夹,我们去查看现在下载的jquery版本,发现下载的就是package-lock.json中指定的3.4.1版本而不再是下载最新版本
区别二:
比如说我项目下载了1.2版本的A依赖,A依赖又依赖于2.2版本的B依赖,那么package.json中只会记录A依赖及版本(但下载依赖时可能下载的是最新版的,详细解释看上面的"区别一"),而不会记录B依赖;但是package-lock.json中既记录A依赖及版本,又记录B依赖及版本
7.5其它命令(暂时混眼熟即可)
#当前工作区安装包、工具
npm install --save-dev webpack
#下面这个是npm install --save-dev webpack的简写
npm install -D webpack
#全局安装包、工具
npm install -global webpack
#下面这个是npm install -global webpack的简写
npm install -g webpack
#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名
- 当前工作区安装的包、工具只能在当前工作区使用,在别的工作区是没办法用的
- 全局安装的包、工具:只要在node.js环境中,所有的工作区都可以使用
- 全局安装的包、工具的位置:用户目录\AppData\Roaming\npm\node_modules
8.babel转码器
8.1简介
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码
为什么我们需要将ES6代码转为ES5代码呢?因为我们现在写的代码都是es6代码,但是es6代码浏览器兼容性很差,低版浏览器有很多es6代码都是不认识的
8.2项目初始化
1.在工作区下创建一个babeldemo文件夹
2.在终端中使用命令npm init -y初始化项目
8.3安装命令行转码工具
Babel提供babel-cli工具,用于命令行转码,在终端用如下命令安装babel-cli工具(为了和老师的版本一样,我加了@6.26.0)
npm install --global [email protected]
安装完成后使用如下命令检查安装是否成功
babel --version
8.4编写es6代码
1.在babeldemo文件夹下创建文件夹es6,并在该文件夹下创建文件01.js,然后在该文件中编写es6的代码
// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)
怎么看是不是es6代码?
有一个最好分辨的方法:只要有箭头函数(参数 => 函数体)就一定是es6代码,因为箭头函数es5是没有的
8.5配置.babelrc
在项目的根目录下(也就是babeldemo文件夹下)创建配置文件.babelrc(只能是这个名字!!),这个文件是用来设置转码规则和插件,基本格式如下:
{
"presets": [],
"plugins": []
}
其中presets字段用来设定转码规则,我们将es2015规则加入.babelrc
{
"presets": ["es2015"],
"plugins": []
}
8.6安装转码器
使用如下命令在项目中安装es2015的转码器(@6.24.1是为了安装和老师一样的版本)
npm install --save-dev [email protected]
8.7进行转码
使用命令转码有两种方式:
- 根据文件转码
- 根据文件夹转码
8.7.1根据文件转码
1.先在babeldemo文件夹下创建两个文件夹:dist1和dist2
2.使用如下命令来完成"根据文件转码"
babel es6/01.js --out-file dist1/000001.js
#下面这个命令是上面那个命令的简写
babel es6/01.js -o dist1/000001.js
8.7.2根据文件夹转码
使用如下命令来完成"根据文件夹转码"
babel es6 --out-dir dist2
#下面这个命令是上面那个命令的简写
babel es6 -d dist2
9.模块化
9.1简介
后端中的模块化:我们开发后端接口(mapper、service、controller)时,在service注入mapper,在controller注入service,这样的话,通过注入这种方式,我们能够实现service调用mapper,controller调用service,也就是实现了不同类之间的调用。后端中类于类之间的相互调用就称为模块化操作
前端中的模块化:js与js之间的相互调用称为前端模块化操作,就比如说:在01.js中想调用000001.js中的方法,这就叫做模块化
9.2es5实现模块化操作
1.在工作区下创建一个moduledemo文件夹,然后在终端中使用命令npm init -y初始化项目
2.在moduledemo文件夹下创建文件夹es5module,并在该文件夹下创建文件01.js和02.js
3.在01.js中定义js方法供02.js调用
//1.在01.js中定义js方法供02.js调用
//定义成员：
const sum = function(a,b){
return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
return parseInt(a) - parseInt(b)
}
//2.设置哪些方法可以被其他js调用
module.exports = {
sum,
subtract
}
module.exports = {...}的作用:01.js这些方法就相当于java中的私有方法,默认情况下不能在02.js中调用01.js中的方法,只有加上了module.exports = {...}才可以被别的js调用
4.在02.js中调用刚刚在01.js定义的方法
//在02.js中调用刚刚在01.js定义的方法
//1.引入01.js文件
const m = require('./01.js')
//2.调用
console.log(m.sum(1, 2))
console.log(m.subtract(10, 3))
./表示当前文件所在的目录../表示当前文件所在的目录的上一级目录- 我们在学习后端时可能有时就会省略
.,但这个一定不能省略,否则会报错 - require的参数单引号或双引号都可以
5.在终端中使用命令node 02.js查看结果
9.3es6实现模块化操作
9.3.1第一种写法
1.因为:如果使用es6写法实现模块化操作,在node.js环境中是不能直接运行的,需要使用babel把es6代码转换为es5代码,才可以在node.js中运行,babeldemo文件夹已经配置好了babel转码器,所以呢,为了方便,我们接下来的例子就在babeldemo文件夹下实行。
在babeldemo文件夹下创建文件夹modulees61,并在该文件夹下创建文件01.js和02.js
2.在01.js中定义方法,并且设置哪些方法可以被其它js调用
//在01.js中定义方法,并且设置哪些方法可以被其它js调用
export function getList() {
console.log('getList......')
}
export function save() {
console.log('save......')
}
3.在02.js中调用刚刚在01.js定义的方法
import {
getList, save } from './01.js'
//调用方法
getList()
save()
- from后面单引号或双引号都可以
4.将es6模块化代码转换为es5模块化代码
先在babeldemo文件夹下创建一个文件夹modulees611,然后在终端执行如下命令来根据文件夹进行转码
babel modulees61 -d modulees611
5.在终端中使用命令node 02.js查看结果
9.3.2第二种写法
1.在babeldemo文件夹下创建文件夹modulees62,并在该文件夹下创建文件01.js和02.js
2.在01.js中定义方法,并且设置哪些方法可以被其它js调用
export default {
getList() {
console.log('getList......')
},
save() {
console.log('save......')
}
}
3.在02.js中调用刚刚在01.js定义的方法
import m from './01.js'
//调用方法
m.getList()
m.save()
- 可以将这里的m理解为java中的对象
./01.js中的.js可以省略
4.将es6模块化代码转换为es5模块化代码
先在babeldemo文件夹下创建一个文件夹modulees622,然后在终端执行如下命令来根据文件夹进行转码
babel modulees62 -d modulees622
5.在终端中使用命令node 02.js查看结果
10.webpack
10.1简介
Webpack是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
webpack的好处:Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，这就就减少了页面的请求次数
10.2项目初始化
1.在工作区下创建一个webpackdemo文件夹
2.在终端中使用命令npm init -y初始化项目
10.3安装webpack工具(插件)
使用如下命令安装webpack和webpack-cli(webpack的4.41.4是老师的版本,webpack-cli我实在不知道老师用的什么版本,秉承着不用最新的原则我用了3.3.2版本的)
npm install -g [email protected] [email protected]
安装完成后使用如下命令检查是否安装成功
webpack -v
webpack-cli -v
10.4创建js文件用于打包操作
在webpackdemo文件夹下创建文件夹src,在src下创建js文件common.js、utils.js、main.js,这三个js文件中我们打算:在common.js和utils.js中定义方法,然后在main.js中引入common.js和utils.js并调用它们的方法。接下来我们分别在这三个js文件中编写代码
common.js:
//方法名字是info,这个方法可以被别的js调用
exports.info = function (str) {
document.write(str);//在浏览器中输出
}
utils.js:
//方法名字是add,这个方法可以被别的js调用
exports.add = function (a, b) {
return a + b;
}
main.js:
//在main.js中引入common.js和utils.js并调用它们的方法
const common = require('./common.js');
const utils = require('./utils.js');
common.info('Hello common!' + utils.add(1, 2));
10.5js打包
1.在webpack文件夹下创建文件夹dist,用于存放打包后的文件
2.在webpack文件夹下创建配置文件webpack.config.js并编写配置
- 配置文件的名字是固定的
- 配置文件中的内容是固定结构
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js' //输出的文件的名字
}
}
entry是程序入口,因为main.js中有另外两个文件,所以main.js就是程序入口,所以这里写./src/main.js
3.使用命令执行打包操作
webpack #有黄色警告
webpack --mode=development #没有警告
webpack --mode=production #没有警告
以上三个命令都可以执行打包操作,如果用第一种的webpack命令会有黄色警告,警告的大致意思就是建议你选择development环境或production环境,也就是建议你用
命令webpack --mode=development或webpack --mode=production,这里我在终端使用webpack --mode=development命令执行打包操作。执行完打包操作后会发现dist文件夹下多了一个bundle.js文件,这就是打包后的文件
4.测试
因为我们在common.js中写了这样一行代码:document.write(str); ,这行代码在node.js中是无法执行的,只有在浏览器中才可以看到效果,所以测试步思路是:在webpack文件夹下创建一个01.html文件,并在该文件中引入第3步打包得到的js文件
<script src="dist/bundle.js"></script>
在空白处右键选择"Open with Live Server"去浏览器中看效果
10.6css打包
1.在src文件夹下创建style.css文件,并编写样式内容
body {
background-color: red;
}
2.在main.js中添加如下一行代码,用于引入上一步创建的css文件
//引入css文件
require('./style.css')
注意:我们以前说过:因为默认是引入js文件,所以可以省略.js,比如const common = require('./common'); ,但是引入css文件时一定不能省略.css
3.Webpack本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。Loader可以理解为是模块和资源的转换器。
我们需要安装相关Loader插件：css-loader是将css装载到javascript；style-loader是让javascript认识css
在终端中使用如下命令安装css加载工具(@1.1.3和@3.4.2是为了和老师安装一样的版本)
npm install --save-dev [email protected] [email protected]
4.在webpack.config.js配置文件中添加配置
webpack.config.js配置文件中的完整内容:
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js' //输出的文件的名字
},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}
截图如下(相比于"10.5js打包"的第2步编写的webpack.config.js配置,增加了一些代码,增加的代码我用方框圈起来了)
5."10.5js打包"的第3步在dist文件夹下生成了一个bundle.js文件,先将这个文件删掉,然后执行打包操作。和"10.5js打包"的第3步一样,执行打包操作时有三种命令供你选择,我这里使用命令webpack --mode=development执行打包。执行完打包操作后会发现dist文件夹下多了一个bundle.js文件,这就是打包后的文件
6.在01.html文件的空白处右键选择"Open with Live Server"去浏览器中看效果
