项目总结
一、项目名称
电商网站webapp开发
二、技术栈
框架:vue框架
UI组件:Vant移动端Vue组件库安装:npm install vant -S项目中引用的部分组件:1、Tabbar标签栏:封装成底部标签栏,引入到其他组件中,导入路由,在底部作为导航栏使用;2、Sidebar,SidebarItem 侧边导航:在商品分类展示模块中引入,按照后台系统中的商品分类进行展示,完成商品筛选分类展示模块;3、Grid,GridItem 宫格:在首页及个人中心页中使用,添加一些功能设置导引,点击宫格实现特定功能,如钱包,收藏等;4、Image 图片:用于商品图片展示;5、SwipeCell 滑动单元格,Card 卡片:滑动单元格引用在订单,购物车商品展示,结合Card(卡片使用),展示商品的图片、名称、描述信息、价格、数量等信息;6、Button 按钮:用于项目中事件的触发及url的跳转等功能;7、Checkbox,CheckboxGroup 复选框:用于实现订单模块中商品的勾选提交,实现选择指定商品的功能;8、Col, Row 栅格布局:本项目采用的主要布局方式,将页面宽度分为24格,通过span设置所占宽度,row设置所在行,帮助页面实现布局;9、SubmitBar 提交订单栏:对订单提交模块进行结构优化;10、Toast 轻提示:在进行一些操作(如删除商品,退出登录等)时,弹出轻提示框,再次确认是否执行该操作;11、NoticeBar 通知栏:用于循环播放展示一组消息通知;12、Search 搜索:搜索框组件,实现搜索栏布局结构的搭建;13、Swipe, SwipeItem 轮播:引入实现首页展示页轮播图功能的实现;14、Dialog 弹出框:弹出模态框,常用于消息提示、消息确认,或在当前页面内完成特定的交互操作...
REM布局:在整个项目的布局中,主要使用rem布局,再结合bootstrap栅格系统、Flex弹性布局等,实现整个移动端项目的单页面布局。rem(font size of the root element)是相对于根元素<html>,简单的说它就是一个相对单位,这样就意味着,我们只需要在根元素确定一个px字号,就可以算出元素的宽高。相比于em依赖于父元素,rem使用更加简单,只要设置好适合的根字体字号大小,那么就能很轻松的使用rem替代px,在各种不同屏幕尺寸的手机上做到适配。
vue-router:路由采用hash路由,对服务端进压力较小;在单页面中,页面的切换以锚点的形式进行跳转,实际上所有的跳转都是组件的切换。相比于多页面应用,页面之间跳转流畅,组件可复用,开发更加便捷。```mode: 'hash',routes: [{ path: '/', components:{li:Home} },{ path: '/good/detail/:id', component: Cartdetail },{ path: '/find', component: Find },{ path: '/cart', component: Cart },{ path: '/user', component: User },{ path:'/login', component: Login},{ path:'/regist', component: Regist},{ path: '/*', redirect: '/'}]```
vuex:状态管理模式,采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。在本项目中使用的不多,通过store模式(opens new window)完成了大部分的需求。
sass:在本项目中,我们采用了世界上最成熟、最稳定、最强大的专业级CSS扩展语言sass进行编译。
三、团队成员
前端1人
后端1人
四、功能模块
商品展示模块:在商品展示模块中包含有首页轮播图广告展示,接入后端可实现广告页的切换;搜索栏用于在数据库中搜索指定的商品;商品展示,将后台商品数据部分展示在页面中,预设置展示20条,用户可通过上拉刷新,下拉加载实现商品的刷新与加载。在导航栏中,用户可以根据导航栏中的分类进行指定商品的浏览,从庞大的商品数据中筛选出感兴趣的那一类。点入某一件商品之后,跳转到商品详情页,向用户展示商品详情。
购物车模块:用户浏览商品之后,可将商品添加到购物车,购物车模块可以实现商品的添加与删除,数量的加减;
订单模块:用户在对购物车的商品进行确认勾选之后,可进行订单的提交,进行付款;
个人中心模块:个人中心模块向用户进行个人信息展示,用户可进行修改;保存有用户的收货地址,用户可进行后台意见反馈;
登录注册模块:用户个人登录与注册功能的实现。
五、性能优化
SEO优化:因为SPA单页面应用,是通过AJAX获取数据,这就难保证我们的页面能被搜索引擎收到,并且有一些搜索引擎不支持js和通过ajax获取数据关键词的优化是SEO优化的核心,在title与alt等属性中添加好关键字;网站标签优化,页面标签多采用爬虫喜好的标签,如img、a、h1~h6标签等;
图片优化:设置图片懒加载、压缩图片,减小图片的体积,将大的图片保存在public目录中,并进行cdn加速。
埋点:在商品浏览页面设置好埋点,当用户点击进某一个商品之后,触发埋点所连接的插件,将其行为记录,后续用做动作行为分析,以进一步精确用户可能感兴趣的商品,推送给用户。
六、项目亮点
页面新颖
七、项目难点:
UI还原度很高、交互体验要求高,商品的选择框