springcloud微服务_02_前端技术准备

最新推荐文章于 2024-03-27 22:43:15 发布

原创最新推荐文章于 2024-03-27 22:43:15 发布 · 756 阅读

0 ·

CC 4.0 BY-SA版权

springcloud微服务专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨前端开发核心框架，如Vue.js、React.js和AngularJS，并详解Vue.js的实际应用，涵盖Node.js环境配置、Vue项目构建、ECMAScript 6新特性、Webpack打包策略等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

接着博客springcloud微服务_01接着进行操作

一、前端框架的简要介绍

1、主流的前端框架

Vue.js:vue.js以轻量易用著称
React.js:vue.js和React.js发展速度最快
AngularJS:AngularJS还是老大。

2、前端的MVVM模式

M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在这里插入图片描述

二、前端的相关技术。

NodeJs&Npm

1、安装node及NPM工具.

（1）安装nodejs

双击傻瓜式安装

（2）配置环境变量

在cmd控制台操作

检查安装：node –v
安装完成Node应该自带了NPM，在控制台输入npm -v查看
版本升级：npm install npm@latest –g

2、入门操作

（1）先创建个前端项目。vue-parent

创建个空的工程

过程图

（2）然后进行环境初始化。npm初始化

不用在cmd命令窗口输入命令，而是调出idea的命令窗口中输入

1）、进入当前项目目录：cd vue_hello

在这里插入图片描述

2）、输入初始化命令：npm init –y

在这里插入图片描述

3）、解决上面错误。

需要配置一下cmd命令路径

在这里插入图片描述

4）、再次输入初始化命令：npm init –y 。初始化后得到以下结果，package.json

在这里插入图片描述

（3）项目创建好了，环境初始化好了（npm初始化）。再进行接下来的操作

1）、安装vue模块。

全局安装(所有项目都能用)
npm install -g vue
npm -g root 安装路径
局部安装(当前项目使用)
npm install/i vue

在这次测试中就使用局部安装。idea的命令窗口输入：npm install vue
会生成以下文件，模块安装也就完成了
在这里插入图片描述

2）、查看

查看某个模块：npm list vue

列表模块：npm ls

3）、卸载模块

npm uninstall vue

4）、更新模块

npm update vue

5）、运行工程

npm run dev

6）、编译工程

npm run build

（4）在上面完成的基础上进行vue的环境测试

1）、先创建个HTML文件

2）、vue代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue hello</title>
    <script type="text/javascript" src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{name}}====={{sex}}
</div>
<script type="text/javascript">
    var v =new Vue({
        el:"#app",
        data:{
            "name":"xxx",
            "sex":"小男孩"
        }
    });
</script>
</body>
</html>

3）、对代码的测试结果

在这里插入图片描述

3、ECMAScirpt 6重要语法

ECMAScript是浏览器脚本语言的规范，可以狭义理解是javascript的规范

（1）let&const

let相较于var，他是块级的。const:相当于java的常量

<script type="text/javascript">
    /*01:let&const
    * let和var：
    * let：是块级别的，var是全局的
    * */
    for(var i=0;i<10;i++){
        console.debug(i)
    }
    console.debug("var====="+i);;//成功运行
    for(let j=0;j<10;j++){
        console.debug(j);
    }
    console.debug("let====="+j);//运行会报错，因为 j在for里使用let声明的，不能在外边使用
    const a=0;
    a=3;//报错了，常量不能修改

</script>

（2）解构表达式

1）、数组解构

在这里插入图片描述

2）、对象结构

在这里插入图片描述

（3）箭头函数

格式
var 函数名 = (参数列表) => {函数内容} 等价于一下代码
var 函数名 = function(参数列表){
函数内容
return 返回值
}
如果参数只有一个可以省略(),函数内容只有一句代码可以省略{}

1）、注意1：对象配合箭头

/*
 * 箭头函数：简化我们对函数的声明
  *  (参数1, 参数2, …, 参数N) => { 函数声明 }
  *  参数只有一个的时候，参数的()可以省略；函数申明只有一句的时候，{}可以省略；
  *
  *  没有参数的时候：()必须有
  * */

let p ={
    "name":"zhangsan",
    //以前写法
    "swim":function(where,times){
        console.debug(this.name+"在"+where+"游泳："+times+"小时")
    },
    //箭头函数
    "swim2":(where,times)=>{ console.debug(this.name+"在"+where+"游泳："+times+"小时")},//不能获取到this
    //简写(可以获取到this对象)：把 函数和参数直接的冒号去掉，把箭头去掉： funName:(参数)=>{} 简写为： funName(){}
    "swim3"(where,times){
        // alert(p.name);
        console.debug(this.name+"在"+where+"游泳："+times+"小时")},//不能获取到this
};
p.swim("四川",3);//zhangsan在四川游泳：3小时
console.debug("================");
p.swim3("四川",3);//zhangsan在四川游泳：3小时

2）、注意2：异构表达式+箭头表达式

/*
* 异构表达式+箭头表达式
* */
//申明一个对象：
let student={"name":"wbtestst","age":9};
//创建一个yyy的箭头函数：参数： ({name})：会把传入的对象进行解构
let yyy = ({name})=>{console.log(name)};
/**
 * function yyy({name}){console.debug(name)}
 */
yyy(student);//把传入的student对象的name解构赋值给yyy函数的name值：打印student的name值

（4）Promise对象

Promise是异步编程的一种解决方案，比传统的解决方案（回调函数+事件）更加合理和强大。
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

let pp=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        //生成0~1的随机数
        let num =Math.random();
        if(num<0.5){
            console.debug("success");
            resolve("我是一种成功的"+num);
        }else {
            reject("我是一种失败的的"+num);
        }
    },2000);
});
//使用pp对象:当成功后，会运行resolve方法，把里面的参数传递给then里的方法的msg，我们得到这个msg就可以做业务操作了
pp.then( (msg) =>{
    console.debug("======")
    console.debug(msg);
}).catch( (error)=> {
    //使用pp对象:当失败后，会运行reject方法，把里面的参数传递给catch里的方法的msg，我们得到这个msg就可以做业务操作了
    console.debug("====66666==")
    console.debug(error);
});