认识 Electron

Electron是由GitHub开发，用HTML、CSS 和 JavaScript来构建跨平台桌面应用程序的一个开源库。Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac、Windows和Linux系统下的应用。Electron于2013年作为构建GitHub上可编程的文本编辑器Atom的框架而被开发出来。

这不意味着Electron是绑定了GUI库的JavaScript。相反，Electron使用Web页面作为它的GUI，所以你能把它看作成一个被JavaScript控制的，精简版的Chromium浏览器。

Electron的版本更新很频繁，基本保持在1周发布一个小版本，每季度发布一个大版本。除了稳定版外还有Beta版和Nightly(最新功能试用版)，Chromium更新时，Electron也会跟着更新。

为什么选择Electron

如今的桌面应用软件基本都需要跨平台运行，类似于MFC、Duilib等技术都无法满足需求。当今的跨平台桌面应用软件开发以使用QT，Electron较多。

QT跨平台开发

Qt是一个跨平台C++图形用户界面应用程序开发框架。它既可以开发GUI程序，也可用于开发非GUI程序，比如控制台工具和服务器。作为使用C++语言开发的框架，他的优缺点十分明显。

优点：

运行效率高;

架构健壮，性能强大。

缺点：

开发周期长;

需要开发者具有C++编程能力;

QT是一款收费软件，如果不想缴费购买License，又想用QT开发商业(闭源)程序，必须遵守LGPL协议，开源使用了LGPL库的源代码。

Electron桌面软件开发

Electron最早用于开发GitHub上的可编程文本编辑器Atom,它是一个借助Node.js和Chromium, 利用HTML/CSS/JavaScript语言创建桌面应用的框架。与之类似的还有NW.js, 但是NW.js社区发展基本处于停滞状态，更新也较慢。

优点：

使用JavaScript语言作为开发语言，方便前端开发者轻松开发桌面应用，原C++/Java语言开发者，也可以很快入手开发;

方便调试，提供了浏览器的开发者工具，轻松断点调试;

丰富的Web前端UI资源，可以快速制作绚丽的界面;

快速构建，迭代开发。最复杂的底层浏览器部分Electron已经帮你搞定，你只需要负责上层界面及业务逻辑的开发。Electron还提供了热更新功能，只需加载更新模块，会自动帮你检查更新并后台下载;

崩溃日志报告。轻松收集崩溃日志，定位错误代码;

C++插件扩展;

代码开源。Electron是GitHub上的开源项目，开发者有疑问可以在GitHub社区(https://github.com/electron/electron)上直接提issue，高级开发者可以修改Electron底层代码，订制自己的Elcetron。

缺点：

打包文件太大。Electron毕竟是一个浏览器，最小的应用安装包也要几十兆大小;

无法代码加密。和Web开发类似，使用者可以在开发者工具看到应用的客户端代码，商业软件需要代码加密的可以选择重要功能在服务端实现，桌面应用请求，或使用Node文件实现;

运行耗资源。浏览器通病，Electron应用也是多进程系统，启动几个Electron应用还好，如果太多会造成机器卡顿;

不支持XP系统，Node.js并不支持XP系统。

综上，如果你想快速的开发出炫酷的桌面应用，而又对系统限制不大，建议你选择Electron，如果你是一个前端开发人员，又想制作桌面应用，建议你选择Electron。

创建一个简单的应用

环境安装

Electron应用本质上是一个Node.js应用程序，需要安装Node.js，到官网(http://Node.js.cn/download/)安装即可。安装完后，在命令行窗口中分别输入node -v和npm -v来查看Node和NPM的版本。

初始化应用
与Node.js模块相同，应用的入口为package.json 文件，该文件可以在一个文件夹下使用npm init命令，按照提示填充各项信息生成。 一个最基本的Electron 应用一般来说会有如下的目录结构：





 main.js是主进程，完成窗口的创建，url或html文件的加载。GitHub上提供了一个简单的Electron应用https://github.com/electron/el ... t.git，可供学习参考。

使用C++插件扩展功能
对于复杂的业务逻辑，可以开发成C++插件Node，C++插件主要完成一些复杂的逻辑功能，供Electron调用。Electron对于C++生成的Node插件引用功能来自于Node.js,可以使用require() 函数加载到工程中，像普通的模块一样使用。JavaScript 与C++ 库之间接口使用V8引擎，如下图所示：





 插件开发环境

C++插件的开发需要安装node-gyp、Python 2.76，Windows下开发还要安装Visual Studio。
每个插件都有一个工程文件binging.gyp,配置了源文件、include路径及链接库，目标文件，使用的编译器等，格式如下：





 
C++与JavaScript通过V8交互执行的整体过程如下图所示：





 
C++可以使用Napi接口，模块的加载使用宏NODEAPIMODULE(hello, Init)，导出的JavaScript接口在Init中定义，示例如下：





 
编译C++插件使用命令如下：





 
生成的C++插件为node文件，如hello.node 在JavaScript中调用C++插件直接使用require函数，代码hello.js如下：





 JavaScript就可以调用C++的接口了,执行命令node hello.js，输出"world"。

C++中调用JavaScript传递的回调函数需要使用libuv库，libuv实现了Node.js的事件循环、工作线程、以及平台所有的的异步操作的C库。 具体参考示例代码https://github.com/nodejs/node-addon-examples

Electron打包

Electron应用打包可以使用electron-builder和electron-packager，推荐使用electron-builder，打包命令为npm run builder，可以使用参数配置生成的安装包的操作系统。

环信IM桌面端

环信的IM桌面端SDK提供了JavaScript接口，并且使用Electron框架开发的示例Demo，可以让任何一个前端人员在极短时间内搭建出一款同时在Mac、Windows上运行的即时通讯软件，拥有单聊、群聊和聊天室功能，支持文字、表情、图片、音视频等消息格式，开发时间短、界面美观，可以为开发者提供方便快捷的桌面端即时通讯解决方案。

下载地址：http://www.easemob.com/download/im
集成说明：http://docs-im.easemob.com/im/pc/intro/integration

作者：李小明，现就职于环信，高级软件开发工程师，负责IM桌面端软件的研发，以C++、Node.js为开发语言，从事多年桌面软件开发经验，对行业前沿技术永远不懈追求。 查看全部

从人工到自动化，从重复到创新，技术演进的历程中，伴随着开发者工具类产品的发展。

阿里巴巴将自身在各类业务场景下的技术积淀，通过开源、云上实现或工具等形式对外开放，本文将精选了一些阿里巴巴的开发者工具，希望能帮助开发者们提高开发效率、更优雅的写代码。

由于开发者涉及的技术领域众多，笔者仅从自己熟悉的领域，以后端开发者的视角盘点平时可能用得到的工具。每个工具按照以下几点进行介绍：

工具名称和简介

使用场景

使用教程

获取方式

一、Java 线上诊断工具 Arthas

Arthas 阿里巴巴 2018 年 9 月开源的一款 Java 线上诊断工具。

工具的使用场景：

这个类从哪个 jar 包加载的？为什么会报各种类相关的 Exception？

我改的代码为什么没有执行到？难道是我没 commit？分支搞错了？

遇到问题无法在线上 debug，难道只能通过加日志再重新发布吗？

线上遇到某个用户的数据处理有问题，但线上同样无法 debug，线下无法重现！

是否有一个全局视角来查看系统的运行状况？

有什么办法可以监控到 JVM 的实时运行状态？

Arthas 支持 JDK 6+，支持 Linux/Mac/Windows，采用命令行交互模式，同时提供丰富的 Tab 自动补全功能，进一步方便进行问题的定位和诊断。

使用教程：

基础教程：

https://alibaba.github.io/arth ... asics

进阶教程：

https://alibaba.github.io/arth ... anced

获取方式：（免费）

开源地址：

https://github.com/alibaba/arthas

二、IDE 插件 Cloud Toolkit

Cloud Toolkit是一款 IDE 插件，可以帮助开发者更高效地开发、测试、诊断并部署应用。通过 Cloud Toolkit，开发者能够方便地将本地应用一键部署到任意机器（本地或云端），并内置 Arthas 诊断、高效执行终端命令和 SQL 等，提供 IntelliJ IDEA 版，Eclipse 版，PyCharm 版和 Maven 版。

工具的使用场景：

每次修改完代码后，是否正在经历反复地打包？

在 Maven 、Git 以及其他运维脚本和工具的之间频繁切换？

采用 SCP 工具上传？使用 XShell 或 SecureCRT 登陆服务器？替换部署包？重启？

文件上传到服务器指定目录，在各种 FTP、SCP 工具之间频繁切换 ？

使用教程：

IntelliJ IDEA 版：

https://help.aliyun.com/document_detail/98762.html

Eclipse 版：

https://help.aliyun.com/document_detail/29970.html

PyCharm 版：

https://help.aliyun.com/docume ... .html

Maven 版：

https://help.aliyun.com/docume ... .html

获取方式：（免费） 工具地址：

https://www.aliyun.com/product/cloudtoolkit

三、混沌实验注入工具 ChaosBlade

ChaosBlade是一款遵循混沌工程实验原理，提供丰富故障场景实现，帮助分布式系统提升容错性和可恢复性的混沌工程工具，可实现底层故障的注入，提供了延迟、异常、返回特定值、修改参数值、重复调用和 try-catch 块异常等异常场景。

工具的使用场景：

微服务的容错能力不易衡量？

容器编排配置是否合理无法验证？

PaaS 层健壮性的测试工作无从入手？

使用教程：

https://github.com/chaosblade-io/chaosblade/wiki/ 新手指南

获取方式：（免费）

开源地址：

https://github.com/chaosblade-io/chaosblade/wiki/ 新手指南

四、Java 代码规约扫描插件

该插件用于检测 Java 代码中存在的不规范的位置，并给予提示。规约插件是采用 Kotlin 语言开发。

使用教程：

IDEA 插件使用文档：

https://github.com/alibaba/p3c/wiki/IDEA 插件使用文档

Eclipse 插件使用文档：

https://github.com/alibaba/p3c/wiki/Eclipse 插件使用文档

获取方式：（免费）

开源地址：

https://github.com/alibaba/p3c

五、应用实时监控工具 ARMS

ARMS是一款 APM 类的监控工具，提供前端、应用、自定义监控 3 类监控选项，可快速构建实时的应用性能和业务监控能力。

工具的使用场景：

晚上 10 点收到 37 条报警信息，你却无从下手？

当我们发现问题的时候，客户 / 业务方已经发起投诉？

每个月花几十万买服务器，却无法保障用户体验？

使用教程：

前端监控接入：

https://help.aliyun.com/documentdetail/106086.html

应用监控接入：

https://help.aliyun.com/documentdetail/63796.html

自定义监控：

https://help.aliyun.com/document_detail/47474.html

获取方式：（收费）

工具地址：

https://www.aliyun.com/product/arms

六、静态开源站点搭建工具 Docsite

Docsite一款集官网、文档、博客和社区为一体的静态开源站点的解决方案，具有简单易上手、上手不撒手的特质，同时支持 react 和静态渲染、PC 端和移动端、支持中英文国际化、SEO、markdown 文档、全局站点搜索、站点风格自定义、页面自定义等功能。

使用教程：

https://docsite.js.org/zh-cn/d ... .html

获取方式：（免费）

项目地址：

https://github.com/txd-team/docsite

七、Android 平台上的秒级编译方案 Freeline

Freeline 可以充分利用缓存文件，在几秒钟内迅速地对代码的改动进行编译并部署到设备上，有效地减少了日常开发中的大量重新编译与安装的耗时。Freeline 最快捷的使用方法就是直接安装 Android Studio 插件。

使用教程：

https://github.com/alibaba/fre ... zh.md

获取方式：（免费）

项目地址：

https://github.com/alibaba/freeline

八、性能测试工具 PTS

PTS可以模拟大量用户访问业务的场景，任务随时发起，免去搭建和维护成本，支持 JMeter 脚本转化为 PTS 压测，同样支持原生 JMeter 引擎进行压测。

使用教程：

https://help.aliyun.com/document_detail/70290.html

获取方式：（收费）

工具地址：

https://www.aliyun.com/product/pts

九、云效开发者工具 KT

KT 可以简化在 Kubernetes 下进行联调测试的复杂度，提高基于 Kubernetes 的研发效率。

使用教程：

https://yq.aliyun.com/articles/690519

获取方式：（免费）

工具地址：

https://yq.aliyun.com/download/3393

十、架构可视化工具 AHAS

AHAS为 K8s 等容器环境提供了架构可视化的功能，同时，具有故障注入式高可用能力评测和一键流控降级等功能，可以快速低成本的提升应用可用性。

工具的使用场景：

服务化改造过程中，想精确的了解资源实例的构成和交互情况，实现架构的可视化？

想引入真实的故障场景和演练模型？

低门槛获得流控、降级功能？

使用教程：

https://help.aliyun.com/document_detail/90323.html

获取方式：（免费）

工具地址：

https://www.aliyun.com/product/ahas

十一、数据处理工具 EasyExcel

EasyExcel 是一个用来对 Java 进行解析、生成 Excel 的框架，它重写了 poi 对 07 版 Excel 的解析，原本一个 3M 的 Excel 用 POI sax 需要 100M 左右内存，EasyExcel 可降低到 KB 级别，并且再大的 excel 也不会出现内存溢出的情况。03 版依赖 POI 的 sax 模式。在上层做了模型转换的封装，让使用者更加简单方便。

使用教程：

https://github.com/alibaba/eas ... rt.md

获取方式：（开源）

https://github.com/alibaba/easyexcel

十二、iOS 类工具 HandyJSON

HandyJSON 是一个用于 Swift 语言中的 JSON 序列化 / 反序列化库。

与其他流行的 Swift JSON 库相比，HandyJSON 的特点是，它支持纯 Swift 类，使用也简单。它反序列化时 (把 JSON 转换为 Model) 不要求 Model 从 NSObject 继承 (因为它不是基于 KVC 机制)，也不要求你为 Model 定义一个 Mapping 函数。只要你定义好 Model 类，声明它服从 HandyJSON 协议，HandyJSON 就能自行以各个属性的属性名为 Key，从 JSON 串中解析值。

使用教程：

https://github.com/alibaba/Han ... cn.md

获取方式：（开源）

https://github.com/alibaba/HandyJSON

十三、云上资源和应用部署工具 EDAS Serverless

EDAS Serverless一款基于 Kubernetes，面向应用和微服务的 Serverless 平台。用户无需管理和维护集群与服务器，即可通过镜像、WAR 包和 JAR 包，快速创建原生支持 Kubernetes 的容器应用，同时支持 Spring Cloud 和 Dubbo 等主流微服务框架。

使用教程：

https://help.aliyun.com/docume ... .html

获取方式：（公测期间免费）

https://help.aliyun.com/document_detail/97792.html

十四、数据库连接池 Druid

Druid 是 Java 语言下的数据库连接池，它能够提供强大的监控和扩展功能。

使用教程：

https://github.com/alibaba/druid/wiki/ 常见问题

获取方式：（开源）

http://central.maven.org/maven2/com/alibaba/druid/

十五、Java 工具集 Dragonwell

Alibaba Dragonwell 是阿里巴巴内部 OpenJDK 定制版 AJDK 的开源版本， AJDK 为在线电商，金融，物流做了结合业务场景的优化，运行在超大规模的，100,000+ 服务器的阿里巴巴数据中心。 Alibaba Dragonwell 与 Java SE 标准兼容，目前仅支持 Linux/x86_64 平台。

使用教程：

https://github.com/alibaba/dragonwell8/wiki/ 阿里巴巴 Dragonwell8 用户指南

获取方式：（开源）

https://github.com/alibaba/dragonwell8


上一篇: Java首度承认PK失败，愿永久服软Python!
  查看全部

内含文件：
1、Oracle Database 11g：SQL 基础 学生指南第1 册 
2、Oracle Database 11g：SQL 基础 学生指南第2 册 
3、Oracle Database 11g：数据库管理－ 课堂练习I 学生指南第1 册
4、Oracle Database 11g：数据库管理－ 课堂练习II 学生指南第1 册 
5、Oracle Database 11g：数据库管理－ 课堂练习I 学生指南第2 册 
6、Oracle Database 11g：数据库管理－ 课堂练习II 学生指南第2 册 
7、Oracle Da等等 查看全部

对比互联网各个岗位的裁员程度可以发现，数据分析相关岗位正在不断的扩招，已经成为了这波逆流中的黑马，什么原因导致的数据分析人才如此紧缺？
因为数据分析是大势所趋，未来的发展空间会大有可为。随着5G网络即将商用，企业每天将会产生海量的数据，BAT日均数据更是达到了PB的级别，数据分析相关岗位才会存在着巨大的需求缺口。
长此以往，企业要用尽可能少的人才，来满足尽可能多岗位的诉求，可以这么说，数据分析将会是每个程序员个人能力最重要的补充，也是BAT这类大公司急招人才的必备技能。
但是一提数据分析，很多人就觉得无从下手，知识点零散总是抓不住重点，学习起来相当吃力。这有一份廖雪峰大神历时3个月打磨出来的《数据分析必备技能》的视频学习资料，由浅入深系统化的讲解，内容详尽。基本囊括了平时学习工作中经常用到的分析方式，这份不可或缺的宝贵资料原价值1980元，现在，关注公众号cainiao_xueyuan就可以免费领取（仅限300名）。

学完这套资料可以给你将会得到哪些收获？

1. 总时长>48个小时的干货内容，每天2小时，20天掌握数据分析必备技能；
2. 对照自己掌握知识点进行查缺补漏，帮助你扫除知识盲区、重构知识体系。
具体详细的资料内容：
1 数学理论基础           
01.数据挖掘之数学基础02.数学基础之微积分
03.机器学习之线性回归
04.机器学习之逻辑回归
05.朴素贝叶斯
06.机器学习之决策树
07.机器学习之集成学习
2 必备Python基础            
01.Python语言介绍、发展、特色02.概念介绍：Python解释器
03.Python函数及高级特性
04.交互环境介绍：启动和退出交互环境
05.Python基础语法及模块
3 高效scrapy爬虫框架           
01.scrapy简介02.scrapy选择器
03.创建scrapy爬虫
04.下载器与爬虫中间件
05.突破反爬虫机制与策略
06.使用管道 pipelines        
4 Excel数据处理            
01.认识数据表的字段和记录02.使用Excel制作数据表
03.指定常用数据类型
04.Excel导入网站数据、文本数据
05.Excel数据清洗、筛选
06.Excel数据抽样和计算

5 使用SQL实现数据操作
01SQL基础语法
02.SQL表连接
03.SQL普通函数
04.SQL窗口函数
05.SQL优化 

长按扫码 添加微信，领取干货视频






Ps：学习资料由"开课吧"友情提供。 查看全部

基于Vue2.5.6+Vuex+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术开发的仿微信web端聊天室，实现了发送消息、表情(动图)，图片、视频预览，仿微信右键菜单、网页截图可直接粘贴至编辑框发送。
https://www.cnblogs.com/xiaoyan2017/p/10793728.html
 

































































 
/*
* 页面地址路由js
*/
import Vue from 'vue'
import Router from 'vue-router'
import store from '../vuex'

// 通过改写router.go方法，当new Router 实例就包含back方法
Router.prototype.back = function(){
window.history.go(-1)
}

Vue.use(Router)

const router = new Router({
routes: [
// 登录、注册
{
path: '/login',
component: resolve => require(['../views/auth/login'], resolve),
meta: { hideSideBar: true },
},
{
path: '/register',
component: resolve => require(['../views/auth/register'], resolve),
meta: { hideSideBar: true },
},

// 首页、通讯录、动态圈
{
path: '/',
redirect: '/chat',
component: resolve => require(['../views/index'], resolve),
meta: { requireAuth: true },
},
{
path: '/contact',
redirect: '/contact/new-friends',
component: resolve => require(['../views/contact'], resolve),
meta: { requireAuth: true },
},
{
path: '/contact/new-friends',
component: resolve => require(['../views/contact/new-friends'], resolve),
meta: { requireAuth: true },
},
{
path: '/contact/uinfo',
component: resolve => require(['../views/contact/uinfo'], resolve),
},
{
path: '/qzone',
component: resolve => require(['../views/qzone'], resolve),
},
{
path: '/qzone/write',
component: resolve => require(['../views/qzone/write'], resolve),
meta: { requireAuth: true },
},
{
path: '/my',
component: resolve => require(['../views/my'], resolve),
meta: { requireAuth: true },
},

// 聊天页面
{
path: '/chat',
component: resolve => require(['../views/chat/group-chat'], resolve),
meta: { requireAuth: true }
},
{
path: '/chat/single-chat',
component: resolve => require(['../views/chat/single-chat'], resolve),
meta: { requireAuth: true }
},
{
path: '/chat/group-info',
component: resolve => require(['../views/chat/group-info'], resolve),
meta: { requireAuth: true }
}

]
});

// 注册全局钩子（拦截登录状态）
router.beforeEach((to, from, next) => {
const token = store.state.token
// 判断该路由地址是否需要登录权限
if(to.meta.requireAuth){
// 判断token是否存在
if(token){
next()
}else{
next()
// 未登录授权
wcPop({
content: '还未登录授权！', anim: 'shake', style: 'background:#e03b30;color:#fff;', time: 2,
end: function(){
next({ path: '/login' })
}
});
}
}else{
next()
}
})

export default routerimport Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

import {mm} from '../common.js'

export default new Vuex.Store({
state: {
user: window.sessionStorage.getItem('user'),
token: window.sessionStorage.getItem('token'), //登录标识
onlineStatus: { status: 'online', text: '在线' }, //用户在线状态 【 online：在线、 offline：离开、 busy：忙碌、 invisible：隐身】
},
mutations: {
// 将token存储到sessionStorage
SET_TOKEN (state, data){
state.token = data;
window.sessionStorage.setItem('token', data);
},
// 获取用户名
SET_USER (state, data){
state.user = data;
window.sessionStorage.setItem('user', data);
},
// 退出
LOGOUT (state){
state.user = null;
state.token = null;
window.sessionStorage.removeItem('user');
window.sessionStorage.removeItem('token');
},
},
getters:{}
})

// 这种写法也ok
// export default () => {
// return new Vuex.Store({
// state: {},
// mutations: {},
// actions: {},
// })
// }




欢迎大家一起交流、学习  Q：282310962  wx：xy190310
  查看全部

/*

 *  页面地址路由js

 */ 

import Vue from 'vue'

import Router from 'vue-router'

import store from '../vuex'



// 通过改写router.go方法，当new Router 实例就包含back方法

Router.prototype.back = function(){

    window.history.go(-1)

}



Vue.use(Router)



const router = new Router({

    routes: [

        // 登录、注册

        {

            path: '/login',

            component: resolve => require(['../views/auth/login'], resolve),

            meta: { hideSideBar: true },

        },

        {

            path: '/register',

            component: resolve => require(['../views/auth/register'], resolve),

            meta: { hideSideBar: true },

        },



        // 首页、通讯录、动态圈

        {

            path: '/',

            redirect: '/chat',

            component: resolve => require(['../views/index'], resolve),

            meta: { requireAuth: true },

        },

        {

            path: '/contact',

            redirect: '/contact/new-friends',

            component: resolve => require(['../views/contact'], resolve),

            meta: { requireAuth: true },

        },

        {

            path: '/contact/new-friends',

            component: resolve => require(['../views/contact/new-friends'], resolve),

            meta: { requireAuth: true },

        },

        {

            path: '/contact/uinfo',

            component: resolve => require(['../views/contact/uinfo'], resolve),

        },

        {

            path: '/qzone',

            component: resolve => require(['../views/qzone'], resolve),

        },

        {

            path: '/qzone/write',

            component: resolve => require(['../views/qzone/write'], resolve),

            meta: { requireAuth: true },

        },

        {

            path: '/my',

            component: resolve => require(['../views/my'], resolve),

            meta: { requireAuth: true },

        },



        // 聊天页面

        {

            path: '/chat',

            component: resolve => require(['../views/chat/group-chat'], resolve),

            meta: { requireAuth: true }

        },

        {

            path: '/chat/single-chat',

            component: resolve => require(['../views/chat/single-chat'], resolve),

            meta: { requireAuth: true }

        },

        {

            path: '/chat/group-info',

            component: resolve => require(['../views/chat/group-info'], resolve),

            meta: { requireAuth: true }

        }



    ]

});



// 注册全局钩子（拦截登录状态）

router.beforeEach((to, from, next) => {

    const token = store.state.token

    // 判断该路由地址是否需要登录权限

    if(to.meta.requireAuth){

        // 判断token是否存在

        if(token){

            next()

        }else{

            next()

            // 未登录授权

            wcPop({

                content: '还未登录授权！', anim: 'shake', style: 'background:#e03b30;color:#fff;', time: 2,

                end: function(){

                    next({ path: '/login' })

                }

            });

        }

    }else{

        next()

    }

})



export default router

import Vue from 'vue'

import Vuex from 'vuex'



Vue.use(Vuex)



import {mm} from '../common.js'



export default new Vuex.Store({

    state: {

        user: window.sessionStorage.getItem('user'),

        token: window.sessionStorage.getItem('token'), //登录标识

        onlineStatus: { status: 'online', text: '在线' }, //用户在线状态   【 online：在线、  offline：离开、 busy：忙碌、 invisible：隐身】

    },

    mutations: {

        // 将token存储到sessionStorage

        SET_TOKEN (state, data){

            state.token = data;

            window.sessionStorage.setItem('token', data);

        },

        // 获取用户名

        SET_USER (state, data){

            state.user = data;

            window.sessionStorage.setItem('user', data);

        },

        // 退出

        LOGOUT (state){

            state.user = null;

            state.token = null;

            window.sessionStorage.removeItem('user');

            window.sessionStorage.removeItem('token');

        },

    },

    getters:{}

})



// 这种写法也ok

// export default () => {

//     return new Vuex.Store({

//         state: {},

//         mutations: {},

//         actions: {},

//     })

// }