commit 8b1465fb0597d2eeeea6895d1aa5c19b24b6d351
Author: sunjiahao <sunjiahao@example.com>
Date:   Wed Dec 4 11:09:33 2024 +0800

    sjh

diff --git a/404.vue b/404.vue
new file mode 100644
index 00000000..e8c28f52
--- /dev/null
+++ b/404.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div style="height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center">
+      <div style="font-size: 40px">404 找不到页面 <router-link to="/">返回首页</router-link></div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "404",
+  data() {
+    return {}
+  },
+  created() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/Front.vue b/Front.vue
new file mode 100644
index 00000000..30a052b7
--- /dev/null
+++ b/Front.vue
@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <!-- 头部 -->
+    <div class="front-header">
+      <div class="front-header-left" @click="navTo('/front/home')">
+        <img src="@/assets/imgs/logo.png" alt="">
+        <div class="title">SuperRice</div>
+      </div>
+      <div class="front-header-center" style="text-align: right">
+        <el-input style="width: 200px" placeholder="请输入商品名称" v-model="name"></el-input>
+        <el-button type="primary" style="margin-left: 5px" @click="search">搜素</el-button>
+      </div>
+      <div class="front-header-right">
+        <div v-if="!user.username">
+          <el-button @click="$router.push('/login')">登录</el-button>
+          <el-button @click="$router.push('/register')">注册</el-button>
+        </div>
+        <div v-else>
+          <el-dropdown>
+            <div class="front-header-dropdown">
+              <img @click="navToPerson" :src="user.avatar" alt="">
+              <div style="margin-left: 10px">
+                <span>{{ user.name }}</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
+              </div>
+            </div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>
+                <div style="text-decoration: none" @click="navTo('/front/cart')">我的购物车</div>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <div style="text-decoration: none" @click="navTo('/front/collect')">我的收藏</div>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <div style="text-decoration: none" @click="navTo('/front/address')">我的地址</div>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <div style="text-decoration: none" @click="navTo('/front/orders')">我的订单</div>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <div style="text-decoration: none" @click="logout">退出</div>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </div>
+      </div>
+    </div>
+    <!-- 主体 -->
+    <div class="main-body">
+      <router-view ref="child" @update:user="updateUser" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FrontLayout",
+
+  data() {
+    return {
+      top: '',
+      notice: [],
+      user: JSON.parse(localStorage.getItem("xm-user") || '{}'),
+      name: '' // 初始化为一个空字符串
+    }
+  },
+
+  mounted() {
+    this.loadNotice()
+  },
+  methods: {
+    loadNotice() {
+      this.$request.get('/notice/selectAll').then(res => {
+        this.notice = res.data
+        let i = 0
+        if (this.notice && this.notice.length) {
+          this.top = this.notice[0].content
+          setInterval(() => {
+            this.top = this.notice[i].content
+            i++
+            if (i === this.notice.length) {
+              i = 0
+            }
+          }, 2500)
+        }
+      })
+    },
+    updateUser() {
+      this.user = JSON.parse(localStorage.getItem('xm-user') || '{}')   // 重新获取下用户的最新信息
+    },
+    navToPerson() {
+      location.href = '/front/person'
+    },
+    navTo(url) {
+      location.href = url
+    },
+    // 退出登录
+    logout() {
+      localStorage.removeItem("xm-user");
+      this.$router.push("/login");
+    },
+    search() {
+      let name = this.name ? this.name : ''
+      location.href = '/front/search?name=' + name
+    },
+  }
+
+}
+</script>
+
+<style scoped>
+@import "@/assets/css/front.css";
+</style>
+   
\ No newline at end of file
diff --git a/Login.vue b/Login.vue
new file mode 100644
index 00000000..7789c366
--- /dev/null
+++ b/Login.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="container">
+    <div style="width: 400px; padding: 30px; background-color: white; border-radius: 5px;">
+      <div style="text-align: center; font-size: 20px; margin-bottom: 20px; color: #333">欢迎登录SuperRice</div>
+      <el-form :model="form" :rules="rules" ref="formRef">
+        <el-form-item prop="username">
+          <el-input prefix-icon="el-icon-user" placeholder="请输入账号" v-model="form.username"></el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password  v-model="form.password"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="form.role" placeholder="请选择角色" style="width: 100%">
+            <el-option label="管理员" value="ADMIN"></el-option>
+            <el-option label="商家" value="BUSINESS"></el-option>
+            <el-option label="用户" value="USER"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button style="width: 100%; background-color: #AF3939FF; border-color: #AF3939FF; color: white" @click="login">登 录</el-button>
+        </el-form-item>
+        <div style="display: flex; align-items: center">
+          <div style="flex: 1"></div>
+          <div style="flex: 1; text-align: right">
+            还没有账号？请 <a href="/register">注册</a>
+          </div>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Login",
+  data() {
+    return {
+      form: { },
+      rules: {
+        username: [
+          { required: true, message: '请输入账号', trigger: 'blur' },
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+        ],
+        role: [
+          { required: true, message: '请选择角色', trigger: 'blur' },
+        ]
+      }
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    login() {
+      this.$refs['formRef'].validate((valid) => {
+        if (valid) {
+          // 验证通过
+          this.$request.post('/login', this.form).then(res => {
+            if (res.code === '200') {
+              let user = res.data
+              localStorage.setItem("xm-user", JSON.stringify(user))  // 存储用户数据
+              if (user.role === 'USER') {
+                location.href = '/front/home'
+              } else {
+                location.href = '/home'
+              }
+              this.$message.success('登录成功')
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  height: 100vh;
+  overflow: hidden;
+  background-image: url("@/assets/imgs/bg.jpg");
+  background-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+}
+a {
+  color: #2a60c9;
+}
+</style>
\ No newline at end of file
diff --git a/Register.vue b/Register.vue
new file mode 100644
index 00000000..c46f6bfa
--- /dev/null
+++ b/Register.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="container">
+    <div style="width: 400px; padding: 30px; background-color: white; border-radius: 5px;">
+      <div style="text-align: center; font-size: 20px; margin-bottom: 20px; color: #333">欢迎注册</div>
+      <el-form :model="form" :rules="rules" ref="formRef">
+        <el-form-item prop="username">
+          <el-input prefix-icon="el-icon-user" placeholder="请输入账号" v-model="form.username"></el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password  v-model="form.password"></el-input>
+        </el-form-item>
+        <el-form-item prop="confirmPass">
+          <el-input prefix-icon="el-icon-lock" placeholder="请确认密码" show-password  v-model="form.confirmPass"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-select v-model="form.role" placeholder="请选择角色" style="width: 100%">
+            <el-option label="商家" value="BUSINESS"></el-option>
+            <el-option label="用户" value="USER"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button style="width: 100%; background-color: #333; border-color: #333; color: white" @click="register">注 册</el-button>
+        </el-form-item>
+        <div style="display: flex; align-items: center">
+          <div style="flex: 1"></div>
+          <div style="flex: 1; text-align: right">
+            已有账号？请 <a href="/login">登录</a>
+          </div>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Register",
+  data() {
+    // 验证码校验
+    const validatePassword = (rule, confirmPass, callback) => {
+      if (confirmPass === '') {
+        callback(new Error('请确认密码'))
+      } else if (confirmPass !== this.form.password) {
+        callback(new Error('两次输入的密码不一致'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      form: {},
+      rules: {
+        username: [
+          { required: true, message: '请输入账号', trigger: 'blur' },
+        ],
+        password: [
+          { required: true, message: '请输入密码', trigger: 'blur' },
+        ],
+        confirmPass: [
+          { validator: validatePassword, trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    register() {
+      this.$refs['formRef'].validate((valid) => {
+        if (valid) {
+          // 验证通过
+          this.$request.post('/register', this.form).then(res => {
+            if (res.code === '200') {
+              this.$router.push('/')  // 跳转登录页面
+              this.$message.success('注册成功')
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.container {
+  height: 100vh;
+  overflow: hidden;
+  background-image: url("@/assets/imgs/bg.jpg");
+  background-size: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+}
+a {
+  color: #2a60c9;
+}
+</style>
\ No newline at end of file
diff --git a/front/Address.vue b/front/Address.vue
new file mode 100644
index 00000000..c812edad
--- /dev/null
+++ b/front/Address.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="main-content">
+    <div style="width: 70%; background-color: white; margin: 30px auto; border-radius: 20px">
+      <div style="padding-bottom: 10px">
+        <div style="display: flex; font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid;">
+          <div style="flex: 3; margin-left: 20px">我的地址</div>
+          <div style="flex: 1; text-align: right; padding-right: 20px">
+            <el-button type="warning" round @click="addAddress">添加收货地址</el-button>
+          </div>
+        </div>
+        <div style="margin: 20px 0; padding: 0 50px">
+          <div class="table">
+            <el-table :data="addressData" strip>
+              <el-table-column prop="username" label="收货人" width="350px"></el-table-column>
+              <el-table-column prop="useraddress" label="收货地址"></el-table-column>
+              <el-table-column prop="phone" label="联系电话"></el-table-column>
+              <el-table-column label="操作" align="center" width="180">
+                <template v-slot="scope">
+                  <el-button size="mini" type="primary" plain @click="editAddress(scope.row)">编辑</el-button>
+                  <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="pagination" style="margin-top: 20px">
+              <el-pagination
+                  background
+                  @current-change="handleCurrentChange"
+                  :current-page="pageNum"
+                  :page-sizes="[5, 10, 20]"
+                  :page-size="pageSize"
+                  layout="total, prev, pager, next"
+                  :total="total">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <el-dialog title="地址信息" :visible.sync="formVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
+      <el-form label-width="100px" style="padding-right: 50px" :model="form" :rules="rules" ref="formRef">
+        <el-form-item prop="username" label="收货人">
+          <el-input v-model="form.username" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item prop="useraddress" label="收货地址">
+          <el-input v-model="form.useraddress" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item prop="phone" label="联系电话">
+          <el-input v-model="form.phone" autocomplete="off"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="formVisible = false">取 消</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      addressData: [],
+      pageNum: 1,   // 当前的页码
+      pageSize: 10,  // 每页显示的个数
+      total: 0,
+      formVisible: false,
+      form: {},
+      rules: {
+        username: [
+          {required: true, message: '请输入收货人', trigger: 'blur'},
+        ],
+        useraddress: [
+          {required: true, message: '请输入收货地址', trigger: 'blur'},
+        ],
+        phone: [
+          {required: true, message: '请输入联系电话', trigger: 'blur'},
+        ],
+      },
+    }
+  },
+  mounted() {
+    this.loadAddress(1)
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    addAddress() {
+      this.form = {}
+      this.formVisible = true
+    },
+    editAddress(row) {
+      this.form = JSON.parse(JSON.stringify(row))
+      this.formVisible = true
+    },
+    save() {   // 保存按钮触发的逻辑  它会触发新增或者更新
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.form.userId = this.user.id
+          this.$request({
+            url: this.form.id ? '/address/update' : '/address/add',
+            method: this.form.id ? 'PUT' : 'POST',
+            data: this.form
+          }).then(res => {
+            if (res.code === '200') {  // 表示成功保存
+              this.$message.success('保存成功')
+              this.loadAddress(1)
+              this.formVisible = false
+            } else {
+              this.$message.error(res.msg)  // 弹出错误的信息
+            }
+          })
+        }
+      })
+    },
+    loadAddress(pageNum) {
+      if (pageNum) this.pageNum = pageNum
+      this.$request.get('/address/selectPage', {
+        params: {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+        }
+      }).then(res => {
+        if (res.code === '200') {
+          this.addressData = res.data?.list
+          this.total = res.data?.total
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    },
+    del(id) {
+      this.$request.delete('/address/delete/' + id).then(res => {
+        if (res.code === '200') {
+          this.$message.success('删除成功')
+          this.loadAddress(1)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleCurrentChange(pageNum) {
+      this.loadAddress(pageNum)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/front/Collect.vue b/front/Collect.vue
new file mode 100644
index 00000000..a9e82ac9
--- /dev/null
+++ b/front/Collect.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="main-content">
+    <div style="width: 70%; background-color: white; margin: 30px auto; border-radius: 20px">
+      <div style="padding-bottom: 10px">
+        <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid;">
+          <div style="margin-left: 20px">全部收藏（{{ collectData.length }}件）</div>
+        </div>
+        <div style="margin: 20px 0; padding: 0 50px">
+          <div class="table">
+            <el-table :data="collectData" strip>
+              <el-table-column label="商品图片" width="120px">
+                <template v-slot="scope">
+                  <el-image style="width: 80px; height: 60px; border-radius: 3px" v-if="scope.row.goodsImg"
+                            :src="scope.row.goodsImg" :preview-src-list="[scope.row.goodsImg]"></el-image>
+                </template>
+              </el-table-column>
+              <el-table-column prop="goodsName" label="商品名称" width="350px"></el-table-column>
+              <el-table-column prop="businessName" label="店铺名称"></el-table-column>
+              <el-table-column prop="goodsPrice" label="商品价格"></el-table-column>
+              <el-table-column label="操作" align="center" width="180">
+                <template v-slot="scope">
+                  <el-button size="mini" type="danger" plain @click="del(scope.row.id)">移除收藏</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+
+            <div class="pagination" style="margin-top: 20px">
+              <el-pagination
+                  background
+                  @current-change="handleCurrentChange"
+                  :current-page="pageNum"
+                  :page-sizes="[5, 10, 20]"
+                  :page-size="pageSize"
+                  layout="total, prev, pager, next"
+                  :total="total">
+              </el-pagination>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      collectData: [],
+      pageNum: 1,   // 当前的页码
+      pageSize: 10,  // 每页显示的个数
+      total: 0,
+    }
+  },
+  mounted() {
+    this.loadCollect(1)
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadCollect(pageNum) {
+      if (pageNum) this.pageNum = pageNum
+      this.$request.get('/collect/selectPage', {
+        params: {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+        }
+      }).then(res => {
+        if (res.code === '200') {
+          this.collectData = res.data?.list
+          this.total = res.data?.total
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    },
+    del(id) {
+      this.$request.delete('/collect/delete/' + id).then(res => {
+        if (res.code === '200') {
+          this.$message.success('移除成功')
+          this.loadCollect(1)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleCurrentChange(pageNum) {
+      this.loadCollect(pageNum)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/front/Detail.vue b/front/Detail.vue
new file mode 100644
index 00000000..7203a739
--- /dev/null
+++ b/front/Detail.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="main-content">
+    <div style="width: 60%; background-color: white; min-height: 1000px; margin: 20px auto; border-radius: 20px">
+      <div style="padding: 15px 20px">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <img :src="goodsData.img" alt="" style="width: 100%; height: 400px; border-radius: 20px">
+          </el-col>
+          <el-col :span="12">
+            <div style="font-size: 20px; font-weight: 900; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">{{goodsData.name}}</div>
+            <div style="color: #666666FF; margin-top: 5px">销量：{{goodsData.count}}</div>
+            <div style="color: red; margin-top: 15px">疯抢价：<span style="font-size: 20px">{{goodsData.price}} / {{goodsData.unit}}</span></div>
+            <div style="margin-top: 20px">
+              <img src="@/assets/imgs/right.png" alt="" style="width: 70%; height: 130px; border-radius: 15px">
+            </div>
+            <div style="color: #666666FF; margin-top: 20px">商家：<a href="#" @click="navTo('/front/business?id=' + goodsData.businessId)">{{goodsData.businessName}}</a></div>
+            <div style="color: #666666FF; margin-top: 20px">分类：<a href="#" @click="navTo('/front/type?id=' + goodsData.typeId)">{{goodsData.typeName}}</a></div>
+            <div style="color: #666666FF; margin-top: 20px">
+              <el-button type="warning" @click="addCart">加入购物车</el-button>
+              <el-button type="warning" @click="collect">收藏</el-button>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+      <div style="padding: 15px 20px">
+        <el-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="宝贝详情" name="first">
+            <div style="padding: 10px 175px" v-html="goodsData.description"></div>
+          </el-tab-pane>
+          <el-tab-pane label="宝贝评价" name="second">1111</el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    let goodsId = this.$route.query.id
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      goodsId: goodsId,
+      goodsData: {},
+      activeName: 'first'
+    }
+  },
+  mounted() {
+    this.loadGoods()
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadGoods() {
+      this.$request.get('/goods/selectById?id=' + this.goodsId).then(res => {
+        if (res.code === '200') {
+          this.goodsData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleClick(tab, event) {
+      this.activeName = tab.name
+    },
+    collect() {
+      let data = {
+        userId: this.user.id,
+        businessId: this.goodsData.businessId,
+        goodsId: this.goodsId
+      }
+      this.$request.post('/collect/add', data).then(res => {
+        if (res.code === '200') {
+          this.$message.success('收藏成功')
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    addCart() {
+      let data = {
+        userId: this.user.id,
+        businessId: this.goodsData.businessId,
+        goodsId: this.goodsId,
+        num: 1
+      }
+      this.$request.post('/cart/add', data).then(res => {
+        if (res.code === '200') {
+          this.$message.success('加入购物车成功')
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/front/Home.vue b/front/Home.vue
new file mode 100644
index 00000000..0fbc7ae2
--- /dev/null
+++ b/front/Home.vue
@@ -0,0 +1,195 @@
+<template>
+  <div class="main-content">
+    <div style="height: 60px; background-color: #C566F6FF"></div>
+    <div style="display: flex">
+      <div class="left"></div>
+      <div style="width: 66%; background-color: white; height: 1000px">
+        <div style="color: #FE0137FF; margin: 15px 0 15px 18px; font-weight: bold; font-size: 16px">主题市场</div>
+        <div style="display: flex; margin: 0 25px; height: 550px">
+          <div style="flex: 2">
+            <div style="display: flex; color: #666666FF; margin: 14px 0" v-for="item in typeData">
+              <img :src="item.img" alt="" style="height: 20px; width: 20px">
+              <div style="margin-left: 10px; font-size: 14px"><a href="#" @click="navTo('/front/type?id=' + item.id)"> {{item.name}}</a></div>
+            </div>
+          </div>
+          <div style="flex: 5; margin-top: 15px">
+            <div>
+              <el-carousel height="300px" style="border-radius: 10px">
+                <el-carousel-item v-for="item in carousel_top">
+                  <img :src="item" alt="" style="width: 100%; height: 300px; border-radius: 10px">
+                </el-carousel-item>
+              </el-carousel>
+            </div>
+            <div style="margin-top: 30px; display: flex">
+              <div style="flex: 1">
+                <el-carousel height="300px" style="border-radius: 10px">
+                  <el-carousel-item v-for="item in carousel_left">
+                    <img :src="item" alt="" style="width: 100%; height: 200px; border-radius: 10px">
+                  </el-carousel-item>
+                </el-carousel>
+              </div>
+              <div style="flex: 1; margin-left: 5px">
+                <el-carousel height="300px" style="border-radius: 10px">
+                  <el-carousel-item v-for="item in carousel_right">
+                    <img :src="item" alt="" style="width: 100%; height: 200px; border-radius: 10px">
+                  </el-carousel-item>
+                </el-carousel>
+              </div>
+            </div>
+          </div>
+          <div style="flex: 3; background-color: #F3F3F3FF; margin-top: 15px; margin-left: 15px; border-radius: 10px">
+            <div style="text-align: center; margin-top: 30px">
+              <img @click="navTo('/front/person')" :src="user.avatar" alt="" style="width: 80px; height: 80px; border-radius: 50%">
+              <div style="margin-top: 10px">Hi，{{user.name}}</div>
+            </div>
+            <div style="margin-top: 20px; padding: 0 15px">
+              <img src="@/assets/imgs/right.png" alt="" style="height: 150px; width: 100%; border-radius: 20px">
+            </div>
+            <div style="margin: 20px 10px 10px 10px; width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+              <i class="el-icon-bell"></i>
+              <span style="font-weight: bold">公告</span>
+              <span style="color: #666666;">：{{ top }}</span>
+            </div>
+            <div style="display: flex; margin-top: 50px">
+              <div style="flex: 1; text-align: center">
+                <a href="#" @click="navTo('/front/collect')">
+                  <img src="@/assets/imgs/收藏.png" alt="" style="height: 25px; width: 25px">
+                  <div>我的收藏</div>
+                </a>
+              </div>
+              <div style="flex: 1; text-align: center">
+                <a href="#" @click="navTo('/front/address')">
+                  <img src="@/assets/imgs/店铺.png" alt="" style="height: 25px; width: 25px">
+                  <div>我的地址</div>
+                </a>
+              </div>
+              <div style="flex: 1; text-align: center">
+                <a href="#" @click="navTo('/front/cart')">
+                  <img src="@/assets/imgs/购物车.png" alt="" style="height: 25px; width: 25px">
+                  <div>我的购物车</div>
+                </a>
+              </div>
+              <div style="flex: 1; text-align: center">
+                <a href="#" @click="navTo('/front/orders')">
+                  <img src="@/assets/imgs/订单.png" alt="" style="height: 25px; width: 25px">
+                  <div>我的订单</div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div style="margin: 40px 0 0 15px; height: 40px; background-color: #04BF04FF; font-size: 20px; color: white; width: 130px; font-weight: bold; line-height: 40px; text-align: center; border-radius: 20px">热卖商品</div>
+        <div style="margin: 10px 5px 0 5px">
+          <el-row>
+            <el-col :span="5" v-for="item in goodsData">
+              <img @click="navTo('/front/detail?id=' + item.id)" :src="item.img" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+              <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{item.name}}</div>
+              <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ {{item.price}} / {{item.unit}}</div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div class="right"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      typeData: [],
+      top: null,
+      notice: [],
+      goodsData: [],
+      carousel_top: [
+        require('@/assets/imgs/carousel-1.png'),
+        require('@/assets/imgs/carousel-2.png'),
+        require('@/assets/imgs/carousel-9.png'),
+      ],
+      carousel_left: [
+        require('@/assets/imgs/carousel-3.png'),
+        require('@/assets/imgs/carousel-4.png'),
+        require('@/assets/imgs/carousel-5.png'),
+      ],
+      carousel_right: [
+        require('@/assets/imgs/carousel-6.png'),
+        require('@/assets/imgs/carousel-7.png'),
+        require('@/assets/imgs/carousel-8.png'),
+      ],
+    }
+  },
+  mounted() {
+    this.loadType()
+    this.loadNotice()
+    this.loadGoods()
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadType() {
+      this.$request.get('/type/selectAll').then(res => {
+        if (res.code === '200') {
+          this.typeData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    loadNotice() {
+      this.$request.get('/notice/selectAll').then(res => {
+        this.notice = res.data
+        let i = 0
+        if (this.notice && this.notice.length) {
+          this.top = this.notice[0].content
+          setInterval(() => {
+            this.top = this.notice[i].content
+            i++
+            if (i === this.notice.length) {
+              i = 0
+            }
+          }, 2500)
+        }
+      })
+    },
+    loadGoods() {
+      this.$request.get('/goods/selectTop15').then(res => {
+        if (res.code === '200') {
+          this.goodsData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    },
+  }
+}
+</script>
+
+<style scoped>
+.main-content {
+  min-height: 100vh;
+  /*overflow: hidden;*/
+  background-size: 100%;
+  background-image: url('@/assets/imgs/img.png');
+}
+.left {
+  width: 17%;
+  background-repeat: no-repeat;
+  background-image: url('@/assets/imgs/left-img.png');
+}
+.right {
+  width: 17%;
+  background-repeat: no-repeat;
+  background-image: url('@/assets/imgs/right-img.png')
+}
+.el-col-5{
+  width: 20%;
+  max-width: 20%;
+  padding: 10px 10px;
+}
+</style>
\ No newline at end of file
diff --git a/front/Type.vue b/front/Type.vue
new file mode 100644
index 00000000..5c1e47da
--- /dev/null
+++ b/front/Type.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="main-content">
+    <div style="display: flex; width: 70%; background-color: white; margin: 30px auto; border-radius: 20px">
+      <div style="flex: 1; padding: 0 20px">
+        <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid">{{typeData.name}}</div>
+        <div style="margin: 20px 0">
+          <el-row :gutter="20">
+            <el-col :span="6" style="margin-bottom: 20px" v-for="item in goodsData">
+              <img @click="navTo('/front/detail?id=' + item.id)" :src="item.img" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+              <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{item.name}}</div>
+              <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ {{item.price}} / {{item.unit}}</div>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+      <div style="width: 250px; padding: 0 20px; border-left: #cccccc 1px solid">
+        <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid">猜你喜欢</div>
+        <div style="margin: 20px 0; padding: 0 10px">
+          <div style="margin-bottom: 20px">
+            <img @click="navTo('/front/detail?id=' + item.id)" src="@/assets/imgs/bg.jpg" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+            <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">超级大米</div>
+            <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ 44 / 件</div>
+          </div>
+          <div>
+            <img @click="navTo('/front/detail?id=' + item.id)" src="@/assets/imgs/bg.jpg" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+            <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">超级大米</div>
+            <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ 44 / 件</div>
+          </div>
+          <div>
+            <img @click="navTo('/front/detail?id=' + item.id)" src="@/assets/imgs/bg.jpg" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+            <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">超级大米</div>
+            <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ 44 / 件</div>
+          </div>
+          <div>
+            <img @click="navTo('/front/detail?id=' + item.id)" src="@/assets/imgs/bg.jpg" alt="" style="width: 100%; height: 175px; border-radius: 10px; border: #cccccc 1px solid">
+            <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 180px; color: #000000FF; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">超级大米</div>
+            <div style="margin-top: 5px; font-size: 20px; color: #FF5000FF">￥ 44 / 件</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    let typeId = this.$route.query.id
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      typeId: typeId,
+      goodsData: [],
+      typeData: {}
+    }
+  },
+  mounted() {
+    this.loadGoods()
+    this.loadType()
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadType() {
+      this.$request.get('/type/selectById/' + this.typeId).then(res => {
+        if (res.code === '200') {
+          this.typeData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    loadGoods() {
+      this.$request.get('/goods/selectByTypeId?id=' + this.typeId).then(res => {
+        if (res.code === '200') {
+          this.goodsData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    }
+  }
+}
+</script>
\ No newline at end of file