JavaEE和SpringBoot
一 JavaEE基础知识
1.分层框架
客户端访问
—>表现层/控制层 : 总servlet(拦截所有请求并调用方法处理)
—>业务层 : service(处理需求)
—>持久层/数据访问层 : dao(写底层方法,减少冗余代码)
2.MVC模式
- model : 数据模型，方便各层级之间传递数据
- view：页面（展示数据）
- controller：控制器（控制请求与输出，使流程更加清晰）
3.Maven项目
-
Maven可以创建java项目、Web项目和聚合项目
-
聚合项目就是在一个项目中，可以创建多个Module，通过Maven集中管理
-
在Module中添加依赖，依赖会向下传递
二 SpringBoot项目
1.使用IDEA相关设置
-
创建maven项目，选择webapp模板
-
设置选择maven版本和my_repository地址
-
修改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> -
在src下，添加java目录和resources目录
- 在java目录下写代码（main方法和其对应的控制层、业务层等目录要在同一级目录下）；
- 在resources目录下创建static文件夹，存放HTML等静态展示文件（客户端可直接访问的页面）；
- 可以手动创建banner.txt ，用于显示控制台上的初始化图形。
2.写SpringBoot程序
-
@SpringBootApplication程序入口 : 写在主类的注释位置启动Tomcat
加载这个项目
创建application容器
@SpringBootApplication
public class Demo01 {
public static void main(String[] args) {
SpringApplication.run(Demo01.class,args);
}
}
- 在主类(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); } } -
业务层—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); }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; } } -
控制层与业务层的连接—自动注入
-
在控制层的类中，通过注释
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")
-
-
事件处理
-
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件： $("p").click(); 下一步是定义什么时间触发事件。您可以通过一个事件函数实现： $("p").click(function(){ // 动作触发后执行的代码!! });
-
4.Ajax
百度百科
Ajax 即“Asynchronous Javascript ***A***nd XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
总结：
-
Ajax通过与事件的绑定，在不重新加载网页的情况下，对网页进行异步更新
-
常用事件
点击 click
失去焦点 onblur
键盘弹起 keyup
-
ajax请求
- url：指向java中的控制层
- data：前端向java传递的数据,默认格式是Json
- success：是处理java返回的数据,进行前端的输出,一般是一个方法
- datatype：返回的数据类型(success中function的参数类型)
-
接收参数
- 一 : 接收页面的请求参数 参数绑定
-
- 简单类型 直接接收
-
- pojo 属性和请求的key一致
-
- 包装类型 pageBean2
-
- HttpServletRequest
-
返回参数
- 二 控制器方法的返回值
-
1) void 没有返回值 @ResponseBody -
2) String -
2.1 返回是 视图名称 转发重定向的URL /html/login.html redirect:showLogin forward:showLogin -
2.2 在方法上 @ResponseBody 返回就是普通的字符串 -
3) Bean 集合 一定添加 @ResponseBody 将数据转换成json数据返回 -
4) ModelAndView
案例演示：
-
前端：
<!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> -
主类 :
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); } } -
控制层
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; } } -
业务层
package com.doit.ajaxTest.service; import java.util.List; public interface AjaxService { public List<String> dohe(String input); }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; } } -
效果展示
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
-
在连接时，注意连接的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);
}
}
控制层
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();
}
}
业务层
package com.doit.ab.service;
import com.doit.ab.pojo.PageBean;
public interface ProductService {
public PageBean getProductPage();
}
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;
}
}
持久层
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();
}
工具类(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) +
'}';
}
}
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 +
'}';
}
}
前端
<!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>
结果展示
1086
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
