分布式电商项目十三：项目需要用到的前端技术栈

最新推荐文章于 2024-07-23 17:22:52 发布

猛肝自然强

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量1.6k

点赞数 1

分类专栏：分布式电商项目mall 文章标签： java js ajax

本文链接：https://blog.csdn.net/LastYHM/article/details/106452158

版权

项目需要用到的前端技术栈

因为我们要完成一个完整的项目，不可避免的需要用到前端技术，本章先介绍一下次项目中会使用到的前端技术，由于前端技术不是我们的核心内容，技术的使用会尽可能的简单一些。

前端技术栈和后端技术栈的类比

首先是使用的语言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}