杨浦网站建设公司,大型旅游网站源码 织梦,下单的网站建设教程,微信电影网站建设教程【全栈】SprintBootvue3迷你商城#xff08;9#xff09;
往期的文章都在这里啦#xff0c;大家有兴趣可以看一下
后端部分#xff1a;
【全栈】SprintBootvue3迷你商城#xff08;1#xff09; 【全栈】SprintBootvue3迷你商城#xff08;2#xff09; 【全栈】Spr…【全栈】SprintBootvue3迷你商城9
往期的文章都在这里啦大家有兴趣可以看一下
后端部分
【全栈】SprintBootvue3迷你商城1 【全栈】SprintBootvue3迷你商城2 【全栈】SprintBootvue3迷你商城-扩展利用python爬虫爬取商品数据 【全栈】SprintBootvue3迷你商城3 【全栈】SprintBootvue3迷你商城4 【全栈】SprintBootvue3迷你商城5 【全栈】SprintBootvue3迷你商城6
前端部分
【全栈】SprintBootvue3迷你商城-扩展vue的基本用法
【全栈】SprintBootvue3迷你商城-扩展vue3项目创建及目录介绍
【全栈】SprintBootvue3迷你商城7
【全栈】SprintBootvue3迷你商城8
本期我们来写用户基本信息显示以及购物车显示的页面 文章目录 【全栈】SprintBootvue3迷你商城91.用户基本信息显示页面的开发1.1.搭建页面绑定数据与函数1.2.制定与后端接口交互的函数1.3.效果展示 2.购物车显示的页面开发2.1.搭建页面绑定数据与函数2.2.制定与后端接口交互的函数2.3.效果展示 3.总结 1.用户基本信息显示页面的开发
1.1.搭建页面绑定数据与函数
/src/views/user/UserInfo.vue
script langts setup
import { ref } from vue
import { ElMessage } from element-plus
import { Plus } from element-plus/icons-vueimport type { UploadProps } from element-plusimport { 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 routeruseRouter();import { Avatar, SwitchButton } from element-plus/icons-vue;import { useTokenStore } from /stores/token;
const tokenStoreuseTokenStore();
const showLogoutDialog ref(false);
const logout () {ElMessage.success(成功退出登录);tokenStore.removeToken();router.push(/login); showLogoutDialog.value false;
};const handleClose (done) {ElMessage({message: 对话框已关闭,type: warning});done();
};/scripttemplatediv classcommon-layoutel-container classbgel-headerel-menu :default-activeactiveIndex classel-menu-demo modehorizontal :ellipsisfalseselecthandleSelectel-menu-item index0 clickrouter.push(/)el-iconShoppingTrolley //el-iconimg stylewidth: 100px src/assets/logo2.jpg altlogo //el-menu-itemspan stylefont-size: medium;el-avatar stylemargin-top:5px :srcuserInfoModel.userPic /{{ userInfoModel.userType }}:{{ userInfoModel.username }}/spanel-menu-item index1 clickrouter.push(/user/info)el-iconAvatar //el-icon我的/el-menu-itemel-sub-menu index2template #title工具栏/templateel-menu-item v-ifuserInfoModel.userType商家 index2-1 clickrouter.push(/user/goods)我的商品/el-menu-itemel-menu-item index2-2 clickrouter.push(/user/cart)购物车/el-menu-itemel-menu-item index2-3 clickshowLogoutDialog true;el-iconSwitchButton //el-icon退出登录/el-menu-item/el-sub-menu/el-menuel-dialog title确认退出登录 v-modelshowLogoutDialog width30% :before-closehandleClosespan确定要退出登录吗/spantemplate #footerspan classdialog-footerel-button clickshowLogoutDialog false取消/el-buttonel-button typeprimary clicklogout确定/el-button/span/template/el-dialog /el-headerel-mainel-card classpage-container stylebackground-color: coral;template #headerdiv classheaderspan基本资料/span/div/templatep用户头像/pel-upload classavatar-uploader actionhttps://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15:show-file-listfalse :on-successhandleAvatarSuccess :before-uploadbeforeAvatarUploadimg v-ifuserInfoModel.userPic :srcuserInfoModel.userPic classavatar /el-icon v-else classavatar-uploader-iconPlus //el-icon/el-uploadel-rowel-col :span12el-form label-width100px sizelargeel-form-item label用户名el-input disabled :valueuserInfoModel.username/el-input/el-form-itemel-form-item label用户类型el-input :valueuserInfoModel.userType/el-input/el-form-itemel-form-item label用户手机号el-input :valueuserInfoModel.phoneNumber/el-input/el-form-itemel-form-itemel-button typeprimary提交修改/el-button/el-form-item/el-form/el-col/el-row/el-card/el-main/el-container/divhrdiv stylewidth: 300px;height: 200px;margin-left: auto;margin-right: auto;div stylemargin-top: 100px;p styletext-align: center;margin-top: 10px;filter: opacity(50%);font-size: small;迷你商城,本网站为练习网站。本站商品全在淘宝:https://www.taobao.com中获取若对站内商品感兴趣请到淘宝搜索相关商品并购买/p/div/div
/templatestyle
.avatar-uploader .avatar {width: 178px;height: 178px;display: block;
}
/stylestyle
.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;
}
/style1.2.制定与后端接口交互的函数
/src/api/user.js
export const userInfoService(){return request.get(/user/userInfo);
}1.3.效果展示 2.购物车显示的页面开发
2.1.搭建页面绑定数据与函数
/src/views/user/UserCart.vue
script langts setup
import { ref } from vue
import { useRouter } from vue-router;
const routeruseRouter();
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 userCartListref([])
const userCartasync(){let result await userCartService();userCartList.valueresult.data;}
userCart();import { ElMessage } from element-plus;
import { Avatar, SwitchButton } from element-plus/icons-vue;import { useTokenStore } from /stores/token;
const tokenStoreuseTokenStore();
const showLogoutDialog ref(false);
const logout () {ElMessage.success(成功退出登录);tokenStore.removeToken();router.push(/login); showLogoutDialog.value false;
};const handleClose (done) {ElMessage({message: 对话框已关闭,type: warning});done();
};
/scripttemplatediv classcommon-layoutel-container classbgel-headerel-menu :default-activeactiveIndex classel-menu-demo modehorizontal :ellipsisfalseselecthandleSelectel-menu-item index0 clickrouter.push(/)el-iconShoppingTrolley //el-iconimg stylewidth: 100px src/assets/logo2.jpg altlogo //el-menu-itemspan stylefont-size: medium;el-avatar stylemargin-top:5px :srcuserInfoModel.userPic /{{ userInfoModel.userType }}:{{ userInfoModel.username }}/spanel-menu-item index1 clickrouter.push(/user/info)el-iconAvatar //el-icon我的/el-menu-itemel-sub-menu index2template #title工具栏/templateel-menu-item v-ifuserInfoModel.userType商家 index2-1 clickrouter.push(/user/goods)我的商品/el-menu-itemel-menu-item index2-2 clickrouter.push(/user/cart)购物车/el-menu-itemel-menu-item index2-3 clickshowLogoutDialog true;el-iconSwitchButton //el-icon退出登录/el-menu-item/el-sub-menu/el-menuel-dialog title确认退出登录 v-modelshowLogoutDialog width30% :before-closehandleClosespan确定要退出登录吗/spantemplate #footerspan classdialog-footerel-button clickshowLogoutDialog false取消/el-buttonel-button typeprimary clicklogout确定/el-button/span/template/el-dialog/el-headerel-maindiv stylefont-size: 50px;el-iconShoppingTrolley //el-icon购物车/divel-descriptions directionvertical border stylemargin-top: 20px v-foruserCartModel in userCartListel-descriptions-item :rowspan2 :width140 label商品图片 aligncenterel-image stylewidth: 100px; height: 100px:srcuserCartModel.goodsImgUrl //el-descriptions-itemel-descriptions-item label商品名/价格{{ userCartModel.goodsName }}span stylefont-size: large;margin-left: 100px;{{userCartModel.goodsPrice}}/span/el-descriptions-itemel-descriptions-item label商家{{ userCartModel.merchantName }}/el-descriptions-item/el-descriptions/el-main/el-container/divhrdiv stylewidth: 300px;height: 200px;margin-left: auto;margin-right: auto;div stylemargin-top: 100px;p styletext-align: center;margin-top: 10px;filter: opacity(50%);font-size: small;迷你商城,本网站为练习网站。本站商品全在淘宝:https://www.taobao.com中获取若对站内商品感兴趣请到淘宝搜索相关商品并购买/p/div/div
/templatestyle
.el-menu--horizontal.el-menu-item:nth-child(1) {margin-right: auto;
}.bg {background-color: pink;
}.el-menu-demo {background-color: coral;
}
/style2.2.制定与后端接口交互的函数
/src/api/user.js
export const userCartService(){return request.get(/user/cart);
}2.3.效果展示 3.总结
本期我们进行了用户基本信息显示与购物车显示的页面的开发下期我们将搭建其余基本的页面。
