JAVAEE---javaweb和SpringBoot_java spring boot javaee

JavaEE和SpringBoot

一 JavaEE基础知识

1.分层框架

客户端访问

—>表现层/控制层 : 总servlet(拦截所有请求并调用方法处理)

—>业务层 : service(处理需求)

—>持久层/数据访问层 : dao(写底层方法,减少冗余代码)

2.MVC模式

• model : 数据模型，方便各层级之间传递数据
• view：页面（展示数据）
• controller：控制器（控制请求与输出，使流程更加清晰）

3.Maven项目

• Maven可以创建java项目、Web项目和聚合项目

• 聚合项目就是在一个项目中，可以创建多个Module，通过Maven集中管理

• 在Module中添加依赖，依赖会向下传递

  

二 SpringBoot项目

1.使用IDEA相关设置

1. 创建maven项目，选择webapp模板

2. 设置选择maven版本和my_repository地址

3. 修改pom文件

   <properties>
     <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
     <maven.compiler.source>1.8</maven.compiler.source>
     <maven.compiler.target>1.8</maven.compiler.target>
   </properties>
   
   <!--添加springboot作为父工程-->
   <parent>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-parent</artifactId>
     <version>2.0.3.RELEASE</version>
     <relativePath />
   </parent>
   
   <dependencies>
     <!--添加web的依赖-->
     <dependency>
       <groupId>org.springframework.boot</groupId>
       <artifactId>spring-boot-starter-web</artifactId>
     </dependency>
     <!--添加操作数据库的依赖   mybatis-->
     
   </dependencies>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23

4. 在src下，添加java目录和resources目录

   1. 在java目录下写代码（main方法和其对应的控制层、业务层等目录要在同一级目录下）；
   2. 在resources目录下创建static文件夹，存放HTML等静态展示文件（客户端可直接访问的页面）；
   3. 可以手动创建banner.txt ，用于显示控制台上的初始化图形。

2.写SpringBoot程序

• @SpringBootApplication 程序入口 : 写在主类的注释位置

  启动Tomcat

  加载这个项目

  创建application容器

@SpringBootApplication
public class Demo01 {
    public static void main(String[] args) {
        SpringApplication.run(Demo01.class,args);
    }
}
1
2
3
4
5
6

• 在主类(Demo01)所在的目录下，创建controller、pojo、service等文件夹，这些文件必须在同级目录下

• HTML文件和JavaEE通过action和备注进行连接

  

• 控制层—controller

  • @RequestMapping 标注—将页面的url,映射到方法上
  • @ResponseBody 标注—向客户端反馈请求,即使没有也要写

  @Controller  //将类交给Spring
  public class MyController {
      
      @RequestMapping("/login")		//将页面的url,映射到方法上
      @ResponseBody					//向客户端反馈请求,即使没有也要写
      public void login(String username, String password) {
          System.out.println(username);
          System.out.println(password);
      }
  
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

• 业务层—service

  • service中面向接口编程（可以实现动态代理）
  • 需要一个接口类
  • 实现类需要@Service 标注，将业务类交给Spring

  package com.doit.ab.service;
  
  import com.doit.ab.pojo.User;
  
  public interface UserService {
      public User login(String username,String password);
  }
  1
  2
  3
  4
  5
  6
  7

  package com.doit.ab.service;
  
  import com.doit.ab.pojo.User;
  import org.springframework.stereotype.Service;
  
  @Service
  public class UserServiceImp implements UserService {
  
      @Override
      public User login(String username, String password) {
          return null;
      }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13

• 控制层与业务层的连接—自动注入

  • 在控制层的类中，通过注释Autowired 直接获取业务层的接口对象，通过该对象调用方法，实现功能

    @Autowired

  • 该过程为自动注入：自动从容器中获取业务层的实现类

  • Spring会自动调和类与对象的关系，不需要在控制层通过new的方式获取对象

  

• 案例执行结果展示

  • 执行过程

  

  • 结果展示

3.jQuery

百度百科

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

• 使用jQuery要自己导入

• 选择器

  • jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

  • jQuery 中所有选择器都以美元符号开头：$()。

    元素选择器
    jQuery 元素选择器基于元素名选取元素。
    $("p")
    在页面中选取所有 <p> 元素
    
    
    id 选择器
    jQuery 选择器通过 HTML 元素的 id 属性选取指定的元素。
    页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 id 选择器。
    通过 id 选取元素语法如下：
    
    $("#test")
    class 选择器
    jQuery 类选择器可以通过指定的 class 查找元素。
    
    语法如下：
    $(".test")
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

• 事件处理

  • 在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

    页面中指定一个点击事件：
    
    $("p").click();
    下一步是定义什么时间触发事件。您可以通过一个事件函数实现：
    
    $("p").click(function(){
        // 动作触发后执行的代码!!
    });
    1
    2
    3
    4
    5
    6
    7
    8

4.Ajax

百度百科

Ajax 即“Asynchronous Javascript ***A***nd XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

总结：

• Ajax通过与事件的绑定，在不重新加载网页的情况下，对网页进行异步更新

• 常用事件

  点击 click

  失去焦点 onblur

  键盘弹起 keyup

• ajax请求

  1. url：指向java中的控制层
  2. data：前端向java传递的数据,默认格式是Json
  3. success：是处理java返回的数据,进行前端的输出,一般是一个方法
  4. datatype：返回的数据类型(success中function的参数类型)

• 接收参数

  • 一 : 接收页面的请求参数 参数绑定
  • 1. 简单类型 直接接收
  • 2. pojo 属性和请求的key一致
  • 3. 包装类型 pageBean2
  • 4. HttpServletRequest

• 返回参数

  • 二 控制器方法的返回值

  • 1)  void  没有返回值  @ResponseBody
    1

  • 2)  String
    1

  •   2.1   返回是 视图名称   转发重定向的URL  /html/login.html  redirect:showLogin   forward:showLogin
    1

  •   2.2  在方法上 @ResponseBody  返回就是普通的字符串
    1

  • 3)  Bean 集合 一定添加 @ResponseBody   将数据转换成json数据返回
    1

  • 4) ModelAndView
    1

案例演示：

• 前端：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>搜索</title>
  </head>
  
  <!--引入jQuery类库-->
  <script src="/js/jquery.min.js"></script>
  
  <script>
      function f1(){
          $.ajax({
              //url指向java中的控制层
              url:"/con/sousuo",
              //data是前端向java传递的数据,默认格式是Json
              data:{"input":$("#ss").val()},
              //success是处理java返回的数据,进行前端的输出,一般是一个方法
              success:function (abc){
                  for (i=0;i<abc.length;i++){
                      $("#show").append(abc[i])
                  }
                  $("#show").append("<br/>")
              }
          })
          //可简写为以下代码
          /*$.post("/con/sousuo",{"input":$("#ss").val()},function (abc){
              for (i=0;i<abc.length;i++){
                  $("#show").append(abc[i])
              }
              $("#show").append("<br/>")
          })*/
      }
  </script>
  <body>
  
  <input type="text" id="ss" value="郭德纲">
  <input type="button" value="搜索" onclick="f1()"><br/>
  <span id="show"></span>
  
  </body>
  </html>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39
  40
  41
  42

• 主类 :

  package com.doit.ajaxTest;
  
  import org.springframework.boot.SpringApplication;
  import org.springframework.boot.autoconfigure.SpringBootApplication;
  
  /**
   * 1 在web页面添加搜索框
   * 2 将搜索的内容反馈到java中
   * 3 进行分析,返回一个集合
   * 4 集合中的第一个元素是客户端输入的内容
   *      第二个元素是该内容的哈希值
   *      第三个内容是如果输入的 是郭德纲,返回于谦
   */
  @SpringBootApplication
  public class AjaxDemo {
  
      public static void main(String[] args) {
          SpringApplication.run(AjaxDemo.class,args);
      }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20

• 控制层

  package com.doit.ajaxTest.controller;
  
  import com.doit.ajaxTest.service.AjaxService;
  import org.springframework.beans.factory.annotation.Autowired;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.ResponseBody;
  
  import java.util.List;
  
  @org.springframework.stereotype.Controller
  @RequestMapping("/con")
  public class Controller {
  
      @Autowired
      AjaxService ajaxService;
  
      @RequestMapping("/sousuo")
      @ResponseBody
      public List<String> sousuo(String input){
          List<String> list = ajaxService.dohe(input);
          return list;
      }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23

• 业务层

  package com.doit.ajaxTest.service;
  
  import java.util.List;
  
  public interface AjaxService {
      public List<String> dohe(String input);
  }
  1
  2
  3
  4
  5
  6
  7

  package com.doit.ajaxTest.service;
  
  import org.springframework.stereotype.Service;
  
  import java.util.ArrayList;
  import java.util.List;
  
  @Service
  public class AjaxServiceImp implements AjaxService {
  
      @Override
      public List<String> dohe(String input) {
          List<String> list = new ArrayList<>();
          list.add(input);
          int i = input.hashCode();
          list.add(i+"");
          if (input.equals("郭德纲")){
              list.add("于谦");
          }
          return list;
      }
  }
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

• 效果展示

  

5.持久层

持久层一般与SQL相连，用于执行SQL语句，返回执行结果

5.1 连接SQL

• Spring与SQL进行连接，需要在resources目录下，创建文件：

  application.properties

  内容为:

  spring.datasource.url=jdbc:mysql://localhost:3306/cp?useSSL=false&characterEncoding=UTF-8
  spring.datasource.username=root
  spring.datasource.password=root
  spring.datasource.driverClassName=com.mysql.jdbc.Driver
  1
  2
  3
  4

  

• 在连接时，注意连接的SQL的地址、库名和账号密码

5.2 使用自动代理

• 通过导入的依赖 : mybatis中的代理模式开发
• 自动生成代理类
  • 我们只需要输入一个SQL语句
  • 自动生成一个执行SQL语句的实现类
• 除JDBC外，持久层也可以使用其他数据源：mysql hive clickhouse impala…

三 可视化

在resources目录下，添加echarts.js 工具包

可以参考echarts网站

https://echarts.apache.org/zh/index.html

使用上面的可视化模板

综合案例

源数据

主类

package com.doit.ab;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Demo01 {
    public static void main(String[] args) {
        SpringApplication.run(Demo01.class,args);
    }
}
1
2
3
4
5
6
7
8
9
10
11

控制层

package com.doit.ab.controller;


import com.doit.ab.pojo.PageBean;
import com.doit.ab.service.ProductService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;


/**
 * 1.创建一个product类,封装product对象
 * 2.创建一个PageBean类,封装向前端传递的数据
 * 3.持久层    ProductDao  读取sql数据,放到list中
 * 4.业务层    ProductService  将name和num取出,放入PageBean中
 * 5.控制层    ProductController   将数据返回
 */

@Controller
public class ProductController {

    @Autowired
    ProductService productService;

    @RequestMapping("/tuBiao01")
    @ResponseBody
    public PageBean tuBiao01(){
        return productService.getProductPage();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

业务层

package com.doit.ab.service;

import com.doit.ab.pojo.PageBean;

public interface ProductService {

    public PageBean getProductPage();
}
1
2
3
4
5
6
7
8

package com.doit.ab.service;

import com.doit.ab.mapper.ProductDao;
import com.doit.ab.pojo.PageBean;
import com.doit.ab.pojo.Product;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ProductServiceImp implements ProductService {

    @Autowired
    ProductDao productDao;


    @Override
    public PageBean getProductPage() {

        List<Product> list = productDao.getAllProducts();

        PageBean pageBean = new PageBean();
        Object[] names = new Object[list.size()];
        Object[] values = new Object[list.size()];

        for (int i = 0; i < list.size(); i++) {
            names[i] = list.get(i).getName();
            values[i] = list.get(i).getNum();
        }

        pageBean.setNames(names);
        pageBean.setNums(values);

        return pageBean;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

持久层

package com.doit.ab.mapper;

import com.doit.ab.pojo.Product;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;

import java.util.List;

@Mapper
public interface ProductDao {

    @Select("select * from produce")
    public List<Product> getAllProducts();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

工具类(pojo)

package com.doit.ab.pojo;

import java.util.Arrays;

public class PageBean {

    Object[] names;
    Object[] nums;

    public Object[] getNames() {
        return names;
    }

    public void setNames(Object[] names) {
        this.names = names;
    }

    public Object[] getNums() {
        return nums;
    }

    public void setNums(Object[] nums) {
        this.nums = nums;
    }

    @Override
    public String toString() {
        return "PageBean{" +
                "names=" + Arrays.toString(names) +
                ", nums=" + Arrays.toString(nums) +
                '}';
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

package com.doit.ab.pojo;

public class Product {
    private int id;
    private String name;
    private int num;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getNum() {
        return num;
    }

    public void setNum(int num) {
        this.num = num;
    }

    @Override
    public String toString() {
        return "Product{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", num=" + num +
                '}';
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show</title>
</head>

<!-- 引入 echarts.js -->
<script src="/js/echarts.js"></script>
<!--引入jQuery类库-->
<script src="/js/jquery.min.js"></script>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">

    $.ajax({

        url:"/tuBiao01",
        success:function (data){

            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '产品销量'
                },
                tooltip: {},
                legend: {
                    data:['销量']
                },
                xAxis: {
                    data: data.names
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: data.nums
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            
        }
    })

</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

结果展示