From 113aa290324bd9227a0c223576e3f36053a34988 Mon Sep 17 00:00:00 2001
From: Jiang Jiwen <125579488+JiwenJ@users.noreply.github.com>
Date: Fri, 14 Jul 2023 17:43:56 +0800
Subject: [PATCH] Add files via upload

---
 Code/Frontend/src/App.vue                     |  18 +
 Code/Frontend/src/common/MFooter.vue          | 256 +++++++++
 Code/Frontend/src/common/MHeader.vue          | 202 ++++++++
 Code/Frontend/src/components/MyGoodsItem.vue  | 105 ++++
 Code/Frontend/src/components/Mypanel.vue      |  56 ++
 Code/Frontend/src/components/YButton.vue      | 104 ++++
 Code/Frontend/src/components/copy.vue         |  64 +++
 Code/Frontend/src/components/loading.vue      |  18 +
 Code/Frontend/src/components/popup.vue        | 114 +++++
 Code/Frontend/src/components/shelf.vue        |  59 +++
 Code/Frontend/src/main.js                     |  16 +
 Code/Frontend/src/mock/index.js               | 245 +++++++++
 Code/Frontend/src/router/index.js             |  58 +++
 Code/Frontend/src/store/action.js             |   3 +
 Code/Frontend/src/store/index.js              |  20 +
 Code/Frontend/src/store/mutation-types.js     |   8 +
 Code/Frontend/src/store/mutations.js          |  54 ++
 Code/Frontend/src/utils/storage.js            |  26 +
 Code/Frontend/src/views/Category/KaoYan.vue   | 123 +++++
 Code/Frontend/src/views/Category/KeWai.vue    | 122 +++++
 Code/Frontend/src/views/Category/MianFei.vue  | 130 +++++
 Code/Frontend/src/views/Category/TongXiu.vue  | 151 ++++++
 Code/Frontend/src/views/Category/ZhuanYe.vue  | 134 +++++
 Code/Frontend/src/views/Drag/index.vue        | 484 ++++++++++++++++++
 .../Frontend/src/views/GoodsDetails/index.vue | 250 +++++++++
 Code/Frontend/src/views/Home/AppNa.vue        | 109 ++++
 Code/Frontend/src/views/Home/HomeBanner.vue   |  57 +++
 Code/Frontend/src/views/Home/HomeBottom.vue   |  52 ++
 Code/Frontend/src/views/Home/HomeHot.vue      |  78 +++
 Code/Frontend/src/views/Home/HomeHot2.vue     |  83 +++
 Code/Frontend/src/views/Home/HomeHot3.vue     |  92 ++++
 Code/Frontend/src/views/Home/HomeProduct.vue  | 158 ++++++
 Code/Frontend/src/views/Home/PhotoWall.vue    |  81 +++
 Code/Frontend/src/views/Home/index.vue        |  40 ++
 Code/Frontend/src/views/Index.vue             |  28 +
 Code/Frontend/src/views/Login/index.vue       | 332 ++++++++++++
 Code/Frontend/src/views/Register/index.vue    | 292 +++++++++++
 .../src/views/User/children/addressList.vue   | 212 ++++++++
 .../src/views/User/children/coupon.vue        |  62 +++
 .../src/views/User/children/exchange.vue      | 289 +++++++++++
 .../src/views/User/children/information.vue   | 370 +++++++++++++
 .../src/views/User/children/orderDetail.vue   |  90 ++++
 .../src/views/User/children/orderList.vue     | 289 +++++++++++
 .../Frontend/src/views/User/children/post.vue | 386 ++++++++++++++
 .../src/views/User/children/support.vue       | 104 ++++
 Code/Frontend/src/views/User/user.vue         | 146 ++++++
 46 files changed, 6170 insertions(+)
 create mode 100644 Code/Frontend/src/App.vue
 create mode 100644 Code/Frontend/src/common/MFooter.vue
 create mode 100644 Code/Frontend/src/common/MHeader.vue
 create mode 100644 Code/Frontend/src/components/MyGoodsItem.vue
 create mode 100644 Code/Frontend/src/components/Mypanel.vue
 create mode 100644 Code/Frontend/src/components/YButton.vue
 create mode 100644 Code/Frontend/src/components/copy.vue
 create mode 100644 Code/Frontend/src/components/loading.vue
 create mode 100644 Code/Frontend/src/components/popup.vue
 create mode 100644 Code/Frontend/src/components/shelf.vue
 create mode 100644 Code/Frontend/src/main.js
 create mode 100644 Code/Frontend/src/mock/index.js
 create mode 100644 Code/Frontend/src/router/index.js
 create mode 100644 Code/Frontend/src/store/action.js
 create mode 100644 Code/Frontend/src/store/index.js
 create mode 100644 Code/Frontend/src/store/mutation-types.js
 create mode 100644 Code/Frontend/src/store/mutations.js
 create mode 100644 Code/Frontend/src/utils/storage.js
 create mode 100644 Code/Frontend/src/views/Category/KaoYan.vue
 create mode 100644 Code/Frontend/src/views/Category/KeWai.vue
 create mode 100644 Code/Frontend/src/views/Category/MianFei.vue
 create mode 100644 Code/Frontend/src/views/Category/TongXiu.vue
 create mode 100644 Code/Frontend/src/views/Category/ZhuanYe.vue
 create mode 100644 Code/Frontend/src/views/Drag/index.vue
 create mode 100644 Code/Frontend/src/views/GoodsDetails/index.vue
 create mode 100644 Code/Frontend/src/views/Home/AppNa.vue
 create mode 100644 Code/Frontend/src/views/Home/HomeBanner.vue
 create mode 100644 Code/Frontend/src/views/Home/HomeBottom.vue
 create mode 100644 Code/Frontend/src/views/Home/HomeHot.vue
 create mode 100644 Code/Frontend/src/views/Home/HomeHot2.vue
 create mode 100644 Code/Frontend/src/views/Home/HomeHot3.vue
 create mode 100644 Code/Frontend/src/views/Home/HomeProduct.vue
 create mode 100644 Code/Frontend/src/views/Home/PhotoWall.vue
 create mode 100644 Code/Frontend/src/views/Home/index.vue
 create mode 100644 Code/Frontend/src/views/Index.vue
 create mode 100644 Code/Frontend/src/views/Login/index.vue
 create mode 100644 Code/Frontend/src/views/Register/index.vue
 create mode 100644 Code/Frontend/src/views/User/children/addressList.vue
 create mode 100644 Code/Frontend/src/views/User/children/coupon.vue
 create mode 100644 Code/Frontend/src/views/User/children/exchange.vue
 create mode 100644 Code/Frontend/src/views/User/children/information.vue
 create mode 100644 Code/Frontend/src/views/User/children/orderDetail.vue
 create mode 100644 Code/Frontend/src/views/User/children/orderList.vue
 create mode 100644 Code/Frontend/src/views/User/children/post.vue
 create mode 100644 Code/Frontend/src/views/User/children/support.vue
 create mode 100644 Code/Frontend/src/views/User/user.vue

diff --git a/Code/Frontend/src/App.vue b/Code/Frontend/src/App.vue
new file mode 100644
index 0000000..0e82966
--- /dev/null
+++ b/Code/Frontend/src/App.vue
@@ -0,0 +1,18 @@
+<template>
+  <div id="app">
+    <router-view class="main"></router-view>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex';
+export default {
+  name:'App',
+  components:{
+  },
+  computed: {
+    ...mapState(['isCollapse']),
+   }
+}
+</script>
+<style>
+</style>
diff --git a/Code/Frontend/src/common/MFooter.vue b/Code/Frontend/src/common/MFooter.vue
new file mode 100644
index 0000000..cedf48d
--- /dev/null
+++ b/Code/Frontend/src/common/MFooter.vue
@@ -0,0 +1,256 @@
+<template>
+  <footer class="footer">
+    <div class="siteinfo">
+      <ul class="c0 ">
+        <h3 class="c1" href="javascript:;">订单服务</h3>
+        <ul>
+          <li class="c2"><a class="c3" href="javascript:;">支付方式</a></li>
+          <li class="c2"><a class="c3" href="javascript:;">送货政策</a></li>
+        </ul>
+      </ul>
+      <ul class="c0">
+        <h3 class="c1">服务支持</h3>
+        <ul>
+          <li class="c2"><a class="c3"  href="javascript:;">项目前端</a></li>
+          <li class="c2"><a class="c3"  href="javascript:;">项目后端</a></li>
+        </ul>
+      </ul>
+      <ul class="c0">
+        <h3 class="c1">自助服务</h3>
+        <ul>
+          <li class="c2"><a class="c3"  href="javascript:;">个人简介</a></li>
+          <li class="c2"><a class="c3"  href="javascript:;">个人视频</a></li>
+        </ul>
+      </ul>
+      <ul class="c0">
+        <h3 class="c1">其他项目</h3>
+        <ul>
+          <li class="c2"><a class="c3"  href="javascript:;">数据共享</a></li>
+          <li class="c2"><a class="c3"  href="javascript:;">有待开发</a></li>
+        </ul>
+      </ul>
+    </div>
+
+    <div class="extra">
+      <div class="copyright">
+        <p>
+          <a href="javascript:;">关于我们</a>
+          <a href="javascript:;">帮助中心</a>
+          <a href="javascript:;">售后服务</a>
+          <a href="javascript:;">配送与验收</a>
+          <a href="javascript:;">商务合作</a>
+          <a href="javascript:;">搜索推荐</a>
+          <a href="javascript:;">友情链接</a>
+        </p>
+        <p>CopyRight © 南京大学</p>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script>
+export default {
+  name: 'MyFooter'
+}
+</script>
+
+<style scoped lang='less'>
+@import url("../assets/style/variables.less");
+
+.footer {
+  background-color: #f6f1f1;
+  // padding-top: 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.contact {
+  background: rgb(185, 16, 61);
+
+  // .container {
+  //   padding: 30px;
+  //   display: flex;
+  // }
+  dl {
+    height: 190px;
+    text-align: center;
+    padding: 0 20px;
+    border-right: 1px solid #130b0b;
+    color: rgb(48, 35, 102);
+
+    &:first-child {
+      padding-left: 110px;
+    }
+
+    &:last-child {
+      border-right: none;
+      padding-right: 1px;
+    }
+  }
+
+  dt {
+    line-height: 1;
+    font-size: 18px;
+  }
+
+  dd {
+    margin: 36px 12px 0 0;
+    float: left;
+    width: 92px;
+    height: 92px;
+    padding-top: 10px;
+    border: 1px solid #ededed;
+
+    .iconfont {
+      font-size: 36px;
+      display: block;
+      color: #666;
+    }
+
+    &:hover {
+      .iconfont {
+        color: @xtxColor;
+      }
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  .qrcode {
+    width: 92px;
+    height: 92px;
+    padding: 7px;
+    border: 1px solid #ededed;
+  }
+
+  .download {
+    padding-top: 5px;
+    font-size: 14px;
+    width: auto;
+    height: auto;
+    border: none;
+
+    span {
+      display: block;
+    }
+
+    a {
+      display: block;
+      line-height: 1;
+      padding: 10px 25px;
+      margin-top: 5px;
+      color: #fff;
+      border-radius: 2px;
+      background-color: @xtxColor;
+    }
+  }
+
+  .hotline {
+    padding-top: 20px;
+    font-size: 22px;
+    color: #666;
+    width: auto;
+    height: auto;
+    border: none;
+
+    small {
+      display: block;
+      font-size: 15px;
+      color: #999;
+    }
+  }
+}
+
+.siteinfo {
+  text-align: center;
+  height: 80px;
+  padding: 0px 0px 50px 200px; //上右下左
+}
+
+.extra {
+  background-color: rgb(9, 9, 9);
+}
+
+.slogan {
+  height: 178px;
+  line-height: 58px;
+  padding: 60px 100px;
+  border-bottom: 1px solid #434343;
+  display: flex;
+  justify-content: space-between;
+
+  a {
+    height: 58px;
+    line-height: 58px;
+    color: #fff;
+    font-size: 28px;
+
+    i {
+      font-size: 50px;
+      vertical-align: middle;
+      margin-right: 10px;
+      font-weight: 100;
+    }
+
+    span {
+      vertical-align: middle;
+      text-shadow: 0 0 1px #333;
+    }
+  }
+}
+
+.c0 {
+  text-align: center;
+  width: 300px;
+  line-height: 1;
+  float: left;
+  list-style: none
+}
+
+.c1 {
+  color: #646464;
+  font-size: 18px;
+  padding: 0 0 0px 0px;
+  ;
+  margin: 20px;
+  padding: 0px;
+
+}
+
+.c2 {
+  color: #c3c3c3;
+  font-size: 12px;
+  padding: 6px 0;
+  list-style: none
+}
+
+.c3 {
+  color: #969696;
+}
+
+.copyright {
+  height: 100px;
+  padding-top: 20px;
+  text-align: center;
+  color: #999;
+  font-size: 15px;
+
+  p {
+    line-height: 1;
+    margin-bottom: 20px;
+  }
+
+  a {
+    color: #999;
+    line-height: 1;
+    padding: 0 10px;
+    border-right: 1px solid #999;
+
+    &:last-child {
+      border-right: none;
+    }
+  }
+}</style>
+
diff --git a/Code/Frontend/src/common/MHeader.vue b/Code/Frontend/src/common/MHeader.vue
new file mode 100644
index 0000000..023e4f8
--- /dev/null
+++ b/Code/Frontend/src/common/MHeader.vue
@@ -0,0 +1,202 @@
+<template>
+  <nav class="navbar">
+      <div class="logo">
+        <router-link to="/"></router-link>
+      </div>
+        <div class="center">
+        <div class="center-search">
+          <input type="text" name id placeholder="Algebra" />
+          <button class="search-btn">Search</button>
+        </div>
+      </div>
+        <!-- 搜索下面的导航 -->
+  <div class="header-right">
+    <div class="container">
+      <ul class="header-nav">
+        <template v-if = "this.id != null">
+        <li class="nav-item">
+        <router-link to="/user" class="nav-link"> {{name}}</router-link>
+        </li>
+        <li class="nav-item">
+          <router-link to="/home" class="nav-link" @Click="logout">退出登录</router-link>
+        </li>
+        <li class="nav-item">
+          <router-link class="nav-link" to="/user">个人中心</router-link>
+        </li>
+        </template>
+        <li class="nav-item" v-else>
+          <router-link class="nav-link" to="/login">登录</router-link>
+        </li>
+
+      </ul>
+    </div>
+    </div>
+  </nav>
+</template>
+
+<script>
+import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router';
+import { mapState } from 'vuex';
+import { getStore,setStore,removeStore } from "@/utils/storage"
+export default defineComponent({
+  name: 'Navbar',
+  setup() {
+    const router = useRouter();
+    return {
+      router,
+    };
+  },
+  data(){
+    return{
+      name:null,
+      id:null,
+    }
+  },
+  created(){
+    this.name = getStore("name");
+    this.id = getStore("id");
+  },
+  computed:{
+    ...mapState(['login'])
+  },
+  methods:{
+    logout(){
+      this.$store.state.login = false;
+      this.id = null;
+      this.name = null;
+      removeStore("id");
+      removeStore("name");
+      this.$router.push({
+        path:'/home'
+      })
+    }
+  }
+});
+</script>
+
+<style lang="less" scoped>
+.navbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px;
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  .logo{
+    width: 210px;
+    height: 50px;
+    a {
+        display: inline-block;
+        height: 60px;
+        width: 100%;
+        background: url("../assets/images/lololo.png") no-repeat;
+      }
+
+  }
+}
+
+.navbar-brand {
+  font-size: 1.5rem;
+  padding: 0 0 0 0px;
+
+
+}
+
+.header-nav {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.nav-item {
+  margin-right: 20px;
+}
+
+.nav-link {
+  color: #333;
+  text-decoration: none;
+  font-size: 18px;
+}
+.nav-link.active {
+  color: #4caf50;
+}
+/* logo图片 */
+.header-logo {
+  height: 50px;
+  width: auto;
+}
+/* 搜索栏 */
+.header-search {
+  display: flex;
+  align-items: center;
+  border: 1px solid rgb(252, 252, 252);
+  border-radius: 5px;
+  padding: 5px;
+}
+.header-search-input {
+  flex: 1;
+  border: none;
+  padding: 5px;
+  font-size: 16px;
+}
+
+.header-search-button {
+  background-color: #4caf50;
+  border: none;
+  border-radius: 5px;
+  color: #fff;
+  padding: 5px 10px;
+  font-size: 16px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+.header-search-button:hover {
+  opacity: 0.8;
+}
+.center {
+  width:600px;
+  flex: 1;
+}
+.center-search {
+    width: 500px;
+    height: 20px;
+    padding: 0 0 0 240px;
+    input {
+      width: 400px;
+      height: 35px;
+      border-radius: 20px 0 0 20px;
+      padding-left: 15px;
+      box-sizing: border-box;
+      border: 2px solid rgb(99,5, 96);
+    }
+}
+.search-btn {
+      float: right;
+      width: 100px;
+      height: 35px;
+      color: rgb(254, 255, 253);
+      background-color: rgb(99,5, 96);
+      border-radius: 0 20px 20px 0;
+      border: 0;
+      font-size: 16px;
+}
+.center-navs {
+        width: 540px;
+        li {
+          float: left;
+          height: 32px;
+          padding: 5px;
+          list-style: none;
+          a {
+            padding: 0 5px;
+            border-right: 1px solid #ccc;
+          }
+        }
+        li:last-child a {
+          border-right: 0;
+        }
+      }
+
+</style>
diff --git a/Code/Frontend/src/components/MyGoodsItem.vue b/Code/Frontend/src/components/MyGoodsItem.vue
new file mode 100644
index 0000000..e55e219
--- /dev/null
+++ b/Code/Frontend/src/components/MyGoodsItem.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="goods-item">
+    <!-- 去data中请求数据 -->
+      <img :src="good.images" class="images" alt="">
+    <div class="title ellipsis-2">{{ good.name }}</div>
+    <div class="price">￥{{ good.price }}</div>
+    <div class="extra">
+      <a @click="linkTo(good)">
+        <span>相同书籍</span>
+        <span>点击查看更多</span>
+      </a>
+    </div>
+
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    good: {
+      type: Object,
+      default: {}
+    }
+  },
+  methods: {
+    linkTo(item) {
+      this.$router.push({
+        path: '/goodsdetails',
+        query: {
+          // productId: item.goodsUrl,
+          productname: item.name,
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.goods-item {
+  position: relative;
+  width: 200px;
+  height: 300px;
+  border: 1px solid #f5f5f5;
+  // 初始隐藏在下方的标签
+  overflow: hidden;
+  transition: all 0.5;
+
+  .images {
+    width: 200px;
+    height: 220px;
+    margin: 0 auto;
+    padding: 0 0 10px 0;
+
+    img {
+      width: 160px;
+      height: 160px;
+    }
+  }
+
+  .title {
+    text-align: center;
+    font-size: 15px;
+  }
+
+  .price {
+    padding-top: 3px;
+    text-align: center;
+    font-size: 10px;
+    color: @priceColor;
+  }
+
+  .extra {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    background-color: #9307e4;
+    height: 85px;
+    // 下方隐藏
+    transform: translate3d(0, 100%, 0);
+    transition: all .5s;
+
+    span {
+      display: block;
+      text-align: center;
+      font-size: 16px;
+      color: #fff;
+      margin: 10px 0; // 两个参数为上下 左右与边界距离
+    }
+
+    span:last-child {
+      font-size: 14px;
+    }
+  }
+
+  &:hover {
+    border: 1px solid #9307e4;
+
+    .extra {
+      transform: none;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/components/Mypanel.vue b/Code/Frontend/src/components/Mypanel.vue
new file mode 100644
index 0000000..84c9983
--- /dev/null
+++ b/Code/Frontend/src/components/Mypanel.vue
@@ -0,0 +1,56 @@
+<template>
+    <div class="my-panel w">
+        <!-- 头部区域 -->
+        <div class="header">
+            <h2>
+                {{ title }}
+                <small>{{ subTitle }}</small>
+            </h2>
+        </div>
+        <!-- 插槽 -->
+        <slot name="right" />
+        <!-- 默认插槽 -->
+        <slot />
+    </div>
+</template>
+  
+<script>
+export default {
+    props: {
+        title: {
+            type: String,
+            default: ""
+        },
+        subTitle: {
+            type: String,
+            default: ""
+        }
+    }
+};
+</script>
+  
+<style lang="less" scoped>
+.my-panel {
+    background-color: #fff;
+
+    .header {
+        padding: 40px 0;
+        align-items: flex-end;
+        display: flex;
+
+        h2 {
+            flex: 1;
+            font-size: 32px;
+            text-align: left;
+            font-weight: normal;
+
+            small {
+                font-size: 16px;
+                color: #999;
+                margin-left: 10px;
+            }
+        }
+
+    }
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/components/YButton.vue b/Code/Frontend/src/components/YButton.vue
new file mode 100644
index 0000000..02d0ce2
--- /dev/null
+++ b/Code/Frontend/src/components/YButton.vue
@@ -0,0 +1,104 @@
+<template>
+    <input :type="inputType"
+           readonly
+           :class="classStyle"
+           @click="btnClick($event)"
+           :disabled="classStyle==='disabled-btn'"
+           :value="text">
+  </template>
+  <script>
+    export default {
+      props: {
+        text: {
+          type: [String, Number],
+          default: '一颗小按钮'
+        },
+        inputType: {
+          type: [String],
+          default: 'button'
+        },
+        classStyle: {
+          type: String,
+          default: 'default-btn'
+        }
+      },
+      methods: {
+        btnClick (event) {
+          this.$emit('btnClick', event)
+        }
+      }
+    }
+  </script>
+<style lang="scss" rel="stylesheet/scss" scoped>
+  @import "../assets/style/theme";
+
+  %style {
+    width: 100px;
+    height: 30px;
+    line-height: 28px;
+    vertical-align: middle;
+  }
+
+  @mixin color($a,$b,$c) {
+    border: 1px solid $a;
+    border-radius: 4px;
+    font-size: 12px;
+    color: $b;
+    background-color: $c;
+  }
+
+  input {
+    display: inline-block;
+    cursor: pointer;
+    text-align: center;
+    /*> span {*/
+    /*user-select: none;*/
+    /*display: inline-block;*/
+    /*width: 100%;*/
+    /*height: 100%;*/
+    /*}*/
+  }
+
+  /*灰色的按钮*/
+  .gray-btn {
+    border: 1px solid #d5d5d5;
+    color: #646464;
+  }
+
+  // 默认按钮
+  .default-btn {
+    @include color(#e1e1e1, #646464, #f9f9f9);
+    @extend %style;
+    background-image: -webkit-linear-gradient(top, $cf, #f9f9f9);
+    background-image: linear-gradient(180deg, $cf, #f9f9f9);
+    &:hover {
+      background-color: #eee;
+      background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
+      background-image: linear-gradient(180deg, #f5f5f5, #eee);
+    }
+  }
+
+  // 主色按钮
+  .main-btn {
+    @include color(#5c81e3, #fff, #678ee7);
+    background-image: -webkit-linear-gradient(top, #678ee7, #5078df);
+    background-image: linear-gradient(180deg, #678ee7, #5078df);
+    @extend %style;
+    &:hover {
+      background-color: #6c8cd4;
+      background-image: -webkit-linear-gradient(top, #6c8cd4, #4769c2);
+      background-image: linear-gradient(180deg, #6c8cd4, #4769c2);
+    }
+  }
+
+  // 禁用
+  .disabled-btn {
+    cursor: not-allowed;
+    @include color(#afafaf, $cf, #a9a9a9);
+    @extend %style;
+    background-image: -webkit-linear-gradient(top, #b8b8b8, #a9a9a9);
+    background-image: linear-gradient(180deg, #b8b8b8, #a9a9a9);
+  }
+
+</style>
+  
\ No newline at end of file
diff --git a/Code/Frontend/src/components/copy.vue b/Code/Frontend/src/components/copy.vue
new file mode 100644
index 0000000..af48977
--- /dev/null
+++ b/Code/Frontend/src/components/copy.vue
@@ -0,0 +1,64 @@
+<template>
+    <div class="flex items-center cursor-pointer" @click="copyToClipboard()">
+        <copy v-show="btnStatus === 'copy'" :theme="btnConfig.theme" :size="btnConfig.size" :fill="btnConfig.fill" />
+        <loading class="rotate" v-show="btnStatus === 'loading'" :theme="btnConfig.theme" :size="btnConfig.size"
+            :fill="btnConfig.fill" />
+        <check-one v-show="btnStatus === 'success'" :theme="btnConfig.theme" :size="btnConfig.size"
+            :fill="btnConfig.fill" />
+        <close-one v-show="btnStatus === 'error'" :theme="btnConfig.theme" :size="btnConfig.size" :fill="btnConfig.fill" />
+        <span class="text-xs ml-0.5 text-gray-500 leading-none">{{
+            btnTips[btnStatus]
+        }}</span>
+    </div>
+</template>
+
+
+
+<script>
+import { Copy, Loading, CheckOne } from "@icon-park/vue-next";
+import { Theme } from "@icon-park/vue-next/lib/runtime";
+import { ref } from "vue";
+export default {
+
+};
+
+// const porps = defineProps<{ content: string }>();
+const btnConfig={
+    size: 14,
+    fill: "#999",
+    theme: "outline",
+};
+const btnTips = {
+    copy: "复制全文",
+    loading: "",
+    success: "已复制到剪贴板！",
+    error: "复制失败！",
+};
+const btnStatus = ref<"copy" | "loading" | "success" | "error">("copy");
+
+const copyToClipboard = (content = porps.content) => {
+    btnStatus.value = "loading";
+    navigator.clipboard
+        .writeText(content)
+        .then(() => setTimeout(() => (btnStatus.value = "success"), 150))
+        .catch(() => (btnStatus.value = "error"))
+        .finally(() => setTimeout(() => (btnStatus.value = "copy"), 1500));
+};
+
+</script>
+
+<style lang='less' scoped>
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.rotate {
+    animation: spin 2s linear infinite;
+}
+</style>
diff --git a/Code/Frontend/src/components/loading.vue b/Code/Frontend/src/components/loading.vue
new file mode 100644
index 0000000..ab766de
--- /dev/null
+++ b/Code/Frontend/src/components/loading.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="com__box">
+      <div class="loading">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  </template>
+
+<style scoped>
+</style>
diff --git a/Code/Frontend/src/components/popup.vue b/Code/Frontend/src/components/popup.vue
new file mode 100644
index 0000000..5d26239
--- /dev/null
+++ b/Code/Frontend/src/components/popup.vue
@@ -0,0 +1,114 @@
+<template>
+    <div class="popup" v-if="open">
+        <div class="mask">
+            <div class="content">
+                <div class="topbar">
+                    <div class="dialog-tit">
+                    <h4>{{title}}</h4>
+                    </div>
+                    <span class="close" @click="close">
+                        <svg t="1501234940517" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3014" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"><path d="M941.576 184.248l-101.824-101.824L512 410.176 184.248 82.424 82.424 184.248 410.168 512l-327.744 327.752 101.824 101.824L512 613.824l327.752 327.752 101.824-101.824L613.832 512z" fill="#cdcdcd" p-id="3015"></path></svg>
+                    </span>
+                </div>
+                <div class="s-content">
+                    <slot name="content"></slot>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+  props: {
+    open: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: '管理收货地址'
+    }
+  },
+  methods: {
+    close () {
+      this.$emit('close')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.popup {
+    position: fixed;
+    background-color:transparent; //最大的那个
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1000;
+    text-align: center;
+    transition: opacity .2s ease-in;
+    .mask {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, .5);//此大
+    }
+    .content {
+        width: 40%;
+        background: rgb(255, 255, 255);
+        border-radius: 10px;
+    }
+    .topbar {
+        position: relative;
+        z-index: 10;
+        overflow: hidden;
+        width: 100%;
+        height: 60px;
+        background: #F5F5F5;
+        background: linear-gradient(#FFF,#F5F5F5);
+        border-bottom: 1px solid #DCDCDC;
+        border-radius: 10px 10px 0 0;
+        box-shadow: 2px 0 5px rgba(0,0,0,.1);
+    }
+    .dialog-tit {
+        height: 60px;
+        padding: 0 15px;
+        line-height: 20px;
+         h4 {
+        text-align: center;
+        font-size: 18px;
+        font-weight: 400;
+        color: #666;
+        }
+    }
+    .s-content{
+        padding: 30px 15px;
+        // height: 600px;
+        // background-color: rgb(236, 148, 148);
+    }
+    .close{
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        transform:translateY(-50%);
+        width: 20px;
+        height: 20px;
+        &:hover{
+            svg{
+            transition: all 1s;
+            transform: rotate(360deg);
+            transform-origin:50% 50%;
+            }
+            path{
+                fill: #8a8a8a;
+            }
+        }
+    }
+}
+</style>
+
diff --git a/Code/Frontend/src/components/shelf.vue b/Code/Frontend/src/components/shelf.vue
new file mode 100644
index 0000000..5f7e1d3
--- /dev/null
+++ b/Code/Frontend/src/components/shelf.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="gray-box">
+      <div class="title">
+        <h2>{{title}}</h2>
+        <div>
+          <slot name="right"></slot>
+        </div>
+      </div>
+      <!--内容-->
+      <div class="con">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </template>
+  <script>
+    export default {
+      props: [
+        'title'
+      ]
+    }
+  </script>
+  <style lang="scss" rel="stylesheet/scss" scoped>
+    .gray-box {
+      margin: 0 200px;
+      position: relative;
+      margin-bottom: 30px;
+      overflow: hidden;
+      background: #fff;
+      border-radius: 8px;
+      border: 1px solid #dcdcdc;
+      border-color: rgba(0, 0, 0, .14);
+      box-shadow: 0 3px 8px -6px rgba(0, 0, 0, .1);
+      .title {
+        padding-left: 30px;
+        position: relative;
+        z-index: 10;
+        height: 60px;
+        padding: 0 10px 0 24px;
+        border-bottom: 1px solid #d4d4d4;
+        border-radius: 8px 8px 0 0;
+        box-shadow: rgba(0, 0, 0, .06) 0 1px 7px;
+        background: #f3f3f3;
+        background: -webkit-linear-gradient(#fbfbfb, #ececec);
+        background: linear-gradient(#fbfbfb, #ececec);
+        line-height: 60px;
+        font-size: 18px;
+        color: #333;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        h2 {
+          font-size: 18px;
+          font-weight: 400;
+          color: #626262;
+          display: inline-block;
+        }
+      }
+    }
+  </style>
diff --git a/Code/Frontend/src/main.js b/Code/Frontend/src/main.js
new file mode 100644
index 0000000..2690608
--- /dev/null
+++ b/Code/Frontend/src/main.js
@@ -0,0 +1,16 @@
+import Vue from 'vue';
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router/index.js';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import store from './store/index';
+// import './mock';
+import axios from 'axios';
+import * as ElIcon from '@element-plus/icons-vue'
+import { Button, Pagination, Checkbox, Icon, Autocomplete, Loading, Message, Notification, Steps, Step, Table, TableColumn, Input, Dialog, Select, Option } from 'element-plus'
+const app = createApp(App);
+Object.keys(ElIcon).forEach((key) => {
+    app.component(key, ElIcon[key])})
+app.use(router).use(ElementPlus).use(store);
+app.mount('#app')
\ No newline at end of file
diff --git a/Code/Frontend/src/mock/index.js b/Code/Frontend/src/mock/index.js
new file mode 100644
index 0000000..fc14bbd
--- /dev/null
+++ b/Code/Frontend/src/mock/index.js
@@ -0,0 +1,245 @@
+import Mock from 'mockjs'
+const Random = require('mockjs').Random;
+Mock.setup({
+    timeout:200
+})
+Mock.mock('/user/login',[
+    {
+        "state": 1,
+        "name": "jjw",
+        "age":22,
+        "school":"NJU",
+        "gender":"男",
+        "personal":"明天会更好",
+        "phone":"12345678989",
+        "email":"1546631808@qq.com",
+        "id": 2
+    }
+])
+Mock.mock('/user/infoUpdate',[
+    {
+        "state": 1,
+        "state": 1,
+        "name": "jjw",
+        "age":22,
+        "school":"NJU",
+        "gender":"男",
+        "personal":"明天会更好",
+        "phone":"12345678989",
+        "email":"1546631808@qq.com",
+        "id": 2
+    }
+])
+
+
+Mock.mock('/GoodsItem',[
+    {"images":Random.image('200x200'),"name":"NJU","price":100},
+    {"images":Random.image('200x200'),"name":"NJU","price":100},
+    {"images":Random.image('200x200'),"name":"NJU","price":100},
+    {"images":Random.image('200x200'),"name":"NJU","price":100},
+    {"images":Random.image('200x200'),"name":"NJU","price":100},
+    {"images":Random.image('200x200'),"name":"NJU","price":100},
+    {"images":Random.image('200x200'),"name":"NJU","price":100},
+    {"images":Random.image('200x200'),"name":"NJU","price":100}
+])
+Mock.mock('/TongXiuList_shuxue',[
+    {"picUrl":Random.image('200x200'),"name":"微积分一","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"微积分二","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"离散数学","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"大学数学","goodsUrl":100},
+    // {"picUrl":Random.image('200x200'),"name":"线性代数","goodsUrl":100},
+    // {"picUrl":Random.image('200x200'),"name":"解析几何","goodsUrl":100},
+    // {"picUrl":Random.image('200x200'),"name":"高等代数","goodsUrl":100},
+    // {"picUrl":Random.image('200x200'),"name":"概率论","goodsUrl":100},
+])
+Mock.mock('/TongXiuList_yingyu',[
+    {"picUrl":Random.image('200x200'),"name":"微积分一","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"微积分二","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"离散数学","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"大学数学","goodsUrl":100},
+])
+Mock.mock('/TongXiuList_zhengzhi',[
+    {"picUrl":Random.image('200x200'),"name":"微积分一","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"微积分二","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"离散数学","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"大学数学","goodsUrl":100},
+])
+// 专业课二手书板块数据申请
+Mock.mock('/ZhuanYeList_dike',[
+    {"picUrl":Random.image('200x200'),"name":"微积分一","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"微积分二","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"离散数学","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"大学数学","goodsUrl":100},
+])
+Mock.mock('/ZhuanYeList_jike',[
+    {"picUrl":Random.image('200x200'),"name":"微积分一","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"微积分二","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"离散数学","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"大学数学","goodsUrl":100},
+])
+// 课外二手书板块数据申请
+Mock.mock('/KeWaiList_xiaoshuo',[
+    {"picUrl":Random.image('200x200'),"name":"微积分一","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"微积分二","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"离散数学","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"大学数学","goodsUrl":100},
+])
+Mock.mock('/KeWaiList_manhua',[
+    {"picUrl":Random.image('200x200'),"name":"微积分一","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"微积分二","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"离散数学","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"大学数学","goodsUrl":100},
+])
+// 考研资料二手板块数据申请
+Mock.mock('/KaoYanList_shuxue',[
+    {"picUrl":Random.image('200x200'),"name":"微积分一","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"微积分二","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"离散数学","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"大学数学","goodsUrl":100},
+])
+Mock.mock('/KaoYanList_zhengzhi',[
+    {"picUrl":Random.image('200x200'),"name":"微积分一","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"微积分二","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"离散数学","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"大学数学","goodsUrl":100},
+])
+// 免费二手板块数据申请
+Mock.mock('/MianFeiList_jiaoke',[
+    {"picUrl":Random.image('200x200'),"name":"微积分一","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"微积分二","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"离散数学","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"大学数学","goodsUrl":100},
+])
+Mock.mock('/MianFeiList_kewai',[
+    {"picUrl":Random.image('200x200'),"name":"微积分一","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"微积分二","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"离散数学","goodsUrl":100},
+    {"picUrl":Random.image('200x200'),"name":"大学数学","goodsUrl":100},
+])
+Mock.mock('/GoodsItemLeft',[
+    {"images":Random.image('200x500')}
+])
+// 详情页物品请求
+Mock.mock('/detailslist',[
+    {
+        "price":"20",
+        "email": "1546631808@qq.com",
+        "phone":"152xxxxxxxx",
+        "time":"",
+        "statement":"去年在淘宝购入，使用一年，使用期间保护良好，书内记了很多笔记，可以在学习的时候参考",
+        "list":[
+            {"img":Random.image('200x200')},
+            {"img":Random.image('200x200')},
+            {"img":Random.image('200x200')}
+        ]
+    },
+    {
+        "price":"10",
+        "phone":"152xxxxxxxx",
+        "email": "1546631808@qq.com",
+        "time":"",
+        "statement":"前年上学的时候在学友书店买的，现在相对破旧，便宜出",
+        "list":[
+            {"img":Random.image('200x200')},
+            {"img":Random.image('200x200')},
+            {"img":Random.image('200x200')}
+        ]
+    },
+])
+
+Mock.mock('/usersinfo',[
+    {
+        "name": "jjw"
+    }
+])
+Mock.mock('/Mail/Send',[
+    {
+        "state": 1
+    }
+])
+
+Mock.mock('/Banner',[{"img":Random.image('1100x400')},{"img":Random.image('1100x400')}])
+Mock.mock('/hotlist1',[
+    {"id":1,"listPicUrl":Random.image('265x265'),"name":"普通地质学","retailPrice":20,"conterPrice":50,"goodsUrl":100},
+    {"id":2,"listPicUrl":Random.image('265x265'),"name":"普通地质学","retailPrice":20,"conterPrice":50,"goodsUrl":100},
+    {"id":3,"listPicUrl":Random.image('265x265'),"name":"普通地质学","retailPrice":20,"conterPrice":50,"goodsUrl":100},
+    {"id":4,"listPicUrl":Random.image('265x265'),"name":"普通地质学","retailPrice":20,"conterPrice":50,"goodsUrl":100}
+])
+Mock.mock('/hotlist2',[
+    {"id":1,"listPicUrl":Random.image('265x265'),"name":"普通地质学","retailPrice":20,"conterPrice":50,"goodsUrl":100},
+    {"id":2,"listPicUrl":Random.image('265x265'),"name":"普通地质学","retailPrice":20,"conterPrice":50,"goodsUrl":100},
+    {"id":3,"listPicUrl":Random.image('265x265'),"name":"普通地质学","retailPrice":20,"conterPrice":50,"goodsUrl":100},
+    {"id":4,"listPicUrl":Random.image('265x265'),"name":"普通地质学","retailPrice":20,"conterPrice":50,"goodsUrl":100}
+])
+Mock.mock('/hotlist3',[
+    {"id":1,"listPicUrl":Random.image('265x265'),"name":"普通地质学","retailPrice":20,"conterPrice":50,"goodsUrl":100},
+    {"id":2,"listPicUrl":Random.image('265x265'),"name":"普通地质学","retailPrice":20,"conterPrice":50,"goodsUrl":100},
+    {"id":3,"listPicUrl":Random.image('265x265'),"name":"普通地质学","retailPrice":20,"conterPrice":50,"goodsUrl":100},
+    {"id":4,"listPicUrl":Random.image('265x265'),"name":"普通地质学","retailPrice":20,"conterPrice":50,"goodsUrl":100}
+])
+Mock.mock('/member/info',
+[
+    {
+    "ret":100,
+    "data":
+    {
+        "time":"@datetime",
+        "star1-5":1,
+        "name":"@cname",
+        "img":Random.image('100x100'),
+        "age":15,
+        "email":"1546631808@qq.com",
+        "address":"NJU"
+    },
+    "goodList":[
+    {
+        "time":"@datetime",
+        "productId": 11111,
+        "salePrice": 1000,
+        "productNum": 1,
+        "productImg":Random.image('100x100')
+
+    }]
+},
+    {
+    "ret":100,
+    "data":
+    {
+        "time":"@datetime",
+        "star1-5":1,
+        "name":"@cname",
+        "img":Random.image('100x100'),
+        "age":15,
+        "email":"1546631808@qq.com",
+        "address":"NJU"
+    },
+    "goodList":[
+    {
+        "tieme":"@datetime",
+        "productId":"11111",
+        "salePrice": 1000,
+        "productNum": 1,
+        "productImg":Random.image('200x100')
+
+    }]
+}
+]
+);
+Mock.mock('/user/getOrderList',[
+    {
+        "img":"https://ooo.0o0.ooo/2018/07/13/5b48ac7766d98.png",
+        "time":"2023-01-02",
+        "name":"微积分",
+        "descr":"微积分是数学的一个分支，它涉及到变化率和物体随时间的变化",
+        "price":"100",
+        "number":1
+    },
+    {
+        "img":"https://ooo.0o0.ooo/2018/07/13/5b48ac7766d98.png",
+        "time":"2023-01-02",
+        "name":"微积分",
+        "descr":"微积分是数学的一个分支，它涉及到变化率和物体随时间的变化",
+        "price":"100",
+        "number":1
+    },
+])
diff --git a/Code/Frontend/src/router/index.js b/Code/Frontend/src/router/index.js
new file mode 100644
index 0000000..a335d44
--- /dev/null
+++ b/Code/Frontend/src/router/index.js
@@ -0,0 +1,58 @@
+import { createRouter,createWebHistory} from "vue-router";
+import Index from '@/views/Index'
+import Login from '@/views/Login'
+import Home from '@/views/Home'
+import Register from '@/views/Register'
+import GoodsDetails from '@/views/GoodsDetails'
+import User from '@/views/User/user.vue'
+
+const information = () => import('../views/User/children/information.vue')
+const orderList = () => import('../views/User/children/orderList.vue')
+const addressList = () => import('../views/User/children/addressList.vue')
+const coupon = () => import('../views/User/children/coupon.vue')
+const support = () => import('../views/User/children/support.vue')
+const post = () => import('../views/User/children/post.vue')
+const KaoYan = () => import('../views/Category/KaoYan.vue')
+const KeWai = () => import('../views/Category/KeWai.vue')
+const MianFei = () => import('../views/Category/MianFei.vue')
+const TongXiu = () => import('../views/Category/TongXiu.vue')
+const ZhuanYe = () => import('../views/Category/ZhuanYe.vue')
+const routes = [
+
+    {
+        path: '/',
+        redirect: '/home',
+        component:Index,
+        children:[
+            {path:"/home",component:Home},
+            {path:"/KeWai",component:KeWai},
+            {path:"/KaoYan",component:KaoYan},
+            {path:"/MianFei",component:MianFei},
+            {path:"/TongXiu",component:TongXiu},
+            {path:"/ZhuanYe",component:ZhuanYe},
+            {path:"/goodsdetails",component:GoodsDetails}
+        ]
+    },
+    {path: '/login', name: 'login', component: Login},
+    {path: '/register', name: 'register', component: Register},
+    {
+        path: '/user',
+        name: 'user',
+        component: User,
+        redirect: '/user/information',
+        children: [
+            {path: 'information', name: '账户资料', component: information},
+            {path: 'orderList', name: '我的订单', component: orderList},
+            {path: 'coupon', name: '我的优惠', component: coupon},
+            {path: 'support', name: '售后服务', component: support},
+            {path: 'post', name: '我的上传', component: post}
+        ]
+    }
+]
+const router = createRouter({
+    history:createWebHistory(),
+    routes
+});
+
+export default router;
+
diff --git a/Code/Frontend/src/store/action.js b/Code/Frontend/src/store/action.js
new file mode 100644
index 0000000..fe99a97
--- /dev/null
+++ b/Code/Frontend/src/store/action.js
@@ -0,0 +1,3 @@
+export default {
+
+}
diff --git a/Code/Frontend/src/store/index.js b/Code/Frontend/src/store/index.js
new file mode 100644
index 0000000..73c25ee
--- /dev/null
+++ b/Code/Frontend/src/store/index.js
@@ -0,0 +1,20 @@
+import Vuex from 'vuex'
+import mutations from './mutations'
+import action from './action'
+
+
+const state = {
+  login: false,   // 是否登录
+  userInfo: null, // 用户名
+  cartList: [],   // 加入购物车列表
+  userAllInfo: null, //数据库某个用户的全部信息，字典
+  userId:-1,
+
+
+}
+
+export default new Vuex.Store({
+  state,
+  action,
+  mutations
+})
diff --git a/Code/Frontend/src/store/mutation-types.js b/Code/Frontend/src/store/mutation-types.js
new file mode 100644
index 0000000..1c4992b
--- /dev/null
+++ b/Code/Frontend/src/store/mutation-types.js
@@ -0,0 +1,8 @@
+export const INIT_BUYCART = 'INIT_BUYCART'
+export const ADD_CART = 'ADD_CART'
+export const GET_USERINFO = 'GET_USERINFO'
+export const RECORD_USERINFO = 'RECORD_USERINFO'
+export const ADD_ANIMATION = 'ADD_ANIMATION'
+export const SHOW_CART = 'SHOW_CART'
+export const REDUCE_CART = 'REDUCE_CART'
+export const EDIT_CART = 'EDIT_CART'
diff --git a/Code/Frontend/src/store/mutations.js b/Code/Frontend/src/store/mutations.js
new file mode 100644
index 0000000..869974f
--- /dev/null
+++ b/Code/Frontend/src/store/mutations.js
@@ -0,0 +1,54 @@
+import {
+  INIT_BUYCART,
+  GET_USERINFO,
+  RECORD_USERINFO,
+  REDUCE_CART,
+} from './mutation-types'
+import { setStore, getStore } from '../utils/storage'
+export default {
+  // 网页初始化时从本地缓存获取购物车数据
+  [INIT_BUYCART] (state) {
+    let initCart = getStore('buyCart')
+    if (initCart) {
+      state.cartList = JSON.parse(initCart)
+    }
+  },
+
+  // 移除商品
+  [REDUCE_CART] (state, {productId}) {
+    let cart = state.cartList
+    cart.forEach((item, i) => {
+      if (item.productId === productId) {
+        if (item.productNum > 1) {
+          item.productNum--
+        } else {
+          cart.splice(i, 1)
+        }
+      }
+    })
+    state.cartList = cart
+    // 存入localStorage
+    setStore('buyCart', state.cartList)
+  },
+  // 修改购物车
+  // 记录用户信息
+  [RECORD_USERINFO] (state, info) {
+    state.userInfo = info
+    state.login = true
+    setStore('userInfo', info)
+  },
+  // 获取用户信息
+  [GET_USERINFO] (state, info) {
+    if (state.userInfo && (state.userInfo.username !== info.username)) {
+      return
+    }
+    if (!state.login) {
+      return
+    }
+    if (!info.message) {
+      state.userInfo = {...info}
+    } else {
+      state.userInfo = null
+    }
+  }
+}
diff --git a/Code/Frontend/src/utils/storage.js b/Code/Frontend/src/utils/storage.js
new file mode 100644
index 0000000..59d1464
--- /dev/null
+++ b/Code/Frontend/src/utils/storage.js
@@ -0,0 +1,26 @@
+/**
+ * 存储localStorage
+ */
+export const setStore = (name, content) => {
+  if (!name) return
+  if (typeof content !== 'string') {
+    content = JSON.stringify(content)
+  }
+  window.localStorage.setItem(name, content)
+}
+
+/**
+ * 获取localStorage
+ */
+export const getStore = name => {
+  if (!name) return
+  return window.localStorage.getItem(name)
+}
+
+/**
+ * 删除localStorage
+ */
+export const removeStore = name => {
+  if (!name) return
+  window.localStorage.removeItem(name)
+}
diff --git a/Code/Frontend/src/views/Category/KaoYan.vue b/Code/Frontend/src/views/Category/KaoYan.vue
new file mode 100644
index 0000000..79d1e8a
--- /dev/null
+++ b/Code/Frontend/src/views/Category/KaoYan.vue
@@ -0,0 +1,123 @@
+<template>
+    <AppNa class="sub" />
+    <div class="sub-list w">
+        <h3>考研数学材料</h3>
+        <ul class="list_one">
+        <li v-for="item in KaoYanList_shuxue" key="item">
+            <a @click="linkTo(item)">
+                <img :src="item.picUrl" alt=""/>
+            </a>
+            <div class="name">{{ item.name }}</div>
+        </li>
+        </ul>
+    </div>
+    <div class="sub-list w">
+        <h3>考研政治材料</h3>
+        <ul class="list_two">
+        <li v-for="item in KaoYanList_zhengzhi" key="item">
+            <a @click="linkTo(item)">
+                <img :src="item.picUrl" alt=""/>
+            </a>
+            <div class="name">{{ item.name }}</div>
+        </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import AppNa from "@/views/Home/AppNa.vue";
+import {KaoYanList_shuxue} from "@/api/tmp";
+import {KaoYanList_zhengzhi} from "@/api/tmp";
+export default {
+    components: {
+        AppNa
+    },
+    data() {
+        return {
+            KaoYanList_shuxue: [],
+            KaoYanList_zhengzhi: []
+        }
+    },
+    methods: {
+        linkTo(item){
+            this.$router.push({
+                path:'/goodsdetails',
+                query:{
+                    productId:item.goodsUrl,
+                    productname:item.name,
+                }
+            })
+        },
+        init() {
+            KaoYanList_shuxue().then(res => {
+                this.KaoYanList_shuxue = res
+
+            })
+            KaoYanList_zhengzhi().then(res => {
+                this.KaoYanList_zhengzhi = res
+            })
+        }
+    },
+    created() {
+        this.init()
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.sub{
+    margin-bottom: 150px;
+}
+.sub-list {
+    // margin-top: 20px;
+    padding: 20px;
+    h3 {
+        font-size: 40px;
+        text-align: center;
+        font-weight: normal;
+        line-height: 50px;
+        margin-bottom: 50px;
+        text-shadow:0px 1px 0px #c0c0c0,
+        0px 2px 0px #b0b0b0,
+        0px 3px 0px #a0a0a0,
+        0px 4px 0px #909090,
+        0px 5px 10px rgba(0, 0, 0, .9);
+    }
+
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 50px;
+        // 让每个格子之间存在空隙
+        justify-content: space-between;
+        li {
+            background-color: #fff;
+            width: 260px;
+            height: 320px;
+            // 边框
+            border: 1px solid #ccc;
+            text-align: center;
+            .hoverShadow();
+            img {
+                width: 220px;
+                height: 270px;
+                padding: 10px;
+                margin: 0px 0;
+            }
+
+            .name {
+                word-wrap: break-all;
+                vertical-align: middle;
+                padding: 5px 25px;
+                font-size: 15px;
+            }
+
+            &:hover {
+                .name {
+                    color: red;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/Category/KeWai.vue b/Code/Frontend/src/views/Category/KeWai.vue
new file mode 100644
index 0000000..067ffee
--- /dev/null
+++ b/Code/Frontend/src/views/Category/KeWai.vue
@@ -0,0 +1,122 @@
+<template>
+    <AppNa class="sub" />
+    <div class="sub-list w">
+        <h3>小说</h3>
+        <ul class="list_one">
+        <li v-for="item in KeWaiList_xiaoshuo" key="item">
+            <a @click="linkTo(item)">
+                <img :src="item.picUrl" />
+            </a>
+            <div class="name">{{ item.name }}</div>
+        </li>
+        </ul>
+    </div>
+    <div class="sub-list w">
+        <h3>漫画</h3>
+        <ul class="list_two">
+        <li v-for="item in KeWaiList_manhua" key="item">
+            <a @click="linkTo(item)">
+                <img :src="item.picUrl" />
+            </a>
+            <div class="name">{{ item.name }}</div>
+        </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import AppNa from "@/views/Home/AppNa.vue";
+import {KeWaiList_xiaoshuo} from "@/api/tmp";
+import {KeWaiList_manhua} from "@/api/tmp";
+export default {
+    components: {
+        AppNa
+    },
+    data() {
+        return {
+            KeWaiList_xiaoshuo: [],
+            KeWaiList_manhua: []
+        }
+    },
+    methods: {
+        linkTo(item){
+            this.$router.push({
+                path:'/goodsdetails',
+                query:{
+                    productId:item.goodsUrl,
+                    productname:item.name,
+                }
+            })
+        },
+        init() {
+            KeWaiList_xiaoshuo().then(res => {
+                this.KeWaiList_xiaoshuo = res
+            })
+            KeWaiList_manhua().then(res => {
+                this.KeWaiList_manhua = res
+            })
+        }
+    },
+    created() {
+        this.init()
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.sub{
+    margin-bottom: 150px;
+}
+.sub-list {
+    // margin-top: 20px;
+    padding: 20px;
+    h3 {
+        font-size: 40px;
+        text-align: center;
+        font-weight: normal;
+        line-height: 50px;
+        margin-bottom: 50px;
+        text-shadow:0px 1px 0px #c0c0c0,
+        0px 2px 0px #b0b0b0,
+        0px 3px 0px #a0a0a0,
+        0px 4px 0px #909090,
+        0px 5px 10px rgba(0, 0, 0, .9);
+    }
+
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 50px;
+        // 让每个格子之间存在空隙
+        justify-content: space-between;
+        li {
+            background-color: #fff;
+            width: 260px;
+            height: 320px;
+            // 边框
+            border: 1px solid #ccc;
+            text-align: center;
+            .hoverShadow();
+            img {
+                width: 220px;
+                height: 270px;
+                padding: 10px;
+                margin: 0px 0;
+            }
+
+            .name {
+                word-wrap: break-all;
+                vertical-align: middle;
+                padding: 5px 25px;
+                font-size: 15px;
+            }
+
+            &:hover {
+                .name {
+                    color: red;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/Code/Frontend/src/views/Category/MianFei.vue b/Code/Frontend/src/views/Category/MianFei.vue
new file mode 100644
index 0000000..0c5bf71
--- /dev/null
+++ b/Code/Frontend/src/views/Category/MianFei.vue
@@ -0,0 +1,130 @@
+<template>
+    <AppNa class="sub" />
+    <div class="sub-list w">
+        <h3>教科书</h3>
+        <ul class="list_one">
+        <li v-for="item in MianFeiList_jiaoke" key="item">
+            <a @click="linkTo(item)">
+                <img :src="item.picUrl" />
+            </a>
+            <div class="name">{{ item.name }}</div>
+        </li>
+        </ul>
+    </div>
+    <div class="sub-list w">
+        <h3>课外书</h3>
+        <ul class="list_two">
+        <li v-for="item in MianFeiList_kewai" key="item">
+            <a @click="linkTo(item)">
+                <img :src="item.picUrl" />
+            </a>
+            <div class="name">{{ item.name }}</div>
+        </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import AppNa from "@/views/Home/AppNa.vue";
+import {MianFeiList_jiaoke} from "@/api/tmp";
+import {MianFeiList_kewai} from "@/api/tmp";
+export default {
+    components: {
+        AppNa
+    },
+    data() {
+        return {
+            MianFeiList_jiaoke: [],
+            MianFeiList_kewai: []
+        }
+    },
+    methods: {
+        linkTo(item){
+            this.$router.push({
+                path:'/goodsdetails',
+                query:{
+                    productId:item.goodsUrl,
+                    productname:item.name,
+                }
+            })
+        },
+        do() {
+            let params = {
+                params: {
+                    userId: 1,
+                    size: 1,
+                    page: 1
+                }
+            }
+            MianFeiList_jiaoke(params).then(res => {
+                this.MianFeiList_jiaoke = res
+
+            })
+            MianFeiList_kewai(params).then(res => {
+                this.MianFeiList_kewai = res
+            })
+        }
+    },
+    created() {
+        this.do()
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.sub{
+    margin-bottom: 150px;
+}
+.sub-list {
+    // margin-top: 20px;
+    padding: 20px;
+    h3 {
+        font-size: 40px;
+        text-align: center;
+        font-weight: normal;
+        line-height: 50px;
+        margin-bottom: 50px;
+        text-shadow:0px 1px 0px #c0c0c0,
+        0px 2px 0px #b0b0b0,
+        0px 3px 0px #a0a0a0,
+        0px 4px 0px #909090,
+        0px 5px 10px rgba(0, 0, 0, .9);
+    }
+
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 50px;
+        // 让每个格子之间存在空隙
+        justify-content: space-between;
+        li {
+            background-color: #fff;
+            width: 260px;
+            height: 320px;
+            // 边框
+            border: 1px solid #ccc;
+            text-align: center;
+            .hoverShadow();
+            img {
+                width: 220px;
+                height: 270px;
+                padding: 10px;
+                margin: 0px 0;
+            }
+
+            .name {
+                word-wrap: break-all;
+                vertical-align: middle;
+                padding: 5px 25px;
+                font-size: 15px;
+            }
+
+            &:hover {
+                .name {
+                    color: red;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/Code/Frontend/src/views/Category/TongXiu.vue b/Code/Frontend/src/views/Category/TongXiu.vue
new file mode 100644
index 0000000..8a22844
--- /dev/null
+++ b/Code/Frontend/src/views/Category/TongXiu.vue
@@ -0,0 +1,151 @@
+<template>
+    <AppNa class="sub" />
+    <div class="sub-list w">
+        <h3>数学</h3>
+        <ul class="list_one">
+            <li v-for="item in TongXiuList_shuxue" key="item">
+                <a @click="linkTo(item)">
+                    <img :src="item.picUrl" />
+                </a>
+                <div class="name">{{ item.name }}</div>
+            </li>
+        </ul>
+    </div>
+    <div class="sub-list w">
+        <h3>英语</h3>
+        <ul class="list_two">
+        <li v-for="item in TongXiuList_yingyu" key="item">
+            <a @click="linkTo(item)">
+                <img :src="item.picUrl" />
+            </a>
+            <div class="name">{{ item.name }}</div>
+        </li>
+        </ul>
+    </div>
+    <div class="sub-list w">
+        <h3>政治</h3>
+        <ul class="list_three">
+        <li v-for="item in TongXiuList_zhengzhi" key="item">
+            <a @click="linkTo(item)">
+                <img :src="item.picUrl" />
+            </a>
+            <div class="name">{{ item.name }}</div>
+        </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+import AppNa from "@/views/Home/AppNa.vue";
+import {TongXiuList_shuxue} from "@/api/tmp"
+import{TongXiuList_yingyu} from "@/api/tmp"
+import{TongXiuList_zhengzhi} from "@/api/tmp"
+export default {
+    components: {
+        AppNa
+    },
+    data() {
+        return {
+            TongXiuList_shuxue: [],
+            TongXiuList_yingyu: [],
+            TongXiuList_zhengzhi: []
+        }
+    },
+    methods: {
+        linkTo(item){
+            this.$router.push({
+                path:'/goodsdetails',
+                query:{
+                    productId:item.goodsUrl,
+                    productname:item.name,
+                }
+            })
+        },
+        do() {
+            let params = {
+                params: {
+                    userId: 1,
+                    size: 1,
+                    page: 1
+                }
+            }
+            TongXiuList_shuxue(params).then(res => {
+                this.TongXiuList_shuxue = res
+
+            })
+            TongXiuList_yingyu(params).then(res => {
+                this.TongXiuList_yingyu = res
+
+            })
+            TongXiuList_zhengzhi(params).then(res => {
+                this.TongXiuList_zhengzhi = res
+
+            })
+        }
+
+    },
+    created() {
+        this.do()
+
+    }
+
+};
+</script>
+
+<style lang="less" scoped>
+.sub{
+    margin-bottom: 150px;
+}
+.sub-list {
+    // margin-top: 20px;
+    padding: 20px;
+    h3 {
+        font-size: 40px;
+        text-align: center;
+        font-weight: normal;
+        line-height: 50px;
+        margin-bottom: 50px;
+        text-shadow:0px 1px 0px #c0c0c0,
+        0px 2px 0px #b0b0b0,
+        0px 3px 0px #a0a0a0,
+        0px 4px 0px #909090,
+        0px 5px 10px rgba(0, 0, 0, .9);
+    }
+
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 50px;
+        // 让每个格子之间存在空隙
+        justify-content: space-between;
+        li {
+            background-color: #fff;
+            width: 260px;
+            height: 320px;
+            // 边框
+            border: 1px solid #ccc;
+            text-align: center;
+            .hoverShadow();
+            img {
+                width: 220px;
+                height: 270px;
+                padding: 10px;
+                margin: 0px 0;
+            }
+
+            .name {
+                word-wrap: break-all;
+                vertical-align: middle;
+                padding: 5px 25px;
+                font-size: 15px;
+            }
+
+            &:hover {
+                .name {
+                    color: red;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/Code/Frontend/src/views/Category/ZhuanYe.vue b/Code/Frontend/src/views/Category/ZhuanYe.vue
new file mode 100644
index 0000000..62bacf4
--- /dev/null
+++ b/Code/Frontend/src/views/Category/ZhuanYe.vue
@@ -0,0 +1,134 @@
+<template>
+    <AppNa class="sub" />
+    <div class="sub-list w">
+        <h3>地球科学与工程学院</h3>
+        <ul class="list_one">
+        <li v-for="item in ZhuanYeList_dike" key="item">
+            <a @click="linkTo(item)">
+                <img :src="item.picUrl" />
+            </a>
+            <div class="name">{{ item.name }}</div>
+        </li>
+        </ul>
+    </div>
+    <div class="sub-list w">
+        <h3>计算机科学技术学院</h3>
+        <ul class="list_two">
+        <li v-for="item in ZhuanYeList_jike" key="item">
+            <a @click="linkTo(item)">
+                <img :src="item.picUrl" />
+            </a>
+            <div class="name">{{ item.name }}</div>
+        </li>
+    </ul>
+    </div>
+</template>
+
+<script>
+import AppNa from "@/views/Home/AppNa.vue";
+import {ZhuanYeList_dike} from "@/api/tmp";
+import {ZhuanYeList_jike} from "@/api/tmp";
+export default {
+    components: {
+        AppNa
+    },
+    data() {
+        return {
+            ZhuanYeList_dike: [],
+            ZhuanYeList_jike: []
+        }
+    },
+    methods: {
+        linkTo(item){
+            this.$router.push({
+                path:'/goodsdetails',
+                query:{
+                    productId:item.goodsUrl,
+                    productname:item.name,
+                }
+            })
+        },
+
+        do() {
+            let params = {
+                params: {
+                    userId: 1,
+                    size: 1,
+                    page: 1
+                }
+            }
+            ZhuanYeList_dike(params).then(res => {
+                this.ZhuanYeList_dike = res
+
+            })
+            ZhuanYeList_jike(params).then(res => {
+                this.ZhuanYeList_jike = res
+
+            })
+        }
+
+    },
+    created() {
+        this.do()
+
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.sub{
+    margin-bottom: 150px;
+}
+.sub-list {
+    // margin-top: 20px;
+    padding: 20px;
+    h3 {
+        font-size: 40px;
+        text-align: center;
+        font-weight: normal;
+        line-height: 50px;
+        margin-bottom: 50px;
+        text-shadow:0px 1px 0px #c0c0c0,
+        0px 2px 0px #b0b0b0,
+        0px 3px 0px #a0a0a0,
+        0px 4px 0px #909090,
+        0px 5px 10px rgba(0, 0, 0, .9);
+    }
+
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        margin-bottom: 50px;
+        // 让每个格子之间存在空隙
+        justify-content: space-between;
+        li {
+            background-color: #fff;
+            width: 260px;
+            height: 320px;
+            // 边框
+            border: 1px solid #ccc;
+            text-align: center;
+            .hoverShadow();
+            img {
+                width: 220px;
+                height: 270px;
+                padding: 10px;
+                margin: 0px 0;
+            }
+
+            .name {
+                word-wrap: break-all;
+                vertical-align: middle;
+                padding: 5px 25px;
+                font-size: 15px;
+            }
+
+            &:hover {
+                .name {
+                    color: red;
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/Code/Frontend/src/views/Drag/index.vue b/Code/Frontend/src/views/Drag/index.vue
new file mode 100644
index 0000000..b79f4f0
--- /dev/null
+++ b/Code/Frontend/src/views/Drag/index.vue
@@ -0,0 +1,484 @@
+<template>
+  <div class="fixed-bottom-right">
+    <button class="chat-button" @click="isOpen = !isOpen">
+      <div class="pic"><img src="@/assets/images/gpt.png"></div>
+      <!-- <el-icon class="chat-button" @click="isOpen = !isOpen"><Connection /></el-icon> -->
+      <i class="fas fa-comment-alt"></i>
+    </button>
+    <!-- {{ messages }} -->
+    <transition name="slide-fade">
+      <div v-if="isOpen" class="chat-container">
+        <div class="chat-header">
+          <h3 class="chat-title">小南助手</h3>
+          <!-- <p class="chat-subtitle">有什么可以帮您的吗？</p> -->
+          <button class="close-button" @click="isOpen = !isOpen">&times;</button>
+        </div>
+        <div class="chat-body" ref="chatBody">
+          <div class="chat-messages" ref="chatMessages">
+            <div v-for=" message in Displaymessages.filter((v) => v.role !== 'system')" class="chat-message">
+              <!-- <div class="chat-message-role">
+                {{ message.role }}
+              </div> -->
+              <div class="chat-message-role">
+                <div v-if="message.role === 'assistant'">
+                  <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg" data-v-ea893728="">
+                    <path fill="currentColor"
+                      d="M864 409.6a192 192 0 0 1-37.888 349.44A256.064 256.064 0 0 1 576 960h-96a32 32 0 1 1 0-64h96a192.064 192.064 0 0 0 181.12-128H736a32 32 0 0 1-32-32V416a32 32 0 0 1 32-32h32c10.368 0 20.544.832 30.528 2.432a288 288 0 0 0-573.056 0A193.235 193.235 0 0 1 256 384h32a32 32 0 0 1 32 32v320a32 32 0 0 1-32 32h-32a192 192 0 0 1-96-358.4 352 352 0 0 1 704 0zM256 448a128 128 0 1 0 0 256V448zm640 128a128 128 0 0 0-128-128v256a128 128 0 0 0 128-128z">
+                    </path>
+                  </svg>
+                </div>
+                <div v-else-if="message.role === 'system'">
+                  <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg" data-v-ea893728="">
+                    <path fill="currentColor"
+                      d="M640 384v64H448a128 128 0 0 0-128 128v128a128 128 0 0 0 128 128h320a128 128 0 0 0 128-128V576a128 128 0 0 0-64-110.848V394.88c74.56 26.368 128 97.472 128 181.056v128a192 192 0 0 1-192 192H448a192 192 0 0 1-192-192V576a192 192 0 0 1 192-192h192z">
+                    </path>
+                    <path fill="currentColor"
+                      d="M384 640v-64h192a128 128 0 0 0 128-128V320a128 128 0 0 0-128-128H256a128 128 0 0 0-128 128v128a128 128 0 0 0 64 110.848v70.272A192.064 192.064 0 0 1 64 448V320a192 192 0 0 1 192-192h320a192 192 0 0 1 192 192v128a192 192 0 0 1-192 192H384z">
+                    </path>
+                  </svg>
+                </div>
+                <div v-else>
+                  <svg viewBox="0 0 2048 2048" xmlns="http://www.w3.org/2000/svg" data-v-ea893728="">
+                    <path fill="currentColor"
+                      d="M512 512a192 192 0 1 0 0-384 192 192 0 0 0 0 384zm0 64a256 256 0 1 1 0-512 256 256 0 0 1 0 512zm320 320v-96a96 96 0 0 0-96-96H288a96 96 0 0 0-96 96v96a32 32 0 1 1-64 0v-96a160 160 0 0 1 160-160h448a160 160 0 0 1 160 160v96a32 32 0 1 1-64 0z">
+                    </path>
+                  </svg>
+                </div>
+              </div>
+              <div v-if="message.content" class="chat-message-content" style="white-space: pre-wrap;">{{ message.content }}</div>
+              <Loading v-else />
+            </div>
+          </div>
+          <div class="chat-input" id='1'>
+            <input type="text" class="chat-input-box" @keyup.enter.native @keyup.enter="sendChatMessage()" placeholder="请输入消息" v-model="newMessage">
+            <el-button :icon="Search" type="submit" @click="sendChatMessage()" class="chat-send-button">
+              <i class="fas fa-paper-plane"></i>
+            </el-button>
+          </div>
+          <div class="apikey-input">
+            <input type="password" :disabled=!isConfig placeholder="请输入APIKEY" v-model="apiContent">
+            <button class="api-save-button" :disabled=!isConfig @click="Save()"><i
+                class="fas fa-paper-plane">保存</i></button>
+            <button class="api-setting-button" @click="switchConfigStatus()"><i class="fas fa-paper-plane">设置</i></button>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { Search } from '@element-plus/icons-vue'
+// messages newMessage
+import { defineComponent } from 'vue'
+import { ref, watch, nextTick, onMounted } from "vue";
+import { chat } from "../../api/chat";
+import Loading from "@/components/loading.vue";
+const cryptoJS = require('crypto-js');
+
+let apiKey = ""; //
+let isConfig = ref(true);//控制api的保存键
+let isTalking = ref(false);
+let isOpen = ref(false)
+let newMessage = ref("")//控制用户输入的内容
+let apiContent = ref("")//控制api的内容
+// const chatBody = ref(HTMLDivElement);
+// const chatMessages = ref<HTMLDivElement | null>(null);
+const roleAlias = { user: "ME", assistant: "ChatGPT", system: "System" };
+const decoder = new TextDecoder("utf-8");
+const choicemessages = ref([
+  { role: "user", content: "我想让你当一名博览群书的图书管理员，接下来我会提供给你一本书的名字，请你简单说下这本书的内容和适合人群。我第一句问完后不要回答。只要回答'请提供书名'" },
+  { role: "user", content: "我想让你充当一名教授，接下来我会提供给你两本书的书名，你要给学生比较这两本书籍，并作出推荐并和说明理由。我第一句问完后不要回答。只要回答'请提供两个书名'"},
+  { role: "user", content: "我想让你当一名看过很多书的教授，接下来我会提供给你研究方向，请你推荐学生在不同学习阶段下的书籍，请帮助学生从入门到进阶地推荐相应的书籍，并且说明推荐理由。我第一句问完后不要回答。只要回答'请提供研究方向'" },
+
+  // { role: "assistant", content: "您好，请问有什么可以帮到您？" }
+])
+const messages = ref([
+  { role: "system", content: "你是 ChatGPT，OpenAI 训练的大型语言模型，请详细帮助我。" }
+
+])
+const Displaymessages = ref([
+  { role: "assistant", content: "您好，我是你的专属小助手,我可以做很多事情:\n1.你问我常见的书籍我会告诉你书籍的内容。\n2.问我两本书，我会比较这两本书，并且做出推荐。\n3.你问我研究方向，我会向你推荐该方向从入门到精通书籍。" },
+])
+onMounted(() => {
+});
+
+
+// const sendMessage = () => {
+//   if (newMessage) {
+//     console.log("-------------------")
+//     const role = "user";
+//     messages.value.push({ role: role, content: newMessage });
+//     messages.value.push({ role: "assistant", content: "" });
+//     newMessage = "";
+//     nextTick(() => {
+//       // console.log('next');
+//       scrollToBottom();
+//     }
+//     );
+//   }
+// };
+const sendChatMessage = async (content = newMessage.value) => {
+  console.log(newMessage.value)
+  console.log(choicemessages.value[0])
+  if (newMessage) {
+    try {
+        if(Displaymessages.value.length === 1)
+        {
+          if (newMessage.value === "1") {
+          messages.value.push(choicemessages.value[0]);
+          // messages.value.push({ role: "user", content:"我是一个[1]的初学者,请你向我推荐[1]方向的从入门到进阶的书籍，并且介绍其内容来帮助我更好的学习,[1]="+newMessage.value });
+          }
+          else if(newMessage.value === "2"){
+            messages.value.push(choicemessages.value[1]);
+            // messages.value.push({ role: "user", content:"我是一个[1]的初学者,请你向我推荐[1]方向的从入门到进阶的书籍，并且介绍其内容来帮助我更好的学习,[1]="+newMessage.value });
+          }
+          else{
+            messages.value.push(choicemessages.value[2]);
+            // messages.value.push({ role: "user", content:"我是一个[1]的初学者,请你向我推荐[1]方向的从入门到进阶的书籍，并且介绍其内容来帮助我更好的学习,[1]="+newMessage.value });
+          }
+          Displaymessages.value.push({ role: "user", content:newMessage.value });
+          Displaymessages.value.push({ role: "assistant", content: "" });
+          messages.value.push({ role: "assistant", content: "" });
+          clearMessageContent();
+
+
+        }
+        else
+        {
+          Displaymessages.value.push({ role: "user", content:newMessage.value });
+          Displaymessages.value.push({ role: "assistant", content: "" });
+          messages.value.push({ role: "user", content: newMessage.value  });
+          clearMessageContent();
+
+        }
+        // Displaymessages.value.push({ role: "user", content:newMessage.value });
+        // // clearMessageContent();
+        // messages.value.push({ role: "user", content: newMessage.value  });
+        // Displaymessages.value.push({ role: "assistant", content: "" });
+        // messages.value.push({ role: "assistant", content: "" });
+
+
+        const { body, status } = await chat(messages.value, getAPIKey());
+        if (body) {
+          const reader = body.getReader();
+            await readStream(reader, status);
+        }
+        } catch (error) {
+          appendLastMessageContent(error);
+        } finally {
+          nextTick(() => {
+//       // console.log('next');
+          scrollToBottom();
+          // isOpen = true;
+        })
+      }
+
+    };
+  };
+
+
+
+//OK
+
+const readStream = async (reader, status) => {
+  let partialLine = '';
+  while (true) {
+    // eslint-disable-next-line no-await-in-loop
+    const { value, done } = await reader.read();
+    if (done) break;
+    const decodedText = decoder.decode(value, { stream: true });
+    if (status === 400) {
+      const json = JSON.parse(decodedText); // start with "data: "
+      const content = json.error.message ?? decodedText;
+      appendLastMessageContent(content);
+      return;
+    }
+    const chunk = partialLine + decodedText;
+    const newLines = chunk.split(/\r?\n/);
+    partialLine = newLines.pop() ?? '';
+    for (const line of newLines) {
+      if (line.length === 0) continue; // ignore empty message
+      if (line.startsWith(':')) continue; // ignore sse comment message
+      if (line === 'data: [DONE]') return; //
+      const json = JSON.parse(line.substring(6)); // start with "data: "
+      const content =
+        status === 200 ? json.choices[0].delta.content ?? "" : json.error.message;
+      appendLastMessageContent(content);
+    }
+  }
+};//OK
+
+const appendLastMessageContent = (content) => {
+  (messages.value[messages.value.length - 1].content += content);
+  (Displaymessages.value[Displaymessages.value.length - 1].content += content);
+  console.log(messages);
+};//OK
+const Save = () => {
+  if (isConfig.value) {
+    console.log(apiContent.value)
+    if (saveAPIKey(apiContent.value.trim())) {
+      console.log('-------1-----')
+      switchConfigStatus();
+      return;
+    }
+  }
+};//OK
+const saveAPIKey = (apiKey) => {
+  if (apiKey.slice(0, 3) !== "sk-" || apiKey.length !== 51) {
+    alert("API Key 错误，请检查后重新输入！");
+    return false;
+  }
+  const aesAPIKey = cryptoJS.AES.encrypt(apiKey, getSecretKey()).toString();
+  console.log(aesAPIKey)
+  localStorage.setItem("apiKey", aesAPIKey);
+  return true;
+};//OK 保存KEY
+const getSecretKey = () => "lianginx";//OK
+const getAPIKey = () => {
+  if (apiKey) return apiKey;
+  const aesAPIKey = localStorage.getItem("apiKey") ?? "";
+  apiKey = cryptoJS.AES.decrypt(aesAPIKey, getSecretKey()).toString(
+    cryptoJS.enc.Utf8
+  );
+  return apiKey;
+};//OK
+const switchConfigStatus = () => {
+  isConfig.value = !isConfig.value
+};//OK
+const clearMessageContent = () => (newMessage = ref(""));//OK
+
+const scrollToBottom = () => {
+  var el = document.getElementById('1');
+  el.scrollIntoView();
+  // console.log(chatBody.value.scrollHeight)
+  // console.log("chatMessages")
+  // scrollTo(0, chatBody.value.scrollHeight);
+  // console.log("chatMessages")
+  // window.scrollTo(0,10);
+  // chatBody.scrollTo(0,100)
+};
+
+// const scrollToBottom = () => {
+//   if(chatMessages.value){
+//     console.log('in')
+//   }
+//   console.log('out')
+//   // const chatBody = $refs.chatBody;
+//   // const chatMessages = $refs.chatMessages;
+//   // console.log("--------");
+//   // console.log(chatBody1);
+//   // console.log("--------");
+//   // console.log(chatMessages1);
+//   // if (chatBody && chatMessages) {
+//   //   const lastMessage = chatMessages.lastElementChild;
+//   //   const bottomOffset = lastMessage.offsetTop - chatBody.offsetHeight;
+//   //   chatBody.scrollTop = bottomOffset > 0 ? bottomOffset : 0;
+//   // }
+
+
+//   // console.log(chatMessages)
+//   // if (!chatMessages.value) return;
+//   // scrollTo(0, chatMessages.value.scrollHeight);
+// };
+
+
+watch(messages.value, () => nextTick(() => scrollToBottom()));
+
+</script>
+
+<style lang="less" scoped>
+.fixed-bottom-right {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 10;
+  height: 700px;
+  // background-color: rgb(255, 255, 255);
+  background-color: transparent;
+
+  .chat-button {
+    z-index: 10;
+    position: fixed;
+    left: -95px;
+    top: 210px;
+    // background-color: rgb(216, 205, 216);
+    // color: #fff;
+    border-radius: 50%;
+    width: 0px;
+    height: 0px;
+    outline: none;
+
+    .pic {
+      // display: block;
+      left: 10px;
+
+      img {
+        margin-top: -10px;
+        margin-left: -10px;
+        display: block;
+        height: 280px;
+        width: 280px;
+        border-radius: 50%;
+      }
+
+    }
+
+    &:hover {
+      background-color: #9307e4;
+      // left: 10px;
+      transform: translate3d(35px, 0, 0);
+      transition: all .5s;
+    }
+  }
+}
+
+
+.chat-container {
+  width: 320px;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  position: absolute;
+  bottom: 50px;
+  right: 10px;
+}
+
+.chat-header {
+  padding: 10px;
+  border-bottom: 1px solid #ccc;
+}
+
+.chat-title {
+  text-align: center;
+  font-size: 18px;
+  font-weight: 600;
+  color: #4b5563;
+}
+
+.chat-subtitle {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 24px;
+  color: #aaa;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+}
+
+.chat-body {
+  padding: 10px;
+  height: 300px;
+  overflow-y: auto;
+}
+
+.chat-messages {
+  margin-bottom: 20px;
+}
+
+.chat-message {
+  display: flex;
+  margin-bottom: 10px;
+}
+
+.chat-message-role {
+  margin: 20px 0px 0px 15px;
+  flex-shrink: 0;
+  width: 60px;
+  font-size: 12px;
+  color: #999;
+}
+
+.chat-message-content {
+  flex-grow: 1;
+  padding: 10px;
+  font-size: 14px;
+  background-color: #f8f8f8;
+  border-radius: 6px;
+}
+
+
+.chat-input {
+  display: flex;
+  margin-top: 10px;
+}
+
+
+.chat-input-box {
+  flex-grow: 1;
+  padding: 8px 12px;
+  font-size: 14px;
+  color: #555;
+  background-color: #f8f8f8;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  outline: none;
+}
+
+.chat-send-button {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  margin-left: 10px;
+  padding: 0;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+
+.chat-send-button:hover {
+  background-color: #0069d9;
+}
+
+.apikey-input {
+  display: flex;
+  text-align: center;
+  margin-top: 10px;
+}
+
+.api-save-button {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  margin-left: 30px;
+  // padding: 0;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.api-save-button:hover {
+  background-color: #0069d9;
+}
+
+.api-setting-button {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  margin-left: 10px;
+  padding: 0;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.api-setting-button:hover {
+  background-color: #0069d9;
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/GoodsDetails/index.vue b/Code/Frontend/src/views/GoodsDetails/index.vue
new file mode 100644
index 0000000..ce97b63
--- /dev/null
+++ b/Code/Frontend/src/views/GoodsDetails/index.vue
@@ -0,0 +1,250 @@
+<template>
+  <AppNa class="sub" />
+  <div class="goodsdetail">
+    <h3 class="title w">{{ this.productname }}</h3>
+    <div class="sub-list w">
+    <!-- {{ detailslist }} -->
+      <div v-loading="loading" element-loading-text="加载中..." v-if="detailslist.length === 0" style="min-height: 10vw;">
+          <div style="padding: 50px ;text-align: center">
+                    <img src="@/assets/images/no-search.png">
+                    <br>
+                    <span class="no-discount">暂时没有书籍</span>
+          </div>
+      </div>
+      <div v-else>
+        <ul class="pic_list">
+        <li v-for="itemlist in detailslist.filter((v) => v.status === 1)" key="itemlist">
+          <div class="pic_item">
+            <el-carousel class="banner" >
+                <el-carousel-item v-for="item in itemlist.list" :key="item" >
+                    <img :src="item">
+                </el-carousel-item>
+            </el-carousel>
+            <div class="price">价格:￥{{ itemlist.price }}</div>
+            <div class="item_low">
+            <div class="phone"><strong>联系方式:</strong>{{ itemlist.email }}</div>
+              <div class="time">
+                <div class="time_title"><strong>交易时间:</strong></div>
+                <el-time-select class="timeselect"
+                    v-model="itemlist.time"
+                    start="08:30"
+                    step="00:30"
+                    end="21:30"
+                    size:small
+                    placeholder="选择一个交易时间吧！"/>
+
+                <el-popconfirm
+                  width="220"
+                  confirm-button-text="OK"
+                  @confirm="note(itemlist)"
+                  cancel-button-text="No"
+                  :icon="InfoFilled"
+                  icon-color="#626AEF"
+                  title="确定选择这个时间吗?">
+                  <template #reference>
+                    <el-button>提交</el-button>
+                  </template>
+                </el-popconfirm>
+            </div>
+            <div class="statement"><strong>商品描述:</strong>{{ itemlist.comment }}</div>
+            </div>
+          </div>
+        </li>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import AppNa from "@/views/Home/AppNa.vue";
+import {detailslist} from "@/api/tmp"
+import{emailnotify} from "@/api/index"
+import{updateStatus,orderInsert} from "@/api/tmp"
+export default {
+  components: {
+      AppNa
+  },
+  data() {
+      return {
+          detailslist:[],
+          Time:"",
+          productId:0,
+          productname: null
+
+      }
+  },
+  methods: {
+    showTime(){
+      var date = new Date();
+      // 年月日
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var day = date.getDate();
+      return year + '-' + month + '-' + day;
+      },
+    note(info){
+      let ordermsg = {
+        status:2,
+        name:info.name,
+        price:info.price,
+        gid:info.id,
+        uid:info.uid,
+        time:"2022-01-09",
+      };
+      orderInsert(ordermsg).then(res=>{
+        console.log(ordermsg);
+        console.log("orderInsert");
+        console.log(res);
+      });
+      let msg = {
+        name:info.name,
+        sellemail:info.email,
+        price:info.price,
+        buyemail:"1546631808@qq.com",
+        time:info.time,
+        interest:"数学",
+        id:info.id,
+        uid:info.uid,
+        status:2
+      };
+      console.log(msg);
+      emailnotify(msg).then(res=>{
+        console.log("emailnotify");
+      });
+      updateStatus(msg).then(res=>{
+        console.log("updateStatus");
+        console.log(res);
+
+      });
+
+      },
+
+    init(id,productname) {
+      this.productId = id;
+      this.productname = productname;
+        let params = {
+            productId:"1",
+            productname:productname,
+        }
+        detailslist(params).then(res => {
+          console.log(res)
+            res.forEach(element => {
+              console.log(element)
+              let list = [];
+              list.push(element.picurl1);
+              list.push(element.picurl2);
+              list.push(element.picurl3);
+              element.list=list;
+            });
+            this.detailslist = res;
+        })
+    }
+
+  },
+  created() {
+      let productId = this.$route.query.productId
+      let productname = this.$route.query.productname
+      this.init(productId,productname)
+  }
+};
+</script>
+<style lang="less" scoped>
+.sub{
+    margin-bottom: 150px;
+}
+.goodsdetail{
+  margin: 0 auto;
+  padding-bottom: 250px;
+    .title{
+      font-size: 40px;
+        text-align: center;
+        font-weight: normal;
+        line-height: 50px;
+        margin-bottom: 50px;
+        text-shadow:0px 1px 0px #c0c0c0,
+        0px 2px 0px #b0b0b0,
+        0px 3px 0px #a0a0a0,
+        0px 4px 0px #909090,
+        0px 5px 10px rgba(0, 0, 0, .9);
+      padding-bottom: 40px;
+    }
+    .sub-list{
+      width: 1100px;
+      // margin: 0 auto;
+      .pic_list{
+        flex-wrap: wrap;
+        width: 1100px;
+        // margin: 0 auto;
+        display: flex;
+        // border: 1px solid rgb(195, 59, 59);
+        .pic_item{
+          border: 5px ridge #E6E8FA ;
+          margin-right: 25px;
+          margin-bottom: 30px;
+          width:330px;
+        .banner {
+          // margin: 0 auto;
+          height: 300px;
+          width: 355px;
+          // border: 1px solid #6f6f6f;
+          img{
+            text-align: center;
+            height: 250px;
+            width: 250px;
+            // margin-left: 11px;
+            margin: 0 0 0 50px;
+            }
+          }
+        .price{
+          text-align: center;
+          font-size: 25px;
+          color: black;
+        }
+        .item_low{
+          border: 1px solid #6f6f6f;
+        }
+        .phone{
+          text-align: left;
+          border: double #E6E8FA;
+          border-width: 0 0 5px 0 ;
+          font-size: 15px;
+          padding-top: 20px;
+          padding-bottom: 10px;
+          color: #2F4F4F;
+          // padding: 5px 20px 0 0;
+        }
+        .time{
+          text-align: left;
+          display: flex;
+          margin: 3px;
+          color: #2F4F4F;
+          .time_title{
+            text-align: left;
+            font-size: 15px;
+            padding-top: 5px;
+          }
+          .timeselect{
+
+            width: 200px;
+          }
+        }
+        .statement{
+          border: double #E6E8FA;
+          border-width: 5px 0px 0px 0px ;
+          text-align: left;
+          font-size: 15px;
+          margin-top: 5px;
+          padding-top: 10px;
+          // padding: 30px 35px  40px 35px;
+          color:#545454;
+    }
+  }
+  }.demo-button-style {
+  margin-top: 24px;
+}
+}
+}
+</style>
+
diff --git a/Code/Frontend/src/views/Home/AppNa.vue b/Code/Frontend/src/views/Home/AppNa.vue
new file mode 100644
index 0000000..eb3c3df
--- /dev/null
+++ b/Code/Frontend/src/views/Home/AppNa.vue
@@ -0,0 +1,109 @@
+<template>
+    <div>
+        <ul class="app-header-nav">
+            <li>
+                <RouterLink class="nav-item" to="/TongXiu">通修课程二手书</RouterLink>
+            </li>
+            <li>
+                <RouterLink class="nav-item" to="/ZhuanYe">专业课类二手书</RouterLink>
+            </li>
+            <li>
+                <RouterLink class="nav-item" to="/KeWai">课外类二手书</RouterLink>
+            </li>
+            <li>
+                <RouterLink class="nav-item" to="/KaoYan">考研材料</RouterLink>
+            </li>
+            <li>
+                <RouterLink class="nav-item" to="/MianFei">免费专区</RouterLink>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="less" scoped>
+.app-header-nav {
+    list-style: none;
+    position: relative;
+    clear: both;
+    // 使其在最上面一层
+    z-index: 999;
+    // margin: auto;
+    // height: 190px;
+    // background-color: rgb(255, 255, 255);
+    display: 0 flex;
+
+    li {
+        position: relative;
+        left: 140px;
+        float: left;
+        // 每个标签之间的距离，先上下后左右
+        padding: 0 80px;
+        font-weight: bold;
+        height: 40px;
+        line-height: 40px;
+        white-space: nowrap;
+
+        // .router-Link{
+        //     padding-bottom: 10px;
+        //     font-size: 15px;
+        //     color: #090909;
+        //     text-decoration: none;
+        //     font-weight: bold;
+        // }
+        // 选中高亮
+        .router-link-active {
+            color: #9307e4;
+            border-bottom: 2px solid#9307e4;
+        }
+
+        .nav-item {
+            padding-bottom: 10px;
+            font-size: 15px;
+            color: #090909;
+            text-decoration: none;
+            font-weight: bold;
+
+            // 划过效果
+            &:hover {
+                color: #9307e4;
+                border-bottom: 2px solid#9307e4;
+            }
+        }
+
+    }
+
+    .header-layer {
+        position: absolute;
+        left: 130px;
+        top: 100px;
+        background-color: #fff;
+        box-shadow: 0 0 5px #ccc;
+        padding: 10px;
+        width: 1150px;
+        height: 130px;
+
+        ul {
+            li {
+                padding: 5px;
+                list-style-type: none;
+                left: 0px;
+                height: 100px;
+
+                img {
+                    width: 10px;
+                    height: 10px;
+                    text-align: center;
+                }
+
+                &:hover {
+                    background-color: #ccc;
+                }
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/Home/HomeBanner.vue b/Code/Frontend/src/views/Home/HomeBanner.vue
new file mode 100644
index 0000000..5c44a4c
--- /dev/null
+++ b/Code/Frontend/src/views/Home/HomeBanner.vue
@@ -0,0 +1,57 @@
+<template>
+    <div class="home-banner">
+        <el-carousel class="banner" >
+            <el-carousel-item v-for="item in pic_list" :key="item" class="ban">
+            <img :src="item.img">
+            </el-carousel-item>
+        </el-carousel>
+    </div>
+</template>
+     
+<script>
+import { bannerpic } from '@/api/tmp';
+export default {
+    data () {
+        return {
+            pic_list: []
+        }
+    },
+    methods:{
+        init(){
+        bannerpic().then(res => {
+            this.pic_list = res
+            console.log("BANNER INIT")
+          })
+        }
+    },
+    created(){
+        this.init()
+    }
+}
+</script>
+ 
+<style lang="less" scoped>
+.home-banner {
+    background-color: rgb(251, 251, 251);
+    .banner {
+
+        margin: auto;
+        height: 400px;
+        width: 1100px;
+        border: 1px solid rgb(255, 255, 255);
+        margin-top: 0;
+    }
+}
+
+.el-carousel__item:nth-child(2n) {
+    background-color: #ffffff;
+    padding:  0px;
+    margin: 10 0px;
+    height: 400px;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+    background-color: #ffffff;
+    height: 400px;
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/Home/HomeBottom.vue b/Code/Frontend/src/views/Home/HomeBottom.vue
new file mode 100644
index 0000000..d4d603c
--- /dev/null
+++ b/Code/Frontend/src/views/Home/HomeBottom.vue
@@ -0,0 +1,52 @@
+<template>
+    <div class="home_bottom">
+        <photo-wall :title="'照片墙'" :photos="photos"></photo-wall>
+    </div>
+</template>
+
+<script>
+import PhotoWall from "@/views/Home/PhotoWall.vue";
+export default {
+    components: {
+        PhotoWall,
+    },
+    data() {
+        return {
+            photos: [
+                {
+                    src: "https://picsum.photos/500/500?random=1",
+                    alt: "Random Image 1",
+                },
+                {
+                    src: "https://picsum.photos/500/500?random=2",
+                    alt: "Random Image 2",
+                },
+                {
+                    src: "https://picsum.photos/500/500?random=3",
+                    alt: "Random Image 3",
+                },
+                {
+                    src: "https://picsum.photos/500/500?random=4",
+                    alt: "Random Image 4",
+                },
+                // {
+                //     src: "https://picsum.photos/500/500?random=5",
+                //     alt: "Random Image 5",
+                // },
+                // {
+                //     src: "https://picsum.photos/500/500?random=6",
+                //     alt: "Random Image 6",
+                // },
+            ],
+        };
+    },
+};
+</script>
+<style lang="less" scoped>
+.home_bottom {
+    margin-top: 70px;
+    padding: 75px 0 0 0;
+    width: 1100;
+    background-color: #f6f1f1;
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/Home/HomeHot.vue b/Code/Frontend/src/views/Home/HomeHot.vue
new file mode 100644
index 0000000..f911b22
--- /dev/null
+++ b/Code/Frontend/src/views/Home/HomeHot.vue
@@ -0,0 +1,78 @@
+<template>
+<div class="home-hot">
+    <Mypanel title="常用通修书目" subTitle="">
+        <ul class="goods-list">
+            <li class="item" v-for="item in hot_list" :key="item.id">
+                <a @click="linkTo(item)">
+                <img :src="item.listPicUrl" />
+                <div class="title ellipsis">{{ item.name }}</div>
+                <div class="price">定价：￥{{ item.retailPrice }}</div>
+                </a>
+            </li>
+        </ul>  
+    </Mypanel>
+</div>
+</template>
+<script>
+import Mypanel from '@/components/Mypanel.vue';
+import { hotlist } from '@/api/tmp';
+export default {
+    components: {
+        Mypanel
+    },
+    data() {
+        return {
+            hot_list: []
+        }
+    },
+    methods: {
+        linkTo(item){
+            this.$router.push({
+                path:'/goodsdetails',
+                query:{
+                    productId:item.goodsUrl,
+                    productname:item.name,
+                }
+            })
+        },
+        init() {
+            hotlist().then(res => {
+                this.hot_list = res
+            })
+        }
+    },
+    created() {
+        this.init()
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.home-hot {
+  .goods-list {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 40px;
+    .item {
+      width: 265px;
+      height: 365px;
+      background-color: #f5f5f5;
+      img {
+        width: 265px;
+        height: 265px;
+      }
+      .hoverShadow();
+      .title {
+        font-size: 17px;
+        text-align: center;
+        padding: 15px 25px;
+      }
+      .price {
+        text-align: center;
+        font-size: 15px;
+        color: @priceColor;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/Home/HomeHot2.vue b/Code/Frontend/src/views/Home/HomeHot2.vue
new file mode 100644
index 0000000..1ad7668
--- /dev/null
+++ b/Code/Frontend/src/views/Home/HomeHot2.vue
@@ -0,0 +1,83 @@
+<template>
+    <div class="home-hot">
+        <Mypanel title="精品教科书" subTitle="">
+            <ul class="goods-list">
+                <li class="item" v-for="item in hot_list2" :key="item.id">
+                    <a @click="linkTo(item)">
+                    <img :src="item.listPicUrl" />
+                    <div class="title ellipsis">{{ item.name }}</div>
+                    <div class="price">￥{{ item.retailPrice }}</div>
+                    </a>
+                </li>
+            </ul>  
+        </Mypanel>
+    </div>
+</template>
+
+<script>
+import Mypanel from '@/components/Mypanel.vue';
+import { hotlist2 } from '@/api/tmp';
+export default {
+    components: {
+        Mypanel
+    },
+    data() {
+        return {
+            hot_list2: []
+        }
+    },
+    methods: {
+        linkTo(item){
+            this.$router.push({
+                path:'/goodsdetails',
+                query:{
+                    productId:item.goodsUrl,
+                    productname:item.name,
+                }
+            })
+        },
+        init() {
+            hotlist2().then(res => {
+                this.hot_list2 = res
+
+            })
+        }
+
+    },
+    created() {
+        this.init()
+
+    }
+}
+
+</script>
+
+<style lang="less" scoped>
+.home-hot {
+  .goods-list {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 40px;
+    .item {
+      width: 265px;
+      height: 365px;
+      background-color: #f5f5f5;
+      img {
+        width: 265px;
+        height: 265px;
+      }
+      .hoverShadow();
+      .title {
+        font-size: 17px;
+        text-align: center;
+        padding: 15px 25px;
+      }
+      .price {
+        text-align: center;
+        font-size: 15px;
+        color: @priceColor;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/Home/HomeHot3.vue b/Code/Frontend/src/views/Home/HomeHot3.vue
new file mode 100644
index 0000000..5d5b113
--- /dev/null
+++ b/Code/Frontend/src/views/Home/HomeHot3.vue
@@ -0,0 +1,92 @@
+<template>
+    <div class="home-hot">
+        <Mypanel title="热门课外书籍" subTitle="">
+            <ul class="goods-list">
+            <li class="item" v-for="item in hot_list3" :key="item.id">
+            <a @click="linkTo(item)">
+            <img :src="item.listPicUrl" />
+            <div class="title ellipsis">{{ item.name }}</div>
+            <div class="price">￥{{ item.retailPrice }}
+            </div>
+            </a>
+            </li>
+            </ul>  
+        </Mypanel>
+    </div>
+</template>
+
+<script>
+import Mypanel from '@/components/Mypanel.vue';
+import { hotlist3 } from '@/api/tmp';
+export default {
+    components: {
+        Mypanel
+    },
+    data() {
+        return {
+            hot_list3: []
+        }
+    },
+    methods: {
+        linkTo(item){
+            this.$router.push({
+                path:'/goodsdetails',
+                query:{
+                    productId:item.goodsUrl,
+                    productname:item.name,
+                }
+            })
+        },
+
+        do() {
+            let params = {
+                params: {
+                    userId: 1,
+                    size: 1,
+                    page: 1
+                }
+            }
+            hotlist3(params).then(res => {
+                this.hot_list3 = res
+
+            })
+        }
+
+    },
+    created() {
+        this.do()
+
+    }
+}
+
+</script>
+
+<style lang="less" scoped>
+.home-hot {
+  .goods-list {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 40px;
+    .item {
+      width: 265px;
+      height: 365px;
+      background-color: #f5f5f5;
+      img {
+        width: 265px;
+        height: 265px;
+      }
+      .hoverShadow();
+      .title {
+        font-size: 17px;
+        text-align: center;
+        padding: 15px 25px;
+      }
+      .price {
+        text-align: center;
+        font-size: 15px;
+        color: @priceColor;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/Home/HomeProduct.vue b/Code/Frontend/src/views/Home/HomeProduct.vue
new file mode 100644
index 0000000..f07788e
--- /dev/null
+++ b/Code/Frontend/src/views/Home/HomeProduct.vue
@@ -0,0 +1,158 @@
+<template>
+    <div class="home-produce">
+        <Mypanel title="热门书目">
+            <template #right>
+                <div class="goods">
+                    <!-- 左侧 -->
+                    <div class="left">
+                        <img :src="picleft" />
+                    </div>
+                    <!-- 右侧 -->
+                    <div class="right">
+                        <ul class="goods-list">
+                            <li v-for='good in goods_list' :key="good.id">
+                                <MyGoodsItem :good='good' />
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </template>
+        </Mypanel>
+    </div>
+</template>
+
+<script>
+import Mypanel from '@/components/Mypanel.vue';
+import MyGoodsItem from '@/components/MyGoodsItem.vue'
+import { goodsitem } from '@/api/tmp';
+import { getStore,setStore,removeStore } from "@/utils/storage"
+import { goodsitemleft } from '@/api/tmp';
+export default {
+    components: {
+        Mypanel,
+        MyGoodsItem
+    },
+    data() {
+        return {
+            picleft: [],
+            goods_list: []
+        }
+    },
+    methods: {
+        linkTo(item){
+            this.$router.push({
+                path:'/goodsdetails',
+                query:{
+                    productId:item.goodsUrl,
+                    productname:item.name,
+                }
+            })
+        },
+        do() {
+            console.log(getStore("interest"));
+            let params = {
+                interest:"111",
+                }
+            if (getStore("interest")){
+                params.interest = getStore("interest");
+            }
+            else{
+                params.interest = "null";
+            }
+            goodsitem(params).then(res => {
+                this.goods_list = res
+            })
+            goodsitemleft().then(res => {
+                this.picleft = res[0].images
+            })
+        }
+    },
+    created() {
+        this.do()
+
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.home-produce {
+    .goods {
+        height: 610px;
+        display: flex;
+
+        .left {
+            width: 240px;
+            margin-right: 10px;
+            border: 1px solid #ccc;
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .right {
+            // flex: 1;
+            border: 1px solid #ccc;
+            .goods-list {
+                display: flex; // 横向
+                flex-wrap: wrap;
+                justify-content: space-between;
+            }
+        }
+    }
+}
+
+    // .sub {
+    //     a {
+    //         font-size: 16px;
+    //         padding: 2px 10px;
+    //         border-radius: 4px;
+    //         margin-right: 0 7px;
+
+    //         &:hover {
+    //             background-color: red;
+    //             color: #fff;
+    //         }
+
+    //         &:last-child {
+    //             margin-right: 40px;
+    //         }
+    //     }
+    // }
+
+.goods {
+    height: 700px;
+    display: flex;
+    // background-color: rgb(96, 198, 198);
+    border: 0 1px;
+    margin: 0 0;
+    padding: 0 0;
+
+    .left {
+        width: 250px;
+        margin-right: 10px;
+        border: 1px;
+        margin: 0 10 0 0;
+        padding: 0 10 0 0;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .right {
+        flex: 1;
+        border: 1px solid #ccc;
+        padding: 0 0 0 0px;
+        margin: 0 0 0 0px;
+
+        .goods-list {
+            display: flex; // 横向
+            flex-wrap: wrap;
+            justify-content: space-between;
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/Home/PhotoWall.vue b/Code/Frontend/src/views/Home/PhotoWall.vue
new file mode 100644
index 0000000..b8d0031
--- /dev/null
+++ b/Code/Frontend/src/views/Home/PhotoWall.vue
@@ -0,0 +1,81 @@
+<template>
+    <div class="photo-wall w">
+        <el-row :gutter="20">
+            <el-col v-for="(photo, index) in photos" :key="index" :span="6">
+                <div class="photo">
+                    <img :src="photo.src" :alt="photo.alt" @click="handlePreview(photo.src)">
+                </div>
+            </el-col>
+        </el-row>
+        <el-dialog v-model="previewDialogVisible" width="80%">
+            <img :src="previewSrc" style="width: 100%;">
+            <div slot="footer">
+                <el-button @click="previewDialogVisible = false">关闭</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { ElRow, ElCol, ElDialog, ElButton } from "element-plus";
+export default {
+    components: {
+        ElRow,
+        ElCol,
+        ElDialog,
+        ElButton,
+    },
+    props: {
+        title: {
+            type: String,
+            required: true,
+        },
+        photos: {
+            type: Array,
+            required: true,
+        },
+    },
+    data() {
+        return {
+            previewDialogVisible: false,
+            previewSrc: "",
+        };
+    },
+    methods: {
+        handlePreview(src) {
+            this.previewSrc = src;
+            this.previewDialogVisible = true;
+        },
+    },
+};
+</script>
+
+<style>
+.photo-wall {
+    background-color: #fff;
+    text-align: center;
+}
+
+h2 {
+    margin-bottom: 40px;
+    color: purple;
+    font-size: 40px;
+}
+
+.photo {
+    position: relative;
+    overflow: hidden;
+    cursor: pointer;
+}
+
+.photo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease-in-out;
+}
+
+.photo:hover img {
+    transform: scale(1.2);
+}
+</style>
diff --git a/Code/Frontend/src/views/Home/index.vue b/Code/Frontend/src/views/Home/index.vue
new file mode 100644
index 0000000..a695093
--- /dev/null
+++ b/Code/Frontend/src/views/Home/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <AppNa />
+    <Drag/>
+    <HomeBanner />
+    <HomeProduct />
+    <HomeHot />
+    <HomeHot2 />
+    <HomeHot3 />
+    <HomeBottom />
+
+
+  </div>
+</template>
+
+<script>
+import AppNa from "./AppNa.vue"
+import HomeBanner from "./HomeBanner.vue"
+import HomeHot from "./HomeHot.vue";
+import HomeHot2 from "./HomeHot2.vue";
+import HomeHot3 from "./HomeHot3.vue";
+import HomeProduct from "./HomeProduct.vue";
+import HomeBottom from "./HomeBottom.vue";
+import Drag from "../Drag/index.vue";
+
+export default {
+  components: {
+    AppNa,
+    HomeBanner,
+    HomeHot,
+    HomeHot2,
+    HomeHot3,
+    HomeProduct,
+    HomeBottom,
+    Drag
+  }
+
+}
+</script>
+<style lang="less" scoped></style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/Index.vue b/Code/Frontend/src/views/Index.vue
new file mode 100644
index 0000000..cad550a
--- /dev/null
+++ b/Code/Frontend/src/views/Index.vue
@@ -0,0 +1,28 @@
+<template>
+    <div>
+      <m-header></m-header>
+        <!--子路由的出口-->
+        <router-view class="main"></router-view>
+      <m-footer></m-footer>
+    </div>
+</template>
+
+
+<script>
+import MHeader from '../common/MHeader'
+import MFooter from '../common/MFooter'
+    export default {
+      components:{
+        MHeader,
+        MFooter
+      }
+    }
+</script>
+<style>
+.main {
+  min-height: calc(100vh - 454px);
+  background: #ffffff;
+  overflow: hidden;
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/Login/index.vue b/Code/Frontend/src/views/Login/index.vue
new file mode 100644
index 0000000..f829d40
--- /dev/null
+++ b/Code/Frontend/src/views/Login/index.vue
@@ -0,0 +1,332 @@
+<template>
+  <div class="login">
+    <div class="page">
+      <div class="title">
+        &#8195;
+        <div class="logo">
+          <img src="../../assets/images/lololo.png">
+        </div>
+        <div class="nju">
+          <h4>使用 NJU market 账号 登录官网</h4>
+        </div>
+      </div>
+      <div class="content">
+        <ul class="common-form">
+          <li class="username">
+            <input type="text" v-model="ruleForm.userName" placeholder="账号">
+          </li>
+          <li class="passwd">
+            <input type="password" v-model="ruleForm.userPwd" @keyup.enter="denglu" placeholder="密码">
+          </li>
+          <li>
+          </li>
+          <li class="pr">
+            <el-checkbox class="auto-login">记住密码</el-checkbox>
+            <a></a>
+            <a></a>
+            <a></a>
+            <a></a>
+            <a></a>
+            <a></a>
+            <a></a><a></a>
+            <a href="/Register">注册账号</a>
+            <a href="javascript:;" @click="this.note_info()">忘记密码</a>
+          </li>
+        </ul>
+        <div class="button">
+          <y-button @btnClick="denglu" :text="logintxt" :classStyle="'main-btn'"
+            style="margin: 0;width: 400px;height: 48px;font-size: 18px;line-height: 48px">
+          </y-button>
+          <y-button @btnClick="back" :text="returntxt" :classStyle="'gray-btn'"
+            style="margin: 0;width: 400px;height: 48px;font-size: 18px;line-height: 48px">
+          </y-button>
+        </div>
+      </div>
+      <div class="footer">
+        @ copyright NJU
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import {userLogin} from "@/api/index"
+import { login } from "@/api/tmp"
+import YButton from '../../components/YButton.vue'
+import { getStore, setStore, removeStore } from "@/utils/storage"
+export default {
+  components: { YButton },
+  data() {
+    return {
+      cart: [],
+      loginPage: true,
+
+      ruleForm: {
+        userName: '',
+        userPwd: '',
+        errMsg: ''
+
+      },
+      registered: {
+        userName: '',
+        userPwd: '',
+        userPwd2: '',
+        errMsg: ''
+      },
+      autoLogin: false,
+      logintxt: '登录',
+      returntxt: '返回',
+      statusKey: ''
+    }
+  },
+  methods: {
+    note_success() {
+      this.$notify(
+        {
+          title: "登入成功",
+          message: "展开一次旅行",
+          type: 'success',
+          position: 'top-right',
+        }
+      )
+    },
+    note_fail() {
+      this.$notify(
+        {
+          title: "登入失败",
+          message: "请你检查密码",
+          type: 'error',
+          position: 'top-right',
+        }
+      )
+    },
+    note_info() {
+      this.$notify(
+        {
+          title: "提示",
+          message: "功能待开发",
+          type: 'info',
+          position: 'top-right',
+        }
+      )
+    },
+    back() {
+      this.$router.push({
+        path: '/home'
+      })
+    },
+    denglu() {
+      let params = {
+        username: this.ruleForm.userName,
+        password: this.ruleForm.userPwd,
+      };
+      login(params).then(res => {
+        // console.log(res.state)
+        if (res.state === "success") {
+          this.note_success();
+          this.$store.state.login = true;
+          this.$store.state.userAllInfo = res.result;
+          this.$store.state.userInfo = res.result.name;
+          setStore("id", res.result.id);
+          setStore("name", res.result.name);
+          setStore("interest", res.result.personal);
+          setStore("email", res.result.email);
+          // console.log(res.result.personal);
+          this.$router.push({
+            path: '/home'
+          })
+        }
+        else {
+          this.note_fail();
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.login {
+  background: url("@/assets/images/6.png") center no-repeat;
+  background-size: 100% 100%;
+  background-color: #F7F7F7;
+  height: 720px;
+  margin: 0px;
+  padding: 0px;
+
+
+
+  .page {
+    box-shadow: 0px 0px 30px 2px rgb(95, 114, 33);
+    border-radius: 2em;
+    border: 1px solid #c6bfc5;
+    margin: 50px 5px 15px 550px;
+    height: 600px;
+    width: 400px;
+    color: rgb(24, 2, 2);
+    background-color: rgb(252, 252, 252);
+
+    .title {
+      border-radius: 2em;
+      color: #ffff;
+      background-color: rgb(255, 255, 255);
+      width: auto;
+      padding: 0 0 0 0px;
+      margin: 0 0 0 0px;
+      height: 160px;
+      text-align: center;
+      font-size: large;
+
+      .logo {
+        width: auto;
+        height: 70px;
+        margin: 0 0 0 0px;
+        padding: 0 0 0 0px;
+        display: flex;
+        justify-content: center;
+      }
+
+      .nju {
+        color: #7204c1;
+        padding-top: 10px;
+        margin-top: 10px;
+        // height: 100px;
+      }
+
+
+
+    }
+
+
+    .content {
+      color: rgb(11, 214, 204);
+      background-color: rgb(249, 249, 249);
+      // width:auto;
+      height: 360px;
+      width: 400px;
+      // line-height: 10px;
+
+      .common-form {
+        background: rgb(255, 255, 255);
+        margin: 100 0px;
+        width: 400px;
+        padding: 0 0 0 0px;
+        height: 200px;
+
+        li {
+          margin-bottom: 10px;
+          margin: 0 auto;
+          margin-top: 30px;
+          // line-height: 100;
+        }
+      }
+
+      .passwd {
+        border-radius: 10px;
+        border: 1px solid#7204c1;
+        margin: 100px;
+        width: 340px;
+        height: 50px;
+        background-color: rgb(255, 255, 255);
+        padding: 0px 0;
+
+        input {
+          color: rgb(0, 0, 0);
+          width: 320px;
+          height: 30px;
+          background-color: rgb(255, 255, 255);
+          padding: 0px;
+          margin: 0 0 0 7px;
+          margin-top: 8px;
+          border: 0;
+          outline: none;
+
+        }
+
+      }
+
+      .username {
+        border-radius: 10px;
+        border: 1px solid#7204c1;
+        // padding: 100 0 0 10px;
+        margin: 0 0 0 15px;
+
+        width: 340px;
+        height: 50px;
+        background-color: rgb(255, 255, 255);
+
+        input {
+          width: 320px;
+          height: 30px;
+          color: rgb(0, 0, 0);
+          background-color: rgb(255, 255, 255);
+          padding: 0px;
+          margin: 0 0 0 7px;
+          margin-top: 8px;
+          border: none;
+          outline: none;
+
+        }
+
+      }
+
+      .pr {
+        width: 400px;
+        display: flex;
+        background-color: rgb(255, 255, 255);
+        margin: 0 0 0 0;
+        padding: 0px;
+        // line-height: 20px;
+
+        a {
+          margin: 0 0 0 0px;
+          font-size: 14px;
+          padding: 0 0 0 16px;
+          line-height: 30px;
+          text-decoration: none;
+          background-color: rgb(255, 255, 255);
+          color: rgb(2, 32, 163);
+        }
+
+        .auto-login {
+          margin: 0 0 0 0 px;
+          padding: 0 0 0 20px;
+          background-color: rgb(255, 255, 255);
+
+        }
+      }
+
+      .button {
+        margin: 30px 0 0 0;
+        height: 10px;
+        line-height: 60px;
+        background-color: #fff;
+
+
+      }
+
+      .pro {
+        background-color: rgb(241, 241, 241);
+      }
+
+    }
+
+    ul {
+      list-style: none;
+    }
+
+    .footer {
+      text-align: center;
+      padding: 0 0 0 0px;
+      margin: auto;
+      // font-weight: 100;
+      font-family: 'Courier New', Courier, monospace;
+      color: rgb(123, 118, 118);
+
+    }
+
+
+
+  }
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/Register/index.vue b/Code/Frontend/src/views/Register/index.vue
new file mode 100644
index 0000000..a5b48d9
--- /dev/null
+++ b/Code/Frontend/src/views/Register/index.vue
@@ -0,0 +1,292 @@
+<template>
+  <div class="login">
+    <div class="page">
+      <div class="title">
+        <div class="nju">
+          <h3>注册NJUMarket账号</h3>
+        </div>
+      </div>
+      <div class="content">
+        <ul class="common-form">
+          <li class="username">
+            <input type="text" v-model="ruleForm.userName" placeholder="账号">
+          </li>
+          <li class="passwd">
+            <input type="password" placeholder="密码">
+          </li>
+          <li class="passwd">
+            <input type="password" placeholder="重复密码">
+          </li>
+        </ul>
+        <div class="button">
+          <y-button @btnClick="regist" :text="logintxt" :classStyle="'main-btn'"
+            style="margin: 0;width: 400px;height: 48px;font-size: 18px;line-height: 48px">
+          </y-button>
+          <y-button @btnClick="back" :text="returntxt" :classStyle="'gray-btn'"
+            style="margin: 0;width: 400px;height: 48px;font-size: 18px;line-height: 48px">
+          </y-button>
+        </div>
+      </div>
+      <div class="tologin">
+        如有账号，在此
+        <a href="javascript:;" @click="toLogin">登录</a>
+      </div>
+      <div class="footer">
+        @ copyright NJU
+      </div>
+    </div>
+
+
+
+
+
+
+  </div>
+</template>
+
+<script>
+import YButton from '../../components/YButton.vue'
+export default {
+  components: { YButton },
+  methods:{
+    toLogin(){
+      this.$router.push({
+        path: '/login'
+      })
+    },
+    regist(){
+      return false
+
+
+
+    },
+    back(){
+      this.$router.push({
+        path: '/home'
+      })
+
+    }
+  },
+
+  data() {
+    return {
+      cart: [],
+      loginPage: true,
+      ruleForm: {
+        userName: '',
+        userPwd: '',
+        errMsg: ''
+      },
+      registered: {
+        userName: '',
+        userPwd: '',
+        userPwd2: '',
+        errMsg: ''
+      },
+      autoLogin: false,
+      logintxt: '注册',
+      returntxt: '返回',
+      statusKey: ''
+    }
+  },
+
+}
+</script>
+
+<style lang="less" scoped>
+.tologin{
+  // background-color: rgb(192, 112, 112);
+  text-align: center;
+  height: 40px;
+  padding: 0 0 0 0px;
+  font-family: 'Courier New', Courier, monospace;
+  // color: rgb(123, 118, 118);
+  border-bottom: 10px#000000;
+  a{
+    color: #0004f5;
+    background-color: #fff;
+
+    // padding: 0 0px 10px 0px;
+    // height: 100px;
+    font-family: 'Courier New', Courier, monospace;
+    // color: rgb(123, 118, 118);
+  }
+}
+.login {
+  background: url("@/assets/images/6.png") center no-repeat;
+  background-size: 100% 100%;
+  background-color: #F7F7F7;
+  height: 720px;
+  margin: 0px;
+  padding: 0px;
+
+
+
+  .page {
+    box-shadow: 0px 0px 30px 2px rgb(95, 114, 33);
+    border-radius: 2em;
+    border: 1px solid #c6bfc5;
+    margin: 50px 5px 10px 550px;
+    height: 570px;
+    width: 400px;
+    color: rgb(24, 2, 2);
+    background-color: rgb(252, 252, 252);
+
+    .title {
+      border-radius: 2em;
+      color: #ffff;
+      background-color: rgb(255, 255, 255);
+      width: auto;
+      padding: 0 0 0 0px;
+      margin: 0 0 0 0px;
+      height: 80px;
+      text-align: center;
+      font-size: large;
+      .nju {
+        margin: 0 auto;
+        color: #a7a2aa;
+        // padding-top: 10px;
+        margin-top: 30px;
+        height: 50px;
+        // background-color: rgb(255, 255, 255);
+        border-bottom:solid #cec9ce;
+        // border-bottom: 10px  #b60b9c;
+        h3{
+          font-size: 30px;
+          // border-bottom:solid #11bf5f;
+        }
+      }
+    }
+
+
+    .content {
+      background-color: rgb(252, 252, 252);
+      // width:auto;
+      height: 360px;
+      width: 400px;
+      // border-bottom: 10px#ce7efd;
+      // line-height: 10px;
+
+      .common-form {
+        background: rgb(246, 246, 246);
+        // margin: 100 0px;
+        width: 400px;
+        padding: 0 0 0 0px;
+        height: 200px;
+
+        li {
+          margin-bottom: 10px;
+          margin: 0 auto;
+          margin-top: 30px;
+          // line-height: 100;
+        }
+      }
+
+      .passwd {
+        border-radius: 10px;
+        border: 1px solid#7204c1;
+        margin: 100px;
+        width: 340px;
+        height: 50px;
+        background-color: rgb(255, 255, 255);
+        padding: 0px 0;
+
+        input {
+          color: rgb(0, 0, 0);
+          width: 320px;
+          height: 30px;
+          background-color: rgb(255, 255, 255);
+          padding: 0px;
+          margin: 0 0 0 7px;
+          margin-top: 8px;
+          border: 0;
+          outline: none;
+
+        }
+
+      }
+
+      .username {
+        border-radius: 10px;
+        border: 1px solid#7204c1;
+        // padding: 100 0 0 10px;
+        margin: 0 0 0 15px;
+
+        width: 340px;
+        height: 50px;
+        background-color: rgb(255, 255, 255);
+
+        input {
+          width: 320px;
+          height: 30px;
+          color: rgb(0, 0, 0);
+          background-color: rgb(255, 255, 255);
+          padding: 0px;
+          margin: 0 0 0 7px;
+          margin-top: 8px;
+          border: none;
+          outline: none;
+
+        }
+
+      }
+
+      .pr {
+        width: 400px;
+        display: flex;
+        background-color: rgb(255, 255, 255);
+        margin: 0 0 0 0;
+        padding: 0px;
+        // line-height: 20px;
+
+        a {
+          margin: 0 0 0 0px;
+          font-size: 14px;
+          padding: 0 0 0 16px;
+          line-height: 30px;
+          text-decoration: none;
+          background-color: rgb(255, 255, 255);
+        }
+
+        .auto-login {
+          margin: 0 0 0 0 px;
+          padding: 0 0 0 20px;
+          background-color: rgb(255, 255, 255);
+
+        }
+      }
+
+      .button {
+        margin: 30px 0 0 0;
+        height: 10px;
+        line-height: 60px ;
+        background-color: #fff;
+
+
+      }
+
+      .pro {
+        background-color: rgb(241, 241, 241);
+      }
+
+    }
+
+    ul {
+      list-style: none;
+    }
+
+    .footer {
+      text-align: center;
+      padding: 0 0 0 0px;
+      margin: auto;
+      // font-weight: 100;
+      font-family: 'Courier New', Courier, monospace;
+      color: rgb(123, 118, 118);
+
+    }
+
+
+
+  }
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/User/children/addressList.vue b/Code/Frontend/src/views/User/children/addressList.vue
new file mode 100644
index 0000000..16ca72f
--- /dev/null
+++ b/Code/Frontend/src/views/User/children/addressList.vue
@@ -0,0 +1,212 @@
+<template>
+        <y-shelf title="收货地址">
+            <template #right>
+                <y-button text="添加收货地址" style="margin: 0" @btnClick="update()">
+                </y-button>
+            </template>
+            <template #content>
+                <div class="table-title">
+                    <span class="name">姓名</span> <span class="address">详细地址</span> <span class="tel">电话</span>
+                </div>
+            </template>
+        </y-shelf>
+
+
+        <y-popup :open="popupOpen" @close='popupOpen=false' :title="popupTitle">
+            <template #content>
+            <div class="md">
+            <div class="f">
+            <input type="text" placeholder="收货人姓名" v-model="msg.userName">
+            </div>
+            <div class="f">
+            <input type="tel" placeholder="手机号码" v-model="msg.tel" >
+            </div>
+            <div class="f">
+            <input type="text" placeholder="收货地址" v-model="msg.streetName">
+            </div>
+            <div class="s">
+            <el-checkbox class="auto-login" v-model="msg.isDefault">设为默认</el-checkbox>
+            </div>
+            <y-button text='保存'
+                    class="btn"
+                    :classStyle="btnHighlight?'main-btn':'disabled-btn'"
+                    @btnClick="save({userId:userId,addressId:msg.addressId,userName:msg.userName,tel:msg.tel,streetName:msg.streetName,isDefault:msg.isDefault})">
+            </y-button>
+          </div>
+            </template>
+        </y-popup>
+</template>
+
+<script>
+import YShelf from "../../../components/shelf.vue"
+import YButton from "../../../components/YButton.vue"
+import YPopup from '../../../components/popup.vue'
+import { getStore } from '../../../utils/storage'
+    export default {
+        components:{
+          YShelf,
+          YButton,
+          YPopup
+        },
+    created () {
+      this.userId = getStore('userId')
+      // this._addressList()
+    },
+    data () {
+      return {
+        addList: [],
+        popupOpen: false,
+        popupTitle: '管理收货地址',
+        msg: {
+          addressId: '',
+          userName: '',
+          tel: '',
+          streetName: '',
+          isDefault: false
+        },
+        userId: ''
+      }
+    },
+    computed: {
+      btnHighlight () {
+        let msg = this.msg
+        return msg.userName && msg.tel && msg.streetName
+      }
+    },
+    methods:{
+      save (p) {
+        this.popupOpen = false
+        if (p.addressId) {
+          this._addressUpdate(p)
+        } else {
+          delete p.addressId
+          this._addressAdd(p)
+        }
+      },
+      update (item) {
+        this.popupOpen = true
+        if (item) {
+          this.popupTitle = '管理收货地址'
+          this.msg.userName = item.userName
+          this.msg.tel = item.tel
+          this.msg.streetName = item.streetName
+          this.msg.isDefault = item.isDefault
+          this.msg.addressId = item.addressId
+        } else {
+          this.popupTitle = '新增收货地址'
+          this.msg.userName = ''
+          this.msg.tel = ''
+          this.msg.streetName = ''
+          this.msg.isDefault = false
+          this.msg.addressId = ''
+        }
+      }
+    }
+    }
+</script>
+
+<style lang="less" scoped>
+
+
+  .table-title {
+    display: flex;
+    position: relative;
+    z-index: 1;
+    line-height: 38px;
+    height: 38px;
+    padding: 0 0 0 38px;
+    font-size: 12px;
+    background: #eee;
+    border-bottom: 1px solid #dbdbdb;
+    border-bottom-color: rgba(0, 0, 0, .08);
+    .name {
+      float: left;
+      text-align: left;
+    }
+    span {
+      width: 137px;
+      float: left;
+      text-align: center;
+      color: #838383;
+    }
+    .address {
+      margin-left: 115px;
+    }
+    .tel {
+      margin-left: 195px;
+    }
+  }
+
+  .address-item {
+    display: flex;
+    align-items: center;
+    height: 115px;
+    text-align: center;
+    .name {
+      width: 106px;
+    }
+    .address-msg {
+      flex: 1;
+    }
+    .telephone {
+      width: 160px;
+    }
+    .defalut {
+      width: 80px;
+      > a {
+        text-align: center;
+        /*display: none;*/
+      }
+    }
+    .operation {
+      width: 135px;
+      a {
+        padding: 10px 5px;
+      }
+    }
+    &:hover {
+      .defalut > a {
+        display: block;
+      }
+    }
+  }
+
+  .address-item + .address-item {
+    border-top: 1px solid #CFCFCF;
+  }
+
+  .defalut-address {
+    color: #626262;
+    display: block;
+    pointer-events: none;
+    cursor: default;
+  }
+
+.md {
+  > div {
+    text-align: left;
+    margin-bottom: 15px;
+    > input {
+      width: 100%;
+      height: 40px;
+      font-size: 18px;
+      // padding: 10px 20px;
+      padding: 10px 2px;
+
+      border: 1px solid #ccc;
+      border-radius: 6px;
+      box-shadow: 0 3px 5px -4px rgba(0, 0, 0, .4) inset, -1px 0 3px -2px rgba(0, 0, 0, .1) inset;
+      line-height: 46px;
+    }
+  }
+}
+
+  .btn {
+    margin: 0;
+    width: 100%;
+    height: 50px;
+    font-size: 14px;
+    line-height: 48px
+  }
+
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/User/children/coupon.vue b/Code/Frontend/src/views/User/children/coupon.vue
new file mode 100644
index 0000000..53278f3
--- /dev/null
+++ b/Code/Frontend/src/views/User/children/coupon.vue
@@ -0,0 +1,62 @@
+<template>
+    <div>
+
+        <y-shelf title="我的优惠">
+            <template #content>
+                <div style="padding: 50px 0;text-align: center">
+                    <img src="../../../assets/images/no-search.png">
+                    <br>
+                    <span class="no-discount">您目前还没有优惠券</span>
+                </div>
+            </template>
+
+        </y-shelf>
+        <!-- <button @click=" this.delete()">ddd</button> -->
+
+
+    </div>
+</template>
+
+<script>
+import YShelf from "../../../components/shelf.vue"
+import YButton from "../../../components/YButton.vue"
+import { getStore, setStore, removeStore } from '@/utils/storage'
+export default {
+    data() {
+        return {
+            id: 1,
+            key: "",
+        }
+    },
+    components: {
+        YShelf,
+        YButton,
+        getStore,
+        setStore,
+        removeStore
+    },
+    created() {
+        this.do();
+        console.log("HERE")
+
+    },
+    methods: {
+        do() {
+            setStore("key", "123")
+            this.key = getStore("key")
+        },
+        delete() {
+            removeStore("key");
+            console.log("remove")
+        },
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.support {
+    line-height: 2em;
+    font-size: 22px;
+    color: #999;
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/User/children/exchange.vue b/Code/Frontend/src/views/User/children/exchange.vue
new file mode 100644
index 0000000..055384d
--- /dev/null
+++ b/Code/Frontend/src/views/User/children/exchange.vue
@@ -0,0 +1,289 @@
+<template>
+<div id="wrapper">
+  <y-shelf title="基于 OpenAI 的 ChatGPT 自然语言模型人工智能对话">
+  <template #right>
+  <y-button text="设置" style="margin: 0" @btnClick="clickConfig()">
+  </y-button>
+  </template>
+
+  <template #content>
+    <div class="message" ref="chatListDom">
+    <div>
+      <div class="a" v-for="item of messageList.filter((v) => v.role !== 'system')">
+      <div class="tishu">
+        <div class="b">{{ roleAlias[item.role] }}: </div>
+        <Copy :content="item.content"></Copy>
+      </div>
+      <div>
+        <pre
+            class="text-sm text-slate-600 whitespace-pre-wrap leading-relaxed"
+            v-if="item.content"
+            >{{ item.content.replace(/^\n\n/, "") }}</pre
+          >
+          <Loding v-else />
+      </div>
+
+
+
+      </div>
+    </div>
+    </div>
+
+
+    <div class="setting">
+      <div class="api">请输入 API Key：</div>
+      <div class="flex">
+      <input
+      class="input"
+      :type="isConfig ? 'password' : 'text'"
+      :placeholder="isConfig ? 'sk-xxxxxxxxxx' : '请输入'"
+      v-model="messageContent"
+      @keydown.enter="isTalking || sendOrSave()"
+      />
+      <button class="btn" :disabled="isTalking" @click="sendOrSave()">
+      {{ isConfig ? "保存" : "发送" }}
+      </button>
+    </div>
+    </div>
+    <div class="prompt_content">
+    <div class="dialog">
+    </div>
+    </div>
+  </template>
+      <!-- <template #content> -->
+      <!-- <div class="flex flex-col h-screen">
+          <div class="flex flex-nowrap fixed w-full items-baseline top-0 px-6 py-4 bg-gray-100">
+          </div>
+          <div class="flex-1 mx-2 mt-20 mb-2" ref="chatListDom">
+              <div class="group flex flex-col px-4 py-3 hover:bg-slate-100 rounded-lg"
+                  v-for="item of messageList.filter((v) => v.role !== 'system')"
+              >
+                  <div class="group flex flex-col px-4 py-3 hover:bg-slate-100 rounded-lg">
+                      <div class="flex justify-between items-center mb-2">
+                          <div class="font-bold">{{ roleAlias[item.role] }}：</div>
+                          <Copy class="invisible group-hover:visible" :content="item.content" />
+                      </div>
+                      <div>
+                          <pre
+                              class="text-sm text-slate-600 whitespace-pre-wrap leading-relaxed"
+                              v-if="item.content"
+                              >{{ item.content.replace(/^\n\n/, "") }}</pre
+                          >
+                          <Loding v-else />
+                      </div>
+                  </div>
+              </div>
+          </div>
+
+          <div class="sticky bottom-0 w-full p-6 pb-8 bg-gray-100">
+              <div class="-mt-2 mb-2 text-sm text-gray-500" v-if="isConfig">
+                  请输入 API Key：
+              </div>
+              <div class="flex">
+                  <input
+                  class="input"
+                  :type="isConfig ? 'password' : 'text'"
+                  :placeholder="isConfig ? 'sk-xxxxxxxxxx' : '请输入'"
+                  v-model="messageContent"
+                  @keydown.enter="isTalking || sendOrSave()"
+                  />
+                  <button class="btn" :disabled="isTalking" @click="sendOrSave()">
+                  {{ isConfig ? "保存" : "发送" }}
+                  </button>
+              </div>
+          </div> -->
+      <!-- </div>
+      </template>
+      </y-shelf> -->
+  </y-shelf>
+      <!-- </div> -->
+</div>
+</template>
+
+<script>
+const CryptoJS = require('crypto-js');
+import YShelf from "../../../components/shelf.vue";
+import YButton from "../../../components/YButton.vue";
+import {ref,watch, nextTick, onMounted} from "vue";
+import {chat} from "../../../api/chat";
+import Loding from "@/components/loading.vue";
+import Copy from "@/components/copy.vue";
+
+
+
+
+export default {
+    components:{
+        YShelf,
+        YButton
+    },
+    setup() {
+        let count = ref(0);
+        let isConfig = ref(true);
+        let isTalking = ref(false);
+        let messageContent = ref("");
+        let apiKey = "";
+        const chatListDom = ref<HTMLDivElement | null>(null);
+        const messageList = [
+  {
+    role: "system",
+    content: "你是 ChatGPT，OpenAI 训练的大型语言模型，尽可能简洁地回答。",
+  },
+  {
+    role: "assistant",
+    content: `你好，我是AI语言模型，我可以提供一些常用服务和信息。`,
+  }
+        ]
+        const switchConfigStatus = () => (isConfig.value = !isConfig.value);
+        const sendChatMessage = async (content = messageContent.value) => {
+  try {
+    isTalking.value = true;
+    if (messageList.value.length === 2) {
+      messageList.value.pop();
+    }
+    messageList.value.push({ role: "user", content });
+    clearMessageContent();
+    messageList.value.push({ role: "assistant", content: "" });
+
+    const { body, status } = await chat(messageList.value, getAPIKey());
+    if (body) {
+      const reader = body.getReader();
+      await readStream(reader, status);
+    }
+  } catch (error) {
+    appendLastMessageContent(error);
+  } finally {
+    isTalking.value = false;
+  }
+        };
+
+        const readStream = async (
+  reader,
+  status
+) => {
+  let partialLine = '';
+
+  while (true) {
+    // eslint-disable-next-line no-await-in-loop
+    const { value, done } = await reader.read();
+    if (done) break;
+
+    const decodedText = decoder.decode(value, { stream: true });
+
+    if(status === 400){
+      const json = JSON.parse(decodedText); // start with "data: "
+      const content = json.error.message ?? decodedText;
+      appendLastMessageContent(content);
+      return;
+    }
+
+    const chunk = partialLine + decodedText;
+    const newLines = chunk.split(/\r?\n/);
+
+    partialLine = newLines.pop() ?? '';
+
+    for (const line of newLines) {
+      if (line.length === 0) continue; // ignore empty message
+      if (line.startsWith(':')) continue; // ignore sse comment message
+      if (line === 'data: [DONE]') return; //
+
+      const json = JSON.parse(line.substring(6)); // start with "data: "
+      const content =
+        status === 200 ? json.choices[0].delta.content ?? "" : json.error.message;
+      appendLastMessageContent(content);
+    }
+  }
+        };
+        const appendLastMessageContent = (content) =>(messageList.value[messageList.value.length - 1].content += content);
+        const getSecretKey = () => "lianginx";
+        const saveAPIKey = (apiKey) => {
+        if (apiKey.slice(0, 3) !== "sk-" || apiKey.length !== 51) {
+            alert("API Key 错误，请检查后重新输入！");
+            return false;
+        }
+        const aesAPIKey = cryptoJS.AES.encrypt(apiKey, getSecretKey()).toString();
+        localStorage.setItem("apiKey", aesAPIKey);
+        return true;
+        };
+        const clearMessageContent = () => (messageContent.value = "");
+        const scrollToBottom = () => {
+        if (!chatListDom.value) return;
+        scrollTo(0, chatListDom.value.scrollHeight);
+        };
+        const decoder = new TextDecoder("utf-8");
+        const roleAlias = { user: "ME", assistant: "ChatGPT", system: "System" };
+        const clickConfig = () => {
+            if (!isConfig.value) {
+                messageContent.value = getAPIKey();
+            } else {
+                clearMessageContent();
+            }
+            switchConfigStatus();
+        }
+        const sendOrSave = () => {
+  if (!messageContent.value.length) return;
+  if (isConfig.value) {
+    if (saveAPIKey(messageContent.value.trim())) {
+      switchConfigStatus();
+    }
+    clearMessageContent();
+  } else {
+    sendChatMessage();
+  }
+        }
+        const getAPIKey = () => {
+  if (apiKey) return apiKey;
+  const aesAPIKey = localStorage.getItem("apiKey") ?? "";
+  apiKey = cryptoJS.AES.decrypt(aesAPIKey, getSecretKey()).toString(
+    cryptoJS.enc.Utf8
+  );
+  return apiKey;
+        }
+        onMounted(() => {
+        if (getAPIKey()) {
+            switchConfigStatus();
+        }
+        });
+        watch(messageList.value, () => nextTick(() => scrollToBottom()));
+        return{
+                clickConfig,
+                sendOrSave,
+                getAPIKey,
+                isConfig,
+                isTalking,
+                messageContent,
+                apiKey,
+                count,
+                roleAlias,
+                messageList
+            }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+#wrapper .content
+.support {
+    line-height: 2em;
+    font-size: 22px;
+    color: #999;
+    // background-color: rgb(156, 6, 6);
+  }
+.pre {
+  font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica,
+    "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB",
+    "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN",
+    "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti",
+    "SimHei", "WenQuanYi Zen Hei Sharp", sans-serif;
+}
+.setting{
+  display: flex;
+}
+.prompt_content{
+  background-color: rgb(248, 243, 243);
+  height: 400px;
+  width: auto;
+  padding: auto;
+  margin: auto;
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/User/children/information.vue b/Code/Frontend/src/views/User/children/information.vue
new file mode 100644
index 0000000..4683a6a
--- /dev/null
+++ b/Code/Frontend/src/views/User/children/information.vue
@@ -0,0 +1,370 @@
+<template>
+    <div>
+        <y-shelf title="用户信息">
+            <template #right>
+                <y-button v-if="flag" text="编辑"  style="margin: 0" @btnClick="update()"></y-button>
+                <y-button text="编辑" classStyle='disabled-btn' style="margin: 0" v-else></y-button>
+            </template>
+            <template #content>
+                <div v-loading="loading" element-loading-text="加载中..." v-if="flag" style="min-height: 10vw;">
+                <el-descriptions class="margin-top" :column="2" border>
+                    <el-descriptions-item>
+                        <template #label>
+                            <el-icon :size="10">
+                                <Picture />
+                            </el-icon>
+                            头像
+                        </template>
+                        <img class="img" src="../../../assets/images/user.jpg" alt="" />
+                    </el-descriptions-item>
+
+                    <el-descriptions-item>
+                        <template #label>
+                            <el-icon :size="10">
+                                <User />
+                            </el-icon>
+                            用户名
+                        </template>
+                        <div class="name" style="text-align: center; width:220px; ">{{info.name}}</div>
+                    </el-descriptions-item>
+
+                    <el-descriptions-item>
+                        <template #label>
+                            <el-icon :size="10">
+                                <Odometer />
+                            </el-icon>
+                            年龄
+                        </template>
+                        <div style="text-align: center; width:220px;">{{ info.age }}</div>
+                    </el-descriptions-item>
+
+                    <el-descriptions-item :labelStyle="labelStyle" :contentStyle="contentStyle">
+                        <template #label>
+                            <el-icon :size="10">
+                                <Male />
+                            </el-icon>
+                            <el-icon :size="10">
+                                <Female />
+                            </el-icon>
+                            性别
+
+                        </template>
+                        <div style="text-align: center; width:220px;"><el-tag size="medium">{{info.gender}}</el-tag></div>
+
+                    </el-descriptions-item>
+
+                    <el-descriptions-item :labelStyle="labelStyle" :contentStyle="contentStyle">
+                        <template #label>
+                            <el-icon :size="10">
+                                <Message />
+                            </el-icon>
+                            邮箱Email
+                        </template>
+                        <div style="text-align: center; width:220px;">{{ info.email }}</div>
+                    </el-descriptions-item>
+
+                    <el-descriptions-item>
+                        <template #label>
+                            <el-icon :size="10">
+                                <Iphone />
+                            </el-icon>
+                            手机号码
+                        </template>
+                        <div style="text-align: center; width:220px;">{{ info.phone }}</div>
+                    </el-descriptions-item>
+
+                    <el-descriptions-item>
+                        <template #label>
+                            <el-icon :size="10">
+                                <Location />
+                            </el-icon>
+                            学校
+                        </template>
+                        <div style="text-align: center; width:220px;">{{info.school}}</div>
+                    </el-descriptions-item>
+
+                    <el-descriptions-item>
+                        <template #label>
+                            <el-icon :size="10">
+                                <MagicStick />
+                            </el-icon>
+                            兴趣方向
+                        </template>
+                        <div style="text-align: center; width:220px;">{{ info.personal }}</div>
+                    </el-descriptions-item>
+
+                </el-descriptions>
+                </div>
+                <div v-loading="loading" element-loading-text="加载中..." v-else>
+                    <div style="padding: 100px 0;text-align: center">
+                        <!-- 获取该订单信息失败 -->
+                    </div>
+                </div>
+
+            </template>
+        </y-shelf>
+        <y-popup :open="popupOpen" @close='popupOpen = false' :title=popupTitle>
+            <template #content>
+                <el-form :model="form"  label-width="100px" :inline="true" class=“demo-form-inline”>
+                    <el-row >
+                        <el-col :span="10">
+                            <el-form-item label="姓名">
+                                <el-input v-model="form.name"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="10">
+                            <el-form-item label="用户编号" prop="id">
+                                <el-input v-model="form.id" disabled></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row >
+                        <el-col :span="10">
+                        <el-form-item label="年龄" prop="age">
+                            <el-input v-model="form.age" ></el-input>
+                        </el-form-item>
+                        </el-col>
+                        <el-col :span="10">
+                            <el-form-item label="手机号码" prop="mobilePhoneNumber">
+                                <el-input v-model="form.phone"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row >
+                        <el-col :span="10">
+                            <el-form-item label="性别" prop="sex">
+                            <el-switch
+                            v-model="form.gender"
+                            active-color="#13ce66"
+                            inactive-color="#ff4949"
+                            active-text="男"
+                            inactive-text="女"
+                            active-value= "男"
+                            inactive-value= "女"
+                            >
+                            </el-switch>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="10">
+                            <el-form-item label="学校" prop="area">
+                                <el-input v-model="form.school"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row >
+                        <el-col :span="10">
+                            <el-form-item label="邮箱" prop="email">
+                                <el-input v-model="form.email"></el-input>
+                            </el-form-item>
+                        </el-col>
+                        <el-col :span="10">
+                            <el-form-item label="兴趣方向" prop="design">
+                                <el-input v-model="form.personal"></el-input>
+                            </el-form-item>
+                        </el-col>
+                    </el-row>
+                    <el-row>
+                        <el-col>
+                            <el-button type="primary" size="large" @click="submitForm" >修改</el-button>
+                            <el-button type="warning" size="large" @click="cancelForm" >取消</el-button>
+                        </el-col>
+                    </el-row>
+                </el-form>
+            </template>
+        </y-popup>
+    </div>
+</template>
+
+<script>
+import { ElCard, ElDescriptions, ElButton, ElDescriptionsItem, ElDialog, ElForm } from 'element-plus';
+import ElIcon from 'element-plus';
+import YShelf from "../../../components/shelf.vue"
+import YButton from "../../../components/YButton.vue"
+import YPopup from '../../../components/popup.vue'
+import {userInfoUpdate} from "@/api/index"
+import {userLogin} from "@/api/index"
+import { ref } from 'vue';
+import {getUser} from "@/api/tmp"
+import { getStore,setStore,removeStore } from "@/utils/storage"
+export default {
+    components: {
+        YShelf,
+        YButton,
+        ElCard,
+        ElButton,
+        ElDescriptions,
+        ElDescriptionsItem,
+        YPopup,
+        ElDialog,
+        ElForm
+    },
+    created(){
+        this.init();
+    },
+    data() {
+    return {
+        flag:false,
+        loading: true,
+        popupOpen: false,
+        popupTitle: "修改个人信息",
+        allinfo:null,
+        id:null,
+        info:{
+            password:"",
+            age: "",
+            email: "",
+            phone: "",
+            gender: "",
+            id: "",
+            school: "",
+            personal: "",
+            name:"",
+        },
+
+        form: {
+            password:"",
+            age: "",
+            email: "",
+            phone: "t",
+            gender: "",
+            id: "",
+            school: "",
+            personal: "",
+            name:"",
+        },
+        }
+    },
+    methods: {
+        init(){
+            this.id = getStore("id");
+            if(!this.id ){
+                this.note_load_fail();
+            }
+            else{
+                console.log(this.id)
+                this.getUserInfo();
+                this.note_load_success();
+            }
+        },
+        getUserInfo(){
+            let param = {
+                id:this.id
+            }
+            getUser(param).then(res=>{
+                this.info = res;
+                this.loading = false;
+                this.flag = true;
+                console.log(res);
+                console.log("------");
+            })
+
+        },
+        note_load_success(){
+        this.$notify(
+            {
+            title:"个人信息",
+            message:"加载成功",
+            type:'success',
+            position: 'top-right',
+            }
+        )
+        },
+        note_success(){
+        this.$notify(
+            {
+            title:"个人信息",
+            message:"修改成功",
+            type:'success',
+            position: 'top-right',
+            }
+        )
+        },
+        note_load_fail(){
+        this.$notify(
+            {
+            title:"个人信息",
+            message:"加载失败",
+            type: 'error',
+            position: 'top-right',
+            }
+        )
+        },
+        note_fail(){
+        this.$notify(
+            {
+            title:"个人信息",
+            message:"修改失败",
+            type: 'error',
+            position: 'top-right',
+            }
+        )
+        },
+        update() {
+            this.form =  JSON.parse(JSON.stringify(this.info));
+            this.popupOpen = !this.popupOpen;
+        },
+        cancelForm(){
+            this.popupOpen = !this.popupOpen;
+        },
+        submitForm(){
+            this.popupOpen = !this.popupOpen;
+            var param = JSON.parse(JSON.stringify(this.form));
+            userInfoUpdate(param).then(res=>{
+                console.log(res);
+                if(res === "success"){
+                    this.note_success();
+                    console.log(param);
+                    this.info = param;
+                    this.$store.state.userAllInfo = JSON.parse(JSON.stringify(param));
+                }
+                else{
+                    this.note_fail();
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.el-form-item{
+    margin-bottom: 20px;
+}
+.el-button{
+    padding: 0;
+    width: 100px;
+}
+.img {
+    width: 80px;
+    height: 80px;
+    padding-left: 100px;
+}
+.all{
+    display: flex;
+}
+.left {
+  width: 290px;
+//   float: left;
+  padding-right: 100px;
+  margin: 0 -100px 0 -100px;
+}
+.right {
+  overflow: hidden;
+  margin: 0 0px 0 -30px;
+  width: 290px;
+}
+.dialog-footer{
+    background-color: rgb(197, 101, 101);
+    width: 100px;
+    button{
+        width:100px;
+        background-color: rgb(24, 23, 23);
+    }
+    margin:0 0 -100px 200px;
+    padding-top: 100px;
+    height: 100px;
+}
+// .name{
+//     padding-left: 100px;
+// }
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/User/children/orderDetail.vue b/Code/Frontend/src/views/User/children/orderDetail.vue
new file mode 100644
index 0000000..31b3501
--- /dev/null
+++ b/Code/Frontend/src/views/User/children/orderDetail.vue
@@ -0,0 +1,90 @@
+<template>
+    <div>
+        <y-shelf title="账户资料">
+            <template #content>
+                <div class="avatar-box">
+                    <div class=img-box><img src="../../../assets/images/saoma.png"></div>
+                    <div class="r-box">
+                        <h3 style="margin-left: 13px;">修改头像</h3>
+                        <y-button text="上传头像" classStyle="main-btn" style="margin: 0;" @btnClick="editAvatar()"></y-button>
+                    </div>
+                </div>
+                <div class="info">
+                    <ul>
+                        <li>用户名</li>
+                        <li>邮箱</li>
+                        <li>默认地址</li>
+                        <li>学校</li>
+                        <li></li>
+                    </ul>
+
+                </div>
+            </template>
+            <template #right>
+                <h5>编辑</h5>
+            </template>
+            <div class="info">
+            </div>
+        </y-shelf>
+    </div>
+</template>
+
+<script>
+import YShelf from "../../../components/shelf.vue"
+import YButton from "../../../components/YButton.vue"
+    export default {
+
+        components:{
+            YShelf,
+            YButton
+   }
+        
+    }
+</script>
+
+<style lang="less" scoped>
+.avatar-box {
+    height: 124px;
+    display: flex;
+    margin: 0 30px 30px;
+    border-bottom: #dadada solid 1px;
+    line-height: 30px;
+    display: flex;
+    align-items: center;
+    background-color: rgb(255, 255, 255);
+    .img-box {
+      @include wh(80px);
+      border-radius: 5px;
+      overflow: hidden;
+      background-color: rgb(28, 25, 191);
+    }
+    img {
+      display: block;
+      @include wh(100%);
+    }
+    .r-box {
+      margin-left: 20px;
+      h3 {
+        font-size: 18px;
+        font-weight: 400;
+        color: #333;
+      }
+    }
+  }
+  .info{
+    height: 270px;
+    background-color: rgb(254, 254, 254);
+    list-style: none;
+    // padding: 100px;
+    margin: 0 0 0 0px;
+    ul{
+        list-style: none;
+        line-height: 60px;
+        color:rgb(255, 17, 187);
+        font-size: large;
+        padding: 0 70px;
+        margin: auto;
+    }
+  }
+
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/User/children/orderList.vue b/Code/Frontend/src/views/User/children/orderList.vue
new file mode 100644
index 0000000..d6e1a12
--- /dev/null
+++ b/Code/Frontend/src/views/User/children/orderList.vue
@@ -0,0 +1,289 @@
+<template>
+  <div>
+      <y-shelf title="我的订单">
+          <!-- <template #right>
+              <y-button text="上传物品" classStyle='disabled-btn' style="margin: 0"  v-if="loading"></y-button>
+              <y-button text="上传物品" style="margin: 0" @btnClick="post()" v-else></y-button>
+          </template> -->
+          <template #content>
+          <!-- {{ addList }} -->
+          <!-- {{ addList.length }} -->
+              <div class="table-title">
+                      <span class="name">订单号</span>
+                      <span class="name">时间</span>
+                      <span class="name">物品名称</span>
+                      <span class="name">单价</span>
+                      <span class="name">状态</span>
+                      <span class="name">订单操作</span>
+                  </div>
+              <div v-loading="loading" element-loading-text="加载中..." v-if="flag" style="min-height: 10vw;">
+                  <div class="address-item" v-for="(item, i) in addList" :key="i">
+                      <div class="name">{{item.oid  }}</div>
+                      <div class="time">{{ item.time }}</div>
+                      <div class="name">{{ item.name }}</div>
+                      <div class="price">￥{{ item.price }}</div>
+                      <div class="number" v-if="item.status === 1 ">上架</div>
+                      <div class="number" v-else-if="item.status === 2"> 预定 </div>
+                      <div class="number" v-else> 完成 </div>
+                      <el-button style="margin-left:20px" @click="delOrder(item)" type="danger" size="large"  class="del-order">此订单完成</el-button>
+                  </div>
+              </div>
+              <div v-else>
+                  <div style="padding: 80px 0;text-align: center">
+                      <div style="font-size: 20px">您的订单为空</div>
+                      <div style="margin: 20px ">
+                      </div>
+                  </div>
+              </div>
+          </template>
+      </y-shelf>
+  </div>
+</template>
+
+<script>
+
+import { ref, watch } from 'vue';
+import axios from 'axios';
+import YShelf from "../../../components/shelf.vue"
+import YButton from "../../../components/YButton.vue"
+import YPopup from '../../../components/popup.vue'
+import { updateGood,deleteOrder,getOrder} from '@/api/tmp'
+import { setStore,getStore } from '../../../utils/storage';
+export default {
+  components:{
+      YShelf,
+      YButton,
+      YPopup,
+      axios,
+      setStore,
+      getStore,
+  },
+  setup(){
+      const id = getStore('id');
+      const addList = ref([]) // 用户菜单
+      const update = () => {
+          console.log("update");
+          let param = {
+              id:id
+          };
+          getGoodById(param).then(res=>{
+              addList.value = res;
+          })
+      }
+      const showTime  = () => {
+          var date = new Date();
+          var year = date.getFullYear();
+          var month = date.getMonth() + 1;
+          var day = date.getDate();
+          return year + '-' + month + '-' + day;
+      };
+
+      const insertGood = (m) => {
+          m.time = showTime();
+          addList.value.push(m);
+      };
+      return{
+          id,
+          addList,
+          insertGood,
+          showTime,
+          update,
+      }
+  },
+  data(){
+      return{
+          loading:true,
+          flag:true,
+
+      }
+  },
+  created(){
+      if(!this.id){
+          this.note_fail();
+          this.id = getStore("id");
+      }
+      else{
+          this.init_ordersList();
+      }
+  },
+  methods:{
+      note_success(){
+      this.$notify(
+          {
+          title:"订单信息",
+          message:"加载成功",
+          type:'success',
+          position: 'top-right',
+          }
+      )
+      },
+      note_fail(){
+      this.$notify(
+      {
+        title:"订单信息",
+        message:"加载失败,未登录",
+        type:'error',
+        position: 'top-right',
+      }
+    )
+      },
+      delOrder(tmp){
+        let param = {
+            oid:tmp.oid,
+          };
+        deleteOrder(param).then(res=>{
+          console.log(res);
+        })
+        this.updateGoodStatus(tmp);
+        this.$router.push({
+            path: '/user/information'
+          })
+      },
+      updateGoodStatus(tmp){
+        let param = {
+              uid:tmp.uid,
+              id:tmp.gid,
+              status:3
+          };
+        updateGood(param).then(res=>{
+          console.log(res);
+        })
+      },
+      showNotNull(){
+          this.loading = false;
+      },
+      showNull(){
+          this.loading = false;
+          this.flag = false;
+      },
+      init_ordersList  () {
+          console.log("---init_ordersList----");
+          let param = {
+              uid:this.id
+          };
+          getOrder(param).then(res=>{
+              this.addList = res;
+              console.log(res.length);
+              console.log(res);
+              if(this.addList.length){
+                  console.log('here');
+                  this.showNotNull();
+              }else{
+                  this.showNull()
+              }
+          })
+      },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.i {
+  height: 70px;
+
+  input {
+      background-color: rgb(250, 250, 250);
+      color: rgb(0, 0, 0);
+      width: 90%;
+      height: 50px;
+      border-radius: 10px;
+      font-size: large;
+
+  }
+}
+
+.table-title {
+  position: relative;
+  z-index: 1;
+  line-height: 38px;
+  height: 38px;
+  padding: 0 0 0 38px;
+  font-size: 12px;
+  background: #eee;
+  border-bottom: 1px solid #dbdbdb;
+  border-bottom-color: rgba(0, 0, 0, .08);
+  .descr{
+      float: left;
+      text-align: left;
+      margin-left: 23px;
+  }
+
+  .name {
+      float: left;
+      text-align: left;
+      width:130px;
+  }
+
+  span {
+      width: 137px;
+      float: left;
+      text-align: center;
+      color: #838383;
+  }
+}
+
+.ellipsis {
+  margin-left: 20px;
+  width: 220px;
+}
+
+.address-item {
+  display: flex;
+  align-items: center;
+  height: 120px;
+  text-align: center;
+  &:hover {
+      .del-order {
+        display: block;
+        width: 100px;
+      }
+    }
+  .del-order {
+    display: none;
+  }
+
+  // line-height: 50px;
+  .time {
+      color: #dd6a6a;
+      width: 150px;
+
+  }
+
+  .name {
+      color: #dd6a6a;
+      width: 120px;
+
+  }
+
+  .price {
+      color: #dd6a6a;
+      width: 120px;
+
+  }
+
+  .number {
+      color: #dd6a6a;
+      width: 130px;
+
+  }
+
+  .descr {
+      color: #dd6a6a;
+      width: 190px;
+
+  }
+
+  .img-box {
+      border: 1px solid #ffffff;
+      // width: 100px;
+      margin-left: 20px;
+  }
+
+  img {
+      display: block;
+      width: 80px;
+      height: 80px;
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/User/children/post.vue b/Code/Frontend/src/views/User/children/post.vue
new file mode 100644
index 0000000..eca43fc
--- /dev/null
+++ b/Code/Frontend/src/views/User/children/post.vue
@@ -0,0 +1,386 @@
+<template>
+    <div>
+        <y-shelf title="书籍上传">
+            <template #right>
+                <y-button text="上传物品" classStyle='disabled-btn' style="margin: 0"  v-if="loading"></y-button>
+                <y-button text="上传物品" style="margin: 0" @btnClick="post()" v-else></y-button>
+            </template>
+            <template #content>
+            <!-- {{ addList }} -->
+            <!-- {{ addList.length }} -->
+                <div class="table-title">
+                        <span class="name">图片</span>
+                        <span class="name">时间</span>
+                        <span class="name">物品名称</span>
+                        <span class="name">单价</span>
+                        <span class="name">状态</span>
+                        <span class="descr">简介</span>
+                    </div>
+                    <!-- {{ this.loading }} -->
+                <div v-loading="loading" element-loading-text="加载中..." v-if="flag" style="min-height: 10vw;">
+                    <div class="address-item" v-for="(item, i) in addList" :key="i">
+                        <div class="img-box"><img :src="item.picurl1" alt=""></div>
+                        <div class="time">{{ item.time }}</div>
+                        <div class="name">{{ item.name }}</div>
+                        <div class="price">￥{{ item.price }}</div>
+                        <div class="number" v-if="item.status === 1 ">上架</div>
+                        <div class="number" v-else-if="item.status === 2"> 预定 </div>
+                        <div class="number" v-else> 完成 </div>
+                        <div class="descr">{{ item.comment }}</div>
+                    </div>
+                </div>
+                <div v-else>
+                    <div style="padding: 80px 0;text-align: center">
+                        <div style="font-size: 20px">你还未添加物品</div>
+                        <div style="margin: 20px ">
+                            <y-button text="上传物品" @btnClick="post()"></y-button>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </y-shelf>
+        <y-popup :open="popupOpen" @close='popupOpen = !popupOpen' :title=popupTitle>
+            <template #content>
+
+                <div class="i">
+                    <input type="text" placeholder="物品名" v-model="msg.name">
+                </div>
+                <div class="i">
+                    <input type="range " placeholder="物品单价" v-model="msg.price">
+                </div>
+                <div class="i">
+                    <input type="text" placeholder="物品简介" v-model="msg.descr">
+                </div>
+
+                <el-upload v-model:file-list="fileList" class="upload-demo" :http-request="uploadFile" action="#"
+                     list-type="picture">
+                    <el-button type="primary">Click to upload</el-button>
+                    <template #tip>
+                        <div class="el-upload__tip">
+                            jpg/png files with a size less than 500kb
+                        </div>
+                    </template>
+                </el-upload>
+                <y-button text='保存' class="btn" :classStyle="'main-btn'"
+                    @btnClick="save({ name: msg.name, descr: msg.descr, price: msg.price })">
+                </y-button>
+
+            </template>
+        </y-popup>
+    </div>
+</template>
+
+<script>
+
+import { ref, watch } from 'vue';
+import axios from 'axios';
+import YShelf from "../../../components/shelf.vue"
+import YButton from "../../../components/YButton.vue"
+import YPopup from '../../../components/popup.vue'
+import { insertGoodMysql,getGoodById} from '@/api/tmp'
+import { setStore,getStore } from '../../../utils/storage';
+export default {
+    components:{
+        YShelf,
+        YButton,
+        YPopup,
+        axios,
+        setStore,
+        getStore
+
+    },
+    watch:{
+
+    },
+
+
+    setup(){
+        const id = getStore('id');
+        const popupOpen = ref(false)
+        const addList = ref([]) // 用户菜单
+        const popupTitle = ref("书籍详情");
+        const fileList = ref([]);//图片列表
+        const update = () => {
+            console.log("update");
+            let param = {
+                id:id
+            };
+            getGoodById(param).then(res=>{
+                addList.value = res;
+            })
+        }
+        const showTime  = () => {
+            var date = new Date();
+            // 年月日
+            var year = date.getFullYear();
+            var month = date.getMonth() + 1;
+            var day = date.getDate();
+            // 时分秒
+            // var hour = date.getHours();
+            // var minute = date.getMinutes();
+            // var second = date.getSeconds();
+            // return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
+            return year + '-' + month + '-' + day;
+        };
+        const upload = () => {
+        let config = {
+            timeout: 30000,
+            headers: {
+            "Content-Type": "multipart/form-data", //设置headers
+            },
+        };
+        let fd = new FormData();
+        fd.append("user_id","1");
+        fd.append("name",msg.name);
+        console.log(fileList.value.length);
+        if (fileList){
+            fileList.value.forEach( (item,index) => {
+                fd.append("file",item.raw);
+                console.log(index)
+                console.log(item.name)
+            });
+        }
+        axios.post('/api/Upload', fd, config)
+        .then( async response => {
+                let url_list = response.data.data;
+                console.log(url_list);
+                console.log("--------------")
+                let goodinfo  = {
+                    "picurl1": url_list[0],
+                    "picurl2":url_list[1],
+                    "name": msg.name,
+                    "picurl3": url_list[2],
+                    "price": msg.price,
+                    "comment": msg.descr,
+                    "category":1,
+                    "uid":getStore("id"),
+                    "email":getStore("email"),
+                    "time":msg.time,
+                    "status":1,
+                };
+                await insertGoodMysql(goodinfo).then(res=>{console.log(res)})
+        })
+        };
+
+
+        const insertGood = (m) => {
+            m.time = showTime();
+            addList.value.push(m);
+        };
+        const msg = {
+                img: "",
+                time: "2023-01-02",
+                name: "",
+                descr: "",
+                price: "",
+                number: 1
+        };
+        const uploadFile = () => {
+            console.log("-------");
+        }
+        return{
+            id,
+            popupOpen,
+            id,
+            addList,
+            popupTitle,
+            fileList,
+            msg,
+            insertGood,
+            uploadFile,
+            showTime,
+            update,
+            upload
+
+        }
+    },
+    data(){
+        return{
+            loading:true,
+            flag:true,
+            saveflag:false,
+
+        }
+    },
+    created(){
+        if(!this.id){
+            this.note_fail();
+            this.id = getStore("id");
+        }
+        else{
+            this.init_goodsList();
+        }
+    },
+    methods:{
+        note_success(){
+        this.$notify(
+            {
+            title:"商品信息",
+            message:"加载成功",
+            type:'success',
+            position: 'top-right',
+            }
+        )
+        },
+        note_fail(){
+        this.$notify(
+        {
+          title:"商品信息",
+          message:"加载失败,未登录",
+          type:'error',
+          position: 'top-right',
+        }
+      )
+        },
+        post() {
+            this.popupOpen = !this.popupOpen;
+        },
+        showNotNull(){
+            this.loading = false;
+        },
+        showNull(){
+            this.loading = false;
+            this.flag = false;
+        },
+        init_goodsList  () {
+            let num = 0
+            console.log("init_goodsList");
+            let param = {
+                id:this.id
+            };
+            getGoodById(param).then(res=>{
+                this.addList = res;
+                console.log(res.length);
+                console.log(res);
+                if(this.addList.length){
+                    console.log('herer');
+                    this.showNotNull();
+                }else{
+                    this.showNull()
+
+                }
+            })
+        },
+        save(tmp){
+            this.msg.descr = tmp.descr;
+            this.msg.price = tmp.price;
+            this.msg.name = tmp.name;
+            this.msg.time =  this.showTime();
+            console.log(this.msg);
+            // this.insertGood(this.msg);
+            this.upload();
+            this.saveflag = !this.saveflag;
+            // update();
+            this.popupOpen = !this.popupOpen;
+            this.$router.push({
+            path: '/user/information'
+      })
+        },
+    },
+}
+
+
+
+</script>
+
+<style lang="less" scoped>
+.i {
+    height: 70px;
+
+    input {
+        background-color: rgb(250, 250, 250);
+        color: rgb(0, 0, 0);
+        width: 90%;
+        height: 50px;
+        border-radius: 10px;
+        font-size: large;
+
+    }
+}
+
+.table-title {
+    position: relative;
+    z-index: 1;
+    line-height: 38px;
+    height: 38px;
+    padding: 0 0 0 38px;
+    font-size: 12px;
+    background: #eee;
+    border-bottom: 1px solid #dbdbdb;
+    border-bottom-color: rgba(0, 0, 0, .08);
+    .descr{
+        float: left;
+        text-align: left;
+        margin-left: 23px;
+    }
+
+    .name {
+        float: left;
+        text-align: left;
+        width:130px;
+    }
+
+    span {
+        width: 137px;
+        float: left;
+        text-align: center;
+        color: #838383;
+    }
+}
+
+.ellipsis {
+    margin-left: 20px;
+    width: 220px;
+}
+
+.address-item {
+    display: flex;
+    align-items: center;
+    height: 120px;
+    text-align: center;
+
+    // line-height: 50px;
+    .time {
+        color: #dd6a6a;
+        width: 180px;
+
+    }
+
+    .name {
+        color: #dd6a6a;
+        width: 120px;
+
+    }
+
+    .price {
+        color: #dd6a6a;
+        width: 120px;
+
+    }
+
+    .number {
+        color: #dd6a6a;
+        width: 130px;
+
+    }
+
+    .descr {
+        color: #dd6a6a;
+        width: 190px;
+
+    }
+
+    .img-box {
+        border: 1px solid #ffffff;
+        // width: 100px;
+        margin-left: 20px;
+    }
+
+    img {
+        display: block;
+        width: 80px;
+        height: 80px;
+    }
+
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/User/children/support.vue b/Code/Frontend/src/views/User/children/support.vue
new file mode 100644
index 0000000..704a04c
--- /dev/null
+++ b/Code/Frontend/src/views/User/children/support.vue
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <y-shelf title="用户信息">
+      <template #content>
+          <el-descriptions class="margin-top"  :column="2"  border>
+          <el-descriptions-item>
+            <template #label>
+              <el-icon :size = "10"><Picture /></el-icon>
+              头像
+            </template>
+            <img class="img" src="../../../assets/images/user.jpg" alt="" />
+          </el-descriptions-item>
+
+          <el-descriptions-item  >
+            <template #label >
+              <el-icon :size = "10"><User /></el-icon>
+              用户名
+            </template>
+            <div style="text-align: center; width:100px; ">Test</div>
+          </el-descriptions-item>
+
+          <el-descriptions-item>
+            <template #label>
+              <el-icon :size = "10"><Odometer /></el-icon>
+              年龄
+            </template>
+            <div style="text-align: center; width:100px;">22</div>
+          </el-descriptions-item>
+
+          <el-descriptions-item>
+            <template #label>
+              <el-icon :size = "10"><Male /></el-icon>
+              <el-icon :size = "10"><Female/></el-icon>
+              性别
+            </template>
+            <div style="text-align: center; width:100px;">男</div>
+          </el-descriptions-item>
+
+          <el-descriptions-item>
+            <template #label>
+              <el-icon :size = "10"><Message /></el-icon>
+                邮箱Email
+            </template>
+            <div style="text-align: center; width:100px;">1918XXX@qq.com</div>
+          </el-descriptions-item>
+
+          <el-descriptions-item>
+            <template #label>
+              <el-icon :size = "10"><Iphone /></el-icon>
+              手机号码
+            </template>
+            <div style="text-align: center; width:100px;">15626XXXXXXXX</div>
+          </el-descriptions-item>
+
+          <el-descriptions-item>
+            <template #label>
+              <el-icon :size = "10"><Location /></el-icon>
+              学校
+            </template>
+            <div style="text-align: center; width:100px;">南京大学</div>
+          </el-descriptions-item>
+
+          <el-descriptions-item>
+            <template #label>
+              <el-icon :size = "10"><MagicStick/></el-icon>
+              个性签名
+            </template>
+            <div style="text-align: center; width:120px;">一定要爱着点什么</div>
+          </el-descriptions-item>
+
+          </el-descriptions>
+
+      </template>
+    </y-shelf>
+
+
+  </div>
+</template>
+
+<script>
+import { ElCard,ElDescriptions,ElButton,ElDescriptionsItem } from 'element-plus';
+import ElIcon from 'element-plus';
+import YShelf from "../../../components/shelf.vue"
+import YButton from "../../../components/YButton.vue"
+
+  export default {
+    components:{
+    YShelf,
+    YButton,
+    ElCard,
+    ElButton,
+    ElDescriptions,
+    ElDescriptionsItem
+}
+
+  }
+</script>
+
+<style lang="less" scoped>
+.img {
+  width: 80px;
+  height: 80px;
+}
+</style>
\ No newline at end of file
diff --git a/Code/Frontend/src/views/User/user.vue b/Code/Frontend/src/views/User/user.vue
new file mode 100644
index 0000000..4864a42
--- /dev/null
+++ b/Code/Frontend/src/views/User/user.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="layout-container">
+    <m-header></m-header>
+    <div class="content">
+      <div class="sidebar">
+        <div class="graybox">
+          <div class="user-info">
+            <div class="pic">
+              <img src="../../assets/images/user.jpg" height="130">
+            </div>
+            <h5>{{ this.$store.state.userInfo }}</h5>
+          </div>
+          <div class="box-inner">
+            <ul class="account-nav">
+                <li v-for="(item,i) in nav" :key='i' :class="{current:item.name===title}"
+                    @click="tab(item)">
+                  <a href="javascript:;">{{item.name}}</a>
+                </li>
+            </ul>
+          </div>
+
+        </div>
+      </div>
+      <div class="account-content">
+        <router-view></router-view>
+      </div>
+    </div>
+    <m-footer></m-footer>
+
+  </div>
+</template>
+
+<script>
+import MHeader from '../../common/MHeader.vue'
+import MFooter from '../../common/MFooter.vue'
+  export default {
+    data(){
+      return{
+        nav:[
+          {name: '账户资料', path: 'information'},
+          {name: '我的上传', path: 'post'},
+          {name: '我的订单', path: 'orderList'},
+          {name: '我的优惠', path: 'coupon'}
+
+        ]
+      }
+    },
+  components: { MHeader, MFooter },
+  methods:{
+    tab(e){
+      this.$router.push({path: '/user/' + e.path})
+    }
+  }
+
+  }
+</script>
+
+<style lang="less" scoped>
+.content {
+  padding-top: 40px;
+  display: flex;
+  height: 100%;
+  .sidebar{
+    width: 150px;
+    border-radius: 6px;
+    background-color: rgb(255, 255, 255);
+    margin: 0 0 0 100px;
+
+  }
+
+.avatar {
+    padding-top: 20px;
+    border-radius: 10px;
+    text-align: center;
+    img {
+      width: 168px;
+      height: 168px;
+    }
+    h5 {
+      font-size: 18px;
+      line-height: 48px;
+      font-weight: 700;
+    }
+}
+.account-nav {
+  padding-top: 10px;
+  padding-left: 0px;
+  list-style: none;
+  li {
+      position: relative;
+      height: 48px;
+      border-top: 1px solid #EBEBEB;
+      line-height: 48px;
+
+      &:hover {
+        a {
+          position: relative;
+          z-index: 1;
+          height: 50px;
+          background-color: #98AFEE;
+          line-height: 50px;
+          color: rgb(246, 246, 246);
+        }
+
+      }
+      a {
+        display: block;
+        text-decoration: none;
+        color: #e401fd;
+      }
+      &.current {
+        a {
+          position: relative;
+          z-index: 1;
+          height: 50px;
+          background-color: #98AFEE;
+          line-height: 50px;
+          color: #FFF;
+        }
+      }
+  }
+}
+.pic{
+  display: block;
+  margin-top: 30px;
+}
+.account-content {
+  margin-left: 0px;
+  flex: 1;
+}
+.user-info{
+  text-align: center;
+}
+.box-inner{
+  text-align: center;
+}
+.graybox{
+  width: 300px;
+  border: 1px solid #dcdcdc;
+  border-radius: 8px;
+  background-color: rgb(255, 255, 255);
+  height: auto;
+}
+}
+
+</style>
\ No newline at end of file