分布式电商项目十三：项目需要用到的前端技术栈 |
您所在的位置：网站首页 › 前端所需要的技术 › 分布式电商项目十三：项目需要用到的前端技术栈 |
分布式电商项目十三：项目需要用到的前端技术栈
|
项目需要用到的前端技术栈
因为我们要完成一个完整的项目，不可避免的需要用到前端技术，本章先介绍一下次项目中会使用到的前端技术，由于前端技术不是我们的核心内容，技术的使用会尽可能的简单一些。 前端技术栈和后端技术栈的类比首先是使用的语言JavaScript和es，JavaScript类似于Java是用于前端技术的语言，es是和JDK一样管理语言版本的。这里我们使用的是es6版本。 之后是使用的框架，前端我们使用的VUE类比于我们后端会使用的框架springboot。 开发工具VScode前端我们使用VScode进行开发，在进行前端代码提示的时候会更加专业一些。类比于我们开发后端代码时使用的IDEA。 项目构建使用的webpack自动化项目构建工具，后端我们使用的是maven进行项目环境的搭建。 依赖管理使用Node.js中的npm这个工具我们之前在使用人人开源项目的时候已经有使用过一次了。类比与开发后端代码时使用的maven进行版本管理。 ES6ES6全称ECMAscript6.0，是2015年发布的JavaScript新一代标准，是浏览器脚本语言的规范。我们可以到VScode中感受一下新特性。 我们在VScode中新建一个文件夹ES6作为我们的前端项目测试： 通过取消注解，之后点击 二、通过下面代码了解一下结构表达式： Document //数组解构 // 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 = ` hello world `; console.log(ss); // // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。 function fun() { return "这是一个函数" } let info = `我是${abc}，今年${age + 10}了, 我想说： ${fun()}`; console.log(info);三、函数优化 javascript对于函数的优化有些类似python。 Document //在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);四、对象优化 javascript对象语法的简介 Document 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)五、JavaScript的map和reduce map和reduce是两个新增的数组方法 Document //数组中新增了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)六、请求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 }之后写调用的文件： Document // 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) });七、模块化的使用 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方法，并进行使用。 |
创建一个let.html文件，之后按快捷键shief+1的快捷键，就能生成一段html代码： 
之后我们进行一些es6新特性的测试，代码和内容如下： 一、声明变量
然后按F12可以在控制台看到测试的内容。 
了解完let和var的变量区别，我们之后在使用声明变量时主要使用let，声明常量是使用const。【本文地址】
今日新闻 |
推荐新闻 |