java web 二

接上一篇

前端问题

前端界面主要使用vue的element的ui组件来实现的，引用以下组件就可以使用vue的框架了，详见https://cn.vuejs.org/

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">

    <script src="js/bootstrap.js"></script>
    <!-- 先引入 Vue -->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

1数据获取

可以使用ajax请求，来实现前后端完全分离的操作

              getdata:function(){
                    var _this = this
                    $.ajax({
                        url:"getProjectInfo.do",
                        type:"get",
                        dataType:"json",
                        success:function(resp) {
                            for(var i in resp) {
                                resp[i].isActive=false;
                                console.log(i,":",resp[i]);
                            }
                            _this.packageInfos = resp
                        },
                    });
                },
                addPackage:function () {
                    window.location.href="editPackages.do?addinName=new";
                }
            },
            created(){
                this.getdata();
            }

也可以使用jsp的内置对象获取后端添加在model中的数据

            new Vue({
                el:'#box',
                data:{
                    projectName:"${projectName}",
                    outputPath:"${outputPath}",
                    packageDetails:${packageDetails},
                    type:"",
                    pinyinName:"",
                    displayName:"",
                    nowIndex:-100
                },

在使用上还是很灵活多变，按需使用

2 table item 元素的显示和消失

vue中提供v-show的属性来操作控件的显示和消失，并且是双向绑定。只需要改改变预定义的数据，就可以实现显示和消失的效果

    <el-table :data="packageInfos" style="width: 100%">
        <el-table-column type="expand">
            <template slot-scope="props">
                <ul>
                    <li v-for="item in props.row.packages">
                        <a :href="'/download.do?addinName='+item+'&folderName='+props.row.outputFolder">{{item}}</a>
                    </li>
                </ul>
            </template>
        </el-table-column>
        <el-table-column label="项目名称 ID" prop="projectName">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
                <el-button @click="addPackage()" type="text" size="small">
                    添加
                </el-button>
                <el-button type="text" size="small" @click="handleEditClick(scope.row)">
                    编辑
                </el-button>
                <el-button @click="handlePackageClick(scope.row)" type="text" size="small">
                    打包
                </el-button>
                <el-progress  v-show="scope.row.isActive" type="line" :percentage="percentage" :status="processStatus"  :show-text="isShowTxt"></el-progress>
            </template>
        </el-table-column>
    </el-table>

打包的进度条是否显示和数据中的isActive属性绑定，只需要在“打包”按钮的点击事件中修改当前行的这个属性就完成显示和消失的操作

3页面跳转

暂时使用类似于A标签的方式实现页面跳转，看看后续有没有什么更好的方式（这样等于是把接口和方法都暴露了）

   handleEditClick:function(package){
                    window.location.href="editPackages.do?addinName="+package.projectName;
                },