中小型企业在线办公系统，主要功能有，日常的流程审批，新闻，通知，公告，文件信息，财务，人事，费用，资产，行政，项目，移动办公等，模块包括职位，职称，部门，员工，工资管理，聊天等模块，
主要技术点：Vue，Vue-cli,VueRouter，ElementUI，Axios，ES6，Webpack，WebSocket，font-awesome，js-file-download，vue-chat
项目目录结构
public 默认目录，默认的单页面html
src资源文件
—assets图片或者css外部资源
—components项目组件存放
——chat聊天组件
———card聊天框侧边栏，上面的当前用户的图片和名称，和搜索其他用户
———list展示其他用户的名称和图片
———message展示聊天框，聊天信息和头像和时间
———usertext聊天发送框
——sys系统配置组件
———basic基础功能组件
————DepMana部门管理组件
————JobLevelMana职称管理组件
————PositionMana权限组
————PosMana职位管理
————EcMana奖惩规则
—router配置路由
——index
—store配置vuex状态
——index
—utils一些功能的实现，下载，菜单，功能api配置
——api通过axios封装了请求响应拦截器，封装post，get，put，delete请求
——download通过axios封装下载请求响应拦截器，配置json格式转化，封装下载请求
——menus通过get请求配合vuex的commit和dispatch配置菜单路由
—views页面
——chat聊天页面
———FriendChat聊天页面组件
——emp员工资料页面
———EmpAdv员工高级资料
———EmpBasic员工基本资料
——per人事管理
———PerEc员工奖惩
———PerEmp员工资料
———PerMv员工调动
———PerSalary员工薪资调整
———PerTrain员工培训
——sal薪资管理
———SalMonth月末处理
———SalSearch工资表查询
———SalSob工资账套管理
———SalSobCfg员工账套设置
———SalTable工资表管理
——sta统计管理
———StaAll综合信息统计
———StaPers人事信息统计
———StaRecord人事记录统计
———StaScore员工积分统计
——sys系统管理
———SysAdmin系统管理员页面
———SysBasic基础系统设置
———SysConfig系统配置
———SysData系统数据库
———SysInit初始化数据库
———SysLog操作员日志管理
——AdminInfo个人界面
——Home主页
——Login登陆页面
—App.vue入口文件
—main.js
babel.config.js将ES6及以上版本的代码转换为ES5的工具
package.json项目名称、版本、作者、 gitHub 地址、当前项目依赖哪些第三方模块等。lock是install之后生成的
vue.config.js存放端口号，和请求后端端口，设置代理
登陆视图编写
el-form
处理登陆事件
通过ref获取表单数据，使用post请求调用接口，传入数据，如果有返回，把token设置到session里面，通过route的query的redirect拿到用户要跳转的路径，通过router的replace替换路径，
配置拦截器
在api里面配置axios拦截器，通过interceptors的request的use配置请求拦截器，如果有token给请求的config添加进去，
interceptors的response的use配置响应拦截器，判断响应状态码，正确用Message的success返回数据，否则提示不同的错误信息
配置请求转发解决跨域
在vue.config.js里面配置代理，把请求转发到8081端口
登陆成功跳转页面
登陆成功就replace为home页面
导航菜单功能实现
安装vuex
封装菜单请求工具类
完善菜单请求工具类
路由导航守卫
菜单功能实现
获取用户信息功能实现
注销登陆
首页面包屑效果
未登录的小bug
基础信息设置
职位管理页面
职位管理接口
职位管理编辑功能
职位管理批量删除
职称管理页面
职称管理接口
职称管理编辑功能
职称管理批量删除
权限组页面涉及，树形菜单，
角色菜单，操作功能
部门展示搜索
部门操作按钮
部门添加功能
部门删除功能
操作员页面涉及，功能实现，角色更新功能，
员工资料工具栏页面
员工展示，分页展示，添加员工页面，下拉框，添加员工部门，添加数据校验，员工删除更新
封装文件下载
员工数据导入和导出
高级搜索
工资账套
员工工资账套
在线聊天
个人中心信息
用户信息修改，更新密码，修改头像
登陆页面组件
页面布局：el-form，账号，密码，验证码，记住，登陆
知识点：background-clip，设置背景显示，内容，边框，和内框
实现逻辑：用户输入账号密码和验证码验证登陆成功。涉及到的知识点，规则检查，data中账号密码验证码的规则设定，验证码直接调用接口，实现了两个方法，一个update更新验证码，用户通过点击调用，实现逻辑为调用接口，一个submitLogin提交登陆，用户点击登陆即可，实现逻辑为通过获取绑定的表单的validate校验方法，如果通过规则，post数据获取返回的token，设置到window.sessionStorage里面，替换路由。登陆这里还用到了拦截器，通过axios设置响应拦截器，axios.interceptors.response.use，如果接口调用成功200，有返回数据，利用elementui的message返回数据成功，响应码为500服务器错误，401，403调用报错，如果接口调用失败，504网关超时，404请求数据在服务器没有找到，403服务器拒绝请求，401未授权，如果接口调用失败有数据，调用报错数据。配置请求转发解决跨域问题，通过把前端请求转发到nodejs从而访问后端，设置一个代理，代理里面填写后端端口。
导航菜单组件
布局：el-container，里面一个el-header作为头部，一个el-container作为下部，其中el-header布局为flex，一个div，一个el-dropdown放个人照片，名字，和下拉框插槽，个人中心，设置，注销。下部一个el-aside侧边栏，用el-menu和el-submenu和el-menu-item设置导航，el-main设置中间内容，用到了el-breadcrumb面包屑。
逻辑：这里使用vuex来作为组件菜单管理，在store的indexjs下面，vuex首先创建一个store对象作为路由管理的对象，里面的state用来存储路由数组，mutations通过同步的方式改变路由路径，actions通过异步的方式改变。后端的接口返回的数据组件是一个字符串，前端需要转化为可以识别的组件对象，所以需要封装工具类，在menujs里面引入get请求，定义初始菜单initMenu，用到了router和store，首先要判断有没有路由管理对象，state的routes长度大于0就返回，否则，调用get请求，使用formatRoutes进行格式化数据，formatRoutes内容为获取的数据，用foreach遍历，把数据分别声明，如果遇到孩子数组，进行递归调用formatRoutes，最后用一个fmRouter的map存储这些声明，其中component组件需要进行判断处理，最后把处理的fmRouter push到fmtRoutes中并返回，在initMenu中获得的格式化的数据，添加到router里面。commit到store里面。最后有一个小bug，因为路由都是存储在vuex中，也就是内存中，如果刷新了，状态就清零了，就需要我们添加路由导航守卫，全局前置守卫，会在触发导航时进行异步解析调用导航，在mainjs里面进行设置，三个参数，to，from，next，其中next实现跳转，如果next参数为false，就会中断跳转，，还可以重新指定跳转页面，如果要实现刷新不清零，我们定义的前置守卫里面需要调用我们上面的initMenu，但是需要加一个登陆判断，前面我们登陆实现了设置token，那么这里，我们进行获取token，如果获取到，就调用initMenu，之后调用next，没有登陆信息，直接返回到登陆。然后在home组件里面用compute属性获取store存储的路由。导航还要用到我们的用户信息，我们在前置路由里面添加，在之前的initMenu下面加一个判断，如果浏览器里面的存储没有用户信息，就用get请求获取，有响应就直接转化JSON.stringify设置，并添加进去，然后在home组件里面data设置user，用JSON.parse转换。注销功能，command事件设置，logout，需要情况用户信息，token信息，页面跳转，调用post接口，清空router。
系统功能
布局：el-tabs里面el-tab-pane分别对应不同的功能组件，DepMana部门管理，PosMana职位管理，JobLevelMana职称管理，EcMana奖惩规则，PositionMana权限组
逻辑：注册组件，返回activeName设置打开默认位置。
DepMana部门管理
布局：一个div里面有一个el-input，el-tree，el-dialog，其中el-input作为搜索部门，绑定了model用来监听，el-tree设置data，设置props树形结构，el-tree里面还有button用来添加部门和删除部门，添加会弹出el-dialog
逻辑：搜索那里绑定监听事件，filterText，绑定在model上面，el-tree的属性绑定deps所有部门数组，defaultProps当前部门的名字和子节点，dep添加部门的属性，pname上级部门名字，mounted调用this.initDeps()调用接口获取所有部门，方法deleteDep绑定在删除按钮上，接收data，判断是不是父部门，不是来个提示，调用删除接口，有返回调用removeDepFromDeps方法，接受三个参数，父节点，部门，id，遍历所有部门，比对id，相同用splice删除元素，如果删除之后，原来的deps为0，说明他不是父节点，给他的isParent设置为false，如果id不一样，继续递归调用。
添加部门doAddDep调用接口，显示对话框，调用addDep2Deps，一个deps参数，一个返回数据参数，首先遍历获取当前部门，然后拿返回的数据进行对比，如果父节点相同，在当前遍历获取的部门里面的孩子属性添加该新增的，如果不是，就递归调用最开始遍历部门变量的子数组，放入addDep2Deps中，最后调用initDep方法，添加完部门进行初始化。
PosMana职位管理
布局：el-input，el-table，el-dialog
逻辑：返回的数据有单个pos，positions数组，updatePos更新，multipleSelection批量选择删除对象，mounted调用initPositions，此方法get获取，批量删除调用delete请求，更新调用put请求，添加调用add请求。
JobLevelMana
布局：input添加职位，用select设置职称等级，table显示数据，dialog对话框，
逻辑：数据返回，调用方法
EcMana奖惩规则
PositionMana权限组
操作员管理
员工资料
布局：input搜索，el-upload导入数据，transition，插入删除动画，表格，
逻辑：规则设置，导入成功，失败属性设置，导入时状态设置，下载请求调用downloadRequest接口，初始数据，获取到数据存到session里面。获取所有员工，添加，删除。下载文件downloadjs，axios创建一个service对象里面有arraybuffer二进制数组，给service添加请求拦截器，响应拦截器，拿到请求头，正则判断，正确提供js-file-download插件，设置文件名，decodeURIComponent(fileName)格式转化，fileDownload文件下载，导出service。
工资管理
在线聊天
页面布局：这几个组件
card,
list,
message,
userText
逻辑：dispatch(‘initData’)调取该方法
this.$store.dispatch() 与 this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state
this.$store.dispatch() ：含有异步操作，例如向后台提交数据，写法：this.$store.dispatch(‘action方法名’,值)
this.$store.commit()：同步操作，，写法：this.$store.commit(‘mutations方法名’,值)
card
head里面有照片名字，foot搜索
list