JingTieXueTang.Web

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.

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

// 例如
let menus = {
  path: '/user', // 路由路径-若有children，则不需要该字段
  // name: 'user', // 页面名称，跟页面内的name属性要相同
  meta: {
    title: '用户管理', // 页面标签的标题
    icon: 'user', // 菜单图标名称，要在@/icons/svg目录下能找到
    // hidden: false, // 是否隐藏该菜单，不配置则默认显示；为true不显示
    // noClose: false, // 是否不可关闭，不配置则默认可关闭（显示“x”）；为true则不可关闭，将一直显示，如首页
    // noCache: false // 是否缓存页面，不配置则默认缓存（保留对页面的操作及输入的数据）；为true则不缓存
  },
  children: [
    {
      path: '/user/staff', // path要完整的-若有children，则不需要该字段
      meta: { title: '员工管理', icon: 'user' },
    },
  ], // 子菜单，结构跟父菜单一样
};

项目共通工具使用说明

1.调用后台接口方法：

• 已在全局注册，无需引入，直接使用即可。
• this.\$_http ==> axios 配置详解
• this.\$_API ==> 接口地址

-----------------------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);
})

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

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	电话号码隐藏中间几位

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.使用图标组件

• 若有新的阿里的iconfont更新，需要重新获取在线链接，更新@/styles/index.js中的scriptUrl值
• 若是antDesignUi中的图标，使用
• 若是阿里的iconfont，使用
• 若需要修改图标颜色，需要加!important

6.使用变量样式

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

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