乐檬电影网

文化娱乐视频案例ID：130165

#lee蒙#

1 年经验· 成都维音信息技术有限公司

微信扫码沟通，客服可协助直接对接工程师；如当前档期不合，也可继续推荐相似案例作者。

案例介绍

网址：http://limeng.website/

技术栈：Bootstrap、Vue.js、Vue-router、Vue-x、Axios、Vue-cli。

网站描述：乐檬电影展示了电影史评分前90部电影，在这里你可以获取到电影信息和最新热评。

实现方案：基于Vue-cli3脚手架和Vue全家桶搭建，响应式采用Bootstrap。Localstorage模拟注册登录数据，两者结合，实现注册登录、购物车存储功能，再结合路由守卫实现登录状态限制。Vuex统一购物车增删状态。

项目特点：

独立进行前期设计、搭建、功能的实现，实现了分类，跳转，搜索，注册，登录，购物车功能。
通过组件化的形式开发复用对象，大大提升效率。
对打包后的js优化，主要通过按需加载js，抽离公共方法等，服务器使用G-zip压缩。打包后体积从1MB+减小至300KB+。访问速度从5s提升至2s。
通过精灵图缩减Http请求，引用地址改为CDN地址，静态资源改成网络存储，请求减少40%
使用keep-alive强缓存，大幅加快二次访问体验。闭包实现搜索页面防抖功能，优化Axios请求。
通过Vue-X 实现状态管理。使用commit和$store.state实现了数据的一致性，简化了整个数据修改流程。
通过router.beforeEach做导航守卫，不同的登录状态控制访问权限，从而实现注册登录功能。