美文网首页
iMeTisUI开发文档

iMeTisUI开发文档

作者: _嘿嘿_ | 来源:发表于2018-12-26 16:18 被阅读0次

    1.简介iMeTisUI

    iMeTisUI 是基于iview-admin进行开发的,其基本功能可以查看iview-admin开发文档
    https://lison16.github.io/iview-admin-doc/ ,下面主要介绍iMeTisUI 开发功能。

    项目结构

    ├── config 开发相关配置
    ├── public 打包所需静态资源
    └── src
    ├── api AJAX请求
    └── assets 项目静态资源
    ├── icons 自定义图标资源
    └── images 图片资源
    ├── components 业务组件
    ├── config 项目运行配置
    ├── directive 自定义指令
    ├── libs 封装工具函数
    ├── locale 多语言文件
    ├── mock mock模拟数据
    ├── router 路由配置
    ├── store Vuex配置
    ├── view 页面文件
    └── tests 测试相关

    2.配置

    webpack打包配置

    vue.config.js文件里面配置打包内容,以及全局插件等等

    iMeTisUI项目配置

    在config文件夹里面进行配置,配置全局需要用的常量,例如向后台发送的域名跟端口,配置是否启动i18n等等

    3.路由配置

    在router文件夹里面的router.js进行路由配置,具体使用可以参考iview-admin开发文档。

    4.多语言配置

    在locale文件里配置,具体写法如下

    ```代码块``
    1.<p slot="title">
    {{$t('register.register')}}
    </p>

    2.let config = {
    title:this.t('register.success.title'), desc:this.t('register.success.desc'),
    }
    ```代码块``

    1. <Input v-model="user.account" :placeholder="$t('register.accoutPlaceHolder')"/>

    5.组件

    组件写在components里面。

    main组件

    main组件是全局通用组件,也是比较重要的组件,顶部头,左侧栏以及选项菜单卡,浮动菜单栏都属于main组件

    table-page组件

    表格组件,基于iview table组件,可以进行排序、分页、搜索等等,具体用法请参考iview组件库文档 (百度搜iview 第一个)

    登录表单组件

    login-form组件,登录页表单

    6.api接口

    ajax请求后台接口
    使用规则类名+方法名 例如 applic.js 使用里面list方法
    import api from '@/api/index'
    const {applic} = api;
    applic.list('').then(res => {
    const data = res.data
    if (data.success) {
    self.changeArrToObj(data.defaultValues)
    self.selectData = data.conditions
    }
    }).catch(err => {
    console.log(err)
    })

    applic.js 配置适用性

    1.list
    /**
    @param String
    @url applic/list
    @method post
    @description 获取适用性数据
    **/

    download.js 下载类

    1.getFolders
    /**
    @param Object
    @url download/folder
    @method post
    @description 获取文件夹
    **/

    2.getFiles
    /**
    @param Object
    @url download/files
    @method post
    @description 获取文件
    **/

    3.open
    /**
    @param baseUrl,data
    @url window.open(baseUrl+'file/'+data.oid);
    @description 打开文件
    **/

    favorite.js 收藏类

    1.delete
    /**
    @param oid
    @url favorite
    @method delete
    @description 删除收藏对象
    **/

    2.create
    /**
    @param oid
    @url favorite
    @method post
    @description 创建收藏对象
    **/

    feedback.js 反馈类

    1.create
    /**
    @param Object
    @url feedback/
    @method post
    @type form
    @description 创建反馈
    **/

    2.getList
    /**
    @param
    @url feedback/list
    @method post
    @description 获取反馈列表
    **/

    3.getInfo
    /**
    @param oid
    @url 'feedback/' + oid
    @method get
    @description 获取反馈对象
    **/

    4.getReplyList
    /**
    @param oid
    @url 'feedback/' + oid
    @method get
    @description 获取反馈对象
    **/

    5.createReply
    /**
    @param Object
    @url 'feedback/' + feedbackOid + '/reply'
    @method post
    @type form
    @description 根据feedbackOid创建回复
    **/

    6.deleteReply
    /**
    @param feedbackOid,replyOid
    @url 'feedback/' + feedbackOid + '/reply/' + replyOid
    @method delete
    @description 根据Oid删除回复
    **/

    7.checkPermission
    /**
    @param feedback_oid
    @url 'feedback/'+feedback_oid+'/permission',
    @method get
    @description 校验反馈权限
    **/

    8.update
    /**
    @param feedback_oid,params
    @url 'feedback/'+feedback_oid',
    @method put
    @description 更新反馈对象
    **/

    notice.js 公告类

    1.getList
    /**
    @param Object
    @url 'notice/list'
    @method get
    @description 获取公告列表
    **/

    user.js 用户类

    1.login
    /**
    @param userName,password,validator,codeKey
    @url 'principal/login'
    @method post
    @description 登录
    **/

    2.getAllInfo
    /**
    @param token,params
    @url 'tisuser/allInfo'
    @method get
    @description 获得当前用户的所有信息
    **/

    3.updatePassword
    /**
    @param -params
    @url 'tisuser/updatePassword',
    @method put
    @description 更新密码
    **/

    4.query
    /**
    @param token,params
    @url 'user/reload'
    @method get
    @description 刷新用户、组的缓存
    **/

    注意事项

    所有的类函数对象都必须注册到api文件夹的index.js中,例如
    import buyCart from './buyCart';
    export default {
    //注册购物车类
    buyCart
    }

    7.基本系统用的工具类以及工具函数

    放在libs文件目录里面

    api.request.js 文件

    全局的axios 请求,系统配置ajax,向回台发送请求

    app.js文件

    项目可能会使用到一些jQuery插件,这个文件进行注册插件到项目中,例如:
    blockui插件
    这个插件可以做加载动画,ajax请求的加载动画基于该插件
    var App = {
    blockUI: function(options) {
    //调用插件初始化内容
    }
    }

    使用方法
    import App from '@/libs/app'
    App.blockUI({
    //target:$("body"), //遮罩对象
    animate: true,
    overlayColor: 'black'
    });

    util.js文件

    项目要需要使用到的多功能接口文件,例如:
    setCookie 函数
    export const setCookie = (key,value) => {
    Cookies.set(key, value, {expires: config.cookieExpires || 1, path: config.cookiePath||'' });
    }

    tool.js文件

    通用工具函数
    例如
    **

    • 将里面的name1值赋值到name2值
    • @param arr
    • @param name1
    • @param name2
    • @param flag 是否要将原来的字段删除
      */
      export const changeJSONStrName = (arr, name1, name2, flag) => {
      for (var i = 0; i < arr.length; i++) {
      arr[i][name2] = arr[i][name1]
      if (flag) {
      delete arr[i][name1]
      }
      }
      // 递归层级节点drd
      if (arr[i] && arr[i].children) {
      changeJSONStrName(arr[i].children, name1, name2)
      }
      return arr
      }

    8.将iMeTisUI打包成依赖库

    1. 执行打包 npm run dist
    2. 切换npm库(注意,url最后的"/"不能丢) npm config set registry http://192.168.1.117:8088/repository/iMeNPM/
    3. 登录npm(admin/123qwe!@#,admin@example.com) npm login
    4. 复制package.json 到 dist目录
    5. 发布到npm库 npm publish dist

    9.创建子项目

    1.安装npm
    2.npm install -g vue-cli
    3.查看版本/是否安装成功 vue -V
    4.在新文件夹下创建项目 vue create my-project
    5.添加依赖库,主要介绍依赖iMeTisUI,具体如下

    1. 切换npm库(注意,url最后的"/"不能丢) npm config set registry http://192.168.1.117:8088/repository/npmGroup/
    2. 安装库 npm install iMeTisUI --save
      安装完成之后,在main.js文件中注册依赖:
      import iMeTisUI from 'iMeTisUI'
      const {html,Vue,config,TisRouter,Main,store,App,iView,installPlugin,i18n,importDirective,partsListInfo,part} = iMeTisUI.default;
      Vue.use(iMeTisUI.default.install);

    6.启动项目 npm run dev 或者npm run serve ,命令由package.json文件里面设置名称决定

    7.打包项目 npm run build

    10.子项目创建路由及覆盖原来的路由

    const {html,Vue,config,TisRouter,Main,store,App,iView,installPlugin,i18n,importDirective,partsListInfo,part} = iMeTisUI.default;
    const router = new TisRouter();
    router.addRoutes(
        {
            path: '/content',
            name: 'content',
            component: Main,
            meta: {
                hideInBread: true,
                hideInMenu: true,
                notCache: true
            },
            children: [
                {
                    path: 'test',
                    name: 'serviceInfo1',
                    meta: {
                        icon: 'md-build',
                        title: '维修信息',
                    },
                    component:test
                },
          
                {
                    path: 'html/:oid/:title',
                    name: 'html',
                    meta: {
                        icon: 'ios-bookmarks',
                        // title: '主题内容',
                        title: route => `{{${route.params.title}}}`,
                },
                component:html
    }
            ]
        });
    console.log(router);
    
    /* eslint-disable no-new */
    window.vue = new Vue({
            el: '#app',
            router:router.getRouter(),
            i18n,
            store,
            render: h => h(App)
    })
    
    
    
    
    

    相关文章

      网友评论

          本文标题:iMeTisUI开发文档

          本文链接:https://www.haomeiwen.com/subject/qpnhlqtx.html