# CloudOffice-fornt

**Repository Path**: hmfdev/CloudOffice-fornt

## Basic Information

- **Project Name**: CloudOffice-fornt
- **Description**: 中小型企业在线办公系统-云E办（前端）
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 4
- **Created**: 2021-08-02
- **Last Updated**: 2025-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue

## README

# CloudOffice-fornt

#### 介绍
中小型企业在线办公系统-云E办（前端）-- 使用WebStorm开发

#### 软件架构
需要node.js、npm，使用@vue/cli创建项目

#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 项目展示图片

##### 登录页
![输入图片说明](https://images.gitee.com/uploads/images/2021/0902/235005_f610b5fb_5474516.png "login.png")

##### 首页
![输入图片说明](https://images.gitee.com/uploads/images/2021/0902/235025_cdfd1fdd_5474516.png "home.png")

#### 提交日志细节记录

1.  【1.本地初始化提交】  

2.  【2.项目结构介绍】  
1）格式化项目的基本结构，了解项目结构内容  
2）使用npm配置运行

3.  【3.登录视图页面编写】  
1）通过ElementUI官网提供的命令 npm i element-ui -S 安装ElementUI  
2）安装完ElementUI后，还需要配置到项目中使用，可参考官网  
3）删掉一些不需要的内容，包括一些组件About.vue、Home.vue、HelloWorld.vue等   
4）新建一个Vue Component后，会自动给你生成代码模板，你只要在里面写html代码、js代码、样式代码就行了  
5）登录页面视图html代码、js代码、样式代码完成

4.  【4.处理登录事件】  
1）更新readme  
2）绑定点击事件使用@click  
3）添加表单提交校验规则，使用:rules进行绑定，注意校验规则的对应是使用prop属性  
4）注意学习如何像JQuery一样找到对应的表单元素进行校验

5.  【5.配置相应的拦截器】  
1）为了像ajax那样请求后台接口数据，需要安装axios消息通信框架，使用命令 npm install axios  
2）安装成功后会在package.json的"dependencies"下显示依赖的信息 "axios": "^0.21.1",   
3）封装axios请求数据返回处理，在api.js中  
4）在js里如何引用Message消息提示框，在官网的 单独引用 中  
5）响应拦截器内容主要是在 api.js 中，下面配置响应拦截器

6.  【6.配置请求转发解决跨域】  
1）添加一个空的前置路径，避免以后需要时，可以快速的加上  
2）因为后台请求验证码，返回的是一张图片，所以直接请求获取就可以显示到前端了  
3）前台8080的端口接口要去调用后台8081接口就涉及到一个跨域的问题，解决办法是通过node.js的代理直接去转发，也就是说我们请求还是请求8080，但是请求到node.js上面，node.js会给我们转发到8081，就是这么的一个处理  
4）跨域问题配置 vue.config.js，写了js代码需要重启项目才能生效  

7.  【7.登录成功跳转页面】  
1）注意我把api.js中的postRequest中的请求方式key值写错为了methods，改为method就行了   
2）接口返回数据转json操作，JSON.stringify(resp)，resp是接口返回的json对象
3）新建了Home.vue，别忘了在index.js中导入Home.vue组件和配置路由  
4）路由跳转使用this.$router.replace('/home');或this.$router.push('/home');但区别是replace跳转不能使用返回键返回到上一页，push跳转可以  
5）把封装的请求导入放在 main.js 中  
6）加了登录显示的loading，因为本地请求比较快，所以显示的效果不明显   
7）配置api.js中的封装请求可以全局使用，即插件形式的请求，配置好后，加个this就可以使用了

8.  【8.导航菜单功能实现】  
1）修改登录页面的loading加载框为另外一种  
2）使用elementUi提供的container容器布局和左侧导航菜单  
3）选择导航菜单跳转需要添加一个选择点击事件@select，菜单激活回调，左右又改为了router  
4）导航页面跳转显示在中间位置Main的处理方法是要设置为子路由  
5）通过循环遍历菜单列表，动态的实现菜单的添加，这样只需要配置路由的就可以了

9.  【9.安装Vuex】  
1）请求后台的菜单路径，是缓存到了redis中的，所以需要开启redis，否则会报500错误，连接redis超时  
2）把菜单列表数据存在了Vuex中，相当于存在了内存中    
3）安装vuex完成后，可以在package.json的依赖中看到"vuex": "^3.6.2"    
4）对vuex进行初始化工作，在store目录的index.js文件中

10.  【10.封装菜单请求工具类】  
1）封装菜单请求工具类menu.js，实现将后台接口返回的字段component内容字符串，转为对象  
2）在js文件中使用封装的请求需要import导入，在vue文件中使用封装的请求直接使用this  
3）到这里代码会有问题，后面会一步步解决

11.  【11.完善菜单请求工具类】  
1）数据库t_menu表截个图，对照图片建立文件夹和组件xxx.vue文件  

12.  【12.路由导航守卫介绍】  
1）路由导航守卫在Vue官网中有介绍，用来管理路由  
2）导航守卫vue-router主要用于通过重定向或取消导航来保护导航。有多种方法可以连接到路由导航过程：全局、每个路由或组件内。

13.  【13.菜单功能完整实现】  
1）通过设置<el-menu>标签的unique-opened 和 <el-submenu>标签的index可以设置点击导航就不会全部打开了  
2）安装font-awesome，可以显示接口返回的iconCls值导航图标内容，通过命令 npm install font-awesome 安装，安装完后需要在main.js中导入它的样式  
3）FontAwesome一套绝佳的图标字体库和CSS框架  
4）需要注意一下sys/SysCfg.vue文件，需要与数据库返回的数据对应，点击导航才能显示

14.  【14.获取用户信息功能实现】  
1）在public/index.html中修改全局样式  
2）在导航守卫中存储用户信息，在Home.vue中获取并展示在右上角  

15.  【15.注销登录功能实现】  
1）调用注销登录接口、清空sessionStorage数据和vuex里的菜单数据、跳转到登录页  

16.  【16.首页面包屑效果】  

17.  【17.未登录菜单Bug解决】  
1）处理未登录访问其他页面的问题

18.  【18.基础信息模块--基础信息设置】  
1）在Home.vue中修改样式，解决面包屑导航与标签距离太近的问题  
2）删掉之前测试用的Test1.vue和Test2.vue，和对应的导入配置  

19.  【19.云E办前端继续开发说明】  
1）继上次上传代码以来，已经是17天前的事情了，现在再去看代码还是会很陌生，因为即使你再熟悉的东西，一段时间不去接触，很快就会忘掉了   
2）这也惊醒我们，即使你最熟悉的东西，最会的东西，你也需要适当的做记录，还要时常翻阅，巩固复习  
3）关于项目，因为云E办前端的开发，需要依赖后端的数据，为了更好的开发前端，我也就先把后端完成之后，再来开发前端，但这一等就是十几天后的事情了  
4）最近也是需要上班，所以更新的内容可能就不会很多了，但我也会坚持每天更新一点，日积月累，加油！

20.  【20.基础信息模块--职位管理页面设计】  
1）设置基础信息设置默认打开的职位管理   
2）<template>标签下一定要有一个<div>标签   
3）需要引入自定义好的组件   
4）在elementUI官网选择组件，做简单的修改后使用到项目中   
5）要学会数据的定义方法，可以类比小程序的数据保存的定义

21.  【】  
1）



#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)