springcloud微服务_02_前端技术准备

前言

接着博客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代码

    
    
    



    {{name}}====={{sex}}

3）、对代码的测试结果

3、ECMAScirpt 6重要语法

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

（1）let&const

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

（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);
});

（5）模块化

== 模块化就是把代码进行拆分，方便重复利用。==类似java中的导包：要使用一个包，必须先导包。
而JS中没有包的概念，换来的是模块。
模块功能主要由两个命令构成：

• export命令用于规定模块的对外接口，
• import命令用于导入其他模块提供的功能。

4、vuejs复习与强化

vue入门博客
vue加强博客

5、webpack打包

Webpack 是一个前端资源加载/打包工具。

可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

（1）webpack（打包）的安装。直接安装下面的vue的脚手架即可，它包含得有打包等等功能。

• 本地安装：
  npm install webpack --save-dev
  npm install webpack-cli --save-dev
• 全局安装：
  npm install -g webpack
  npm install -g webpack-cli

6、 vue-cli:vue项目的脚手架

（1）新建一个模块测试。vue_cli_test

（2）在idea的命令窗口输入进入模块的命令：cd vue_cli_test

（3）然后安装脚手架。

在idea命令窗口输入安装命令：npm install -g vue-cli

在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。vue官方提供了一个快速搭建vue项目的脚手架：vue-cli，它能快速的构建一个web工程模板。

（4）然后进行vue-cli快速创建webpack项目(要进入当前项目路径下)的操作

在idea命令窗口输入命令：vue init webpack

• 注意运行命令时点Y还是N，看下面流程图
  
• 然后输入命令：npm run dev
  
• 然后在浏览器地址栏输入地址;localhost:8080
  

（5）在安装vue.js插件

• 安装完上面的插件后app.vue就有颜色显示了
  

（6）项目的结构

• 入口
  
  
• 单文件组件
  

（7）运行

npm run dev
npm run build 打包可以在服务器运行

• 打包后得到
  
• 然后将这两个文件放在tomcat的webapps的root里面，启动tomcat的bin中的startup.bat，再在浏览器地址栏输入localhost：8080