项目需要用到的前端技术栈
因为我们要完成一个完整的项目，不可避免的需要用到前端技术，本章先介绍一下次项目中会使用到的前端技术，由于前端技术不是我们的核心内容，技术的使用会尽可能的简单一些。
前端技术栈和后端技术栈的类比
首先是使用的语言JavaScript和es，JavaScript类似于Java是用于前端技术的语言，es是和JDK一样管理语言版本的。这里我们使用的是es6版本。
之后是使用的框架，前端我们使用的VUE类比于我们后端会使用的框架springboot。
开发工具VScode前端我们使用VScode进行开发，在进行前端代码提示的时候会更加专业一些。类比于我们开发后端代码时使用的IDEA。
项目构建使用的webpack自动化项目构建工具，后端我们使用的是maven进行项目环境的搭建。
依赖管理使用Node.js中的npm这个工具我们之前在使用人人开源项目的时候已经有使用过一次了。类比与开发后端代码时使用的maven进行版本管理。
ES6
ES6全称ECMAscript6.0，是2015年发布的JavaScript新一代标准，是浏览器脚本语言的规范。我们可以到VScode中感受一下新特性。
我们在VScode中新建一个文件夹ES6作为我们的前端项目测试：
创建一个let.html文件，之后按快捷键shief+1的快捷键，就能生成一段html代码：
之后我们进行一些es6新特性的测试，代码和内容如下：
一、声明变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// var 声明的变量往往会越域
// let 声明的变量有严格局部作用域
// {
// var a = 1;
// let b = 2;
// }
// console.log(a); // 1
// 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
// var 会变量提升
// let 不存在变量提升
// console.log(x); // undefined
// var x = 10;
// console.log(y); //ReferenceError: y is not defined
// let y = 20;
// let
// 1. 声明之后不允许改变
// 2. 一但声明必须初始化，否则会报错
const a = 1;
a = 3; //Uncaught TypeError: Assignment to constant variable.
</script>
</body>
</html>
通过取消注解，之后点击
然后按F12可以在控制台看到测试的内容。
了解完let和var的变量区别，我们之后在使用声明变量时主要使用let，声明常量是使用const。
二、通过下面代码了解一下结构表达式：
<!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>
<script>
//数组解构
// let arr = [1,2,3];
// 之前的语法
// // let a = arr[0];
// // let b = arr[1];
// // let c = arr[2];
//数组解构语法
// let [a,b,c] = arr;
//打印
// console.log(a,b,c)
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
// 之前的语法
// const name = person.name;
// const age = person.age;
// const language = person.language;
//对象解构,将name的内容赋予abc
const { name: abc, age, language } = person;
console.log(abc, age, language)
//4、字符串扩展
let str = "hello.vue";
console.log(str.startsWith("hello"));//true
console.log(str.endsWith(".vue"));//true
console.log(str.includes("e"));//true
console.log(str.includes("hello"));//true
//字符串模板，使用`着重号标记即可生成长字符串
let ss = `<div>
<span>hello world<span>
</div>`;
console.log(ss);
// // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
function fun() {
return "这是一个函数"
}
let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`;
console.log(info);
</script>
</body>
</html>
三、函数优化
javascript对于函数的优化有些类似python。
<!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>
<script>
//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
function add(a, b) {
// 判断b是否为空，为空就给默认值1
b = b || 1;
return a + b;
}
// 传一个参数
console.log(add(10));
//现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
function add2(a, b = 1) {
return a + b;
}
console.log(add2(20));
//2）、不定参数
function fun(...values) {
console.log(values.length)
}
fun(1, 2) //2
fun(1, 2, 3, 4) //4
//3）、箭头函数
//以前声明一个方法
// var print = function (obj) {
// console.log(obj);
// }
var print = obj => console.log(obj);
print("hello");
var sum = function (a, b) {
c = a + b;
return a + c;
}
var sum2 = (a, b) => a + b;
console.log(sum2(11, 12));
var sum3 = (a, b) => {
c = a + b;
return a + c;
}
console.log(sum3(10, 20))
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
function hello(person) {
console.log("hello," + person.name)
}
//箭头函数+解构
var hello2 = ({name}) => console.log("hello," +name);
hello2(person);
</script>
</body>
</html>
四、对象优化
javascript对象语法的简介
<!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>
<script>
const person = {
name: "jack",
age: 21,
language: ['java', 'js', 'css']
}
console.log(Object.keys(person));//["name", "age", "language"]
console.log(Object.values(person));//["jack", 21, Array(3)]
console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]
const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
//{a:1,b:2,c:3}
Object.assign(target, source1, source2);
console.log(target);//["name", "age", "language"]
//2）、声明对象简写
const age = 23
const name = "张三"
const person1 = { age: age, name: name }
// 用于变量名和定义的名称相同时，可以简写
const person2 = { age, name }
console.log(person2);
//3）、对象的函数属性简写
let person3 = {
name: "jack",
// 以前：
eat: function (food) {
console.log(this.name + "在吃" + food);
},
//箭头函数this不能使用，对象.属性
eat2: food => console.log(person3.name + "在吃" + food),
eat3(food) {
console.log(this.name + "在吃" + food);
}
}
person3.eat("香蕉");
person3.eat2("苹果")
person3.eat3("橘子");
//4）、对象拓展运算符
// 1、拷贝对象（深拷贝）
let p1 = { name: "Amy", age: 15 }
let someone = { ...p1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age1 = { age: 15 }
let name1 = { name: "Amy" }
// 之前有name的值，同样会被覆盖
let p2 = {name:"zhangsan"}
p2 = { ...age1, ...name1 }
console.log(p2)
</script>
</body>
</html>
五、JavaScript的map和reduce
map和reduce是两个新增的数组方法
<!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>
<script>
//数组中新增了map和reduce方法。
//map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
let arr = ['1', '20', '-5', '3'];
// arr = arr.map((item)=>{
// return item*2
// });
arr = arr.map(item=> item*2);
console.log(arr);
//reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
//[2, 40, -10, 6]
//arr.reduce(callback,[initialValue])
/**
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）*/
let result = arr.reduce((a,b)=>{
console.log("上一次处理后："+a);
console.log("当前正在处理："+b);
return a + b;
},100);//100是设置的初始值，不设置默认从第一个数开始
console.log(result)
</script>
</body>
</html>
六、请求json文件中的信息
首先创建json文件，在mock文件夹下（自己创建一个就行了）
user.json文件：
{
"id": 1,
"name": "zhangsan",
"password": "123456"
}
user_corse_1.json文件：
{
"id": 10,
"name": "chinese"
}
corse_score_10.json文件：
{
"id": 100,
"score": 90
}
之后写调用的文件：
<!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>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
// 1、查出当前用户信息
// 2、按照当前用户的id查出他的课程
// 3、按照当前课程id查出分数
// 嵌套操作
$.ajax({
url: "mock/user.json",
success(data) {
console.log("查询用户：", data);
$.ajax({
url: `mock/user_corse_${data.id}.json`,
success(data) {
console.log("查询到课程：", data);
$.ajax({
url: `mock/corse_score_${data.id}.json`,
success(data) {
console.log("查询到分数：", data);
},
error(error) {
console.log("出现异常了：" + error);
}
});
},
error(error) {
console.log("出现异常了：" + error);
}
});
},
error(error) {
console.log("出现异常了：" + error);
}
});
//1、Promise可以封装异步操作
// let p = new Promise((resolve, reject) => {
// //1、异步操作
// $.ajax({
// url: "mock/user.json",
// success: function (data) {
// console.log("查询用户成功:", data)
// resolve(data);
// },
// error: function (err) {
// reject(err);
// }
// });
// });
// 继承上一步的操作
// p.then((obj) => {
// return new Promise((resolve, reject) => {
// $.ajax({
// url: `mock/user_corse_${obj.id}.json`,
// success: function (data) {
// console.log("查询用户课程成功:", data)
// resolve(data);
// },
// error: function (err) {
// reject(err)
// }
// });
// })
// 继续进行调用
// }).then((data) => {
// console.log("上一步的结果", data)
// $.ajax({
// url: `mock/corse_score_${data.id}.json`,
// success: function (data) {
// console.log("查询课程得分成功:", data)
// },
// error: function (err) {
// }
// });
// })
// 封装方法
function get(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err)
}
})
});
}
// 调用封装的方法进行查询
get("mock/user.json")
.then((data) => {
console.log("用户查询成功~~~:", data)
return get(`mock/user_corse_${data.id}.json`);
})
.then((data) => {
console.log("课程查询成功~~~:", data)
return get(`mock/corse_score_${data.id}.json`);
})
.then((data)=>{
console.log("课程成绩查询成功~~~:", data)
})
.catch((err)=>{
console.log("出现异常",err)
});
</script>
</body>
</html>
七、模块化的使用
JavaScript使用import和export来进行模块的导入导出操作，例如：
user.js文件：
var name = "jack"
var age = 21
function add(a,b){
return a + b;
}
export {name,age,add}
main.js文件：
import {name,add} from "./user.js"
console.log(name);
add(1,3);
这两端代码的含义就是main.js文件导入了user.js文件的name和age变量以及add方法，并进行使用。
版权声明：本文为LastYHM原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。