Vue全家桶实现一个购物Web App
2023-09-27 14:28:57 时间
好的生活,聚集美丽,成人之美!从现在做起!http://www.tuicool.com/articles/EBbmAjr
效果预览
:point_right:预览地址: 请点我!在线预览,手机浏览或切换浏览器移动调试
PS:google浏览器在切换不同的手机测试,需要重新刷新页面;安卓手机可能不适应
:point_right:源码地址: Github在这里
项目描述
技术栈
Vue2.0全家桶 + axios + Vuex + Mint-Ui + Mock.js + Stylus
前端部分
- Vue2.0 前端页面的展示
- SPA单页应用,前端后分离
- Stylus css预编译
- Axios 异步数据的请求
- localStorage 个人信息以及购物车信息的存储
- ES6 Js语言的标准
- Mint_UI 实现图片轮播,图片懒加载等等
- Better-Scroll 实现移动端滚动,让滚动更加协调
- flexible.js和rem,解决移动端设备兼容
后端部分
- Mock.js 实现后端数据的托管
待更新的功能
- 后端平台搭建,利用新一代的Koa服务器框架
- 订单页面的展示
- 商家页面的请求
- 下拉,加载更多的商品数据
实现功能
首页
- 1、tabbar切换
- 2、优惠商品倒计时
- 3、活动的商品的推荐
- 4、swiper滑动,切换页面
- 5、搜索框
- 6、首页不同页面的展示
商品详情
- 1、商品图片放大显示
- 2、商品具体的显示、评论、图片展示
- 3、加入购车车页面弹窗,选择商品的种类,以及数量
- 4、商品加入购物车,动画
购物车
- 1、登录状态判断
- 2、全选,以及非全选的切换
- 3、添加商品、以及减少与删除
个人
- 1、账户的登录
- 2、注册账户
- 3、设置页面
总结
- 1、熟悉使用Vue2.0
- 2、在项目中,将组件进行分离,编写可以复用的组件,提高效率
- 3、Vuex的状态管理模块,统一的状态的管理,让我们更好的去对数据操作
- 4、util的工具,倒计时js
- 5、对axios有更进一步的理解,利用cros进行跨域处理
- 6、进行路由的懒加载,优化页面加载
具体功能实现
路由结构
export default new Router({
routes: [
{ //这里要设置一个默认的主页面 后面才起作用 /代表根目录
path: '/',
name: 'index',
component: resolve => require(['@/pages/index/index'], resolve),
redirect: '/index/page1'
},
{
path: '/index',
component: resolve => require(['@/pages/index/index'], resolve),
meta: {keepAlive: true},
children: [
{
path: '',
component: resolve => require(['@/pages/index/index'], resolve)
},
{
path: 'page1',
name: 'page1',
component: resolve => require(['@/pages/index/page1'], resolve)
},
{
path: 'page2',
name: 'page2',
component: resolve => require(['@/pages/index/page2'], resolve)
},
{
path: 'page3',
name: 'page3',
component: resolve => require(['@/pages/index/page3'], resolve)
},
{
path: 'page4',
name: 'page4',
component: resolve => require(['@/pages/index/page4'], resolve)
},
{
path: 'page5',
name: 'page5',
component: resolve => require(['@/pages/index/page5'], resolve)
},
{
path: 'page6',
name: 'page6',
component: resolve => require(['@/pages/index/page6'], resolve)
},
{
path: 'page7',
component: resolve => require(['@/pages/index/page7'], resolve)
},
]
},
{
path: '/brandsale',
name: 'brandSale',
component: resolve => require(['@/pages/brandsale/index'], resolve)
},
{
path: '/livecommunity',
name: 'liveCommunity',
component: resolve => require(['@/pages/livecommunity/index'], resolve)
},
{
path: '/shopcart',
name: 'shopCart',
component: resolve => require(['@/pages/shopCart/index'], resolve)
},
{
path: '/myself',
name: 'mySelf',
component: resolve => require(['@/pages/mySelf/index'], resolve)
},
{
path: "/setter",
name: 'setter',
component: resolve => require(['@/pages/mySelf/setter'], resolve)
},
{
path: '/login',
name: 'login',
component: resolve => require(['@/pages/mySelf/login'], resolve)
},
{
path: '/product',
name: 'product',
component: resolve => require(['@/pages/product/index'], resolve),
redirect: '/product/info',
children: [
{
path: 'info',
name: 'productInfo',
component: resolve => require(['@/pages/product/info'], resolve)
},
{
path: 'detail',
name: 'productDetail',
component: resolve => require(['@/pages/product/detail'], resolve)
},
{
path: 'comment',
name: 'productComment',
component: resolve => require(['@/pages/product/comment'], resolve)
}
]
},
]
})
Vuex状态管理
这里我贴出购物车模块。它的使用场景:添加商品到购物车,更新商品的信息、进行增删,并且在操作过程中,将数据保存到
localStorage,持久存储,由于后台服务器尚未搭建,利用这样来保持数据的存储。
import * as types from '../mutation-types.js'
const storage = window.localStorage
const state = {
added: [],
checkoutStatus: null
}
const getters = {
checkoutStatus: state => state.checkoutStatus,
cartLists: state => state.added
}
const mutations = {
[types.ADD_TO_CART] (state, product) {
let id = product.id
const record = state.added.find(p => p.id === id && p.type === product.type)
// 解决方法一 找到数据遍历一次
// 方法二 是获取到父级的数据
if (!record) {
state.added.push(product)
} else {
record.quantity += product.quantity
}
storage.setItem('cart', JSON.stringify(state.added))
},
//传入商品的信息 product id和类型判断当前存储的商品 要修改的数量
// 更新产品的数据
[types.UPDATE_THIS_PRODUCT] (state, product) {
let {id,type,quantity} = product //对象的解构
const record = state.added.find(p => p.id===id &&p.type===type)
if (quantity>0) {
record?record.quantity = quantity : ''
} else {
// 传入的商品数量为0 就删除这个商品 删除指定的序号的商品
let index = state.added.indexOf(record)
state.added.splice(index,1)
}
storage.setItem('cart', JSON.stringify(state.added))
},
}
export default {
state,
getters,
mutations
}
来个广告,拍卖自己!!!
- :point_right:jerrylee: 感兴趣请点我,这是我的简历
- :point_right:微信号:JerryLeelisa
- :point_right:电 话:15279106115
- :point_right:邮 箱:958171512@qq.com
Build Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
For detailed explanation on how things work, checkout theguide anddocs for vue-loader.
相关文章
- 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app
- uni-app - vue以及微信小程序
- Google Earth Engine APP(GEE)——用一个选择器选择不同城市的应用
- Android App上架应用市场所需资料说明
- Vue - 搜索关键字标红高亮(用户输入关键词搜索后,在搜索结果的列表标题上匹配并标红加粗)怎么使内容文本标红高亮的最详细教程,Nuxt.js uni-app 也适用,搜索功能及搜索结果关键字高亮源码
- uni-app - H5 页面路由不存在时,跳转到自己定制的 404.vue 页面(当路由不存在时自动重定向到自定义的 404 组件)超详细简约高效的解决方案
- Vue.js / Nuxt.js / uni-app - 移动端 H5 网页,在电脑 PC 上打开时居中显示(手机网页在电脑上打开后,简单粗暴防止 “界面样式“ 拉伸变形的解决方案)适用所有web项目
- 移动App性能测评与优化1.2.2 Dalvik Heap的常见问题
- APP路由框架与组件化简析
- uni-app下拉刷新加载刷新数据
- 如何学习uni-app?
- PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [7] APP 错误日志接口
- 华为应用市场AGC研习社直播:App个人信息安全保护审核标准解读
- 解决恶意刷屏 华为安全检测保障俄罗斯卫星通讯社App的安全性
- 《Axure RP7网站和APP原型制作从入门到精通(60小时案例版)》一2.3 母版的拖放行为
- vue-cli3+cordova实现app混合开发
- SwiftUI iOS 组件之延迟出发组件降低服务器必要调用 app网络请求配置(教程含源码)
- Flutter 精品项目大全之 侧边栏银行管理完成App(教程含源码)
- Android 连麦Demo App 接入指南
- itunes app 下载链接的几种表现形式
- 认真做 flex + spring + blazeDS + google app JDO 分页.每次查询总数.
- vue 外卖app(3) 引入阿里图标