# AIOT2.0

**Repository Path**: sean__y/aiot2.0

## Basic Information

- **Project Name**: AIOT2.0
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-11-13
- **Last Updated**: 2023-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目基础

    安装依赖以及运行项目(需要nodeJS稳定版环境)
    建议使用VSCode编辑器

```javascript
npm install 或者 npm install -g yarn 之后执行 yarn
建议使用yarn，国内源，速度快且会读取缓存
使用npm建议安装淘宝镜像。
```

```javascript
npm run dev 或者 yarn dev(前提是安装好了yarn)。
运行后在浏览器打开控制台输出的对应地址
```

```javascript
npm run build:prod 或者 yarn build:prod(前提是安装好了yarn)。
运行后打包项目，在项目根目录生成dist文件夹
```

## 目录结构(src)

```
├── src
│   ├── App.vue （路由载体，入口文件）
│   ├── api （定义所有的http接口）
│   ├── assets  （静态文件）
│   ├── components  （自定义组件）
│   ├── directive （自定义指令）
│   ├── hooks （自定义hooks）
│   ├── layout  （布局组件）
│   ├── main.js （程序入口文件）
│   ├── permission.js （菜单权限）
│   ├── plugins （自定义插件）
│   ├── router  （路由）
│   ├── settings.js （全局默认配置）
│   ├── store （VUEX）
│   ├── utils （工具类）
│   └── views （页面）
└── vue.config.js （项目配置文件）
```

## 路由权限验证

- 权限验证文件 /src/permission.js

  ```javascript
  /*
   * 判断用户是否登录后调用vuex的getInfo将获取到的用户信息存储
   * 如果用户无权限则跳转回到登录页面
   * 反之根据获取到的权限菜单渲染进入主界面
   */
  ```

- 路由配置 /src/router/index.js

  > 需要注意的是，后端配置了菜单之后，前端的页面文件需要严格跟后端保持一致

  > 例如后端配置的/staff/whitelist；那么前端项目内的目录和文件则是 /src/views/staff/whitelist/index.vue

  ```javascript
  /*
  * Note: 路由配置项
  *
  * hidden: true                     // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
  * alwaysShow: true                 
  // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
  // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
  // 若你想不管路由下面的 children 声明的个数都显示你的根路由
  // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
  * redirect: noRedirect             // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
  * name:'router-name'               // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
  * query: '{"id": 1, "name": "ry"}' // 访问路由的默认传递参数
  * roles: ['admin', 'common']       // 访问路由的角色权限
  * permissions: ['a:a:a', 'b:b:b']  // 访问路由的菜单权限
  * meta : {
      noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
      title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
      icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
      breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
      activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
    }
  */
  ```

- 自定义指令

  ```javascript
  框架中封装了 v-hasPermi 指令,在需要权限验证的元素上添加例如
  v-hasPermi="['staff:blacklist:query','staff:blacklist:list']"，
  程序就会去判断,，如果当前用户没有这个权限，则按钮不会渲染，反之会渲染。
  ```

## 项目快速上手

- ElementUI 已经全局加载直接使用 例：

```javascript
<template>
  <el-form-item>
    <el-input />
  </el-form-item>
</template>
```

- 字典全局使用

```javascript
// 默认将字典挂载到了全局，初始化字典
// 加载数据字典
export default {
  name: "Post",
  dicts: ["sys_user_sex", "sys_staff_type"],
  ...
};

// 使用字典
<el-option
  v-for="dict in dict.type.字典类型"
  :key="dict.value"
  :label="dict.label"
  :value="dict.value"
/>

// 字典标签组件翻译
<el-table-column label="名称" align="center" prop="name">
  <template slot-scope="scope">
    <dict-tag :options="dict.type.字典类型" :value="scope.row.name"/>
  </template>
</el-table-column>

// 自定义方法翻译
{{ xxxxFormat(form) }}

xxxxFormat(row, column) {
  return this.selectDictLabel(this.dict.type.字典类型, row.name);
},
```

- 挂载全局方法

```javascript
Vue.prototype.getDicts = getDicts;
Vue.prototype.getConfigKey = getConfigKey;
Vue.prototype.parseTime = parseTime;
Vue.prototype.resetForm = resetForm;
Vue.prototype.addDateRange = addDateRange;
Vue.prototype.selectDictLabel = selectDictLabel;
Vue.prototype.selectDictLabels = selectDictLabels;
Vue.prototype.download = download;
Vue.prototype.handleTree = handleTree;
```

## 开发与生产环境

- 与后端的请求接口已经分别放在了 .env.development 和 .env.production 中

- 不同项目 把上述文件中 VUE_APP_BASE_API 的路径替换即可

## axios 的二次封装

- /src/utils/request.js 封装了 axios，且进行了响应拦截，可根据实际需求进行更改

- http 请求示例(建议将所有 http 请求统一管理)

```javascript
// api/xxx.js 其他目录请自行修改路径
import request from "@/utils/request";

// 查询设备列表
export function listDevice(params) {
  return request({
    url: "/equipment/device/list",
    method: "GET",
    params,
  });
}
```