app开发中读取数据库信息的vue页面

Posted 2020-11-02 hlhlz

<template>
<!-- 容器 -->
<div class="container">

<!-- 标头 -->
<div class="header" :style="{ height: height }">
<wxc-minibar background-color="#fff"
text-color="#1a1a1a"
:title="titles"
@wxcMinibarLeftButtonClicked="minibarLeftButtonClick">

<!-- 图片位置 -->
<image slot="right" @click="jump(‘employEdit‘)" class="icon-add" src="../../../web/assets/images/icon-add.png"></image>

</wxc-minibar>
</div>

<list class="list">

<!-- list容器 -->
<cell class="list-cell" v-for="num in list" @click="jump(‘employEdit‘,1)">
<div class="list-box">
<image class="menu-img" src="../../../web/assets/images/icon-find-maintenance.png"></image>

<span class="list-m">
<text class="set-name">{{num.employeeName+"员工"}}</text>
<!-- <text class="set-addr">{{num.employeePhone}}</text> -->
</span>

<image class="icon-triggle" src="../../../web/assets/images/icon-triggle.png"></image>
</span>
</div>
</cell>
</list>
</div>
</template>

<script>

import { WxcMinibar,WxcCell,WxcTabPage, WxcPanItem, Utils, BindEnv } from ‘weex-ui‘;
//不变的
const modal = weex.requireModule(‘modal‘);
//定义变量
var stream = weex.requireModule(‘stream‘);

export default {
//组件
components: { WxcMinibar,WxcCell },
data(){
return{
height:88,
titles:‘员工管理‘,
//定义list
list: []
}
},

created: function() {
var me = this;

},

//安装
mounted:function(){
var me = this;
console.log(6666666666666);
//数据接收发出
stream.fetch({
method: ‘POST‘,
url: ‘/api/employee/findAll?name=‘+1,
type:‘json‘
}, function(ret) {
if(!ret.ok){
console.log("123");
me.getJsonpResult = "request failed";
}else{
me.list = ret.data;
//控制台打印 类似alert()

console.log(me.list[0].employeeName+"打印进来了");
}
//响应
},function(response){
//取得进展
console.log(‘get jsonp in progress:‘+response.length);
//接收的字节数
me.getJsonpResult = "你好!!!:"+response.length;
console.log(‘最后返回:‘+response.length);

});
},

/*
stream Demo演示
stream.fetch({
method: ‘POST‘,
url: POST_URL,
type:‘json‘
}, function(ret) {
if(!ret.ok){

me.postResult = "request failed";
}else{
console.log(‘get:‘+JSON.stringify(ret));
me.postResult = JSON.stringify(ret.data);
}
},function(response){
console.log(‘get in progress:‘+response.length);
me.postResult = "bytes received:"+response.length;
});
*/

 

 

//预估
beforeCreate: function() {
//文档标记名
document.getElementsByTagName("body")[0].style.backgroundColor="#f4f4f4";
},
methods: {

 

toParams(obj){
var param = "";
for(const name in obj){
if(typeof obj[name] != ‘function‘){
param += "&" + "=" + encodeURI(obj[name]);
}
}
return param.substring(1);
},

 

 

 

//小左按钮
minibarLeftButtonClick () {
},
//小右按钮
minibarRightButtonClick () {
modal.toast({ ‘message‘: ‘click rightButton!‘, ‘duration‘: 1 });
},
//点击
wxcCellClicked (e) {
console.log(e)
},
//跳转
jump(urlName,id){
// this.$router.push({name: urlName,params:{Id:id}});

/*第一个参数是跳转路径，第二个参数是代理商id*/
this.$router.push({name: urlName,params:{id:id}});
}
}
};

 

</script>
<style scoped>
.header{
z-index: 9999;
position: fixed;
top:0;
width: 100%;
border-bottom: 1px solid #e5e5e5;
}
.icon-add{
width: 29px;
height: 29px;
}
.container{
padding-top: 88px;
}
.list,.list-cell{
width: 750px;
}
.list{
padding-bottom: 98px;
}
.list-cell{
padding: 24px 20px;
border-bottom: 1px solid #f4f4f4;
background-color: #fff;
}
.list-box{
width: 100%;
flex-direction: row;
}
.text-name{
margin-bottom: 16px;
font-size: 28px;
color: #333333;
}

.list-m{
flex: 1;
padding:0 0 0 20px;
}
.list-r{
padding-top: 10px;
}

.text-status.color-has .color-n{
display: inline-block;
padding: 0 4px;
font-size: 26px;
background-color: #e5e5e5;
color: #999;
border-radius: 4px;
}
.set-name{
font-size: 28px;
line-height: 100px;
color: #333333;
}
.icon-triggle{
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 17px;
height: 28px;
}
.menu-img{
width: 100px;
height: 100px;
border-radius: 4px;
}

</style>