点击按钮修改文本--thinkphp8与ElementPlus

        ElementPlus是个UI框架，这里结合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 COMMENT '-1：''删除'',0：''禁用'',1：''正常'',2：''待审核''',
  `score` float(5,2) DEFAULT NULL,
  `create_time` datetime DEFAULT NULL,
  `update_time` datetime DEFAULT NULL,
  `login_times` int(11) DEFAULT '0',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8
        编写User模型类

<?php

namespace app\mp_toutiao\model;
 

use think\Model;

/**
 * Description of User
 *
 * @author 
 */
class User extends Model {

}

        编写一个控制器方法

<?php

namespace app\mp_toutiao\controller;

use app\mp_toutiao\model\User;

/**
 * Description of index
 *
 * @author 
 */
class Index {

        public function getUserDetailForButton()
    {
        $list = User::where([
            'id' => request()->param('id')
        ])->find();
        
        return mySuccessResponse($list);  
    }

}

        编写一个公共方法

<?php
// 应用公共文件
function mySuccessResponse($data = [])
{
    return json([
        'code' => 1,
        'sub_code' => 0,
        'msg' => '',
        'data' => $data
    ]);
}

        前端编写如下

<script setup>

import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  
    <div class="mb-4">
      <el-button>Default</el-button>
      <!-- <el-button type="primary">Primary</el-button> -->
      <el-button type="primary" @click="changePrimary">Primary</el-button>
      <el-button type="success">Success</el-button>
      <el-button type="info">Info</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </div>
    <el-text class="mx-1">Default</el-text>
      <el-text class="mx-1" type="primary">{{primary_text}}</el-text>
      <el-text class="mx-1" type="success">Success</el-text>
      <el-text class="mx-1" type="info">Info</el-text>
      <el-text class="mx-1" type="warning">Warning</el-text>
      <el-text class="mx-1" type="danger">Danger</el-text>
      
</template>

 <script>
    import axios from 'axios';
    export default {
        data() {
            return {
                  primary_text:'1234'
                }
        },
        methods: {
            changePrimary() {
              axios.get('http://mp.toutiao.am8.com/index/getUserDetailForButton', {
                  params: {
                    id: 1
                  }
                })
                .then((response) => {
                  console.log(response);

                    this.primary_text = response.data.data.name;
                })
                .catch(function (error) {
                  console.log(error);
                });
          }
        
        },
        mounted() {
            
            }
    }
    
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
        运行效果如下

        点击Primary按钮，下面那行文本就会变化如下