# api_platform_web

**Repository Path**: alex-oos/api_platform_web

## Basic Information

- **Project Name**: api_platform_web
- **Description**: 接口自动化平台web页面
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-09-15
- **Last Updated**: 2021-05-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


#### 技术栈
vue2 + vuex + vue-router + webpack + ES6/7 + axios + elementUI + 阿里图标iconfont


#### 目录结构
------------------------

```bash
├── /build/          # 项目构建(webpack)相关配置
├── /config/         # 项目开发环境配置
├── /src/            # 源码目录
│ ├── /api/          # 请求
│ ├── /assets/       # 组件静态资源(图片)
│ ├── /components/   # 公共组件
| ├── /api/          # 请求接口
│ ├── /router/       # 路由配置
│ ├── /vuex/         # vuex状态管理
│ ├── /views/        # 路由组件(页面维度)
│ ├── /config/       # 接口配置文件（请求地址）
│ ├── App.vue        # 组件入口
│ └── main.js        # 程序入口
├── /static/         # 非组件静态资源
├── .babelrc         # ES6语法编译配置
├── .editorconfig    # 定义代码格式
├── .eslintignore    # ES6规范忽略文件
├── .eslintrc.js     # ES6语法规范配置
├── .gitignore       # git忽略文件
├── index.html       # 页面入口
├── package.json     # 项目依赖
└── README.md        # 项目文档
```

#### 强调
接口地址需要修改config/index.js文件 dev
``` bash
proxyTable: {
    '/api': {
        target: 'http://xxx.xxx.xxx.xxx:xxx', // 你请求的第三方接口
        changeOrigin: true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
        pathRewrite: { // 路径重写，
            '^/api': '/api' // 替换target中的请求地址，也就是说以后你在请求http://api.jisuapi.com/XXXXX这个地址的时候直接写成/api即可。
        }
    }
},

```
#### 完成功能
- [x] 登录 -- 完成
- [x] 路由拦截 -- 完成
- [ ] 角色管理（增加、编辑、搜索、删除、权限管理） 
- [ ] 用户管理（增加、编辑、搜索、删除、数据权限、刷新缓存）
- [ ] 系统环境变量（增加、编辑、搜索、删除）
- [ ] 权限管理（增加、编辑、搜索、删除、配置权限）
- [ ] 菜单管理（增加、编辑、搜索、删除） 
- [ ] 接口自动化管理（增加、编辑、搜索、删除）

#### 运行项目
------------------------

``` bash
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test


```

#### 项目中的问题：

##### 1、token从哪取：

> token 我使用localStorage.setItem('logintoken', res.result.token)，存储的，如果参数里面需要使用，可以这么去取localStorage.getItem('logintoken'))

##### 2、cookie如何使用：

> cookie 我查看接口，cookie里面存储的token，根据cookie里面的token，来判断是否鉴权成功，所以需要添加到header里面，这里我在公共的类里面添加进行了，如需使用，调用 api/axiosFun/req 方法请求

```javascript
const req = (method, url, params) => {
  return axios({
    method: method,
    url: url,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
      token: localStorage.getItem('logintoken'),
      //cookie中的token ，根据这个来判断是否需要鉴权，一般都需要使用
      'user-token': getCookie("user-token")
    },
    data: params,
    traditional: true,
    transformRequest: [
      function (data) {
        let ret = ''
        for (let it in data) {
          ret +=
            encodeURIComponent(it) +
            '=' +
            encodeURIComponent(data[it]) +
            '&'
        }
        return ret
      }
    ]
  }).then(res => res.data);
};
```

##### 3、请求地址

> 请求地址之前需要添加一个公共的路径，公共的函数式用于添加一个公共的路径，详细代码如下：

```javascript
let url_tmp = (url) => {
  let url_tmp = url.indexOf('public') > -1 ? url : `/public${url}`
  return url_tmp;
}
```

这个仅仅作为了解即可，不需要进行修改的