如下代碼供學習交流，免費獲取完整代碼，請關注文后二維碼（coding加油站）回復“vue化妝品”免費獲取。

1.網頁作品簡介 ：

vue實現的化妝品商城系統，有后端項目，可以分別單獨使用，加上后端的話就是一個簡單的畢業設計，功能實現

? 1. 驗證用戶名，驗證表格

? 2. 首頁輪播圖，下拉刷新頁面內容

? 3. 分類頁面點擊不同導航欄展示不同內容

? 4. 商品詳情頁加入購物車

? 5. 購物車選擇功能

2.知識應用：

能夠熟悉Vue的基本語法，v-for，v-if，v-show等相關語法的使用，以及使用了vue-router等相關技術實現了輪播圖，商品列表頁，商品詳情頁，購物車界面，登錄界面，登錄注冊，列表選擇

3. 內容介紹：
演示視頻：

【coding加油站】vue化妝品商城

如下是一些效果圖：

?

?

?部分代碼如下：

<script>//1.導入封裝后的接口 import {getProductListAPI} from "@/api/product.js";import {getCategoryAPI} from "@/api/category.js";export default {data() {return {productList: [],categoryList: [], //類別菜單名稱列表，注意其數據結構category_id: null,activeKey: 0,//分頁pageIndex: 0, //頁碼 pageSize: 10, //頁大小 pageTotal: 0, //總頁數loading: false,finished: false,//下拉刷新狀態控制變量refreshing: false,}},//生命周期鉤子函數,當實例創建好了后被調用,created() {// 獲取左側導航的分類內容getCategoryAPI().then(result => {// console.log(result); //調式輸出，看數據結構this.categoryList = result.data;this.category_id = this.categoryList[0].id;// this.onLoad();this.onRefresh()});},methods: {//點擊左側分類onClickLeftMenus(category_id) {this.category_id = category_id;this.productList = []; //清空this.onRefresh();},// 上拉加載，每次加載1頁onLoad() {// 異步更新數據this.pageIndex += 1; //頁碼遞增let category_id = this.category_id; //商品分類idlet pageIndex = this.pageIndex;let pageSize = this.pageSize; //頁大小 getProductListAPI({category_id,pageIndex,pageSize}).then((result) => {console.log(result); //調式輸出，看數據結構this.pageTotal = result.pageTotal; //總頁數//如果是正在下拉刷新中if (this.refreshing) {this.productList = []; //清空this.refreshing = false;}if (result.data.length > 0) {this.productList = this.productList.concat(result.data); //數據拼接}// 設置本次上拉加載狀態結束this.loading = false;// 判斷是否數據全部加載完成if (this.pageIndex > this.pageTotal) {this.finished = true;}});},// 下拉刷新，刷新當前分類的商品 ，從第1頁開始加載onRefresh() {this.pageIndex = 0; //重置頁碼 this.finished = false; //重置上拉加載未完成// 重新加載數據// 將 loading 設置為 true，表示處于加載狀態this.loading = true;this.onLoad();},//點擊右側商品導航到商品詳情onDetail(id) {this.$router.push({name: 'productDetail',params: {id},});}}} </script> <template><div><van-row type="flex" justify="center" style="background-image: linear-gradient(to bottom, #fff7fb, #fff);"><div class="tx"><van-image :src="require('@/assets/images/login.png')" width="120px"></van-image></div></van-row><van-cell-group :border="false" class="lb"><van-field label="賬號" placeholder="請輸入賬號" v-model="loginForm.name" class="text r1"></van-field><van-field label="密碼" placeholder="請輸入密碼" type="password" v-model="loginForm.password" class="text r2"></van-field><van-button style="margin-top: 45px;border-radius: 50px;" @click="onClickLogin" color="#ffcada" size="large" block>登錄</van-button><div class="goto" @click="onClickRegister" style="color: #909090;cursor: pointer;font-size: 14px;">若還沒有賬號？點擊前往注冊</div></van-cell-group></div> </template><script>import {loginAPI} from "@/api/user.js"; //導入登錄接口import * as Auth from "@/utils/auth.js";export default {name: "login",data() {return {loginForm: {name: "", //設置默認值，僅是方便調試password: "",},};},mounted() {//初始賦值 ，從本地存儲中獲取用戶名this.loginForm.name = getUserLocal().name;},methods: {//處理用戶登錄onClickLogin() {if (this.loginForm.name === "" || this.loginForm.password === "") {this.$toast("賬號或密碼不能為空");return;}let params = this.loginForm;loginAPI(params).then(result => {this.$toast({message: "登錄成功！",duration: 1000});//本地保存用戶信息（id,name）保存TokenAuth.setTokenLocal(result.data.token); //保存TokenAuth.setUserLocal(result.data.user); //保存用戶數據let toPath = this.$route.params.redirect || "user";this.$router.replace({path: toPath});});},onClickRegister() {this.$router.push({name: "register"});}},}; </script><style lang="less" scoped="scoped">.tx {width: 120px;padding: 15px 20px;border-radius: 60%;background-color: #fafafa;margin: 50px 0;}.lb {margin: auto;width: 65%;}.text {font-size: 16px;padding: 20px 20px;background-color: #fafafa;}.r1{border-top-left-radius: 10px;border-top-right-radius: 10px;}.r2{border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}.goto {display: block;margin-top: 25px;text-align: center;} </style> <template style="background-color: #f6f6f6;"><div><div v-if="cartList.length==0"><van-cell-group :border="false"><van-cell value="看看別人購物車都要啥？" is-link class="cell"><template #title><div class="cell_title"><van-icon name="cart-circle-o" size="38" /><div style="margin-left: 10px;font-size: 16px;font-weight: bold;">購物車抄作業</div></div></template></van-cell></van-cell-group><div class="cart_empty"><van-image :src="require('@/assets/images/shopcart_empty.png')" width="45%"></van-image><div style="color: #666;">購物車竟然是空的</div><div style="color: #aaa;">再忙，也要記得買點什么犒勞自己~</div><div style="margin-top: 30px;"><van-button round plain hairline color="#000">逛逛秒殺</van-button><van-button round plain hairline color="#000" style="margin-left: 30px;">看看收藏</van-button></div></div></div><!-- 全選 清空 --><van-cell-group v-if="cartList.length>0" :border="false" style="margin-bottom: 15px;"><van-cell class="cell"><template #title><div class="cell_title"><van-checkbox checked-color="#cb8081" icon-size="18" v-model="isCheckedAll"@click="onSelectAll">全選</van-checkbox></div></template><div @click="onClickDeleteAll" style="cursor: pointer;color: #000;">清空</div></van-cell></van-cell-group><!-- 商品列表區域 --><div v-if="cartList.length>0" v-for="(item, i) in cartList" :key="i"><van-swipe-cell><van-row type="flex" align="center" justify="center" class="cart_box"><van-col span="2"><!-- 復選框 --><van-checkbox v-model="item.is_checked" @change="onCheckedChange(item)"checked-color="#cb8081" /></van-col><van-col span="5"><!-- 中間商品圖片 --><van-image width="78px" height="78px" fit="cover" :src="APIDomainName + item.img"radius="8px" /></van-col><van-col span="15" style="height: 84px;"><van-row class="van-multi-ellipsis--l2 cart_title">{{ item.title }}</van-row><van-row type="flex" align="center"><van-col span="8" class="cart_price">￥{{ item.price }}</van-col><van-col span="16" class="opration"><van-stepper v-model="item.count" @change="onCountChanged(item)" integerstyle="font-weight: ;" /></van-col></van-row></van-col></van-row><template #right><van-button @click.prevent="onClickDeleteCartItem(item.id)" color="#fff" style="height: 100%;"><van-icon name="delete-o" size="25" color="#000" /></van-button></template></van-swipe-cell></div><!-- 商品結算區域 --><van-row v-if="cartList.length>0" type="flex" align="center" class="cart_bottom"><van-col span="16" style="padding-left: 25px;text-align: left;"><div v-if="getCheckedCount>0"><span style="color: #666;">已勾選{{ getCheckedCount }}件，</span><spanstyle="font-size: 18px;font-weight: bold;color: #EF4141;">￥{{ getCheckedAmount }}</span></span><div style="font-size: 13px;color: #aaa;margin-top: 10px;">總計不含運費</div></div><div v-if="getCheckedCount==0"><span style="font-size: 18px;font-weight: bold;">合計：￥0</span></div></van-col><van-col span="8" style="text-align: right;padding-right: 25px;"><van-button round size="large" color="#cb8081">結算</van-button></van-col></van-row></div> </template><script>//導入接口import {deleteCartAllAPI,updateCartCheckedAllAPI,getCartListAPI, //獲取列表updateCartCountAPI, //更新數量updateCartCheckedAPI, //更新是否勾選deleteCartItemAPI, //刪除購物車項} from "@/api/cart.js";export default {name: "Shopcart",data() {return {cartList: [], //購物車列表isCheckedAll: false, //定義屬性變量};},//實例的生命周期函數，實例創建后被調用created() {this.getCartData(); //初始化購物車數據},computed: {getCheckedCount() {let sum = 0;this.cartList.forEach((item) => {if (item.is_checked) sum += 1;});return sum;},getCheckedAmount() {let amount = 0;this.cartList.forEach((item) => {if (item.is_checked) amount += item.price * item.count;});return amount;},getCheckedAll() {return this.cartList.length == this.getCheckedCount ? true : false;}},created() {this.getCartData();},methods: {//獲取用戶購物車數據 getCartData() {this.cartList = []; //清空 getCartListAPI().then(result => {this.cartList = result.data;this.isCheckedAll = this.getCheckedAll; // 重置isCheckedAll屬性值 }).catch(() => {});},//觸發更改購物商品選中狀態onCheckedChange(item) {let id = item.id;let is_checked = item.is_checked == true ? 1 : 0;let params = {id,is_checked};updateCartCheckedAPI(params).then(() => {this.isCheckedAll = this.getCheckedAll; // 是否全選}).catch(() => {});},//觸發更改購物商品數量onCountChanged(item) {let params = {id: item.id,count: item.count};updateCartCountAPI(params).then(() => {});},//觸發刪除購物商品onClickDeleteCartItem(id) {let ids = id;deleteCartItemAPI(ids).then(() => {this.getCartData(); //刷新列表數據});},//觸發全選/全不選 onSelectAll() {let is_checked = this.isCheckedAll == true ? 1 : 0;updateCartCheckedAllAPI(is_checked).then(() => {this.getCartData();});},//觸發清空 onClickDeleteAll() {this.$dialog.confirm({message: '客官，您確定清空購物車嗎?'}).then(() => {deleteCartAllAPI().then(() => {this.getCartData();});})},},} </script><style>.cart_empty {margin-top: 35px;text-align: center;line-height: 36px;}.cell_title {height: 100%;display: flex;justify-content: flex-start;align-items: center;}.cell {align-items: center;width: 95%;margin: auto;margin-top: 20px;border-radius: 10px;background-color: #f8ebea;}.cart_box {width: 95%;margin: auto;margin-bottom: 15px;background-color: #fafafa;padding-top: 10px;padding-bottom: 10px;border-radius: 10px;}.cart_price {color: #EF4141;padding-left: 10px;}.van-stepper__minus {border-top-left-radius: 50%;border-bottom-left-radius: 50%;}.van-stepper__minus--disabled {border-top-left-radius: 50%;border-bottom-left-radius: 50%;}.van-stepper__plus {border-top-right-radius: 50%;border-bottom-right-radius: 50%;}.cart_title {padding: 5px 5px;font-size: 15px;font-weight: bold;line-height: 21px;height: 40px;}.opration {padding-right: 10px;display: flex;align-items: center;justify-content: flex-end;}.cart_bottom {position: fixed;bottom: 0;width: 100%;height: 70px;margin-bottom: 50px;background-color: #f8ebea;} </style>

免費獲取完整代碼，請關注文后二維碼（coding加油站）回復“vue化妝品”免費獲取。

總結

以上是生活随笔為你收集整理的【vue期末作业】化妆品商城系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。