diff --git a/src/api/product/brand.js b/src/api/product/brand.js
new file mode 100644
index 0000000..2c9799d
--- /dev/null
+++ b/src/api/product/brand.js
@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+export function insertBrand(brandInfo) {
+  return request({
+    url: '/product/brandInfo/insertBrand',
+    method: 'post',
+    data: brandInfo
+  })
+}
+
+export function getBrandList(likeName) {
+  return request({
+    url: '/product/brandInfo/getBrandList?likeName='+likeName,
+    method: 'get'
+  })
+}
+
+export function deleteBrandInfo(brandId) {
+  return request({
+    url: '/product/brandInfo/deleteBrandInfo',
+    method: 'get',
+    brandId
+  })
+}
diff --git a/src/views/product/brand/index.vue b/src/views/product/brand/index.vue
new file mode 100644
index 0000000..6fc527a
--- /dev/null
+++ b/src/views/product/brand/index.vue
@@ -0,0 +1,172 @@
+<template>
+  <div>
+
+    <el-table
+      :data="brandList"
+      style="width: 100%">
+      <el-table-column
+        label="品牌名称"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="品牌logo"
+        width="180">
+        <template slot-scope="scope">
+          <img :src="scope.row.logo" alt="图片损坏">
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="简单描述"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.introduction }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建人"
+        width="180">
+        <template slot-scope="scope">
+          <span style="margin-left: 10px">{{ scope.row.createBy }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="创建日期"
+        width="180">
+        <template slot-scope="scope">
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-button type="primary" size="mini" @click="isInsertBrandOpen = true">添加品牌</el-button>
+    <el-dialog title="品牌信息" :visible.sync="isInsertBrandOpen">
+      <el-form ref="form" :model="insertBrandReg" label-width="80px">
+        <el-form-item label="品牌名称">
+          <el-input v-model="insertBrandReg.name"></el-input>
+        </el-form-item>
+        <el-form-item label="品牌logo">
+          <upload-pic ref="uploadPic" @handle-image-url="handleImageUrl"></upload-pic>
+        </el-form-item>
+        <el-form-item label="简介" prop="remark">
+          <el-input v-model="insertBrandReg.introduction" placeholder="请输入内容" type="textarea"/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="isInsertBrandOpen = false">取 消</el-button>
+        <el-button type="primary" @click="insertBrandInfo">确 定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+import UploadPic from "@/views/product/upload/uploadPic.vue";
+import {deleteBrandInfo, getBrandList, insertBrand} from "@/api/product/brand";
+  export default {
+    name: "brand",
+    //import引入的组件需要注入到对象中才能使用"
+    components: {
+      UploadPic,
+    },
+    props: {},
+    data() {
+      //这里存放数据"
+
+      return {
+        imageUrl: "",
+        insertBrandReg:{},
+        isInsertBrandOpen: false,
+        brandList: [],
+        brandName: ""
+      };
+    },
+    //计算属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+      handleEdit(index, row) {
+        this.isInsertBrandOpen = true
+        this.insertBrandReg = row
+        console.log(index, row);
+      },
+      handleDelete(index, row) {
+        deleteBrandInfo(row.id).then(
+          res =>{
+            this.$message.success(res.msg)
+            this.getBrandList()
+          }
+        )
+        console.log(index, row);
+      },
+      getBrandList() {
+        getBrandList(this.brandName).then(
+          res =>{
+            this.brandList = res.data
+          }
+        )
+      },
+      insertBrandInfo() {
+        insertBrand(this.insertBrandReg).then(
+          res => {
+            console.log("添加品牌的结果是:",res)
+            this.$message.success(res.msg)
+            this.insertBrandReg = {}
+            this.imageUrl = ""
+            this.isInsertBrandOpen = false
+            this.getBrandList()
+          }
+        )
+      },
+      handleImageUrl() {
+        console.log("六六六")
+        const imageUrl = this.$refs.uploadPic.imageUrl;
+        this.insertBrandReg.logo = imageUrl
+        console.log("获取到的图片地址：", imageUrl);
+      },
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）",
+    created() {
+      this.getBrandList()
+    },
+    //生命周期 - 挂载完成（可以访问DOM元素）",
+    mounted() {
+    },
+    beforeCreate() {
+    }, //生命周期 - 创建之前",
+    beforeMount() {
+    }, //生命周期 - 挂载之前",
+    beforeUpdate() {
+    }, //生命周期 - 更新之前",
+    updated() {
+    }, //生命周期 - 更新之后",
+    beforeDestroy() {
+    }, //生命周期 - 销毁之前",
+    destroyed() {
+    }, //生命周期 - 销毁完成",
+    activated() {
+    } //如果页面有keep-alive缓存功能，这个函数会触发",
+  };
+</script>
+<style scoped>
+
+</style>
diff --git a/src/views/product/upload/uploadPic.vue b/src/views/product/upload/uploadPic.vue
new file mode 100644
index 0000000..a451e51
--- /dev/null
+++ b/src/views/product/upload/uploadPic.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <el-upload
+      style="width: auto; height: auto"
+      class="avatar-uploader"
+      action="http://localhost:9209/upload/uploadPic"
+      :show-file-list="false"
+      :on-success="handleAvatarSuccess"
+      :before-upload="beforeAvatarUpload">
+      <img v-if="imageUrl" :src="imageUrl" class="avatar">
+      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+    </el-upload>
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
+//例如：import 《组件名称》 from '《组件路径》,
+  export default {
+    name: "uploadPic",
+    //import引入的组件需要注入到对象中才能使用"
+    components: {},
+    props: {},
+    data() {
+      //这里存放数据"
+
+      return {
+        imageUrl: ""
+      };
+    },
+    //计算属性 类似于data概念",
+    computed: {},
+    //监控data中的数据变化",
+    watch: {},
+    //方法集合",
+    methods: {
+      handleAvatarSuccess(res, file) {
+        console.log(res,file)
+
+        this.imageUrl =res.data
+        this.$emit('handle-image-url', this.imageUrl);
+      },
+      beforeAvatarUpload(file) {
+        const isLt2M = file.size / 1024 / 1024 < 10;
+
+
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 10MB!');
+        }
+        return  isLt2M;
+      }
+    },
+    //生命周期 - 创建完成（可以访问当前this实例）",
+    created() {
+    },
+    //生命周期 - 挂载完成（可以访问DOM元素）",
+    mounted() {
+    },
+    beforeCreate() {
+    }, //生命周期 - 创建之前",
+    beforeMount() {
+    }, //生命周期 - 挂载之前",
+    beforeUpdate() {
+    }, //生命周期 - 更新之前",
+    updated() {
+    }, //生命周期 - 更新之后",
+    beforeDestroy() {
+    }, //生命周期 - 销毁之前",
+    destroyed() {
+    }, //生命周期 - 销毁完成",
+    activated() {
+    } //如果页面有keep-alive缓存功能，这个函数会触发",
+  };
+</script>
+<style scoped>
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+</style>