# vue-work-web

**Repository Path**: aaronmin/vue-work-web

## Basic Information

- **Project Name**: vue-work-web
- **Description**: work-web前端vue源代码
- **Primary Language**: Java
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-01
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目介绍
*  前端使用 vue-element-admin 框架，Git地址：[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
*  后端使用 springBoot 2.1.6 + mybatis 3.1.2 + MySQL 5.7 + Redis

## 前端文档
### 后台接口地址
    目录下的 .env.development 文件中修改 后台接口地址
    目录下的 vue.config.js 中修改前端端口号 和 代理
    默认代理路径是 work  可以修改成其他，修改后 如使用nginx 代理则修改对应的配置文件 把 work 修改成自己的
### Token的自动更新
    在 src/utils/request.js 文件中 第46行 有个 if (time < 300) 的判断，时间单位是 秒（S），默认是请求发起后，判断一下token有效期，如剩余5分钟进行token的更新操作
    进行更新操作的时候，其他请求将被挂起，等待更新完成按照请求顺序进行后端请求
### 请求的封装
    在 src/api 目录下 新建一个js文件，引入 import request from '@/utils/request' ，然后列如登录的接口应该这样写
        user.js
        
        export function login(data) {
          return request({
            url: '/login',
            method: 'post',
            data
          })
        }
    其中 data 是页面传过来的 数据对象，没有可以不写，或者为空
    
#### 页面中的使用
    例如 要调用 login 接口，在页面中的 <script> 标签中 插入如下代码
    import { qrCode, qcStatus } from '@/api/user'
    在需要的地方使用：
    1. 第一种写法
        login({'username':'admin','password':'admin'}).then( res => {
            res 是返回的 http 对象 
            可以 使用 res.data 来获取后端返回的数据
        })
    2. 第二种写法
         const { data } = await ({'username':'admin','password':'admin'})
         这样 直接从HTTP中获取了后端返回的数据对象，可以直接 data.msg，data.code, data.data 来获取数据

### 动态路由
    用户登录后，根据用户角色权限来动态生成左侧菜单栏，可在 系统管理 - 菜单管理 中管理菜单数据
    
### 放过某些前端页面
    1. 在src/permission.js 文件中 whiteList 数组中添加要放过的路径
    2. 在src/router/index.js 文件中 添加静态路由地址，参考页面写法 或 参考 vue-element-admin 的官方文档进行配置
    
## 后端文档
    后端使用 jwt + spring-security 进行权限校验
    项目配置文件 位于 cn.work.config 文件夹下 
    
>     jwt         jwt配置文件夹
>     druid       数据监控配置
>     exception   自定义异常
>     mybatis     mybatis分页配置
>     redis       Redis配置
>     swagger     接口文档配置
>     web         web服务配置，包括权限校验

    tools   是封装的一些工具类
    web     是项目接口
>         Android 手机端接口目录
>         api     第三方接口目录，例如 手机短信，邮件验证，第三方登录
>         log     日志接口目录
>         system  系统基本接口目录
>         weChat  微信方面的接口目录

    第三方配置
    application.yml 文件中
>     email 邮件设置
>         emailName: "发件人名称"
>         emailServer: "邮件服务器地址"
>         emailPort: 465 端口号
>         sSLOnConnec: true 是否开启ssl
>         emailCharset: "UTF-8" 字符编码
>         emailUsername: "邮件登录账号"
>         emailPassword: "邮件登录密码"

>     sms 短信设置
>         alisms:
>             accessKeyId: "阿里短信keyid"
>             accessKeySecret: "阿里短信key"
>             open: false 是否打开
>         tencent:
>             accessKeyId: 腾讯云短信id
>             accessKeySecret: "腾讯云密码"
>             open: true 是否打开
    PS： 如两个都是 false 则调用接口的时候会提示没有可用的短信设置，全部为true的时候会使用阿里短信
    
    
# 功能介绍
## 用户登录
    1.  普通账号密码登录
            访问接口 /login 参数值 username，password，由安全框架自动验证，登录成功在 header 里返回 token 和 有效期
    2.  手机验证码登录
            框架暂未更新
    3.  微信小程序登录
            访问接口 /weChat/login
            通过小程序端传过来的 code 使用小程序秘钥 访问腾讯服务器获取 小程序用户的 uuid ，通过uuid 来查询绑定的账号，如没有绑定账号则前端提示绑定，反之登录成功返回token
            
## 菜单管理、角色管理、用户管理
    可查看代码注释 或 项目启动后访问 7000端口 doc.html 例如 127.0.0.1:7000/doc.html  查看
    
## 日志管理
    日志使用aop 切面进行日志记录，在 控制层的接口上加入  @WebLog  注解，可记录该接口的日志，不加则不记录
    通过修改 cn.work.web.log.aop.WebLogAspect 此文件
```
    放开此处注释
    @Pointcut("execution(public * cn.work.web.*.controller.*.*(..))")
    public void webLog() {
    }
    注释掉
    @Pointcut("@annotation(cn.work.web.log.aop.WebLog)")
    public void webLog() {
    }
    来记录全部日志
```
## 第三登录
    
*  使用 JustAuth 第三方框架，Git地址： [justAuth](https://gitee.com/yadong.zhang/JustAuth)  来集成第三方登录
>     在application-dev.yml 文件中配置第三方应用信息
>     oauth:
>         url: http:/xxx.cn/oauth/callback/  前端访问后端的登录跳转地址
>         callbackUrl: http://127.0.0.1/oauth?token= 前端接受授权信息的地址
>         secret:
>         - name: 第三方平台类型name
>           clientId: 平台秘钥id
>           clientSecret: 平台秘钥
>         如有多个平台，则配置多个 name，如
>         secret:
>          - name: 第三方平台类型name
>           clientId: 平台秘钥id
>           clientSecret: 平台秘钥
>           - name: 第三方平台类型name
>           clientId: 平台秘钥id
>           clientSecret: 平台秘钥

*    相关文档，请访问 [参考文档](https://docs.justauth.whnb.wang/)

## 手机客户端
    目前实现了 手机端qq登录，账号密码登录，扫描PC二维码，使PC登录
    1.  手机qq登录
        注册腾讯互联开发者 https://connect.qq.com/
        查看官方文档：https://wiki.connect.qq.com/ 
        进行二次开发处理
        qq登录回调接口 /mobile/qqLogin
        通过回调获取 用户腾讯用户秘钥，使用此秘钥来获取平台 唯一id 来查询数据库该第三方用户是否绑定了账号
        
    2.  账号密码登录
        访问端口 /mobile/login 进行登录校验
        
    3. 扫码登录
        手机客户端登录后，点击右上角 扫码登录，打开扫码界面，对准PC页面的登录二维码，扫码成功弹出授权界面，二维码有效期1分钟，过期作废，需重新扫描授权
        前端获取二维码接口      /oauth/qrCode       获取以后会 轮询 /oauth/qcStatus 此接口来判断 手机端是否已经扫描，
        手机端扫描接口          /api/mobile/qrOauth 手机客户端扫描成功后，会访问此接口，向redis插入扫描信息，
        扫描成功并授权成功接口  /api/mobile/qrLogin 扫描授权成功后会访问此接口来获取token
        
## 微信小程序客户端
    1. 小程序自动登录
        访问接口 /weChat/login 来进行身份验证
    2. 小程序绑定接口
        访问接口 /weChat/binding

## 其他
    其他接口明细 启动项目访问 http://127.0.0.1:7000:doc.html 账号密码 work  进行查看
    其他未说明的，都在代码中有注释