commit 9500b5d65fa9f557a70d757c8ddeb717db748e99
Author: cwx <88888>
Date:   Wed Dec 4 11:21:46 2024 +0800

    cwx

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/Business.vue b/Business.vue
new file mode 100644
index 00000000..83ab66fa
--- /dev/null
+++ b/Business.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="main-content">
+    <div style="width: 60%; margin: 30px auto; border-radius: 20px">
+      <div style="height: 100px; padding: 0 10px; display: flex; align-items: center; border-radius: 25px; background-color: white;">
+        <img :src="businessData.avatar" alt="" style="height: 60px; width: 60px; border-radius: 50%">
+        <div style="width: 220px; margin: 0 30px 0 15px; font-size: 20px; font-weight: bold;">
+          <div style="height: 30px; line-height: 30px">{{businessData.name}}</div>
+          <img src="@/assets/imgs/icon.png" alt="" style="height: 25px; margin-top: 5px">
+        </div>
+        <div style="width: 150px; height: 100px; padding: 20px">
+          <div style="font-size: 16px; height: 30px; line-height: 30px; color: #7F7F7FFF">店铺电话</div>
+          <div style="font-size: 16px; height: 30px; line-height: 30px; ">{{businessData.phone}}</div>
+        </div>
+        <div style="width: 150px; height: 100px; padding: 20px">
+          <div style="font-size: 16px; height: 30px; line-height: 30px; color: #7F7F7FFF">店铺邮箱</div>
+          <div style="font-size: 16px; height: 30px; line-height: 30px; ">{{businessData.email}}</div>
+        </div>
+        <div style="flex: 1; height: 100px; padding: 20px">
+          <div style="height: 60px; line-height: 30px; font-size: 16px; color: #000000FF; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">
+            店铺介绍：{{businessData.description}}
+          </div>
+        </div>
+      </div>
+      <div style="border-radius: 20px; padding: 0 20px; background-color: white; margin-top: 20px">
+        <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid">本店所有商品（{{goodsData.length}}件）</div>
+        <div style="margin-top: 20px">
+          <el-row>
+            <el-col :span="5" style="margin-bottom: 20px" v-for="item in goodsData">
+              <img :src="item.img" alt="" style="width: 100%; height: 150px; border-radius: 10px; border: #cccccc 1px solid" @click="navTo('/front/detail?id=' + item.id)">
+              <div style="margin-top: 10px; font-weight: 500; font-size: 16px; width: 160px; 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>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    let businessId = this.$route.query.id
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      businessId: businessId,
+      goodsData: [],
+      businessData: {}
+    }
+  },
+  mounted() {
+    this.loadBusiness()
+    this.loadGoods()
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadBusiness() {
+      this.$request.get('/business/selectById/' + this.businessId).then(res => {
+        if (res.code === '200') {
+          this.businessData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    loadGoods() {
+      this.$request.get('/goods/selectByBusinessId?id=' + this.businessId).then(res => {
+        if (res.code === '200') {
+          this.goodsData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-col-5{
+  width: 20%;
+  max-width: 20%;
+  padding: 10px 10px;
+}
+</style>
\ No newline at end of file
diff --git a/Cart.vue b/Cart.vue
new file mode 100644
index 00000000..6a24c5e8
--- /dev/null
+++ b/Cart.vue
@@ -0,0 +1,171 @@
+<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="margin-left: 20px; flex: 1">全部商品（{{ goodsData.length }}件）</div>
+          <div style="flex: 2; text-align: right">
+            <el-select v-model="addressId" placeholder="请选择收货地址" style="width: 70%">
+              <el-option v-for="item in addressData" :label="item.username + ' - ' + item.useraddress + ' - ' + item.phone" :value="item.id"></el-option>
+            </el-select>
+          </div>
+          <div style="flex: 1; font-size: 16px; text-align: right; padding-right: 20px">
+            已选商品 ￥ {{totalPrice}} <el-button type="danger" round @click="pay">下单</el-button>
+          </div>
+        </div>
+        <div style="margin: 20px 0; padding: 0 50px">
+          <div class="table">
+            <el-table :data="goodsData" strip @selection-change="handleSelectionChange">
+              <el-table-column type="selection" width="55" align="center"></el-table-column>
+              <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="240px">
+                <template v-slot="scope">
+                  <a :href="'/front/detail?id=' + scope.row.goodsId">{{scope.row.goodsName}}</a>
+                </template>
+              </el-table-column>
+              <el-table-column prop="businessName" label="店铺名称">
+                <template v-slot="scope">
+                  <a :href="'/front/business?id=' + scope.row.businessId">{{scope.row.businessName}}</a>
+                </template>
+              </el-table-column>
+              <el-table-column prop="goodsPrice" label="商品价格"></el-table-column>
+              <el-table-column prop="num" label="选择数量">
+                <template v-slot="scope">
+                  <el-input-number v-model="scope.row.num" style="width: 100px" @change="handleChange(scope.row)" :min="1"></el-input-number>
+                </template>
+              </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') || '{}'),
+      goodsData: [],
+      pageNum: 1,   // 当前的页码
+      pageSize: 10,  // 每页显示的个数
+      totalPrice: 0,
+      total: 0,
+      addressId: null,
+      addressData: [],
+      selectedData: [],
+    }
+  },
+  mounted() {
+    this.loadGoods(1)
+    this.loadAddress()
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadAddress() {
+      this.$request.get('/address/selectAll').then(res => {
+        if (res.code === '200') {
+          this.addressData = res.data
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    loadGoods(pageNum) {
+      if (pageNum) this.pageNum = pageNum
+      this.$request.get('/cart/selectPage', {
+        params: {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+        }
+      }).then(res => {
+        if (res.code === '200') {
+          this.goodsData = res.data?.list
+          this.total = res.data?.total
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    },
+    del(id) {
+      this.$request.delete('/cart/delete/' + id).then(res => {
+        if (res.code === '200') {
+          this.$message.success('移除成功')
+          this.loadGoods(1)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleCurrentChange(pageNum) {
+      this.loadGoods(pageNum)
+    },
+    handleSelectionChange(rows) {
+      this.totalPrice = 0
+      this.selectedData = rows
+      // 计计算总价格
+      this.selectedData.forEach(item => {
+        this.totalPrice += (item.goodsPrice * item.num)
+      })
+    },
+    handleChange(row) {
+      this.totalPrice = 0
+      this.selectedData.forEach(item => {
+        this.totalPrice += item.goodsPrice * item.num
+      })
+    },
+    pay() {
+      if (!this.addressId) {
+        this.$message.warning('请选择收货地址')
+        return
+      }
+      if (!this.selectedData || this.selectedData.length === 0) {
+        this.$message.warning('请选择商品')
+        return
+      }
+      let data = {
+        userId: this.user.id,
+        addressId: this.addressId,
+        status: '待发货',
+        cartData: this.selectedData
+      }
+      this.$request.post('/orders/add', data).then(res => {
+        if (res.code === '200') {
+          this.$message.success('操作成功')
+          this.loadGoods(1)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    }
+  }
+}
+</script>
\ 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/Orders.vue b/Orders.vue
new file mode 100644
index 00000000..98f7140c
--- /dev/null
+++ b/Orders.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="main-content">
+    <div style="width: 80%; 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">我的订单（{{ ordersData.length }} 个）</div>
+        </div>
+        <div style="margin: 20px 0; padding: 0 50px">
+          <div class="table">
+            <el-table :data="ordersData" 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="orderId" label="订单编号"></el-table-column>
+              <el-table-column prop="goodsName" label="商品名称" :show-overflow-tooltip="true">
+                <template v-slot="scope">
+                  <a :href="'/front/detail?id=' + scope.row.goodsId">{{scope.row.goodsName}}</a>
+                </template>
+              </el-table-column>
+              <el-table-column prop="businessName" label="店铺名称">
+                <template v-slot="scope">
+                  <a :href="'/front/business?id=' + scope.row.businessId">{{scope.row.businessName}}</a>
+                </template>
+              </el-table-column>
+              <el-table-column prop="goodsPrice" label="商品价格">
+                <template v-slot="scope">
+                  {{scope.row.goodsPrice}} / {{scope.row.goodsUnit}}
+                </template>
+              </el-table-column>
+              <el-table-column prop="num" label="商品数量"></el-table-column>
+              <el-table-column prop="price" label="订单总价"></el-table-column>
+              <el-table-column prop="username" label="收货人"></el-table-column>
+              <el-table-column prop="useraddress" label="收货地址"></el-table-column>
+              <el-table-column prop="phone" label="联系电话"></el-table-column>
+              <el-table-column prop="status" label="订单状态"></el-table-column>
+              <el-table-column label="操作" align="center" width="180">
+                <template v-slot="scope">
+                  <el-button size="mini" type="primary" v-if="scope.row.status === '待收货'" plain @click="updateStatus(scope.row, '已完成')">确认收货</el-button>
+                  <el-button size="mini" type="primary" v-if="scope.row.status === '已完成'" plain @click="addComment(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="fromVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
+      <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
+        <el-form-item label="评价内容" prop="username">
+          <el-input type="textarea" v-model="form.content" placeholder="请输入评价内容"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="fromVisible = 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') || '{}'),
+      ordersData: [],
+      pageNum: 1,   // 当前的页码
+      pageSize: 10,  // 每页显示的个数
+      total: 0,
+      form: {},
+      fromVisible: false,
+    }
+  },
+  mounted() {
+    this.loadOrders(1)
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadOrders(pageNum) {
+      if (pageNum) this.pageNum = pageNum
+      this.$request.get('/orders/selectPage', {
+        params: {
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+        }
+      }).then(res => {
+        if (res.code === '200') {
+          this.ordersData = res.data?.list
+          this.total = res.data?.total
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    navTo(url) {
+      location.href = url
+    },
+    del(id) {
+      this.$request.delete('/orders/delete/' + id).then(res => {
+        if (res.code === '200') {
+          this.$message.success('删除成功')
+          this.loadOrders(1)
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleCurrentChange(pageNum) {
+      this.loadOrders(pageNum)
+    },
+    updateStatus(row, status) {
+      this.form = row
+      this.form.status = status
+      this.$request.put('/orders/update', this.form).then(res => {
+        if (res.code === '200') {
+          this.$message.success('操作成功')
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    addComment(row) {
+      this.fromVisible = true
+      this.form = row
+    },
+    save() {
+      let data = {
+        userId: this.user.id,
+        businessId: this.form.businessId,
+        goodsId: this.form.goodsId,
+        content: this.form.content,
+      }
+      this.$request.post('/comment/add', data).then(res => {
+        if (res.code === '200') {
+          this.$message.success('评价成功')
+          this.fromVisible = false
+          this.updateStatus(this.form, '已评价')
+          this.form = {}
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/Person.vue b/Person.vue
new file mode 100644
index 00000000..5ad65060
--- /dev/null
+++ b/Person.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="main-content">
+    <el-card style="width: 50%; margin: 30px auto">
+      <div style="text-align: right; margin-bottom: 20px">
+        <el-button type="primary" @click="updatePassword">修改密码</el-button>
+      </div>
+      <el-form :model="user" label-width="80px" style="padding-right: 20px">
+        <div style="margin: 15px; text-align: center">
+          <el-upload
+              class="avatar-uploader"
+              :action="$baseUrl + '/files/upload'"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+          >
+            <img v-if="user.avatar" :src="user.avatar" class="avatar" />
+            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+          </el-upload>
+        </div>
+        <el-form-item label="用户名" prop="username">
+          <el-input v-model="user.username" placeholder="用户名" disabled></el-input>
+        </el-form-item>
+        <el-form-item label="姓名" prop="name">
+          <el-input v-model="user.name" placeholder="姓名"></el-input>
+        </el-form-item>
+        <el-form-item label="电话" prop="phone">
+          <el-input v-model="user.phone" placeholder="电话"></el-input>
+        </el-form-item>
+        <el-form-item label="邮箱" prop="email">
+          <el-input v-model="user.email" placeholder="邮箱"></el-input>
+        </el-form-item>
+        <div style="text-align: center; margin-bottom: 20px">
+          <el-button type="primary" @click="update">保 存</el-button>
+        </div>
+      </el-form>
+    </el-card>
+    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false" destroy-on-close>
+      <el-form :model="user" label-width="80px" style="padding-right: 20px" :rules="rules" ref="formRef">
+        <el-form-item label="原始密码" prop="password">
+          <el-input show-password v-model="user.password" placeholder="原始密码"></el-input>
+        </el-form-item>
+        <el-form-item label="新密码" prop="newPassword">
+          <el-input show-password v-model="user.newPassword" placeholder="新密码"></el-input>
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input show-password v-model="user.confirmPassword" placeholder="确认密码"></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="fromVisible = false">取 消</el-button>
+        <el-button type="primary" @click="save">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    const validatePassword = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请确认密码'))
+      } else if (value !== this.user.newPassword) {
+        callback(new Error('确认密码错误'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      dialogVisible: false,
+
+      rules: {
+        password: [
+          { required: true, message: '请输入原始密码', trigger: 'blur' },
+        ],
+        newPassword: [
+          { required: true, message: '请输入新密码', trigger: 'blur' },
+        ],
+        confirmPassword: [
+          { validator: validatePassword, required: true, trigger: 'blur' },
+        ],
+      }
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    update() {
+      // 保存当前的用户信息到数据库
+      this.$request.put('/user/update', this.user).then(res => {
+        if (res.code === '200') {
+          // 成功更新
+          this.$message.success('保存成功')
+          // 更新浏览器缓存里的用户信息
+          localStorage.setItem('xm-user', JSON.stringify(this.user))
+
+          // 触发父级的数据更新
+          this.$emit('update:user')
+        } else {
+          this.$message.error(res.msg)
+        }
+      })
+    },
+    handleAvatarSuccess(response, file, fileList) {
+      // 把user的头像属性换成上传的图片的链接
+      this.$set(this.user, 'avatar', response.data)
+    },
+    // 修改密码
+    updatePassword() {
+      this.dialogVisible = true
+    },
+    save() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          this.$request.put('/updatePassword', this.user).then(res => {
+            if (res.code === '200') {
+              // 成功更新
+              this.$message.success('修改密码成功')
+              this.$router.push('/login')
+            } else {
+              this.$message.error(res.msg)
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+/deep/.el-form-item__label {
+  font-weight: bold;
+}
+/deep/.el-upload {
+  border-radius: 50%;
+}
+/deep/.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+}
+/deep/.avatar-uploader .el-upload:hover {
+  border-color: #409EFF;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+  border-radius: 50%;
+}
+.avatar {
+  width: 120px;
+  height: 120px;
+  display: block;
+  border-radius: 50%;
+}
+</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/Search.vue b/Search.vue
new file mode 100644
index 00000000..c5709689
--- /dev/null
+++ b/Search.vue
@@ -0,0 +1,67 @@
+<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">搜索"{{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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+
+  data() {
+    let name = this.$route.query.name
+    return {
+      user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
+      name: name,
+      goodsData: [],
+    }
+  },
+  mounted() {
+    this.loadGoods()
+  },
+  // methods：本页面所有的点击事件或者其他函数定义区
+  methods: {
+    loadGoods() {
+      this.$request.get('/goods/selectByName?name=' + this.name).then(res => {
+        console.log(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