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

莱莱  论坛元老 | 2025-1-26 12:46:25 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1026|帖子 1026|积分 3078

【全栈】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
  1. <script lang="ts" setup>
  2. import { ref } from 'vue'
  3. import { ElMessage } from 'element-plus'
  4. import { Plus } from '@element-plus/icons-vue'
  6. import type { UploadProps } from 'element-plus'
  8. import { useUserInfoStore } from '@/stores/userInfo';
  9. const userInfoStore = useUserInfoStore();
  10. const userInfoModel= ref(userInfoStore.info)
  12. const imageUrl = ref('')
  14. const handleAvatarSuccess: UploadProps['onSuccess'] = (
  15.   response,
  16.   uploadFile
  17. ) => {
  18.   imageUrl.value = URL.createObjectURL(uploadFile.raw!)
  19. }
  21. const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  22.   if (rawFile.type !== 'image/jpeg') {
  23.     ElMessage.error('Avatar picture must be JPG format!')
  24.     return false
  25.   } else if (rawFile.size / 1024 / 1024 > 2) {
  26.     ElMessage.error('Avatar picture size can not exceed 2MB!')
  27.     return false
  28.   }
  29.   return true
  30. }
  33. const activeIndex = ref('1')
  34. const handleSelect = (key: string, keyPath: string[]) => {
  35.   console.log(key, keyPath)
  36. }
  38. import { useRouter } from 'vue-router';
  39. const router=useRouter();
  43. import { Avatar,  SwitchButton } from '@element-plus/icons-vue';
  46. import { useTokenStore } from '@/stores/token';
  47. const tokenStore=useTokenStore();
  48. const showLogoutDialog = ref(false);
  49. const logout = () => {
  50.   ElMessage.success('成功退出登录');
  51.   tokenStore.removeToken();
  52.   router.push('/login');
  53.   showLogoutDialog.value = false;
  54. };
  56. const handleClose = (done) => {
  57.   ElMessage({
  58.     message: '对话框已关闭',
  59.     type: 'warning'
  60.   });
  61.   done();
  62. };
  64. </script>
  67. <template>
  68.   <div class="common-layout">
  69.     <el-container class="bg">
  70.       <el-header>
  71.         <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
  72.           @select="handleSelect">
  73.           <el-menu-item index="0" @click="router.push('/')">
  74.             <el-icon><ShoppingTrolley /></el-icon>
  75.             <img style="width: 100px" src="@/assets/logo2.jpg" alt="logo" />
  76.           </el-menu-item>
  77.           <span style="font-size: medium;">
  78.               <el-avatar style="margin-top:5px" :src="userInfoModel.userPic"  />
  79.             
  80.             {{ userInfoModel.userType }}:{{ userInfoModel.username }}
  81.           </span>
  82.           <el-menu-item index="1" @click="router.push('/user/info')"><el-icon>
  83.               <Avatar />
  84.             </el-icon>我的</el-menu-item>
  85.           <el-sub-menu index="2">
  86.             <template #title>工具栏</template>
  87.             <el-menu-item v-if="userInfoModel.userType==='商家'" index="2-1" @click="router.push('/user/goods')">我的商品</el-menu-item>
  88.             <el-menu-item index="2-2" @click="router.push('/user/cart')">购物车</el-menu-item>
  89.             <el-menu-item index="2-3" @click="showLogoutDialog = true;">
  90.                             <el-icon>
  91.                                 <SwitchButton />
  92.                             </el-icon>
  93.                             退出登录
  94.                         </el-menu-item>
  95.           </el-sub-menu>
  96.         </el-menu>
  97.         <el-dialog title="确认退出登录" v-model="showLogoutDialog" width="30%" :before-close="handleClose">
  98.               <span>确定要退出登录吗？</span>
  99.               <template #footer>
  100.                 <span class="dialog-footer">
  101.                   <el-button @click="showLogoutDialog = false">取消</el-button>
  102.                   <el-button type="primary" @click="logout">确定</el-button>
  103.                 </span>
  104.               </template>
  105.             </el-dialog>
  106.       </el-header>
  107.       <el-main>
  108.         <el-card class="page-container" style="background-color: coral;">
  109.           <template #header>
  110.             <div class="header">
  111.               <span>基本资料</span>
  112.             </div>
  113.           </template>
  114.           <p>用户头像：</p>
  115.           <el-upload class="avatar-uploader" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
  116.             :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
  117.             <img v-if="userInfoModel.userPic" :src="userInfoModel.userPic" class="avatar" />
  118.             <el-icon v-else class="avatar-uploader-icon">
  119.               <Plus />
  120.             </el-icon>
  121.           </el-upload>
  122.           <el-row>
  123.             <el-col :span="12">
  124.               <el-form label-width="100px" size="large">
  125.                 <el-form-item label="用户名">
  126.                   <el-input disabled :value="userInfoModel.username"></el-input>
  127.                 </el-form-item>
  128.                 <el-form-item label="用户类型">
  129.                   <el-input :value="userInfoModel.userType"></el-input>
  130.                 </el-form-item>
  131.                 <el-form-item label="用户手机号">
  132.                   <el-input :value="userInfoModel.phoneNumber"></el-input>
  133.                 </el-form-item>
  134.                 <el-form-item>
  135.                   <el-button type="primary">提交修改</el-button>
  136.                 </el-form-item>
  137.               </el-form>
  138.             </el-col>
  139.           </el-row>
  140.         </el-card>
  141.       </el-main>
  142.     </el-container>
  143.   </div>
  144.   <hr>
  145.   <div style="width: 300px;height: 200px;margin-left: auto;margin-right: auto;">
  146.     <div style="margin-top: 100px;">
  147.       <p style="text-align: center;margin-top: 10px;filter: opacity(50%);font-size: small;">迷你商城,本网站为练习网站。
  148.         本站商品全在淘宝:"https://www.taobao.com"中获取，若对站内商品感兴趣，请到淘宝搜索相关商品并购买</p>
  149.     </div>
  150.   </div>
  151. </template>
  156. <style>
  157. .avatar-uploader .avatar {
  158.   width: 178px;
  159.   height: 178px;
  160.   display: block;
  161. }
  162. </style>
  164. <style>
  165. .avatar-uploader .el-upload {
  166.   margin-bottom: 100px;
  167.   margin-left: 200px;
  168.   border: 1px dashed var(--el-border-color);
  169.   border-radius: 6px;
  170.   cursor: pointer;
  171.   position: relative;
  172.   overflow: hidden;
  173.   transition: var(--el-transition-duration-fast);
  174. }
  176. .avatar-uploader .el-upload:hover {
  177.   border-color: var(--el-color-primary);
  178. }
  180. .el-icon.avatar-uploader-icon {
  181.   font-size: 28px;
  182.   color: #8c939d;
  183.   width: 178px;
  184.   height: 178px;
  185.   text-align: center;
  186. }
  188. .el-menu--horizontal>.el-menu-item:nth-child(1) {
  189.   margin-right: auto;
  190. }
  192. .bg {
  193.   background-color: pink;
  194. }
  196. .el-menu-demo {
  197.   background-color: coral;
  198. }
  199. </style>
复制代码
1.2.制定与后端接口交互的函数

/src/api/user.js
  1. export const userInfoService=()=>{
  2.     return request.get('/user/userInfo');
  3. }
复制代码
1.3.效果展示


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

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

/src/views/user/UserCart.vue
  1. <script lang="ts" setup>
  2. import { ref } from 'vue'
  3. import { useRouter } from 'vue-router';
  4. const router=useRouter();
  5. const activeIndex = ref('2-2')
  6. const handleSelect = (key: string, keyPath: string[]) => {
  7.   console.log(key, keyPath)
  8. }
  9. import { useUserInfoStore } from '@/stores/userInfo';
  10. const userInfoStore = useUserInfoStore();
  11. const userInfoModel= ref(userInfoStore.info)
  12. import {userCartService} from '@/api/user'
  13. const userCartList=ref([])
  14. const userCart=async()=>{
  15.   let result = await userCartService();
  16.   userCartList.value=result.data;
  18.   }
  19. userCart();
  21. import { ElMessage } from 'element-plus';
  22. import { Avatar,  SwitchButton } from '@element-plus/icons-vue';
  25. import { useTokenStore } from '@/stores/token';
  26. const tokenStore=useTokenStore();
  27. const showLogoutDialog = ref(false);
  28. const logout = () => {
  29.   ElMessage.success('成功退出登录');
  30.   tokenStore.removeToken();
  31.   router.push('/login');
  32.   showLogoutDialog.value = false;
  33. };
  35. const handleClose = (done) => {
  36.   ElMessage({
  37.     message: '对话框已关闭',
  38.     type: 'warning'
  39.   });
  40.   done();
  41. };
  42. </script>
  45. <template>
  46.   <div class="common-layout">
  47.     <el-container class="bg">
  48.       <el-header>
  49.         <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
  50.           @select="handleSelect">
  51.           <el-menu-item index="0" @click="router.push('/')">
  52.             <el-icon><ShoppingTrolley /></el-icon>
  53.             <img style="width: 100px" src="@/assets/logo2.jpg" alt="logo" />
  54.           </el-menu-item>
  55.           <span style="font-size: medium;">
  56.               <el-avatar style="margin-top:5px" :src="userInfoModel.userPic"  />
  57.             
  58.             {{ userInfoModel.userType }}:{{ userInfoModel.username }}
  59.           </span>
  60.           <el-menu-item index="1" @click="router.push('/user/info')"><el-icon>
  61.               <Avatar />
  62.             </el-icon>我的</el-menu-item>
  63.           <el-sub-menu index="2">
  64.             <template #title>工具栏</template>
  65.             <el-menu-item v-if="userInfoModel.userType==='商家'" index="2-1" @click="router.push('/user/goods')">我的商品</el-menu-item>
  66.             <el-menu-item index="2-2" @click="router.push('/user/cart')">购物车</el-menu-item>
  67.             <el-menu-item index="2-3" @click="showLogoutDialog = true;">
  68.                             <el-icon>
  69.                                 <SwitchButton />
  70.                             </el-icon>
  71.                             退出登录
  72.                         </el-menu-item>
  73.           </el-sub-menu>
  74.         </el-menu>
  75.         <el-dialog title="确认退出登录" v-model="showLogoutDialog" width="30%" :before-close="handleClose">
  76.               <span>确定要退出登录吗？</span>
  77.               <template #footer>
  78.                 <span class="dialog-footer">
  79.                   <el-button @click="showLogoutDialog = false">取消</el-button>
  80.                   <el-button type="primary" @click="logout">确定</el-button>
  81.                 </span>
  82.               </template>
  83.             </el-dialog>
  84.       </el-header>
  85.       <el-main>
  87.         <div style="font-size: 50px;">
  88.           <el-icon><ShoppingTrolley /></el-icon>
  89.           购物车
  90.         
  91.         </div>
  92.         <el-descriptions direction="vertical" border style="margin-top: 20px" v-for="userCartModel in userCartList">
  93.           <el-descriptions-item :rowspan="2" :width="140" label="商品图片" align="center">
  94.             <el-image style="width: 100px; height: 100px"
  95.               :src="userCartModel.goodsImgUrl" />
  96.           </el-descriptions-item>
  97.          
  98.          <el-descriptions-item label="商品名/价格">
  99.           {{ userCartModel.goodsName }}
  100.           <span style="font-size: large;margin-left: 100px;">{{userCartModel.goodsPrice}}￥</span>
  101.         </el-descriptions-item>
  102.           <el-descriptions-item label="商家">{{ userCartModel.merchantName }}</el-descriptions-item>
  103.         </el-descriptions>
  107.       </el-main>
  108.     </el-container>
  109.   </div>
  110.   <hr>
  111.   <div style="width: 300px;height: 200px;margin-left: auto;margin-right: auto;">
  112.     <div style="margin-top: 100px;">
  113.       <p style="text-align: center;margin-top: 10px;filter: opacity(50%);font-size: small;">迷你商城,本网站为练习网站。
  114.         本站商品全在淘宝:"https://www.taobao.com"中获取，若对站内商品感兴趣，请到淘宝搜索相关商品并购买</p>
  115.     </div>
  116.   </div>
  117. </template>
  122. <style>
  123. .el-menu--horizontal>.el-menu-item:nth-child(1) {
  124.   margin-right: auto;
  125. }
  127. .bg {
  128.   background-color: pink;
  129. }
  131. .el-menu-demo {
  132.   background-color: coral;
  133. }
  134. </style>
复制代码
2.2.制定与后端接口交互的函数

/src/api/user.js
  1. export const userCartService=()=>{
  2.     return request.get('/user/cart');
  3. }
复制代码
2.3.效果展示


3.总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

莱莱

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表