把生命浪费在美好事物上

产品产品产品

358篇博客

最新博客

最新资源下载

编辑推荐

网易数帆开源API网关与容器云项目，让云原生生产落地“多快好网易汪源：统一负载与多云环境的“开放姿态”，才是云原生网易数帆如何用 Kubernetes“原语”搞定云原生中间件快手打新挤爆券商系统，网易数帆推出券商稳定性保障方案探索智慧校园新模式，网易有数在教育行业的实践分享金融行业大数据治理之路——数据模型篇

klqa开发实践（二）：使用flask+vue+iview搭建项目管理系统

把生命浪费在美好事物上2018-07-17 10:58

近期klqa模块针对旧版的项目管理系统进行优化，使用vue+iview 方式重新编写了新的项目管理系统，改善了视觉体验，当然问题还是很多，此外，flask、vue、iview这三者结合早已不是新鲜事，然而在开发过程中还是遇到一些小问题，本文主要是针对开发过程进行简单总结。（才疏学浅，前后端大神们请轻喷）

一、引入vue、iview
klqa系统目前仍是以flask、jquery的方式，没有做前后端分离处理，所以我们是在此条件下直接引入vue、iview文件，直接使用控件~ 
<link href="{{ url_for('static',filename='js/platform/vue/iview.css') }}" rel="stylesheet">
<script src="{{ url_for('static',filename='js/platform/vue/vue.min.js') }}" ></script>
<script src="{{ url_for('static',filename='js/platform/vue/iview.min.js') }}" ></script>
<script src="{{ url_for('static',filename='js/platform/vue/vue-router.js') }}" ></script>
<script src="{{ url_for('static',filename='js/platform/vue/axios.min.js') }}" ></script>
二、前端设计
上图是项目管理系统任务列表页，主要是为了展示选择时间段内所有项目信息，项目级别、事业部分布信息，整个页面可以按照圈出来的分成以下几部分：
      渲染到project_modal实例
  • 第一部分：新建项目-隐藏的modal 
      渲染到project_view实例
  • 第二部分：事业部、状态、日期搜索选择
  • 第三部分：项目级别表格、项目优先级占比、事业部项目分部
  • 第四部分：项目列表table
var projectModal = new vue({
    el: '#project_modal',
    data: {...},
    methods: {...},
    beforeCreate: function () {
    ...
    }
});
var projectView = new vue({
    el: '#project_view',
    data: {...},
    methods: {...},
    beforeCreate: function () {
        
    }
});
每个部分的元素初始化渲染全部在data中进行，所有的方法部分在methods中完成，例如页面中看到的搜索方法，则需要在 projectView中实现search方法
具体说明：
对于页面中看到的第四部分 项目列表table--
  • html代码： columns绑定到js中表头定义columns2，数据body部分绑定到数据部分data2
<i-row>
    <i-col span="24">
        <Card :bordered="false" dis-hover>
            <i-table border :columns="columns2" :data="data2"></i-table>
        </Card>
    </i-col>
</i-row>
  • js代码：title-表头名称；key-表头唯一标识；align-table th/td部分显示样式； sortable-当前列是否支持排序
var columns2 = [
    {title: '项目名称', key: 'project_name', align: 'center', sortable: true},
    {title: '项目级别', key: 'project_risk', align: 'center', sortable: true},
    {title: '项目经理', key: 'project_creator', align: 'center', sortable: true},
    {title: '计划上线', key: 'plan_online', align: 'center', sortable: true},
    {title: '实际上线', key: 'actual_online', align: 'center', sortable: true},
    {title: '项目状态', key: 'project_status', align: 'center', sortable: true},
    {title: '操作', key: 'project_exec', align: 'center'}
];
对于data的获取，如果后端还没写好，可以像colunms2定义一样，在js中自己一个list，例如 var data=[....]，放一些测试数据在里面，然后在vue实例渲染data属性中指定 data:data即可
  • table 单元格渲染
上述代码我们编写完毕后，会发现表格只是将我们想要的文本显示出来，页面上呈现的超链接，按钮等无法显示或者按钮无法正常触发函数，这个是要求我们在表头column定义的时候自行给单元格表头增加渲染函数，例如，对于最后一列操作，我们需要单元格显示不同颜色的按钮，按钮点击之后触发js中函数，那么我们需要增加如下渲染函数： 
{title: '操作', key: 'project_exec', align: 'center',
    render: function (h, params) {
        var disableFlag = false;
        var marginRight = '15px';
        if (params.row.is_archive == '已归档'){
            disableFlag = true;
            marginRight = '5px';
        }

        return h('div', [
            h('Button', {
                props: {
                    type: 'primary',
                    size: 'small'
                },
                style: {
                    marginRight: marginRight
                },
                on: {
                    click: function () {
                        this.projectModal.editShow(params.row.project_exec);
                    }
                }
            }, '编辑'),
            h('Button', {
                props: {
                    type: 'error',
                    size: 'small'
                },
                domProps:{
                    disabled: disableFlag
                },
                style: {
                    marginRight: '5px'
                },
                on: {
                    click: function () {
                        this.projectView.projectFile(params.row.project_exec, params.index, params.row.project_status);
                    }
                }
            }, params.row.is_archive)
        ]);
    }
}
操作这一列增加了两个按钮：编辑和流程控制按钮，按钮的颜色大小通过props属性控制，可通过style控制按钮位置等样式，通过domProps使用html中原生定义样式，当然也可以根据传入的参数动态改变样式，上述代码中则通过params.row.is_archive的取值改变按钮显示的文字，按钮的点击事件则通过on来监听click事件，如果触发，则调用相应的函数
至此，编写html、js完毕后，启动调试，基本的表格就渲染完毕。
项目管理系统除了总览页，还包括项目详情页、项目流程确认页、项目流程信息发送页、项目流程确认表页、里程碑页面等等，每一块的整体设计都是按照上述方法编写，每一块涉及到的细节问题也都不一样，需要一个个解决。
以上是针对项目管理系统页面开发的一些记录，目前仍是将前后端代码写在一个工程中，开发过程中也发现了很多问题，我们正在努力解决，欢迎有兴趣的小主一起研究，也欢迎各位前后端大神指导一下我等技术小白。

本文来自网易实践者社区，经作者朱珊珊授权发布

推荐博客