Docker Compose部署多个应用实战练习部署nginx和jar包。

部署项目为若依的前后端分离项目,前端使用vue+nginx部署。后端springBoot，以jar包部署。



# 一丶准备资源

文件列表:

- app
  - app.jar
- nginx
  - cong
  - html
  - log
- docker-compose.yml

# 二、配置nginx

&emsp;首先nginx配置文件请根据我的{% post_link 运维/docker/4、Docker安装软件 docker安装nginx文章%}，3个文件夹保存到宿主机中，分别为:conf、html、log

&emsp;nginx配置文件根据自己实际测试项目配置，不会的百度的nginx部署vue项目。

# 三、编写docker-compose.yml

问题: 在反复部署中我遇到后端服务port 端口不生效

解决:加入了`stdin_open`、`tty` 。其中 `stdin_open` 相当于 `run` 命令中的 `-d`,其中 `tty` 相当于 `run` 命令中的 `-i`

```yml
version: '3'        # 自定义版本号，一般是2，3
services:
    #前端 nginx
    my-nginx-pro1: # 服务名称
        image: nginx # 创建容器时所需的镜像
        container_name: my-nginx-pro1 # 容器名称，默认为"工程名称_服务条目名称_序号"
        restart: "always" #重启策略，能够使服务保持始终运行，生产环境推荐使用
        volumes:
            # :号左边是宿主机的nginx的文件路径，右边是nginx容器的文件路径
            - /mymkdir/softwore/docker/test/nginx/conf/nginx.conf:/etc/nginx/nginx.conf
            - /mymkdir/softwore/docker/test/nginx/conf/conf.d:/etc/nginx/conf.d
            - /mymkdir/softwore/docker/test/nginx/log:/var/log/nginx
            - /mymkdir/softwore/docker/test/nginx/html:/usr/share/nginx/html
        ports: # 宿主机与容器的端口映射关系
            - "8080:8080" # 左边宿主机端口:右边容器端口
        networks: # 配置容器连接的网络，引用顶级 networks 下的条目
            data_security:
                ipv4_address: 192.128.0.2
        privileged: true      # 这个必须要，解决nginx的文件调用的权限问题
    #后端
    my-web-pro1:	# 服务名称
        image: openjdk:8  # 创建容器时所需的镜像
        container_name: my-web-pro1 # 容器名称，默认为"工程名称_服务条目名称_序号"
        ports: # 宿主机与容器的端口映射关系
            - '8090:8090' # 左边宿主机端口:右边容器端口
        restart: "always" #重启策略，能够使服务保持始终运行，生产环境推荐使用
        volumes:
            - ./app:/app
        # jar 包名称必须改成你自己的
        command: java -Duser.timezone=GMT+8 -jar /app/app.jar
        #build: . #表示以当前目录下的Dockerfile开始构建镜像
        networks:	# 配置容器连接的网络，引用顶级 networks 下的条目
            data_security:
                ipv4_address: 192.128.0.3
        stdin_open: true #stdin_open相当于run命令中的-d
        tty: true #tty相当于run命令中的-i
#网络服务
networks:
    data_security:      # 自定义网络名字
        driver: bridge	  # 网络模式，默认为 bridge
        ipam:
            config:
                - subnet: 192.128.0.0/16           #自定义固定容器ip 实现容器间通讯，增强docker-compose项目可移植性

```

# 四、执行部署

```shell
#执行部署 建议使用-d后台执行
[root@MiWiFi-RA81-srv test]# docker-compose up -d
[+] Running 2/2
 ⠿ Container my-web-pro1    Started                                                                                         1.1s
 ⠿ Container my-nginx-pro1  Started
 #执行完成之后 查看容器是否启动
 [root@MiWiFi-RA81-srv test]# docker ps
 #部署失败执行删除所有容器继续重来
[root@MiWiFi-RA81-srv test]# docker rm -f $(docker ps -aq)
```

# 五、浏览器查看

![image-20230322214840203](https://chensh888.com:8090/file/blog/2023/20230322214843.png)

Docker Compose+nginx+jar部署

-  网络数据请求



# 一、WXML 模板语法

## 1、发起 GET 请求

调用微信小程序提供的 wx.request() 方法，可以发起 GET 数据请求，示例代码如下：

```
wx.request({
      url: 'http://localhost/ceshi',
      method:'GET',
      //拼接在URL后中
      parm:{
          name: '张三'
        },  
      data:{
        age: 18
      },
      success:(res)=>{
        console.log("成功!");
      },
      fail:(res)=>{
        console.log(res);
      },
    })
```

## 2、发起 POST请求

```
wx.request({
      url: 'http://localhost/ceshi',
      method:'POST',
      //拼接在URL后中
      parm:{
          name: '张三'
        },  
      data:{
        age: 18
      },
      success:(res)=>{
        console.log("成功!");
      },
      fail:(res)=>{
        console.log(res);
      },
    })
```

## 3、小程序中网络数据请求的限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下

两个限制：

① 只能请求 HTTPS 类型的接口

② 必须将接口的域名添加到信任列表中



**注**:跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

![image-20230213143426238](https://chensh888.com:8090/file/blog/2023/20230213143428.png)

## 4、配置 request 合法域名

需求描述：假设在自己的微信小程序中，希望请求 "自己的域名" 域名下的接口

配置步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名

注意事项：

① 域名只支持 https 协议

② 域名不能使用 IP 地址或 localhost

③ 域名必须经过 ICP 备案

④ 服务器域名一个月内最多可申请 5 次修改

## 5、关于跨域和Ajax的说明

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。   

Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”。

微信小程序-GET、POST请求

-  WXML 模板语法
-  WXSS 模板样式
- 全局配置
- 页面配置



# 一、WXML 模板语法

## 1、数据绑定

① 在 data 中定义数据

② 在 WXML 中使用数据

### 1.在 data 中定义页面的数据

在页面对应的 .js 文件中，把数据定义到 data 对象中即可：

```
Page({

  /**
   * 页面的初始数据
   */
  data: {
  	info: 'Hello word!',
  	imgSrc: '/images/漩涡鸣人.jpg',//存储图片位置路径
	randomNum: Math.random().toFixed(2) //生成一个带两位随机数,
	count: 0 ,
    msg: '你好',
    type: 2,
    flag: false,
	arr1: ['苹果','香蕉','梨'],
    arr2: [{id:'1',name:'苹果'},{id:'2',name:'香蕉'}],
  }
})
```

### 2、在 WXML 中使用数据

把data中的数据绑定到页面中渲染，使用 **Mustache 语法**（双大括号）将变量包起来即可

Mustache 语法的主要应用场景如下：

- 绑定内容
- 绑定属性
- 运算（三元运算、算术运算等）

```
#使用
<view>{{ info }}</view>
#绑定属性
<image src="{{imgSrc}}" mode="widthFix" />
#三元运算
<view>
  {{ randomNum > 5?"随机数大于5":"随机数小于5"}}
</view>
```

## 2、 事件绑定

### 1.什么是事件

事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

![image-20230213103738055](https://chensh888.com:8090/file/blog/2023/20230213103742.png)

### 2.小程序常用事件

| 类型   | 绑定方式                  | 事件描述                                        |
| ------ | ------------------------- | ----------------------------------------------- |
| tap    | bindtap 或 bind:tap       | 手指触摸后马上离开，类似于 HTML 中的 click 事件 |
| input  | bindinput 或 bind:input   | 文本框的输入事件                                |
| change | bindchange 或 bind:change | 状态改变时触发                                  |

### 3.事件对象的属性列表

当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示：

|	属性	|	类型	|	说明|
| ---- | ---- | ---- |
|	type	|	String	|	事件类型|
|	timeStamp	|	Integer	|	页面打开到触发事件所经过的毫秒数|
|	target	|	object	|	触发事件的组件的一些属性值集合|
|	currentTarget	|	object	|	当前组件的一些属性值集合|
|	detail	|	object	|	额外的信息|
|	touches	|	Array	|	触摸事件，当前停留在屏幕中的触摸点信息的数组|
|	changedTouches	|	Array	|	触摸事件，当前变化的触摸点信息的数组|

### 4.target 和currentTarget 的区别

**target**是**触发该事件的源头组件**，而**currentTarget**则是**当前事件所绑定的组件**。举例如下：

![image-20230213105656116](https://chensh888.com:8090/file/blog/2023/20230213105657.png)

点击内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view 的tap 事件处理函数。

此时，对于外层的view 来说：

- e.target指向的是触发事件的源头组件，因此，e.target是内部的按钮组件
- e.currentTarget指向的是当前正在触发事件的那个组件，因此，e.currentTarget是当前的view 组件

### 5.bindtap的语法格式

在小程序中，不存在HTML 中的onclick 鼠标点击事件，而是通过tap 事件来响应用户的触摸行为。

①通过bindtap，可以为组件绑定tap 触摸事件，语法如下：

```
<view bindtap="outerHandler">
  <button type="primary">按钮</button>
</view>
```

②在页面的.js 文件中定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收：

```
Page({
  
/**
 * 触发打印事件
 * @param {事件} e 
 */
  outerHandler(e){
    console.log(e);
  }
})
```

### 6.data中的数据赋值

```
Page({
    data: {
    count: 0
  },
  /**
   * 赋新值
   */
  changeCount(){
    this.setData({
      count: this.data.count + 1
    })
  }
})
```

### 7.事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。

可以为组件提供data-*自定义属性传参，其中* 代表的是参数的名字,例如:

```
<view bindtap="btnTapParm">
  <button type="primary" data-count="{{123}}">按钮</button>
</view>

#事件函数中需写入接受参数名
Page({
  
/**
 * 触发打印事件
 * @param {事件} e 
 */
  outerHandler(e){
    console.log(e);
  }
})
```

### 8.bindinput的语法格式

在小程序中，通过input 事件来响应文本框的输入事件，语法格式如下：

①通过bindinput，可以为文本框绑定输入事件：

```
<input bindinput="inputHandler"/>
<input type="text" value="{{ msg }}" bindinput="inputChange"/> 
```

②在页面的.js 文件中定义事件处理函数：

```
Page({
  /**
   * input 输入框事件函数
   */
  inputChange(e){
    console.log(e.detail.value);
  },
   /**
   * input 输入框事件函数 赋新值
   */
  inputChange(e){
    this.setData({
      msg: e.detail.value
    })
  },
})
```

### 9.条件渲染

1. **wx:if**

   ```
   <view wx:if="{{type ===1}}">男</view>
   <view wx:elif="{{type ===2}}">女</view>
   <view wx:else>其他</view>
   
   # 结合<block> 使用wx:if
   如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block> 标签上使用wx:if 控制属性，示例如下：
   
   <block wx:if="{{true}}">
   <view>男</view>
   <view>女</view>
   </block>
   ```


2. **hidden** 

   ```
   
   <view hidden="{{flag}}">hidden条件为true隐藏</view>
   ```
   **wx:if**与**hidden**的对比

   ①运行方式不同

   - wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏

   - hidden 以切换样式的方式（display: none/block;），控制元素的显示与隐藏

   ②使用建议

   - 频繁切换时，建议使用hidden

   - 控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else 进行展示与隐藏的切换
3. **wx:for**

   - 使用wx:for-index 可以指定当前循环项的索引的变量名

   - 使用wx:for-item 可以指定当前项的变量名
   - 使用wx:key 提高渲染的效率

   ```
   
   
   <view wx:for="{{arr1}}" wx:key="*this">
     索引:{{index+1}},属性值:{{item}}
   </view>
   <view wx:for="{{arr2}}" wx:key="id" class="username">
     索引:{{index}},id:{{item.id}},name:{{item.name}}
   </view>
   ```

   

# 二、 模板样式

## 1. 什么是WXSS

WXSS (WeiXin Style Sheets)是一套样式语言，用于美化WXML 的组件样式，类似于网页开发中的CSS。

## 2.WXSS和CSS的关系
WXSS 具有CSS 大部分特性，同时，WXSS 还对CSS 进行了扩充以及修改，以适应微信小程序的开发。与CSS 相比，WXSS 扩展的特性有：
- rpx尺寸单位

  > #1、rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。
  >
  > #2、rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，
  >
  > 在宽度上等分为750 份（即：当前屏幕的总宽度为750rpx）。
  >
  > ​	- 在较小的设备上，1rpx 所代表的宽度较小
  >
  > ​	- 在较大的设备上，1rpx 所代表的宽度较大
  >
  > 小程序在不同设备上运行的时候，会自动把rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。
  >
  > #3、**rpx** 与px之间的单位换算
  >
  > 在iPhone6 上，屏幕宽度为375px，共有750 个物理像素，等分为750rpx。则：
  >
  > 750rpx= 375px= 750 物理像素；
  >
  > 官方建议：开发微信小程序时，设计师可以用iPhone6作为视觉稿的标准。
  >
  > 开发举例：在iPhone6 上如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为200rpx 和40rpx。
- @import 样式导入
  
  >  #1、什么是样式导入
  >
  > 使用WXSS 提供的@import 语法，可以导入外联的样式表。
  >
  > #2、@import 的语法格式
  >
  > @import 后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例如下：
  >
  > ```
  > /** common.wxss **/
  > .username{
  >  color: red;
  > }
  > /** index.wxss **/
  > @import "/common/common.wxss";
  > input {
  >   border: 1px solid red;
  >   margin: 5px;
  >   padding: 5px;
  >   border-radius: 5px; /*圆角*/
  > }
  > ```
  >

## 3.全局样式和局部样式

**全局样式**

定义在app.wxss 中的样式为全局样式，作用于每一个页面。

**局部样式**

在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。

**注意**：

- 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式

- 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

# 三、全局配置

**全局配置文件及常用的配置项**

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：

① pages;记录当前小程序所有页面的存放路径

② window;全局设置小程序窗口的外观

③ tabBar;设置小程序底部的 tabBar 效果

④ style;是否启用新版的组件样式

## 1、**全局配置 -** window

### 1. 小程序窗口的组成部分

<img src="https://chensh888.com:8090/file/blog/2023/20230213132409.png" alt="image-20230213132407513" style="zoom: 80%;" />

### 2.window 节点常用的配置项

|	属性名	|	类型	|	默认值	|	说明|
| ---- | ---- | ---- | ---- |
|	navigationBarTitleText	|	String	|	字符串	|	导航栏标题文字内容|
|	navigationBarBackgroundColor	|	HexColor	|	#000000	|	导航栏背景颜色，如 #000000|
|	navigationBarTextStyle	|	String	|	white	|	导航栏标题颜色，仅支持 black / white|
|	backgroundColor	|	HexColor	|	#ffffff	|	窗口的背景色|
|	backgroundTextStyle	|	String	|	dark	|	下拉 loading 的样式，仅支持 dark / light|
|	enablePullDownRefresh	|	Boolean	|	false	|	是否全局开启下拉刷新|
|	onReachBottomDistance	|	Number	|	50	|	页面上拉触底事件触发时距页面底部距离，单位为 px|

## 2、**全局配置 -** tabBar

### 1. 什么是 tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面

的快速切换。小程序中通常将其分为：

- 底部 tabBar

- 顶部 tabBar

![image-20230213140808945](https://chensh888.com:8090/file/blog/2023/20230213140811.png)

**注意**：

- tabBar中只能配置最少 2 个、最多 5 个 tab 页签

- 当渲染顶部 tabBar 时，不显示 icon，只显示文本

### **2. tabBar** 的个组成部分

①backgroundColor：tabBar 的背景色

②selectedIconPath：选中时的图片路径

③borderStyle：tabBar 上边框的颜色

④iconPath：未选中时的图片路径

⑤selectedColor：tab 上的文字选中时的颜色

⑥color：tab 上文字的默认（未选中）颜色

![image-20230213140854858](https://chensh888.com:8090/file/blog/2023/20230213140856.png)

### 3.tabBar节点的配置项
|	属性	|	类型	|	必填	|	默认值	|	描述
| ---- | ---- | ---- | ---- | ---- 
|	position	|	String	|	否	|	bottom	|	tabBar 的位置，仅支持 bottom/top
|	borderStyle	|	String	|	否	|	black	|	tabBar 上边框的颜色，仅支持 black/white
|	color	|	HexColor	|	否	|		|	tab 上文字的默认 (未选中) 颜色
|	selectedColor	|	HexColor	|	否	|		|	tab 上的文字选中时的颜色
|	backgroundColor	|	HexColor	|	否	|		|	tabBar 的背景色
|	list	|	Array	|	是	|		|	tab 页签的列表,最少 2个、最多 5个 tab

### 4.每个tab项的配置选项

|	属性	|	类型	|	必填	|	描述|
| ---- | ---- | ---- | ---- |
|	pagePath	|	String	|	是	|	页面路径，页面必须在 pages 中预先定义|
|	text	|	String	|	是	|	tab 上显示的文字|
|	iconPath	|	String	| 否 |	未选中时的图标路径;当 postion 为 top 时，不显示 icon|
|	selectedlconPath	|	String	| 否 |	选中时的图标路径;当 postion 为 top 时，不显示 icon|

# 四、页面配置

## 1、页面配置文件的作用

小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

## 2、页面配置和全局配置的关系
小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。  
如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

## 3、页面配置中常用的配置项

|	属性	|	类型	|	默认值	|	描述|
| ---- | ---- | ---- | ---- |
|	navigationBarBackgroundColor	|	HexColor	|	#000000	|	当前页面导航栏背景颜色，如 #000000|
|	navigationBarTextStvle	|	String	|	white	|	当前页面导航栏标题颜色，仅支持 black / white|
|	navigationBarTitleText	|	String	|		|	当前页面导航栏标题文字内容|
|	backgroundColor	|	HexColor	|	#ffffff	|	当前页面霞凑豺妇洁柄剥鞍啊鞍搬记绷齿北居傲的背景色|
|	backgroundTextStyle	|	String	|	dark	|	当前页面下拉 loading 的样式，仅支持 dark / light|
|	enablePullDownRefresh	|	Boolean	|	FALSE	|	是否为当前页面开启下拉刷新的效果|
|	onReachBottomDistance	|	Number	|	50	|	页面上拉触底事件触发时距页面底部距离，单位为 px|

微信小程序-模板与配置

遇到前端传入16进制颜色,如 #000000，而后台PDF处理需要RGB,所以需要把16进制转换为RGB。



#### 1、iText7官方依赖自带了转换类

```
导入iText7全家桶依赖
<dependency>
            <groupId>com.itextpdf</groupId>
            <artifactId>itext7-core</artifactId>
            <version>${itextpdf.version}</version>
            <type>pom</type>
        </dependency>
```
####  2、通过WebColors类转换

```
package com.itextpdf.kernel.colors;

DeviceRgb rgbColor = WebColors.getRGBColor("#FF0000");
```

iText7通过16进制颜色转换RGB

日常使用Typora写博客,遇到图片需要手动上传的服务器映射,Typora软件新版本支持自定义上传到图床本篇记录上传到本人服务器中。


> 实现步骤(java实现):
>
> 1、Typora使用Custom Command,请求到本地jar包main方法中，请求参数为本地图片路径
>
> 2、jar包拿到本地图片路径,请求服务器上传文件接口
>
> 3、服务器存储,并且返回url映射地址
>
> 话不多说,直接撸代码~~~

### 一、本地jar包

#### 1、idea创建SpringBoot空项目,可以不勾选任何依赖

<img src="https://chensh888.com:8090/file/blog/2023/20230117183909.png" alt="image-20230117183906997" style="zoom:50%;" />

#### 2、pom.xml配置，导入hutool包。(直接使用我的)

```
<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-logging</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.3.10</version>
        </dependency>
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>3.12.0</version>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>
    </dependencies>
```

#### 3、创建类TyporaUploadFile，mian方法使用hutool上传到服务器接口

```
import cn.hutool.core.io.FileUtil;
import cn.hutool.http.HttpUtil;

import java.util.Arrays;
import java.util.HashMap;

/**
 * @author Chen Shaohua
 * @date 2023/1/17 15:44
 */
public class TyporaUploadFile {
    public static void main(String[] args) {
        System.out.println("本地文件:" + Arrays.toString(args));
        if (args.length == 0) return;
        for (String filePath : args) {
            HashMap<String, Object> paramMap = new HashMap<>();
            paramMap.put("file", FileUtil.file(filePath));
            String post = HttpUtil.post("Http://服务器地址:8090/file/saveFile", paramMap);
            System.out.println(post);
        }
    }
}
```

#### 4、编译jar包配置

**右上角File -> Project Structure**

![image-20230117184435403](https://chensh888.com:8090/file/blog/2023/20230117184641.png)
***
**Artifacts - > 右边+号 -> 选择第二个**

<img src="https://chensh888.com:8090/file/blog/2023/20230117184638.png" alt="image-20230117184636190" style="zoom: 80%;" />

***

**编译设置,选择后点ok**

<img src="https://chensh888.com:8090/file/blog/2023/20230117185151.png" alt="image-20230117185149811" style="zoom: 80%;" />

***

**设置完成如下**

<img src="https://chensh888.com:8090/file/blog/2023/20230117185231.png" alt="image-20230117185229931" style="zoom: 80%;" />

#### 5、编译

**最上方菜单栏点击,build -> build Artifacts -> 如图下 -> build**

![image-20230117185427395](https://chensh888.com:8090/file/blog/2023/20230117185430.png)

#### 6、编辑后jar包,放到自己常用位置

![image-20230117185503328](https://chensh888.com:8090/file/blog/2023/20230117191347.png)

### 二、服务器上传文件接口

#### 1、config配置与本地文件映射

**地址为需要和本地那个文件夹配置映射,不懂百度有详解**

<a style="color:red">注:必须以/结尾，否则上传文件完成后,url访问不到,404</a>

![image-20230117185825760](https://chensh888.com:8090/file/blog/2023/20230117191351.png)

```
package com.example.aliyuntest.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    //跨域配置，前端和后端端口不一样
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        //8080前端使用的端口号
        registry.addMapping("/**");
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/file/**").addResourceLocations("file:/myData/testPro/fileTemp/");
    }
}
```



#### 2、Controller编写上传接口

```
package com.example.aliyuntest.controller;

import cn.hutool.core.date.DatePattern;
import cn.hutool.core.date.DateUtil;
import cn.hutool.core.io.FileUtil;
import cn.hutool.json.JSONObject;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletRequest;
import java.io.File;

/**
 * @author Chen Shaohua
 * @date 2022/11/15 16:53
 */
@RestController
@RequestMapping("/file")
@CrossOrigin
@Slf4j
public class FileController {

    @RequestMapping(value = "/saveFile")
    public String paddleOcr(MultipartFile file,  HttpServletRequest request) {
        if (file ==null || file.isEmpty()) {
            return "文件为空!";
        }
        String url = "http://服务器地址:" + request.getLocalPort() + "/file/";
        try {
            String name = file.getOriginalFilename();
            //获取主文件名 文件后缀
            String suffix = FileUtil.getSuffix(name);
            //文件名称为日期时间简写,如:20230117190235  年月日时分秒
            String fileName = DateUtil.format(DateUtil.date(), DatePattern.PURE_DATETIME_PATTERN) + "." + suffix;
            //一般情况为 年 月 项目名
            String fileNamePath = DateUtil.format(DateUtil.date(), "yyyy/MM/")+ fileName;;
            //创建父文件夹,不存在创建
            FileUtil.mkdir("/myData/testPro/fileTemp/" + fileNamePath + fileName);
            //创建文件
            File newFile = new File("/myData/testPro/fileTemp/" + fileNamePath  + fileName);
            //写入文件
            file.transferTo(newFile);
            //返回url地址
            return url + fileNamePath;
        } catch (Exception e) {
            log.info("保存文件异常!", e);
            return "保存文件异常!" + e.getMessage();
        }
    }
}
```

#### 3、application.yml配置

```
server:
  port: 8090

spring:
  servlet:
    multipart:
      enabled: true
      max-file-size: 10240MB   #最大文件size
      max-request-size: 10240MB #每次请求最大size
      
logging:
  file:
    name: ./log/logs.log
```

#### 4、完整项目

![image-20230117191519076](https://chensh888.com:8090/file/blog/2023/20230117191520.png)

### 三、Typora配置

打开左上角设置 -> 偏好设置，如图下

命令行代码执行本地jar包的main方法，本地必须配置环境变量(百度一大堆)

```
java -jar jar包放置位置 ...文件路径(可配多个)
```

![image-20230117183350017](https://chensh888.com:8090/file/blog/2023/20230117183352.png)

***

**点击验证图片上传选项测试**

![image-20230117191014242](https://chensh888.com:8090/file/blog/2023/20230117191023.png)

***

**编写时上传**

截屏 -> 粘贴图片 -> 右击图片点击上传

### 四、完整项目已上传到gitee中,欢迎大家使用

配置文件映射路径已做动态配置

[完整代码地址gitee](https://gitee.com/ChenShaoshao/aliyun-test)