text组件展示数据--thinkphp8与uniapp

        先写个thinkphp8的控制器接口

<?php

namespace app\mp_toutiao\controller;

use app\mp_toutiao\model\User;

class Index

{

        public function getUserList()
    {
        $list = User::limit(10)->order('id desc')->select();
        $str = '';
        foreach($list as $key=>$value){
            $str = $str.'ID:'.$value->id.',名字:'.$value->name.'\n注册时间:'
                    .$value->create_time.'\n';
        }
        return json(
                [
            'code' => 1,
            'sub_code' => 0,
            'msg' => '',
            'data' => $str
        ]
        );
        
    }

}

        再写一个User模型

<?php

namespace app\mp_toutiao\model;

use think\Model;

class User extends Model

{

}

        模型单个查询用find方法，多个查询用select方法。这个例子就是按倒叙查询10条用户数据，使用了select。如果细心去看，会发现模型中根本没有find和select方法，父类Model也没有。但是Model有一个__callStatic魔术方法，里面调用了数据库对象，而数据库抽象类BaseQuery是有find和select方法的。也就是模型的作用不是操作数据库，要了解数据库操作还是要了解数据库对象。之前我想跳过数据库对象去用模型，在thinkphp8是行不通的。

        对应数据表是

CREATE TABLE `am8_user` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) DEFAULT NULL,
  `email` varchar(100) DEFAULT NULL,
  `status` int(10) DEFAULT NULL,
  `score` float(5,2) DEFAULT NULL,
  `create_time` datetime DEFAULT NULL,
  `update_time` datetime DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8

        新建uniapp项目，使用默认模板。打开默认生成的index.vue,修改如下

<template>
    <view class="content">
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: ''
            }
        },
        onLoad() {
            uni.request({
                url:getApp().globalData.server_url+"index/getUserList",
                method:"GET",
                success:(result) => {

                            if (result.data.code === getApp().globalData.my_success_code) {
                                this.title = result.data.data;
                            } else {
                                if (result.data.code === getApp().globalData.my_fail_code) {
                                    uni.showModal({
                                        title: '错误',
                                        content: result.data.msg, 
                                        showCancel: false 
                                     });
                                }
                            }
                    }
                ,
                fail:function(error){
                    console.log(error);
                }
            })
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 46rpx;
        color: #8f8f94;
    }
</style>
        主要介绍text组件，通过css类来调整样式，调整了字体大小，font-size: 46rpx;，字号越大，字体就显示越大

        在App.vue文件里面新增

globalData: {
                    server_url:'http://mp.toutiao.am8.com/',
                    my_success_code:1,
                    my_fail_code:0,
                },

        运行--》运行到小程序模拟器--》抖音开发者工具