【全栈】SprintBoot+vue3迷你商城（9）

杰九2025-01-26 20:42

【全栈】SprintBoot+vue3迷你商城（9）

往期的文章都在这里啦，大家有兴趣可以看一下

后端部分：

【全栈】SprintBoot+vue3迷你商城（1）
【全栈】SprintBoot+vue3迷你商城（2）
【全栈】SprintBoot+vue3迷你商城-扩展：利用python爬虫爬取商品数据
【全栈】SprintBoot+vue3迷你商城（3）
【全栈】SprintBoot+vue3迷你商城（4）
【全栈】SprintBoot+vue3迷你商城（5）
【全栈】SprintBoot+vue3迷你商城（6）

前端部分：

【全栈】SprintBoot+vue3迷你商城-扩展：vue的基本用法

【全栈】SprintBoot+vue3迷你商城-扩展：vue3项目创建及目录介绍

【全栈】SprintBoot+vue3迷你商城（7）

【全栈】SprintBoot+vue3迷你商城（8）

本期我们来写用户基本信息显示以及购物车显示的页面

文章目录

1.用户基本信息显示页面的开发

1.1.搭建页面，绑定数据与函数

/src/views/user/UserInfo.vue

vue 复制代码 
<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'

import { useUserInfoStore } from '@/stores/userInfo';
const userInfoStore = useUserInfoStore();
const userInfoModel= ref(userInfoStore.info)

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('Avatar picture must be JPG format!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}


const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

import { useRouter } from 'vue-router'; 
const router=useRouter();



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-card class="page-container" style="background-color: coral;">
          <template #header>
            <div class="header">
              <span>基本资料</span>
            </div>
          </template>
          <p>用户头像：</p>
          <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
            <img v-if="userInfoModel.userPic" :src="userInfoModel.userPic" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
          <el-row>
            <el-col :span="12">
              <el-form label-width="100px" size="large">
                <el-form-item label="用户名">
                  <el-input disabled :value="userInfoModel.username"></el-input>
                </el-form-item>
                <el-form-item label="用户类型">
                  <el-input :value="userInfoModel.userType"></el-input>
                </el-form-item>
                <el-form-item label="用户手机号">
                  <el-input :value="userInfoModel.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">提交修改</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-card>
      </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>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  margin-bottom: 100px;
  margin-left: 200px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

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

.bg {
  background-color: pink;
}

.el-menu-demo {
  background-color: coral;
}
</style>

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

/src/api/user.js

javascript 复制代码 
export const userInfoService=()=>{
    return request.get('/user/userInfo');
}

1.3.效果展示

2.购物车显示的页面开发

2.1.搭建页面，绑定数据与函数

/src/views/user/UserCart.vue

vue 复制代码 
<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
const router=useRouter();
const activeIndex = ref('2-2')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
import { useUserInfoStore } from '@/stores/userInfo';
const userInfoStore = useUserInfoStore();
const userInfoModel= ref(userInfoStore.info)
import {userCartService} from '@/api/user'
const userCartList=ref([])
const userCart=async()=>{
  let result = await userCartService();
  userCartList.value=result.data;

  }
userCart();

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>

        <div style="font-size: 50px;">
          <el-icon><ShoppingTrolley /></el-icon>
          购物车
        
        </div>
        <el-descriptions direction="vertical" border style="margin-top: 20px" v-for="userCartModel in userCartList">
          <el-descriptions-item :rowspan="2" :width="140" label="商品图片" align="center">
            <el-image style="width: 100px; height: 100px"
              :src="userCartModel.goodsImgUrl" />
          </el-descriptions-item>
          
         <el-descriptions-item label="商品名/价格">
          {{ userCartModel.goodsName }}
          <span style="font-size: large;margin-left: 100px;">{{userCartModel.goodsPrice}}￥</span>
        </el-descriptions-item>
          <el-descriptions-item label="商家">{{ userCartModel.merchantName }}</el-descriptions-item>
        </el-descriptions>



      </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;
}
</style>

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

/src/api/user.js

javascript 复制代码 
export const userCartService=()=>{
    return request.get('/user/cart');
}

2.3.效果展示

3.总结

本期我们进行了用户基本信息显示与购物车显示的页面的开发，下期我们将搭建其余基本的页面。

相关推荐
于慨2 天前
Lambda 表达式、方法引用（Method Reference）语法
java·前端·servlet
石小石Orz2 天前
油猴脚本实现生产环境加载本地qiankun子应用
前端·架构
swg3213212 天前
Spring Boot 3.X Oauth2 认证服务与资源服务
java·spring boot·后端
从前慢丶2 天前
前端交互规范（Web 端）
前端
像我这样帅的人丶你还2 天前
别再让JS耽误你进步了。
css·vue.js
gelald2 天前
SpringBoot - 自动配置原理
java·spring boot·后端
@yanyu6662 天前
07-引入element布局及spring boot完善后端
javascript·vue.js·spring boot
CHU7290352 天前
便捷约玩，沉浸推理：线上剧本杀APP功能版块设计详解
前端·小程序
GISer_Jing2 天前
Page-agent MCP结构
前端·人工智能
王霸天2 天前
💥别再抄网上的Scale缩放代码了！50行源码教你写一个永不翻车的大屏适配
前端·vue.js·数据可视化
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程04AI 编程效率翻倍：Superpowers Skills 上手清单 + 完整指南05实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了06MySQL表约束详解：8大核心约束实战指南07VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）08Oh My Codex 快速使用指南09CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南10UV安装并设置国内源