vue.js全家桶简析——写一个直播类应用web端个人中心

简介: 一个早期的vue参考实例
github地址: https://github.com/doterlin/vue-user-center
演示地址: https://doterlin.github.io/vue-user-center/

下图为项目截图:
截图

编译

项目采用webpack构建(具体配置请参考github源码中的webpack.config.js),如需编译只要输入命令:

npm run build

框架及插件

注意:最近vue作者已经不再将vue-resource作为官方推荐库,而是推荐使用axios作为http请求库。

选型分析

路由

项目中最直观的交互就是点击了左边的菜单中的某一项后,右边的主内容容器需显示出对应的内容,传统的方法的话可能会采用iframe或者多页面跳转的形式来实现。但是我们有了一些优秀的框架就可以将之实现为真正的SPA页面。
解决这一问题最靠谱的方案就是使用前端路由,至于我给它前面加上“前端”两字的原因,我们先看看对于路由的解释:

路由(routing)是指分组从源到目的地时,决定端到端路径的网络范围的进程。

而我们在前端使用的路由一词是借用于其他技术领域的词语,只是实现了前半句。而后半句应是涉及浏览器渲染的进程。所以我将之成为‘前端路由’以区别出它是一个引申概念(好比“单车”和“电单车”)。
vue.js全家桶家族里面用于实现路由的插件是vue-router,这样使得你可以在vue实例中直接引入和调用vue-router的方法。关于vue-router的使用请查阅上小节给出的官网文档。

状态管理

说到这个,还是提到Redux作者Dan Abramov的那句话(译文):

Flux 架构就像眼镜:您自会知道什么时候需要它。

当你单独的使用一个Global.js或者事件来管理一些变量(状态)在不同组件之间传递,如果变量越来越多,传递关系越来越复杂(或者在将来很可能变复杂),你自然会想到是不是该使用一个专门处理这些东西的机制。

vuex便是vue.js全家桶里面的状态管理角色,简单地说,vuex里面有state这个对象用于保存组件们公共状态,this.$store.state来取出,但出于vuex机制(为了记录修改历史)我们并不能直接修改state里的状态,而是通过mutation来修改。mutation是在vuex里的定义的一些方法。另外Vue Devtool已经集成了vuex,我们可以在里面清楚的查看vuex各个部分。详情请查阅vuex文档。

那为何这么小的项目我也要将vuex用上呢,这当然是为了日后的拓展。当左边的菜单栏不是三个而是七八个,并且各个组件之间共同状态增多(比如说,我在充值组件成功进行了充值操作,左上角的显示财富数的组件也要做对应更新),我们便会泪流满面的去迎接vuex

http请求

在这之前很多人用的ajax库是jQuery的一系列ajax方法,但是如果我们为了使用这些方法而将jQuery引入项目那么体积会大出一部分,小题大做。vue-resource是一个轻量的(压缩后约5k+)并且可以在vue中使用的http库(this.$http),并且他实现了Promise对象并支持get,post,put,delete,jsonp等请求。

应用结构

组件的父子关系和位置大概如下:
应用结构

使用chrome插件Vue.js devtools也可以清晰的查看应用的组件组成及相关数据:
Vue.js devtools

说明

  • 里面包含一些实用的小组件可复用(分页组件,数据展示表格,Loading组件等)
  • 所有对代码解释已在注释中,方便查看
  • 一些组件有写到一些url,只是为了表明在实际开发时需要请求后台,在此示例中为了演示效果所以并没有用到
  • loading状态是用setTimeout方法演示,并非真正请求后台
  • 下一版本将增加登录演示
相关文章
|
6天前
|
SQL 监控 安全
Java Web应用的安全防护与攻防策略
Java Web应用的安全防护与攻防策略
|
8天前
|
JavaScript 前端开发 UED
使用Layer和Toastr提升Web应用的用户交互体验
【7月更文挑战第7天】在现代Web应用开发中,提供友好且直观的用户反馈是提升用户体验的关键。Layer和Toastr是两个广泛使用的JavaScript库,它们可以帮助开发者轻松地在网页上实现弹窗提示和通知功能,增强用户交互体验。
23 3
|
7天前
|
SQL 存储 安全
PHP 与现代 Web 应用的安全挑战与解决方案
随着 Web 应用的发展,PHP 作为一种广泛使用的服务器端脚本语言,面临着越来越复杂的安全挑战。本文探讨了当前 PHP 开发中常见的安全问题,并提供了相应的解决方案,帮助开发者构建更安全可靠的 Web 应用。 【7月更文挑战第8天】
17 1
|
2天前
|
XML 前端开发 API
惊艳全场的秘诀!AJAX、Fetch API与Python后端,打造令人惊叹的Web应用!
【7月更文挑战第13天】构建现代Web应用的关键在于提供无缝用户体验,这涉及AJAX和Fetch API的异步数据交换以及Python(如Flask)的后端支持。Fetch API以其基于Promise的简洁接口,改进了AJAX的复杂性。例如,一个Flask应用可提供用户数据,前端利用Fetch API在不刷新页面的情况下显示信息。这种结合提升了效率,减少了服务器负载,是现代Web开发的趋势。随着技术发展,预期将有更多工具优化这一过程。
10 3
|
2天前
|
安全 开发者 Python
告别迷茫,Django/Flask深入应用指南,让你的Web梦想照进现实!
【7月更文挑战第13天】在Python Web开发中,Django和Flask框架各具特色。Django适合快速构建企业级应用,提供ORM、模板引擎等全面功能;而Flask轻量灵活,适用于小项目和原型开发。通过实例,了解如何启动Django和Flask的基本应用,从创建项目到运行服务器。选择框架应考虑项目需求和个人偏好,不断学习与实践将助你实现Web梦想。
|
7天前
|
消息中间件 Java 微服务
构建可扩展的Java Web应用架构
构建可扩展的Java Web应用架构
|
4天前
|
存储 JavaScript 前端开发
WEB三大主流框架之Vue.js
WEB三大主流框架之Vue.js
|
4天前
|
测试技术 API Android开发
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
autox.js如何监听异常情况,比如网络中断、内存慢、应用死机或者页面无响应
|
5天前
|
缓存 前端开发 JavaScript
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第10天】在Web开发中,Web Workers和Service Worker提升性能。Workers运行后台任务,防止界面冻结。Web Workers处理计算密集型任务,Service Worker则缓存资源实现离线支持。常见问题包括通信故障、资源限制、注册错误及缓存更新。通过示例代码展示了两者用法,并强调生命周期管理和错误处理的重要性。善用这些技术,可构建高性能的Web应用。
|
8天前
|
缓存 JavaScript 前端开发
JavaScript进阶 - Web Workers与Service Worker
【7月更文挑战第6天】JavaScript的Web Workers和Service Worker增强了浏览器的性能处理和离线功能。Web Workers处理后台计算,减轻主线程压力,但通信有开销,受同源策略限制。Service Worker则能拦截网络请求,支持离线缓存和推送通知,但其生命周期和权限管理需谨慎处理。通过理解它们的工作原理和限制,开发者能创建更流畅、更健壮的Web应用。