企业云端开发实践

1.内容

javaEE企业级框架：SpringBoot+MyBatisPlus

Web前端核心框架;Vue+ElementUI

公共云部署：前端项目集成打包与部署

2.学习目标

掌握javaEE企业级开发框架的使用，能够利用SpringBoot开发Web应用。

掌握Web前端开发框架Vue的使用，能够完成前后端分离开发。

掌握云端环境的配置与使用，能够完成前后端程序的打包部署。

3.web技术基础

目前市场上的软件主要可分为两种：

CS即Client/Server(客户端/服务器)结构，(如电脑端下载的桌面应用 qq 微信等) BS即Browser/Server(浏览器/服务器)结构，(如通过浏览器在线访问腾讯视频 访问qq微信)

架构对比

cs架构的主要特点是交互性强，具有安全访问模式，网络流量低，响应速度快，因为客户端负责大多数业务逻辑和UI演示，所以也被称为胖客户端，cs架构的软件需要针对不同的操作系统开发不同版本的软件。

随着互联网的兴起，cs架构不适合web，最大的原因是web应用程序的修改升级非常的迅速，而cs架构需要每个客户端逐个升级桌面app因此bs模式开始流行。

bs架构的主要特点是分散性高，维护方便，开发简单，共享性高，总拥有成本低。

BS架构原理

在BS架构下，客户只需要浏览器，应用程序的逻辑和数据都存在服务器端。浏览器只需要请求服务器，获取web页面，并把web页面展示给用户即可。

开发软件

jdk安装 java环境配置 idea软件下载

Maven

Maven是一个项目管理工具，可以对java项目进行自动化的构建和依赖管理。

Maven的作用

Maven的作用可以分为三类:

1. 项目构建：提供标准的，跨平台的自动化构建项目的方式

2. 依赖管理：方便快捷的管理项目依赖的资源(jar包)，避免资源间版本冲突的问题

3. 统一开发结构：提供标准的，统一的项目开发结构

Maven仓库

运行Maven的时候，Maven所需要的任何构件都是从本地仓库直接获取的。如果本地仓库没有，它会首先尝试从远程仓库下载构件到本地仓库。

SpringBoot快速上手

一，SpringBoot介绍

1. SpringBoot是由Pivotal团队提供的基于Spring的全新框架，旨在简化Spring应用的初始搭建和开发过程。

2. SpringBoot是所有基于Spring开发项目的起点。

3. SpringBoot就是尽可能地简化应用开发的门槛，让应用开发测试部署变得更加简单。

SpringBoot的特点

1. 遵循“约定优于配置”的原则，只需要很少的配置或使用默认的配置。

2. 能够使用内嵌的Tomcat，Jetty服务器，不需要部署War文件。

3. 提供定制化的启动器Starters，简化Maven配置，开箱即用。

4. 纯java配置，没有代码生成，也不需要XML配置

5. 提供了生产级的服务监控方案，如安全监控，应用监控，将抗检测等。

二，快速创建SpringBoot应用

利用IDEA提供的Spring Initializr创建Spring Boot应用

填写项目信息

Group：一般输入公司域名

Artifa：项目名称

三，开发环境热部署

• 在实际的开发环境调试过程中会频繁的修改后台文件，导致需要重新编译，重新启动，整个过程非常麻烦，影响开发效率。

• SpringBoot提供了spring-boot-devtools组件，使得无需手动重启SpringBoot应用即可重新编译启动项目，大大缩短编译启动时间。

• devtools会监听classpath下的文件变动，触发Restart类加载器重新加载该类，从而实现类文件和属性文件的热部署。

• 并不是所有的更改都需要重启应用（如静态模板，视图模板），可以通过设置spring.devtools.restart.exclude属性来指定一些文件或目录的修改不用重启应用。

1. 在pom.xml配置文件中添加dev-tools依赖。

2. 使用optional=true表示依赖不会传递，即该项目依赖devtools；其他项目如果引入此项目生成的jar包，则不会包含devtools

   <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-devtools</artifactId>
       <optional>true</optional>
   </dependency>

3. 在application.properties中配置devtools。

   spring.devtools.restart.enabled=true
   ​
   spring.devtools.restart.additional-paths=src/main/java

四，系统配置

如果使用了Eclipse，那么在修改代码并保存之后，项目将自动编译并触发重启，而如果使用了IntelliJ IDEA，还需要配置项目自动编译。

打开Settings页面，在左边菜单栏依次找到Build, Execution, Deployment->Compile,勾选Build project automatically，

在Settings Advanced Settings中找到compiler勾选第一项Allow auto-make...

做完这两步配置后，若开发者再次修改代码后，则项目会自动重启。

Web开发基础

一，web入门

SpringBoot将传统web开发的mvc,json,tomcat等框架整合，提供了spring-boot-starter-web组件，简化了web应用配置。

创建SpringBoot项目勾选SpringWeb选项后，会自动将spring-boot-starter-web组件加入到项目中。

spring-boot-starter-web启动器主要包括web,webmvc,json,tomcat等基础依赖组件，作用是提供Web开发场景所需的所有底层依赖。

webmvc为Web开发的基础框架，json为JSON数据解析组件，tomcat为自带的容器依赖。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

控制器

SpringBoot提供了@Controller和@RestController两种注解来标识此类负责接收和处理HTTP请求。

如果请求的是页面和数据，使用@Controller注解即可；如果只是请求数据则可以使用@RestController注解。

mvc设计模式：

@Controller的用法

示例中返回了hello页面和name中的数据，在前端页面可以通过${name}参数获取后台返回的数据并显示。

@Controller通常与Thymeleaf模板引擎结合使用。

@Controller
public class HelloController {
    @RequestMapping("/hello")
    public String index(ModelMap map){
        map.addAttribute(attributeName: "name",attributeValue: "perth");
        return "hello";
    }
}

@RestController的用法

默认情况下，@RestController注解会将返回的对象数据转化为JSON格式。

二，路由映射

@RequestMapping注解

@RequestMapping注解主要负责URL的路由映射。它可以添加在Controller类或者具体的方法上。

如果添加在Controller类上，则这个Controller类中所有的路由映射都会加上此映射规则，如果添加在方法上则只对此方法有效。

@RequestMapping注解包括很多属性参数来定义HTTP的请求映射规则，常用的属性参数如下：

• value：请求URL的路径，支持URL模板，正则表达式

• method：HTTP请求方法

• consumes:请求的媒体类型(Content-Type)，如application/json

• produces：响应的媒体类型

• params，headers：请求的参数及请求头的值。

@RequestMapping的value属性用于匹配URL映射，value支持简单表达式@RequestMapping("/user")

@RequestMapping支持使用通配符匹配URL用于统一映射某些URL规则类似的请求：@RequestMapping("/getJson/*.json"),当在浏览器中请求/getJson/a.json或者/getJson/b.json时都会匹配到后台的Json方法。

@RequestMapping的通配符匹配非常的简单实用，支持"*","?","**"等通配符。

符号"*"匹配任意字符，符号"**"匹配任意路径，符号"?"匹配单个字符

有通配符的优先级低于没有通配符的，如/user/add.json比/user/*.json优先匹配

有"**"通配符的优先级低于有 "*"通配符的

Method匹配

HTTP请求Method有GET,POST,PUT,DELETE等方式。HTTP支持全部的Method

@RequestMapping注解提供了method参数指定请求的Method类型，包括RequestMethod.GET,RequestMethod.POST,RequestMethod.PUT,RequestMethod.DELETE等值，分别对应HTTP请求的Method

@RequestMapping(value = "/hello",method = RequestMethod.GET)
    //可以等价写成@GetMapping("/hello")
    public String hello(String nickname,String phone){
        System.out.println(phone);
        return "hello" + nickname;
    }

Method匹配也可以使用@GetMapping，@PostMapping等注解替代

三，参数传递

@RequestParam将请求参数绑定到控制器的方法参数上，接收的参数来自HTTP请求体或请求url的QueryStrng，当请求参数名称与controller的业务方法参数名称一致时，@RequestParam可以省略。

@PathVaraible：用来处理动态的URL，URL的值可以作为控制器中处理方法的参数

@RequestBody接收的参数是来自requestBody中，即请求体。一般用于处理非Content-Type:application/x-www-form-urlencoded编码格式的数据，比如:'application/json','application/xml'等类型的数据。

四，数据响应

Web开发进阶

静态资源访问

使用IDEA创建SpringBoot项目，会默认创建出classpath：/static/目录，静态资源一般放在这个资源目录下即可。

如果默认的静态资源过滤策略不能够满足开发要求，也可以使用自定义静态资源过滤策略

在application.properties中直接定义过滤规则和静态资源位置。

过滤规则为/static/**，静态资源位置为classpath:/static/

文件上传

文件上传定理

表单的entype属性规定在发送到服务器之前应该如何对表单数据进行编码。

当表单的entype="application/x-www-form-urlencode"(默认)时form表单中的数据格式为：key=value&key=value

当表单的enctype="multipart/form-data"时，其传输数据如下

拦截器