# JingTieXueTang.web

## Project setup

```
npm install
```

### Compiles and hot-reloads for development

```
npm run serve
```

### Compiles and minifies for production

```
npm run build
```

### Lints and fixes files

```
npm run lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

## 项目菜单（由数据库配置）

```js
// 例如
let menus = {
  path: '/user', // 路由路径 [若有children，则不需要该字段]
  meta: {
    title: '用户管理', // 页面标签的标题
    icon: 'user', // 菜单图标名称，要在`阿里的iconfont网站建立的库中`能找到
    // hidden: false, // 是否隐藏该菜单，不配置则默认显示；为true不显示
    // noClose: false, // 是否不可关闭，不配置则默认可关闭（显示“x”）；为true则不可关闭，将一直显示，如首页
    // noCache: false // 是否缓存页面，不配置则默认缓存（保留对页面的操作及输入的数据）；为true则不缓存
  },
  children: [
    {
      path: '/user/staff', // path要完整的 [若有children，则不需要该字段]
      meta: { title: '员工管理' }, // , icon: 'user' 若子菜单需要icon就加上
    },
  ], // 子菜单，结构跟父菜单一样
};
```

## 项目共通工具使用说明

#### 1.调用后台接口方法：

- 已在全局注册，无需引入，直接使用即可。
- this.\$\_http ==> [axios 配置详解](https://github.com/axios/axios)
- this.\$\_API ==> 接口地址

```js

-----------------------vue实例内部调用后台接口------------------------------

this.$_http.get(url, config)

this.$_http.post(url, config)

this.$_http.put(url, config)

this.$_http.delete(url, config)

this.$_http.request(config)

// 其中 url为接口地址，在api目录下定义
// config内容为参数和其他配置，例如：

--------------------------执行 GET 请求---------------------------------

// 执行 GET 请求
this.$_http.get(this.$_API.INTERFACE_USER_LOGIN + "?ID=12345")
  .then(response => {
    // 自己的操作
    console.log(response);
  })

// 不需要写catch，框架会自动提示出来

// 可选地，上面的请求可以这样做
this.$_http.get(this.$_API.INTERFACE_USER_LOGIN, {
    params: {
      ID: 12345
    }
  }).then(response => {
    // 自己的操作
    console.log(response);
  })

--------------------------执行 POST 请求---------------------------------

// 执行 POST 请求
this.$_http.post(this.$_API.INTERFACE_USER_LOGIN, {
  firstName: "Fred",
  lastName: "Flintstone"
}).then(response => {
  // 自己的操作
  console.log(response);
})

--------------------------执行 DELETE 请求---------------------------------

// 执行 POST 请求
this.$_http.delete(this.$_API.INTERFACE_USER_LOGIN, {
  data: { id: 1 }
}).then(response => {
  // 自己的操作
  console.log(response);
})

--------------------------其他方式调用---------------------------------

Vue.request(config)/get/post/...
windows.request(config)/get/post/...
```

#### 2.使用共通过滤器

- 所有过滤器已在全局注册，无需引入，直接使用即可。

| 过滤方法名            | 功能                                                         | 示例       |
| :-------------------- | :----------------------------------------------------------- | :--------- |
| formatDateTime        | 格式化日期+时间                                              | date\      |
| formatDate            | 格式化日期                                                   | date\      |
| formatMoney           | 格式化金额（除以 100 并保留 2 位小数），不带单位             | money\     |
| formatMoneyWithSymbol | 格式化金额（除以 100 并保留 2 位小数），不带单位，带符号：￥ | money\     |
| formatDuration        | 格式化时长                                                   | durition\  |
| formatSex             | 格式化性别，1：男；2：女                                     | sex\       |
| formatAge             | 格式化年龄显示                                               | age\       |
| formatMobileHidden    | 电话号码隐藏中间几位                                         |

```js
// js中
import { formatDateTime } from '@/filters/index';
formatDateTime(date);
```

```html
<!-- html中 -->
<span>date | formatDateTime</span>
```

                                  |

#### 3.开发时是否使用数据库中的菜单

- 在`@/main.js`目录下修改`MenusFromDB`配置即可，为`false`则使用`@/router/menu.js`中的模拟菜单配置。

#### 4.公共样式文件

- 全局样式都在`@/styles/`目录下。
- `frame`目录下是框架的样式，除了框架修改一般不建议修改；
- `components`目录下的`index.less`则是开发时各组件使用的共通样式。
- `common`目录下的`vant.less`是用来全局覆盖 antDesign-ui 中的样式，会影响所有对应的 antDesign-ui 组件，慎改。`variables.less`是定义需要的 css 变量；`index.less`用来写一些通用的样式。

#### 5.使用变量样式

- 变量样式文件位于`@/styles/common/variable.less`

```css
<style>
  @import '~@/styles/common/variable.less';
  .className {
    color: @mainColorBlue;
  }
</style>
```

#### 6.使用图标组件

- 若有新的阿里的`iconfont更新`，需要重新获取`在线链接`，更新`@/styles/index.js`中的`scriptUrl`值
- 若是`antDesignUi中的图标`，使用<a-icon type="iconName"/>
- 若是`阿里的iconfont`，使用<icon-font class="iconFont" type="ali-icon-name" />
- 若需要修改图标颜色，则需要在行内加样式，如<a-icon type="iconName" style="color: #999;" />

#### 7.使用 vuex

- 两种方式，mapGetters 是直接取 getters.js 中所设置的变量

```js
import { mapState, mapGetters } from 'vuex';
  ...mapState({
    userInfo: state => state.user.userInfo
  })
  ...mapGetters(['routes', 'sidebar']),
```