Day10.SpringBootWeb案例 8.2+8.4

Day10.SpringBootWeb案例  8.2+8.4

  1. 环境搭建

1.创建一个SpringBoot工程,选择引入对应的起步依赖(web、mybatis、mysql驱动、lombok)

2.准备数据库表(mysql),及对应的实体类(pojo)

3.在application.properties中引入数据库连接信息

4.准备对应的Mapper接口、Service(...Service/...ServiceImpl)、Controller的基础代码

  1. 开发规范

REST风格

Get:查询

Post:新增

Put:修改

Delete:删除

统一响应结果 Result  (pojo类)

3.开发一个功能需要经历哪些流程?

1)查询页面原型明确需求 (前端传给服务器的信息格式)

2)阅读接口文档(已提供,接口怎么定义的,请求参数,请求路径,请求方法,请求响应,接口描述

3)思路分析 (怎么写代码)

4)接口开发:开发后台的业务功能,一个业务功能,我们称为一个接口。

5)接口测试:通过Postman进行接口测试,测试通过后,和前端进行联调测试。

6)前后端联调测试:和前端开发人员开发好的前端工程一起测试。

  1. 开发

Controller层

   1.注解@...Mappering(接口名/参数)

2.定义方法和形参  (方法名与service层对应)

  3.用Service对象的方法

4.返回值return Result...

Service层

  1. 定义方法和接收的参数(返回值类型,可以没有,根据实际,方法名与mapper层对应)
  2. 对参数进行处理(添加内容,根据要响应的返回数据其进行逻辑处理)
  3. 用Mapper对象的方法
  4. 返回值

Mapper层(dao层)

定义方法(返回值类型,可以没有,根据实际)

用注解或映射去实现对sql的数据处理

返回值没有相应的类型,(可以定义pojo/bean)

分页插件(PageHelper)

依赖

<dependency>

    <groupId>com.github.pagehelper</groupId>

    <artifactId>pagehelper-spring-boot-starter</artifactId>

    <version>1.4.2</version>

</dependency>

@Override

public PageBean page(Integer page, Integer pageSize) {

    PageHelper.startPage(page, pageSize); // 设置分页参数

    List<Emp> empList = empMapper.list(name,gender,begin,end); // 执行分页查询

    Page<Emp> p = (Page<Emp>) empList;    // 获取分页结果

    PageBean pageBean = new PageBean(p.getTotal(), p.getResult()); //封装PageBean

    return pageBean; }

文件上传

前端代码

在resources文件夹中创建一个fileupload.html网页文件,如下:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>文件上传</title>

</head>

<body>

<form action="/upload" method="post" enctype="multipart/form-data">

    姓名: <input type="text" name="name"/><br/>

    年龄: <input type="text" name="age"/></br>

    图片: <input type="file" name="image"/><br/><br/>

    <input type="submit" value="提交"/>

</form>

</body>

</html>

上传文件的原始form表单,要求表单必须具备以下三点(上传文件页面三要素):

  • 表单必须有 file  域,用于选择要上传的文件。
  • 表单提交方式必须为 POST。
  • 表单的编码类型enctype必须要设置为 multipart/form-data。

后段代码(Controller层)

@RestController

public class UploadController {

    @PostMapping("/upload")

    public Result upload(MultipartFile image) throws IOException {

        System.out.println(image.getName)

        return Result.success(); }}

SpringBoot中的上传文件大小

#配置单个文件的最大上传大小

spring.servlet.multipart.max-file-size=10MB

#配置单个请求最大上传大小(一次请求可以上传多个文件)

spring.servlet.multipart.max-request-size=100MB

阿里云OSS

依赖

<dependency>

    <groupId>com.aliyun.oss</groupId>

    <artifactId>aliyun-sdk-oss</artifactId>

    <version>3.15.0</version>

</dependency>

工具类

@Component

public class AliOSSUtils {

    

    private String endpoint = "换成自己bucket的地址";

    private String accessKeyId = "替代为自己的accessKeyId";

    private String accessKeySecret = "替代为自己的accessKeySecret";

    private String bucketName = "替代为自己的bucketName";

    /**

     * 实现上传图片到OSS

     */

    public String upload(MultipartFile multipartFile) throws IOException {

        // 获取上传的文件的输入流

        InputStream inputStream = multipartFile.getInputStream();

        // 避免文件覆盖

        String fileName = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy-MM-dd-HH-mm-ss")) + multipartFile.getOriginalFilename();

        //上传文件到 OSS

        OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);

        ossClient.putObject(bucketName, fileName, inputStream);

        //文件访问路径

        String url = endpoint.split("//")[0] + "//" + bucketName + "." + endpoint.split("//")[1] + "/" + fileName;

        

        // 关闭ossClient

        ossClient.shutdown();

        return url;// 把上传到oss的路径返回

    }

}

Controller层

@RestController

public class UploadController {

    @Autowired

    private AliOSSUtils aliOSSUtils;

    @PostMapping("/upload")

    public Result upload(MultipartFile image) throws IOException {

        String url = aliOSSUtils.upload(image);

        return Result.success(url);  } }

配置文件value 在配置文件中

配置文件中写键=值

@Value(“${键}”)

对应类中变量上

Yml

  1. 1.大小写敏感
  2. 2.数值前边必须有空格,作为分隔符
  3. 3.使用缩进表示层级关系,缩进时,不允许使用Tab键,只能用空格(idea中会自动将Tab转换为空格)
  4. 4.缩进的空格数目不重要,只要相同层级的元素左侧对齐即可
  5. 5.表示注释,从这个字符一直到行尾,都会被解析器忽略

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,我来一句句解释这段代码。 1. `console.log("list");` 这一行代码使用 `console.log()` 方法输出字符串 `"list"`,用于调试目的。 2. `console.log(list);` 这一行代码使用 `console.log()` 方法输出数组 `list`,同样用于调试目的。 3. `console.log(list.length);` 这一行代码使用 `console.log()` 方法输出数组 `list` 的长度,同样用于调试目的。 4. `for (let i = 0; i < list.length; i++) {` 这一行代码使用 `for` 循环遍历数组 `list` 中的每一个元素,从索引 `0` 开始,直到数组长度为止。 5. `const state = list[i].DATE_TYPE;` 这一行代码声明了一个常量 `state`,并将数组 `list` 中当前遍历到的元素的 `DATE_TYPE` 属性值赋值给它。 6. `const info = list[i].INFO;` 这一行代码声明了一个常量 `info`,并将数组 `list` 中当前遍历到的元素的 `INFO` 属性值赋值给它。 7. `for (let z = 0; z < list[i].INFO.length; z++) {` 这一行代码使用 `for` 循环遍历数组 `list` 中当前遍历到的元素的 `INFO` 属性值中的每一个元素,从索引 `0` 开始,直到数组长度为止。 8. `for (let j = 0; j < this.report_day_data.series.length; j++) {` 这一行代码使用 `for` 循环遍历数组 `report_day_data` 中的 `series` 属性值中的每一个元素,从索引 `0` 开始,直到数组长度为止。 9. `if (this.report_day_data.series[j].name == state || (this.report_day_data.series[j].name === "OEE" && state === "PROD")) {` 这一行代码使用 `if` 条件语句进行判断,如果数组 `report_day_data` 中当前遍历到的 `series` 对象的 `name` 属性值等于 `state` 常量的值,或者等于 `"OEE"` 且 `state` 常量的值等于 `"PROD"`,则执行下面的代码块。 10. `this.report_day_data.series[j].data.push(info[z].BASE_DATA);` 这一行代码将数组 `info` 中当前遍历到的元素的 `BASE_DATA` 属性值添加到数组 `report_day_data` 中当前遍历到的 `series` 对象的 `data` 属性值中。 总的来说,这段代码的作用是将数组 `list` 中的数据转换为数组 `report_day_data` 中的数据,以便在图表中展示出来。具体地,它遍历数组 `list` 中的每一个元素,将其中的 `DATE_TYPE` 和 `INFO` 属性值添加到数组 `report_day_data` 中的 `series` 对象中的 `name` 属性匹配的项中的 `data` 数组中。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值