VUE列表初步

Posted 2021-02-19 cquccy

页面：

============================================================

<template>

<div>

<el-button type="primary" @click="showsoftlist" >查看所有软件信息</el-button>

<el-table :data="channel_data" border justify="center"  style="width : 100%">

    <el-table-column prop="softwarename" label="软件名称"></el-table-column>

    <el-table-column prop="version" label="软件版本"></el-table-column>

    <el-table-column prop="binpath" label="软件路径"></el-table-column>

    <el-table-column prop="cfgnotepath" label="安装配置说明路径"></el-table-column>

    <el-table-column prop="usenotepath" label="使用感受路径"></el-table-column>

    <el-table-column prop="status" label="体验状态"></el-table-column>

    <el-table-column prop="channelname" label="获得渠道"></el-table-column>

    <el-table-column prop="inputdate" label="创建时间"></el-table-column>

    <el-table-column prop="updatedate" label="更新时间"></el-table-column>

</el-table>

</div>

</template>

<script>

export default {

    name : ‘Softlistinfo‘,

    data(){

        return {

            msg : "Welecome to Vue App Webpage!",

            channel_data:[]

        }

    },

    methods: {

        showsoftlist: function() {

            alert("123");

            var url = "/api/soft/softlistinfo";

            this.$axios.post(url,{

                    "begPageNum":0,

                    "numCount":  2*3

                },

                {emulateJSON:true}).then(

                    (response)=>{

                        this.channel_data = response.data;

                        console.log("response :"+ response.data);

                    }

                ).catch((error)=> {

                    console.log("error!"+error);

                });

        }

    }

}

</script>

==============================================================

服务端

@ApiOperation(value = "softlistinfo", notes = "query software note")
@RequestMapping(value="/softlistinfo",method=RequestMethod.POST)
public String softlistinfo( @RequestBody String data) {
String retMess = "ok";
try {

Map<String,String> requestMap = JSONObject.parseObject(data, Map.class);
List<SoftColl> mylist = softInfoService.querySoftInfoList(requestMap);
retMess = JSONObject.toJSONString(mylist);
}catch(Exception ex)
{
retMess = ex.getMessage();
}

return retMess;
}

=====================

sqlmapper

<select id="selectAllList" parameterType="java.util.Map" resultMap="BaseResultMap">
select
<include refid="Base_Column_List" />
from software_collection
limit #{begPageNum,jdbcType=INTEGER}, #{numCount,jdbcType=INTEGER}
</select>

 

===============================

实现类

@Autowired
private SoftCollMapper softCollMapper;

。。。。。

public List<SoftColl> querySoftInfoList(Map<String,String> requestMap)
{

List<SoftColl> mylist = softCollMapper.selectAllList(requestMap);
return mylist;
}

=======================================================

页面效果