AI 助理
备案控制台
开发者社区 数据库 文章 正文

从零开始搭建Vue2.0项目(三)之集成SpringBoot

2022-08-07 172
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
云数据库 RDS MySQL，集群系列 2核4GB
推荐场景：
搭建个人博客
RDS MySQL Serverless 基础系列，0.5-2RCU 50GB
推荐场景：
学生管理系统数据库设计 搭建个人博客
RDS MySQL Serverless 高可用系列，价值2615元额度，1个月
简介： 前面一篇主要是介绍了怎么完成`axios`请求测试以及`mock.js`模拟真实数据请求，前后端分离的实际应用还是得与后端进行交互，下面是关于怎么样与`java`后台进行交互的介绍。

前言📋

前面一篇主要是介绍了怎么完成axios请求测试以及mock.js模拟真实数据请求，前后端分离的实际应用还是得与后端进行交互，下面是关于怎么样与java后台进行交互的介绍。

快速开始⚡

我么将要完成Mybatis框架的集成，并编写查询语句查询出MySQL数据库的数据，通过controller层的API暴露给前端，从而实现数据的交互。

首先，完成SpringBoot项目的创建，添加mybatis、spring-web、spring-configuration、mysql、lombok依赖。

项目目录

创建完成后，项目目录如下：

img

一、添加依赖

pom.xml

    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.1.4</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-configuration-processor</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>

二、编写yaml配置文件

将根目录下的application.properties重命名为application.yml，然后进行配置：

server:
  port: 8080
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
# 数据库驱动
# 此處驱动有两个
# com.mysql.jdbc.Driver
# com.mysql.cj.jdbc.Driver
# MySQL5用的驱动url是com.spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver.mysql.jdbc.Driver，
#  MySQL6以后用的是com.mysql.cj.jdbc.Driver。
# 使用何种驱动，根据安装MySQL的版本而定
# 下面是Mybatis下划线转驼峰
mybatis:
  configuration:
    map-underscore-to-camel-case: true

注意：这里如果添加了Mybatis而不进行数据库连接池的配置，将会报出异常！

三、编写主类文件

User.java

package com.deepinsea.cors.entity;

import lombok.Data;

/**
 * @author 南街北巷
 * @data 2021/1/6 15:51
 */
@Data
public class User {

    private int id;
    private String name;
    private int age;
}

注意：我们应该事先创建好MySQL数据库，设置库、表编码为utf8mb64(为什么MySQL不用utf-8？)，然后根据数据库设置的字段编写实体类！

UserMapper.java

package com.deepinsea.cors.mapper;

import com.deepinsea.cors.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.springframework.stereotype.Repository;

import java.util.List;

/**
 * @author 南街北巷
 * @data 2021/1/6 15:52
 */
@Mapper
@Repository
public interface UserMapper {

    /**
     * 根据id查询User
     * @param id
     * @return
     */
    @Select("select * from user where id = #{id}")
    User findById(int id);

    /**
     * 查询所有用户
     * @return
     */
    @Select("select * from user")
    List<User> findAll();
}

HelloController.java

package com.deepinsea.cors.controller;

import com.deepinsea.cors.entity.User;
import com.deepinsea.cors.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

/**
 * @author 南街北巷
 * @data 2021/1/6 14:44
 * @RestController 等同于 @Controller+@ResponseBody
 */
@RestController
@RequestMapping("/user")
public class HelloController {

    @Autowired
    private UserMapper userMapper;

    @PostMapping("/getBy/{id}")
    public User findById(@PathVariable int id){
        User user = userMapper.findById(id);
        return user;
    }

    @PostMapping("/getAll")
    public List<User> getAll(){
        List<User> users = userMapper.findAll();
        return users;
    }
}

四、测试使用

下面以请求APIhttp://localhost:8080/user/getBy/2为例进行测试：

img

测试以后，发现返回JSON字符串成功（需要自定义序列化配置、异常、枚举可以自行配置，这里仅快速集成）！

好了，到了这里，数据库 => 后端的数据传递也完成了！可以正式进行后端 => 前端的数据交互了：

前后端交互

现在是正式集成进行后端与前端的跨域请求，因此我们需要把注释的port与proxyTable打开：

端口

port: 8081 # 后端端口为8080

代理配置

  proxyTable: {
        // 跨域配置
        // 修改配置后如果项目启动404，记得重启项目(类似于redis，webpack是依赖配置文件启动的)
        // 错误日志：xhr.js?ec6c:177 POST http://localhost:8081/user/getAll 404 (Not Found)
        '/api': {
          target: 'http://localhost:8080/',
          changeOrigin: true,
          secure: false,  // 如果是https接口，需要配置这个参数
          pathRewrite: {
            '^/api': ''
          }
        }
    },

上面的配置相当于将前端的请求代理为：

http://localhost:8081/api => http://localhost:8080

上面将原后端增加一个/api路径参数，是为了隐藏真实的后端API地址，但是对于前端请求真实的API地址没有用。因此 ，我们需要在main.js中(或者vue.config.js)设置前端跨域代理的基本路径，这样就不用编写地址时每次都加一个/api了：

axios.defaults.baseURL = '/api' // 设置跨域代理基本路径

因为使用axios进行过测试（后面可以集成vuex状态管理器对axios进行二次封装），只需要将Home.vue中的测试API访问地址更改为后端的API地址即可：

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import MockTest from '@/components/MockTest.vue' // 这里不能使用./AxiosTest.vue的方式引入
  name: 'Home',
  components: { // 局部注册(引入并注册)
    HelloWorld,
    MockTest
  },
  methods: {
    mockTest () {
      this.$axios.post('/user/getAll') // 'https://v1.alapi.cn/api/music/search?   keyword=我爱你'
        .then(res => {
          console.log(res) // 在控制台打印响应数据（包括响应头与响应体）
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
</script>

注意：也可以在created()与mounted()生命周期函数里面添加该方法，将会自动执行。

测试使用

跨域配置完成了，启动项目：

img

可以看到，成功返回了后端的数据！

到这里基本可以结束了，下面是关于数组遍历出对象显示到前端的部分（主要为原理深究）

读取对象数组数据

1. 使用foreach遍历读取

首先，一般遍历Javascript遍历实现数据的传递都是通过document.getElementById()方法进行单向数据传递，但是对于已经默认进行了双向绑定的vue对象来说——即：在data()中声明的对象，进行数据的传递往往要考虑一个数据的状态变化性（动态变化性）。

因为获取到axios响应体的数据一般是通过this指针传递给vue对象的，因此this指向的对象发生变化时全局的对象的值也会随之发生改变（this相当于指针），这将会导致数组使用for循环以及其他各种遍历方式非钩子函数，遍历时新数组对象都会将原来的数组对象覆盖：

下面是使用for循环遍历等各种数组测试

Home.vue

<template>
  <div class="home">
    <Hello-World />
    <Mock-Test />
    <button @click="userTest">试试</button>
  <!-- 下面两种方式进行遍历都可以，index是数组下标0,1,2...，item是id序号1,2,3... -->
  <!-- 当两种标签遍历方式都存在时，只用item的遍历会报key重复错误(应该是DOM结构冲突)，
       因此最好使用item和index同时定位对象的遍历方式 -->
  <p>{{userList}}</p>
  <!-- <p v-for="item in userList" :key="item.id">{{item}}</p>
  <p v-for="(item,index) in userList" :key="index">{{item.id}}</p> -->

  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import MockTest from '@/components/MockTest.vue' // 这里不能使用./AxiosTest.vue的方式引入

export default {
  name: 'Home',
  components: {
    HelloWorld,
    MockTest
  },
  data () {
    return {
      userList: '' // 注意: 这里为对象数组时参数时定义为userList:[](适用于单个对象)的话会默认产生一个[]符号,
    }
  },
  // created () { // 或created: function()，为生命周期函数created，也可以是mounted—已挂载,可在页面加载时自动执行方法
  //   this.userTest()
  // },
  methods: {
    userTest () {
      this.$axios.post('/user/getAll') // 'https://v1.alapi.cn/api/music/search?keyword=我爱你'
        .then(res => {
          // 响应体获取测试
          // console.log(res)
          // console.log(res.data) // 这里采用逐步分层取值的方式测试
          // console.log(res.data[0])
          // console.log(res.data[0].name)
          // console.log(res.data[res.data[0].id].name) // 嵌套取值
          // console.log(res.data.length)

          // var _this = this// 这句话的位置需要注意
          // console.log(this)// 依然是这个方法的对象
          // console.log(_this) // 这个变成了原来的对象

          // 循环取值测试（因为this的指针变化问题，不可行,因为this无论是否处于严格模式下都引用全局对象。）
          for (var i = 0; i < res.data.length; i++) { // 遍历出所有对象
            // 将对象合并(for循环遍历赋值、Object.assign()、序列化、浅拷贝、深拷贝(不会覆盖对象)、foreach遍历(测试成功))
            // 1.遍历赋值
            // this.userList = res.data[i] // 测试发现只有id为2（即：第二个对象）对象的值，说明userList的this指向被修改了
            // console.log(this.userList)
            // 2.Object.assign()
            // var objList = Object.assign({}, res.data[i]) // 参数表示，测试时也可以直接用常数表示
            // console.log(objList)
            // this.userList >= objList
            // 3.序列化
            // const obj = JSON.parse(JSON.stringify(res.data[i]))
            // this.userList = obj
            // console.log(obj)
            // 浅拷贝与深拷贝需要下载JQuery，暂时没有尝试
          }

          // 4.foreach遍历测试
          // var list = ['750', '1080', '1125', '1242', '1242']
          // var data = []
          // Object.keys(list).forEach(key => {
          //   let item = {
          //     val: list[key]
          //   }
          //   data.push(item)
          // })
          // console.log(list)
          // 正式使用
          var list = res.data
          var data = []
          Object.keys(list).forEach(key => { // 因为这里使用了ES6语法中的 => 钩子函数，因此将不会
            data.push(list[key])
          })
          this.userList = data
          console.log(data)

          // this.userList = res.data
          // console.log(res.data)
          // axios的response采用默认参数data存放数据，这里只需要传data的值就行了，
          // 否则要从一个加了其他参数的多重JSON对象中取值，无异于自己设计一个JSON序列化工具
          // 注意：这里res.data前不需要加this指针，因为箭头函数没有自己的this(因此本身是局部变量)，
          // 箭头函数里面的this是对象的指针(定义时的全局变量)，如果加了this那么将获取不到res.data的值
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

使用for循环里面的遍历赋值与浅拷贝都会导致最终数组元素的值发生改变，导致对象数组遍历出对象再合并出现对象覆盖的现象：

img

但是使用foreach遍历搭配钩子函数就能避免这个问题：

 // 4.foreach遍历测试
      // var list = ['750', '1080', '1125', '1242', '1242']
      // var data = []
      // Object.keys(list).forEach(key => {
      //   let item = {
      //     val: list[key]
      //   }
      //   data.push(item)
      // })
      // console.log(list)
      // 正式使用
      var list = res.data
      var data = []
      Object.keys(list).forEach(key => { // 因为这里使用了ES6语法中的 => 钩子函数，因此将不会
        data.push(list[key])
      })
      this.userList = data
      console.log(data)

2. 使用v-for读取

对此，vue2.0提供了默认的数组遍历方法（当然，数组还存在下标属性更新不了以及数组长度不可响应式改变的问题，具体参考issues；这些在vue3.0中使用proxy代替Object.defineProperty()时得到了解决），下面是关于vue的数组遍历方法v-for的使用：

Home.vue

<template>
  <div class="home">
    <Hello-World />
    <Mock-Test />
    <button @click="userTest">试试</button>
  <!-- 下面两种方式进行遍历都可以，index是数组下标0,1,2...，item是id序号1,2,3... -->
  <!-- 当两种标签遍历方式都存在时，只用item的遍历会报key重复错误(应该是DOM结构冲突)，
       因此最好使用item和index同时定位对象的遍历方式 -->
  <p>{{userList}}</p>
  <p v-for="item in userList" :key="item.id">{{item}}</p>
  <!-- 使用单item作为参数的方式最好不要获取详细到具体key的值，否则会提示错误，因此这种适合整个对象的获取 -->
  <!-- <p v-for="(item,index) in userList" :key="index">{{item.id}}</p> -->

  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import MockTest from '@/components/MockTest.vue' // 这里不能使用./AxiosTest.vue的方式引入

export default {
  name: 'Home',
  components: {
    HelloWorld,
    MockTest
  },
  data () {
    return {
      userList: '' // 注意: 这里为对象数组时参数时定义为userList:[](适用于单个对象)的话会默认产生一个[]符号,
    }
  },
  // created () { // 或created: function()，为生命周期函数created，也可以是mounted—已挂载,可在页面加载时自动执行方法
  //   this.userTest()
  // },
  methods: {
    userTest () {
      this.$axios.post('/user/getAll') // 'https://v1.alapi.cn/api/music/search?keyword=我爱你'
        .then(res => {
          // 响应体获取测试
          // console.log(res)
          // console.log(res.data) // 这里采用逐步分层取值的方式测试
          // console.log(res.data[0])
          // console.log(res.data[0].name)
          // console.log(res.data[res.data[0].id].name) // 嵌套取值
          // console.log(res.data.length)

          // var _this = this// 这句话的位置需要注意
          // console.log(this)// 依然是这个方法的对象
          // console.log(_this) // 这个变成了原来的对象

          // 循环取值测试（因为this的指针变化问题，不可行,因为this无论是否处于严格模式下都引用全局对象。）
          for (var i = 0; i < res.data.length; i++) { // 遍历出所有对象
            // 将对象合并(for循环遍历赋值、Object.assign()、序列化、浅拷贝、深拷贝(不会覆盖对象)、foreach遍历(测试成功))
            // 1.遍历赋值
            // this.userList = res.data[i] // 测试发现只有id为2（即：第二个对象）对象的值，说明userList的this指向被修改了
            // console.log(this.userList)
            // 2.Object.assign()
            // var objList = Object.assign({}, res.data[i]) // 参数表示，测试时也可以直接用常数表示
            // console.log(objList)
            // this.userList >= objList
            // 3.序列化
            // const obj = JSON.parse(JSON.stringify(res.data[i]))
            // this.userList = obj
            // console.log(obj)
            // 浅拷贝与深拷贝需要下载JQuery，暂时没有尝试
          }

          // 4.foreach遍历测试
          // var list = ['750', '1080', '1125', '1242', '1242']
          // var data = []
          // Object.keys(list).forEach(key => {
          //   let item = {
          //     val: list[key]
          //   }
          //   data.push(item)
          // })
          // console.log(list)
          // 正式使用
          // var list = res.data
          // var data = []
          // Object.keys(list).forEach(key => { // 因为这里使用了ES6语法中的 => 钩子函数，因此将不会
          //   data.push(list[key])
          // })
          // this.userList = data
          // console.log(data)

          this.userList = res.data
          console.log(res.data)
          // axios的response采用默认参数data存放数据，这里只需要传data的值就行了，
          // 否则要从一个加了其他参数的多重JSON对象中取值，无异于自己设计一个JSON序列化工具
          // 注意：这里res.data前不需要加this指针，因为箭头函数没有自己的this(因此本身是局部变量)，
          // 箭头函数里面的this是对象的指针(定义时的全局变量)，如果加了this那么将获取不到res.data的值
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

启动项目，成功获取到数据：

img

前后端数据请求成功！

小结

前后端打通了，下面就是项目UI框架的集成了，冲冲冲💪💪

【学无止境❤️谦卑而行】欢迎关注白羊🐏，感谢观看ヾ(◍°∇°◍)ﾉﾞ

文章标签：
云数据库 RDS MySQL 版
Java
JavaScript
前端开发
关系型数据库
MySQL
mybatis
API
数据格式
数据库
数据库连接
关键词：
VUE.js项目
项目Spring Boot
集成项目
集成Spring Boot
集成springboot
相关实践学习
如何在云端创建MySQL数据库
开始实验后，系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心，利用清洁计算为万物互联的新世界提供源源不断的能源动力，目前开服的区域包括中国（华北、华东、华南、香港）、新加坡、美国（美东、美西）、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程，来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品：云服务器ECS 云服务器 ECS（Elastic Compute Service）是一种弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
Java白羊
目录
相关文章
我是快乐的嘟嘟
|
22天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
我是快乐的嘟嘟
120 63
我是快乐的嘟嘟
|
8天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
78 26
刘大猫.
|
17天前
|
Java 应用服务中间件
SpringBoot获取项目文件的绝对路径和相对路径
SpringBoot获取项目文件的绝对路径和相对路径
刘大猫.
54 1
SpringBoot获取项目文件的绝对路径和相对路径
蓝易云
|
8天前
|
存储 运维 安全
Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制
通过以上措施，可以保证Spring Boot项目的配置管理在专业水准上，并且易于维护和管理，符合搜索引擎收录标准。
蓝易云
19 2
刘大猫.
|
12天前
|
分布式计算 关系型数据库 MySQL
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型 图像处理 光通信 分布式计算 算法语言 信息技术 计算机应用
刘大猫.
35 8
潇洒洒
|
12天前
|
XML Java 数据库连接
SpringBoot集成Flowable：打造强大的工作流管理系统
在企业级应用开发中，工作流管理是一个核心组件，它能够帮助我们定义、执行和管理业务流程。Flowable是一个开源的工作流和业务流程管理（BPM）平台，它提供了强大的工作流引擎和建模工具。结合SpringBoot，我们可以快速构建一个高效、灵活的工作流管理系统。本文将探讨如何将Flowable集成到SpringBoot应用中，并展示其强大的功能。
潇洒洒
47 1
刘大猫.
|
19天前
|
JavaScript 前端开发 Java
SpringBoot项目的html页面使用axios进行get post请求
SpringBoot项目的html页面使用axios进行get post请求
刘大猫.
40 2
刘大猫.
|
19天前
|
前端开发 Java Spring
SpringBoot项目thymeleaf页面支持词条国际化切换
SpringBoot项目thymeleaf页面支持词条国际化切换
刘大猫.
49 2
刘大猫.
|
19天前
|
JSON Java 数据库
SpringBoot项目使用AOP及自定义注解保存操作日志
SpringBoot项目使用AOP及自定义注解保存操作日志
刘大猫.
34 1
dufadayang
|
25天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素，没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中，要保持灵活性，根据项目的发展和变化适时调整模块格式。
dufadayang
20 7

热门文章

最新文章

  • 1
    丰富、连接、待集成—MaxCompute 生态再出发
  • 2
    devops-在jenkins-slave(k8s)中集成Jmeter使用
  • 3
    如何选择数据集成方式-离线&实时
  • 4
    [技巧]使用Xcode集成的HeaderDoc自动生成注释和开发文档
  • 5
    IOS快速集成下拉上拉刷新
  • 6
    Spring Cloud Alibaba 实操 (十二) 集成dubbo
  • 7
    开源跨平台IOT通讯框架ServerSuperIO，集成到NuGet程序包管理器，以及Demo使用说明
  • 8
    YOLOU 集成超轻量化 YOLO 系列模型YOLO-Fastest v2，ONNX一键导出部署！（二）
  • 9
    乐视移动直播的集成
  • 10
    java springboot集成微信小程序【详细教程】
  • 1
    如何在vue添加echarts图表
    76
  • 2
    使用Vue+ ECharts进行动态图表展示
    239
  • 3
    Vue引入Echarts图表的使用
    73
  • 4
    vue echarts图表自适应屏幕变化
    288
  • 5
    vue使用echarts图表
    76
  • 6
    vue 引简单引入echarts图表
    102
  • 7
    Vue打包后Echarts图表不显示问题解决
    950
  • 8
    Vue+Echarts图表动态适配
    220
  • 9
    vue如何使用Echarts图表
    236
  • 10
    Vue数据双向绑定实现原理
    199

    • 相关课程

    更多
  • SpringBoot实战教程
  • SpringBoot快速掌握 - 核心技术
  • SpringBoot快速掌握 - 高级应用
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • Springboot项目云开发快速迁移

    • 相关电子书

    更多
  • 集成智能接入网关APP：优化企业级移动办公网络
  • Vue.js在前端服务化上的实践与探索
  • 云效助力企业集成安全到DevOps中

    • 相关实验场景

    更多
  • 从零搭建Spring Boot的Hello World
  • 搭建Java Web开发环境
  • 每个IT人都想学的“Web应用上云经典架构”实战
  • 零基础入门Serverless：TodoList应用创建
    • 下一篇
    阿里云OSS设置跨域访问