【全栈】SprintBoot+vue3迷你商城（8）_会springboot和vue3就是全栈大佬了吗贴吧-优快云博客

<script lang="ts" setup>
import { ref } from 'vue'


const activeIndex = ref('0')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
import { Search } from '@element-plus/icons-vue'
const input2 = ref('')

const goodsModel = ref({
  goodsName: '',
  goodsImgUrl: '',
  goodsPrice: '',
  merchantName: '',
  merchantImgUrl: ''
})

const goodsListModel = ref([

])
import { getGoodsListService, getGoodsDetailService } from '@/api/goods'
import { useRouter } from 'vue-router';
const router = useRouter();

const goodsList = async () => {
  let result = await getGoodsListService();
  goodsListModel.value = result.data;
  console.log(result.data)

}
goodsList();


const getDetail = (id) => {
  router.push({ path: '/goods/detail', query: { id } })
}
const userInfoModel = ref({
  username: '',
  userType: '',
  phoneNumber: '',
  userPic: '',
  cardIdList: ''
})

import { userInfoService } from '@/api/user'
import { useUserInfoStore } from '@/stores/userInfo';
const userInfoStore = useUserInfoStore();
const userInfo = async () => {
  let result = await userInfoService()
  userInfoModel.value.username = result.data.username;
  userInfoModel.value.userPic = result.data.userPic
  userInfoModel.value.userType = result.data.userType;
  userInfoModel.value.phoneNumber = result.data.phoneNumber;
  userInfoModel.value.cardIdList = result.data.cardIdList;
  userInfoStore.setInfo(userInfoModel.value)

}
userInfo();

import { computed, watch } from 'vue'

const currentPage = ref(1);

const pageSize = ref(12);

const goodsCount = computed(() => {
  return goodsListModel.value.length;
});

const paginatedGoods = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return goodsListModel.value.slice(start, end);
});

const handlePageChange = (newPage) => {
  currentPage.value = newPage;
};


import { ElMessage } from 'element-plus';
import { Avatar,  SwitchButton } from '@element-plus/icons-vue';


import { useTokenStore } from '@/stores/token'; 
const tokenStore=useTokenStore();
const showLogoutDialog = ref(false);
const logout = () => {
  ElMessage.success('成功退出登录');
  tokenStore.removeToken();
  router.push('/login'); 
  showLogoutDialog.value = false; 
};

const handleClose = (done) => {
  ElMessage({
    message: '对话框已关闭',
    type: 'warning'
  });
  done();
};

</script>

<template>
  <div class="common-layout">
    <el-container class="bg">
      <el-header>
        <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
          @select="handleSelect">
          <el-menu-item index="0" @click="router.push('/')">
            <el-icon>
              <ShoppingTrolley />
            </el-icon>
            <img style="width: 100px" src="@/assets/logo2.jpg" alt="logo" />
          </el-menu-item>
          <span style="font-size: medium;">
            <el-avatar style="margin-top:5px" :src="userInfoModel.userPic" />

            {{ userInfoModel.userType }}:{{ userInfoModel.username }}
          </span>
          <el-menu-item index="1" @click="router.push('/user/info')"><el-icon>
              <Avatar />
            </el-icon>我的</el-menu-item>
          <el-sub-menu index="2">
            <template #title>工具栏</template>
            <el-menu-item v-if="userInfoModel.userType === '商家'" index="2-1"
              @click="router.push('/user/goods')">我的商品</el-menu-item>
            <el-menu-item index="2-2" @click="router.push('/user/cart')">购物车</el-menu-item>
            <el-menu-item index="2-3" @click="showLogoutDialog = true;">
              <el-icon>
                <SwitchButton />
              </el-icon>
              退出登录
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
        <el-dialog title="确认退出登录" v-model="showLogoutDialog" width="30%" :before-close="handleClose">
              <span>确定要退出登录吗？</span>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="showLogoutDialog = false">取消</el-button>
                  <el-button type="primary" @click="logout">确定</el-button>
                </span>
              </template>
            </el-dialog>
      </el-header>

      <el-main>
        <el-input v-model="input2" style="width: 240px;margin-right: 10px;" placeholder="输入你想要的商品"
          :prefix-icon="Search" />
        <el-button type="danger">搜索</el-button>
        <el-row :gutter="20">


          <el-col :span="6" v-for="goods in goodsListModel" :key="goods.id" @click="getDetail(goods.id)">
            <div class="grid-content ep-bg-purple" />
            <a style="text-decoration: none;" href="">
              <el-card style="max-width: 480px">
                <template #header>
                  {{ goods.goodsName }}
                  <div style="font-size: small;">商家：{{ goods.merchantName }}</div>
                  <div style="font-size: large;text-align: end;">{{ goods.goodsPrice }}￥</div>
                </template>
                <img :src="goods.goodsImgUrl" style="width: 100%" />
              </el-card>
            </a>
          </el-col>





        </el-row>

        <div style="display: flex; justify-content: center;">
          <el-pagination background layout="prev, pager, next" :total="goodsCount" :page-size="pageSize"
            :current-page="currentPage" @current-change="handlePageChange" />
        </div>
        
      </el-main>
    </el-container>
  </div>
  <hr>
  <div style="width: 300px;height: 200px;margin-left: auto;margin-right: auto;">
    <div style="margin-top: 100px;">
      <p style="text-align: center;margin-top: 10px;filter: opacity(50%);font-size: small;">迷你商城,本网站为练习网站。
        本站商品全在淘宝:"https://www.taobao.com"中获取，若对站内商品感兴趣，请到淘宝搜索相关商品并购买</p>
    </div>
  </div>
</template>



<style>
.el-menu--horizontal>.el-menu-item:nth-child(1) {
  margin-right: auto;
}

.bg {
  background-color: pink;
}

.el-menu-demo {
  background-color: coral;
}

.list div {
  display: inline-block;
  width: 300px;
  height: 300px;
}



.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

2.2.制定与后端接口交互的函数

/src/api/goods.js

import request from '@/utils/request'

export const getGoodsListService=()=>{

    return request.get('/goods/list');
}

3.效果展示

在这里插入图片描述

注意：这些商品信息都是从淘宝中爬取所得，爬取仅为练习、测试所用，这些商品的商家也不是Janium，如需购买，请到淘宝搜索对应商家的该商品进行购买

4.总结

本期我们进行了登录后跳转的主页面的开发，下期我们将进行其他页面的开发