<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>

app开发中读取数据库信息的vue页面的更多相关文章

  1. app开发中如何利用sessionId来实现服务端与客户端保持回话

    app开发中如何利用sessionId来实现服务端与客户端保持回话 这个问题太过于常见,也过于简单,以至于大部分开发者根本没有关注过这个问题,我根据和我沟通的开发者中,总结出来常用的方法有以下几种: ...

  2. APP开发中,如何从UI设计上提升APP用户体验

    设计中有很多细微的东西要注意,就如UI设计中,元素的统一性,图标风格.段落的排版等等,只有能注意这些细节,你的 APP UI 才算合格. 干货君总结了17个提升用户体验的 UI 设计小技巧,也是我们日 ...

  3. django模板中变更数据库信息后,如何把变更后的信息同步更新到数据库

    我们在基于django开发项目的过程中,经常会遇到数据库表字段增加,删除,或者修改的情况,以及字段属性更改的情况,因为django基于ORM模式来操作数据库的, 传统上如果django项目中的数据库m ...

  4. Android 设备,如何root,执行adb shell,查看设备中的数据库信息等【转】

    原文地址: Android 设备,如何root,执行adb shell,查看设备中的数据库信息等

  5. hybrid app开发中:苹果移动设备实用Meta标签

    hybrid app开发中:苹果移动设备实用Meta标签 “apple-mobile-web-app-status-bar-style”作用是控制状态栏显示样式 具体效果如下: status-bar- ...

  6. PHP 开发 APP 接口 学习笔记与总结 - APP 接口实例 [2] 首页 APP 接口开发方案 ① 读取数据库方式

    方案一:读取数据库方式 从数据库读取信息→封装→生成接口数据 应用场景: 数据时效性比较高的系统 方案二:读取缓存方式 从数据库获取信息(第一次设置缓存或缓存失效时)→封装(第一次设置缓存或缓存失效时 ...

  7. 读取数据库信息并生成表设计文档Word版本

    1.参考C#代码 using Help.DBAccessLayer.Business; using Help.DBAccessLayer.Model.SqlGenerator; using Newto ...

  8. Android开发中使用数据库时出现java.lang.IllegalStateException: Cannot perform this operation because the connection pool has been closed.

    最近在开发一个 App 的时候用到了数据库,可是在使用数据库的时候就出现了一些问题,在我查询表中的一些信息时出现了一下问题: Caused by: java.lang.IllegalStateExce ...

  9. itext poi 学习之旅 (3)读取数据库信息并由excel展现出来

    DBConnection.java 连接数据库操作 package com.zkbj.poi; import java.sql.Connection; import java.sql.DriverMa ...

随机推荐

  1. 将本地代码提交至gitHub

    1.注册github账号 2.本地安装git 3.打开需要提交代码的目录 4.右击git bash here 5. $ git init 6  $ ssh-keygen -t rsa -C " ...

  2. Http跨域

    一.传统 ajax跨域访问是一个老问题了,解决方法很多,比较常用的是JSONP方法,JSONP方法是一种非官方方法,而且这种方法只支持GET方式,不如POST方式安全. 即使使用jQuery的json ...

  3. C# webbrowser如何获取滚动条的位置?

    获取滚动条的位置:  HtmlDocument document = WB1.Document; int top = document.GetElementsByTagName("HTML& ...

  4. PHP:引用Phpword导出数据到word文档

    下载地址https://www.cnwenhui.cn/html/show-597.html(其中有中文使用手册可以下载看看) 1.首先要下载Phpword类库,放在如下图目录下 2.调用方法 pub ...

  5. AS导入项目报错:Plugin with id 'com.android.application' not found.

    从github或第三方Demo中获取的项目导入到AndroidStudio中报错Plugin with id 'com.android.application' not found.:今天导入一个讯飞 ...

  6. python访问hive

    #!/usr/bin/env python # -*- coding: utf-8 -*- # hive util with hive server2 """ @auth ...

  7. es6(13)--Promise

    //Promise { //原始方法 let ajax=function(callback){ console.log('执行') setTimeout(function(){ callback&am ...

  8. kafka源代码环境配置

    kafka版本10.0.0.没有采用最新版本是因为项目中目前使用了这个版本. 1.安装gradle 首先进入https://gradle.org/install 查看Install manually- ...

  9. python中的extend

    extend()拓展列表,批量写入 举个例子: 1 a = ["hello", "world", "dlrb"] 2 b = [1, 2, ...

  10. PHP Composer 包管理器的安装和使用

    一,包管理器的安装 01,首先确定 php 命令能够全局使用,要是不能请修改环境变量 02,使用 curl 命令安装 => curl -sS http://install.phpcomposer ...