锐客网

  1. 首页 > 睿知 > it技术 > >

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

IT知识数据库app开发读取数据

别裁伪体亲风雅，转益多师是汝师。这篇文章主要讲述app开发中读取数据库信息的vue页面相关的知识，希望能为你提供帮助。
< 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="https://www.songbingjia.com/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="https://www.songbingjia.com/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="https://www.songbingjia.com/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;
}
【app开发中读取数据库信息的vue页面】< /style>

























































































































































































    推荐阅读


    上一篇：android-圆形头像

    下一篇：delphi 安卓配置教程