添加了辅助开发的内容

components.d.ts

@@ -7,9 +7,12 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCard: typeof import('element-plus/es')['ElCard']
+    ElCarousel: typeof import('element-plus/es')['ElCarousel']
+    ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
@@ -19,14 +22,20 @@ declare module 'vue' {
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElOption: typeof import('element-plus/es')['ElOption']
+    ElRate: typeof import('element-plus/es')['ElRate']
+    ElResult: typeof import('element-plus/es')['ElResult']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTag: typeof import('element-plus/es')['ElTag']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     Header: typeof import('./src/components/Header.vue')['default']
+    ProductItem: typeof import('./src/components/ProductItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    StoreItem: typeof import('./src/components/StoreItem.vue')['default']
   }
 }

src/api/_prefix.ts

@@ -3,3 +3,9 @@ export const API_MODULE = '/api'
 
 //用户模块
 export const USER_MODULE = `${API_MODULE}/users`
+
+//Lab2新增
+//商店模块
+export const STORE_MODULE = `${API_MODULE}/stores`
+//商品模块
+export const PRODUCT_MODULE = `${API_MODULE}/products`

src/api/product.ts

@@ -0,0 +1,5 @@
+// Lab2新增
+// 开发时请解除3-4行的注释
+// import {axios} from '../utils/request'
+// import {PRODUCT_MODULE} from './_prefix'
+

src/api/store.ts

@@ -0,0 +1,4 @@
+// Lab2新增
+// 开发时请解除3-4行的注释
+// import {axios} from '../utils/request'
+// import {STORE_MODULE} from './_prefix'

src/api/tools.ts

@@ -0,0 +1,15 @@
+// Lab2新增
+import {axios} from '../utils/request'
+import {API_MODULE} from './_prefix'
+
+// 上传图片文件
+export const uploadImage = payload => {
+    return axios.post(`${API_MODULE}/images`, payload, {
+        headers:{
+            'Content-Type': "multipart/form-data;"
+        }
+    })
+        .then(res => {
+            return res
+        })
+}

src/components/Header.vue

@@ -32,7 +32,7 @@ function logout() {
     <el-row :gutter="10">
 
       <el-col :span="3" class="header-icon">
-        <router-link to="/dashboard" v-slot="{navigate}" class="no-link">
+        <router-link to="/allStore" v-slot="{navigate}" class="no-link">
           <h1 @click="navigate" class="header-text"> 蓝鲸在线购物</h1>
         </router-link>
       </el-col>

src/components/ProductItem.vue

@@ -0,0 +1,13 @@
+<!--Lab2新增-->
+<!--商品列表父组件中的单个商品子组件-->
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/components/StoreItem.vue

@@ -0,0 +1,13 @@
+<!--Lab2新增-->
+<!--商店列表父组件中的单个商店子组件-->
+<script setup lang="ts">
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>

src/router/index.ts

@@ -15,7 +15,7 @@ const router = createRouter({
         meta: {title: '用户注册'}
     }, {
         path: '/home',
-        redirect: '/dashboard',
+        redirect: '/allStore',
         component: () => import('../views/Home.vue'),
         children: [
             {
@@ -24,6 +24,29 @@ const router = createRouter({
                 component: () => import('../views/user/Dashboard.vue'),
                 meta: {title: '个人信息'}
             },
+            //以下为Lab2新增，添加了商店模块的界面，请大家自己添加商品模块的界面
+            {
+                path: '/allStore',
+                name: 'allStore',
+                component: () => import('../views/store/AllStore.vue'),
+                meta: {title: '商品列表界面/主页'}
+            },
+            //你也可以把创建商店界面改成一个弹窗
+            {
+                path: '/createStore',
+                name: 'createStore',
+                component: () => import('../views/store/CreateStore.vue'),
+                meta: {
+                    title: '创建商店',
+                    permission: ['MANAGER']
+                }
+            },
+            {
+                path: '/storeDetail/:storeId',
+                name: 'storeDetail',
+                component: () => import('../views/store/StoreDetail.vue'),
+                meta: {title: '店铺详情'}
+            }
         ]
     }, {
         path: '/404',

src/views/product/CreateProduct.vue

@@ -0,0 +1,22 @@
+<!--Lab2新增-创建商品界面-->
+<!--你可以选择把创建商品改成一个弹窗或其他界面的一个部分。
+这样的话，就不需要有这样一个views下的创建商品文件了，因为views下的文件一般会是一个单独的界面。
+但如果你觉得这一个部分的代码较多，合到其他文件里会使那个文件太长，
+可以在product文件夹下创建一个components子文件夹，里面存放product模块下产生的组件界面。把这个创建商品子组件放在里面。
+这个传递数据的过程可能需要用到props-->
+
+<script setup lang="ts">
+
+//这边是需要实现上传至少2张图片。可以从CreateStore里提供的代码改，也可以自己搜了写。
+
+</script>
+
+
+<template>
+
+</template>
+
+
+<style scoped>
+
+</style>

src/views/product/ProductDetail.vue

@@ -0,0 +1,25 @@
+<!--Lab2新增-商品详情界面-->
+<script setup lang="ts">
+
+</script>
+
+
+<template>
+  <el-container>
+    <!--希望把商品详情的一部分内容放在这个侧边栏里，你要真不想放也没事-->
+    <el-aside width="25%" class="page-aside">
+
+    </el-aside>
+
+    <el-main>
+
+    </el-main>
+  </el-container>
+</template>
+
+
+<style scoped>
+.page-aside {
+  border-right: lightgrey solid 1px;
+}
+</style>

src/views/store/AllStore.vue

@@ -0,0 +1,14 @@
+<!--Lab2新增-全部商店界面/主页-->
+<script setup lang="ts">
+
+</script>
+
+
+<template>
+
+</template>
+
+
+<style scoped>
+
+</style>

src/views/store/CreateStore.vue

@@ -0,0 +1,66 @@
+<!--Lab2新增-创建商店界面-->
+<!--你可以选择把创建商店改成一个弹窗或其他界面的一个部分。
+这样的话，就不需要有这样一个views下的创建商店文件了，因为views下的文件一般会是一个单独的界面。
+但如果你觉得这一个部分的代码较多，合到其他文件里会使那个文件太长，
+可以在store文件夹下创建一个components子文件夹，里面存放store模块下产生的组件界面。把这个创建商店子组件放在里面
+这个传递数据的过程可能需要用到props-->
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import {uploadImage} from '../../api/tools'
+
+//这里为大家提供上传且仅能上传1张图片的代码实现。
+const imageFileList = ref([])
+const logoUrl = ref('')
+function handleChange(file, fileList) {
+  imageFileList.value = fileList
+  let formData = new FormData()
+  formData.append('file', file.raw)
+  uploadImage(formData).then(res => {
+    logoUrl.value = res.data.result
+  })
+}
+
+function handleExceed() {
+  ElMessage.warning(`当前限制选择 1 个文件`);
+}
+
+function uploadHttpRequest() {
+}
+</script>
+
+
+<template>
+  <el-main>
+
+    <el-form>
+
+      <el-form-item label="商店Logo">
+        <el-upload
+            v-model:file-list="imageFileList"
+            :limit="1"
+            :on-change="handleChange"
+            :on-exceed="handleExceed"
+            :on-remove="handleChange"
+            class="upload-demo"
+            list-type="picture"
+            :http-request="uploadHttpRequest"
+            drag>
+          <el-icon class="el-icon--upload">
+            <upload-filled/>
+          </el-icon>
+          <div class="el-upload__text">
+            将文件拖到此处或单击此处上传。
+          </div>
+        </el-upload>
+      </el-form-item>
+
+    </el-form>
+
+  </el-main>
+</template>
+
+
+<style scoped>
+
+</style>

src/views/store/StoreDetail.vue

@@ -0,0 +1,25 @@
+<!--Lab2新增-商店详情界面-->
+<script setup lang="ts">
+
+</script>
+
+
+<template>
+  <el-container>
+    <!--希望把商店详情的一部分内容放在这个侧边栏里，你要真不想放也没事-->
+    <el-aside width="25%" class="page-aside">
+
+    </el-aside>
+
+    <el-main>
+
+    </el-main>
+  </el-container>
+</template>
+
+
+<style scoped>
+.page-aside {
+  border-right: lightgrey solid 1px;
+}
+</style>