# yunji-root

**Repository Path**: White-lby/yunji-root

## Basic Information

- **Project Name**: yunji-root
- **Description**: 云迹项目服务端功能开发
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-11-29
- **Last Updated**: 2022-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 分布式

## README

# 全局图库组件
## 联动前端 https://gitee.com/White-lby/YunJI.git
# 1.      新建SpriingBoot项目，引入对应依赖包包



```
  <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.9</version>
        </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>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.8.10</version>
        </dependency>
```







# 2. 在 application.properties配置文件设置图片物理存放地址



```
web.uploadPath= D:/workspace3/images/

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root123
spring.datasource.password=Root_123
spring.datasource.url=jdbc:mysql://rm-bp169j3q9n43kxauzco.mysql.rds.aliyuncs.com:3306/mall?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC&allowMultiQueries=true
spring.datasource.druid.initial-size=8
spring.datasource.druid.min-idle=5
spring.datasource.druid.maxActive=200
spring.datasource.druid.maxWait=60000
```





# 3.数据库表结构



```
CREATE TABLE `a_tuku` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT '唯一编号',
  `name` varchar(100) DEFAULT NULL COMMENT '图片名称',
  `img` varchar(200) NOT NULL COMMENT '图片地址',
  `createTime` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
  PRIMARY KEY (`id`)
) 
```





# 4.新建配置类config/WebMvcConfig



```
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Value("${web.uploadPath}")
    private String baseUploadPath;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/images/**").addResourceLocations("file:"+baseUploadPath);
        WebMvcConfigurer.super.addResourceHandlers(registry);
    }
}
```





# 5.上传功能开发

## 5.1 dao层



```
@Mapper
public interface TukuDao {

    @Insert("insert scm_tuku (name,img) value (#{name},#{img})")
    int insert(String name,String img);

    @Select(" select  *  from scm_tuku ")
    List<Tuku> select();
}
```





## 5.2 Controller层



```
@RestController
@RequestMapping("/tuku-api/tuku")
public class TukuController {
    @Value("${web.uploadPath}")
    private String baseUploadPath;
    @Autowired
    private TukuDao tukuDao;

    @PostMapping("/add")
    public Integer add(@RequestBody Tuku model){
        String base64 = model.getBase64();
        String[] dataArray = StrUtil.splitToArray(base64, "base64,");
        byte[] bytes = Base64.decode(dataArray[1]);
        String imgName = model.getName();
        imgName = IdUtil.fastSimpleUUID() +"_"+ imgName;
        FileUtil.writeBytes(bytes,baseUploadPath+imgName);
        int rowNum = tukuDao.insert(imgName,"http://123.57.206.19:8083/images/"+imgName);
        return rowNum;
    }
     @GetMapping("/select")
    public List<Tuku> select(){
        return tukuDao.select();

    }
```



#  6. 前端代码

```
<template>
    
   <el-image v-if="props.modelValue" class="img" :src="props.modelValue"  @click="openTuku" />
      <el-icon v-else class="avatar-uploader-icon" @click="openTuku">
        <Plus />
      </el-icon>
    <el-drawer v-model="drawer" title="图库" size="30%">
        <el-upload class="avatar-uploader" :auto-upload="false" :show-file-list="false" :on-change="onChange">
            <img v-if="imgData.imgBase64" :src="imgData.imgBase64" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
                <Plus />
            </el-icon>
        </el-upload>
        <el-divider border-style="dashed" />
        <el-row :gutter="20">
            <el-col v-for="item in imgList">
                <el-image class="demo-image" @click='copy(item.img)' :src="item.img" />
            </el-col>

        </el-row>
    </el-drawer>

</template>
<script setup lang="ts">
import { onMounted, ref, reactive } from 'vue'

import { tukuApi } from "@/api/index"
import { ElMessage } from 'element-plus'

const props = defineProps({modelValue:{type:String,default:""},zhifubaoValue:{type:String}})
const emit =  defineEmits(['update:modelValue','update:zhifubaoValue'])


const imgList = ref([])
const drawer = ref(false)
const imgData = reactive({
    imgBase64: '',
    imgName: ""
})
const openTuku = () => {
    console.log(1111)
    drawer.value =true
  
}
const copy = async (imgUrl: string) => {
    
   emit('update:modelValue',imgUrl)
    drawer.value = false

}
onMounted(() => {
    callTukuApi()
})
const callTukuApi = () => {
    tukuApi.select.call().then((res) => {
        imgList.value = res
    })
}
const onChange = (uploadFile: any, uploadFiles: any) => {

    var reader = new FileReader();
    reader.readAsDataURL(uploadFile.raw);
    reader.onload = () => {
        imgData.imgBase64 = reader.result;
        imgData.imgName = uploadFile.raw.name;

        tukuApi.add.call({ base64: imgData.imgBase64, name: imgData.imgName }).then((res) => {
            if (res === 1) {
                ElMessage.success('上传成功')
                callTukuApi()
                setTimeout(() => {
                    imgData.imgBase64 = ""
                }, 2000)
            }
        })

    }


}

defineExpose({ drawer })
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}
.img{
  width: 100px; height: 100px;cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  padding: 2px;
}
.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px dashed var(--el-border-color);
  cursor: pointer;
}

.demo-image {
    border-radius: 0.2rem;
    width: 100px;
    height: 100px;
    cursor: pointer;
}

.el-col-24 {
    flex: 0 0 0%;
}
</style>
```
 
# 7. 分页插件使用

## 7.1. 分页插件引文

<https://github.com/pagehelper/Mybatis-PageHelper/blob/master/wikis/zh/HowToUse.md>

在root的pom文件导入依赖，同样在yuji-app的pom文件导入("其中版本号可不写")

```
  <dependency>
                <groupId>com.github.pagehelper</groupId>
                <artifactId>pagehelper-spring-boot-starter</artifactId>
                <version>1.4.5</version>
</dependency>
```

## 7.2. 使用

update修改：在VenueDao中添加：

```
   @Update( "update a_venue set name = #{name} ,img = #{img},province = #{province},city = #{city}," +
            "country = #{country},address = #{address},lng = #{lng},lat = #{lat}," +
            " brief = #{brief},seq = #{seq} where id = #{id}")
    int update(Venue venue);
```

这里首先对select方法进行一个更新，针对空格查询，代码更新多一个：trim

```
 " and name like concat ('%',trim(#{name}),'%') "
```

然后在VenueController层新增并修改：

```
 @PutMapping("/update") 
    public Integer update(@RequestBody Venue venue){
        return venueDao.update(venue);
    }
    
 @GetMapping("/select") 
    public PageInfo<Venue>  select(VenueQuery query){

        if(ObjectUtil.isNotEmpty(query.getPageNum()) && ObjectUtil.isNotEmpty(query.getPageSize())){
            PageHelper.startPage(query.getPageNum(), query.getPageSize());
        }

        List<Venue> venues = venueDao.select(query);
        PageInfo<Venue> PageInfo = new PageInfo<Venue>(venues);
        return PageInfo;
    }
```