用SPRINGBOOT + VUE+Mybatis设计一个将后台动物的品种、数量、照片等信息上传至前端显示的代码

1. 后端代码

首先在Spring Boot中创建一个名为animal的项目，并添加以下依赖关系：

- Spring Web
- Spring Boot DevTools
- MyBatis Spring Boot Starter
- MySQL Driver

然后创建Animal实体类，代码如下：

public class Animal {
    private Long id;
    private String breed;
    private Integer quantity;
    private String photoUrl;
    // getters and setters
}

接下来创建AnimalMapper接口，用于定义数据库操作方法：

@Mapper
public interface AnimalMapper {
    @Select("SELECT * FROM animal")
    List<Animal> findAll();
    void save(Animal animal);
}

接着创建AnimalService接口和实现类：

@Service
public class AnimalServiceImpl implements AnimalService {
    @Autowired
    private AnimalMapper animalMapper;
    public List<Animal> findAll() {
        return animalMapper.findAll();
    }
    public void save(Animal animal) {
        animalMapper.save(animal);
    }
}

最后创建AnimalController控制器类，代码如下：

@RestController
@RequestMapping("/api/animal")
public class AnimalController {
    @Autowired
    private AnimalService animalService;
    @GetMapping
    public List<Animal> findAll() {
        return animalService.findAll();
    }
    @PostMapping
    public void save(@RequestBody Animal animal) {
        animalService.save(animal);
    }
}

2. 前端代码

创建一个名为animal的Vue项目，并安装以下依赖项：

- axios
- element-ui
- vue-router
- vuex

然后创建AnimalList.vue组件，代码如下：

<template>
  <div>
    <el-table :data="animals" style="width: 100%">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="breed" label="品种"></el-table-column>
      <el-table-column prop="quantity" label="数量"></el-table-column>
      <el-table-column label="照片">
        <template slot-scope="scope">
          <img :src="scope.row.photoUrl" alt="animal" style="width: 100px;height: 100px">
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      animals: []
    }
  },
  mounted () {
    axios.get('/api/animal')
      .then(resp => {
        this.animals = resp.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

接着创建AnimalForm.vue组件，用于添加新的动物信息：

<template>
  <div>
    <el-form :model="animal" :rules="rules" ref="animalForm" label-width="80px">
      <el-form-item label="品种" prop="breed">
        <el-input v-model="animal.breed"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="quantity">
        <el-input-number v-model="animal.quantity" :min="1"></el-input-number>
      </el-form-item>
      <el-form-item label="照片" prop="photoUrl">
        <el-upload
          class="avatar-uploader"
          ref="upload"
          :action="'/api/animal/photo'"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
        >
          <img v-if="animal.photoUrl" :src="animal.photoUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="submitForm('animalForm')">提交</el-button>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      animal: {
        breed: '',
        quantity: 0,
        photoUrl: ''
      },
      rules: {
        breed: [
          { required: true, message: '请输入动物品种', trigger: 'blur' },
        ],
        quantity: [
          { required: true, message: '请输入动物数量', trigger: 'blur' },
          { type: 'number', message: '必须为数字值', trigger: 'blur' },
          { min: 1, message: '数量必须大于0', trigger: 'blur' }
        ],
        photoUrl: [
          { required: true, message: '请上传动物照片', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          axios.post('/api/animal', this.animal)
            .then(resp => {
              this.$message.success('添加成功')
              this.$router.push('/')
            })
            .catch(error => {
              console.log(error)
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleUploadSuccess(resp) {
      this.animal.photoUrl = resp.data
    }
  }
}
</script>

最后在App.vue中添加路由配置：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data () {
    return {}
  },
  created () {},
  mounted () {},
  methods: {},
  computed: {},
  watch: {},
  router: {
    routes: [
      {
        path: '/',
        name: 'animalList',
        component: () => import('./components/AnimalList.vue')
      },
      {
        path: '/add',
        name: 'addAnimal',
        component: () => import('./components/AnimalForm.vue')
      }
    ]
  }
}
</script>

这样，就完成了将后台动物的品种、数量、照片等信息上传至前端显示的代码。