找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 活动 拇指 mztk
查看: 1874|回复: 1

UNIAPP 结合thinkphp5 数据渲染

[复制链接]

134

主题

52

回帖

4913

积分

版主

积分
4913
发表于 2021-6-4 15:10:11 | 显示全部楼层 |阅读模式
本帖最后由 win 于 2021-6-4 15:11 编辑

uniapp 和tp5数据渲染 给input赋值

数组输出
tp5的后端
// 查询数据
$hdata = AicheModel::where('std', 1)
        ->select();
$data = [
    'code' => 0,  //status
'msg' => '数据加载中',  //message
'data' => $hdata    //rows.item
];
return json($data);
uniapp前端<view v-for="item in tableList" :key="item.id">{{ item.name }}</view>JS
<script>        
export default {               
               
data() {                       
return {                              
tableList: [],                       
};               
},               
onLoad() {                       
this.getList();               
},
        methods: {                        
getList() {                                
                              
uni.request({                                       
url: 'https://ceshi.zaijiapc.com/index/aiche/aiche_do',                                       
method: 'POST',                                       
dataType: 'json',                                       
data: {},                                       
success: res => {                                               
//console.log(res.data.data);                                                
this.tableList = res.data.data;                                       
},                                       
})                       
},               
},      
};
</script>
以上是循环输出

回复

使用道具 举报

134

主题

52

回帖

4913

积分

版主

积分
4913
 楼主| 发表于 2021-6-4 15:13:25 | 显示全部楼层
本帖最后由 win 于 2021-6-4 15:15 编辑

加入我们要点击跳转某个制定ID传参数
<button @click="aiche_xb(item.id)">编辑</button>
JS*作
                        //编辑*作
                        aiche_xb(id) {
                                uni.navigateTo({
                                        url: "aiche_xb?id="+id,
                                });
                        },

传到aiche_xb.vue页面得到ID的数据,单条数据
<template>

        <view class="warp">

                <view class="box">

                <view class="uni-padding-wrap uni-common-mt">

                                <form @reset="formReset">
                                        <view class="uni-form-item uni-column">
                                                <input class="uni-input" type="text" v-model="sname">
                                        </view>

                                        <view class="uni-form-item uni-column">
                                                <input class="uni-input" type="text" v-model="chename">
                                        </view>

                                        <view class="uni-form-item uni-column">
                                                <input class="uni-input" type="text" v-model="fadong">
                                        </view>

                                        <view class="uni-btn-v">
                                                <button formType="submit">Submit</button>
                                                <button type="default" formType="reset">Reset</button>
                                        </view>

                                </form>

                        </view>

                </view>
        </view>

</template>

<script>
        import {
                mapState,
                mapMutations
        } from 'vuex'


        export default {
                data() {
                        return {
                                id:'',
                                sname:'',
                                chename:'',
                                fadong:'',
                                shibie:'',
                                gtime:'',
                                chepai:'',
                                std:'',
                                beizhu:'',
                                siji:'',
                        };
                },
                onLoad(option) {
                        //console.log(option.id)
                        this.getList(option.id);
                },
                methods: {
                        getList(id) {
                                uni.request({
                                        url: 'https://ceshi.zaijiapc.com/index/aiche/aiche_xb',
                                        method: 'GET',
                                        dataType: 'json',
                                        data: {
                                                id: id
                                        },
                                        success: res => {
                                                //console.log(res.data);
                                                var gata = res.data;
                                                this.sname = gata.sname;
                                                this.chename = gata.chename;
                                                this.fadong = gata.fadong;
                                                //console.log(this.sname);
                                        },
                                })
                        },

                },

        };
</script>
那么tp5.1的后端就这么写
$id = Request::param('id');
$data = AicheModel::where(['id' => $id,'std' => 1])
    ->find();
return json($data);


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|再加计算机 ( 鲁ICP备19060125号-10|鲁公网安备37028102001711号 )

GMT+8, 2026-9-11 19:18 , Processed in 0.118906 second(s), 23 queries .

Powered by Discuz! X3.5 Licensed

© 2001-2026 Discuz! Team.

快速回复 返回顶部 返回列表