1、安装axios。 2、封装axios。 3、编写php管理员接口。 4、获取管理员接口数据。。 5、编写php添加管理员接口。6、请求添加管理员接口

安装axios

npm i axios -S

封装axios

network/index.js
import { request } from "./request";
// 所有请求放到一个目录里面
export function index(){
  return  request({
       url:"Api/index",
       method :"get",
    })
}
export function UserLists(){
    return  request({
         url:"Api/UserLists",
         method :"post",
      })
  }
                            //    接收穿过来的值 data
  export function UserSave(data){
    return  request({
         url:"Api/UserSave",
         method :"post",
         data:data,
      })
  }

network/request.js
import axios from "axios";
// config  就是下列参数
  //   instan({
    //          method :"get",
    //          url :"Index.php/index/Api/index"
    //   })
export function request(config) {
    // # 1.3、创建axios
    const instance = axios.create({
        baseURL: "http://bite.com/Index.php/index/",
        timeout: 5000,
    });
    //请求拦截
    instance.interceptors.request.use(
        (config) => {
            // 如果API需要认证， 在这统一设置
            return config;
        },
        (err) => {
        }
    );
    //响应拦截
    instance.interceptors.response.use(
        (res) => {
            // return res.data ? res.data : res;
            if(!res){
                alert ('未找到数据');
                return false;
            }else{
                // alert ('找到数据');
                // return res;
                return res.data? res.data :res;
            }
        },
        (err) => {
            // 如果没有授权， 去login
            // 如果有错误， 在这里可以提示
        }
    );
    return instance(config);
}

编写php管理员接口 和获取管理员接口数据

user.vue
<template>
  <div style="margin: 0 0 20px 10px">
                                                                    <!-- 增加点击事件，打开表单 -->
    <el-button type="success" size="large" @click="add(0)">添加</el-button>
  </div>
  <!-- <el-form  label-width = "120px"> -->
    <!-- <el-form-item label="姓名"> -->
      <!-- 填写数据双向绑定     -->
      <!-- <el-input /> -->
    <!-- </el-form-item> -->
    <!-- <el-form-item > -->
    <!-- <el-button type="primary"  @click="onSubmit" >搜索</el-button> -->
  <!-- </el-form-item> -->
  <!-- </el-form> -->
  <el-table :data="tableData.lists" border style="width: 100%" size="large">
    <el-table-column prop="uid" label="ID"  />
    <el-table-column prop="account" label="用户账户"  />
    <el-table-column prop="name" label="姓名" />
    <el-table-column prop="phone" label="手机号" />
    <el-table-column prop="status" label="状态" />
        <el-table-column prop="add_time" label="添加时间" />
        <el-table-column prop="last_time" label="最后登录时间" />
    <el-table-column label="操作">
           <!-- default 这个是默认的插槽 -->
            <!-- scope 是传值给这个插槽，这个值是什么呢？就是当前这条数据 -->
              <!-- 当数据有多条时，放el-table 这个标签里，它会自动循环，每次循环都会把当前的循环值给到el-table-column -->
      <template #default="scope">
          <!-- @click="handleEdit(scope.$index, scope.row)" -->
        <!-- <el-button size="small" type="primary" @click ="add(1)">修改1</el-button> -->
            <!-- <el-button size="small" type="primary"  @click="add(scope.$index, scope.row)>修改2</el-button> -->
            <el-button size="small" type="primary" @click="add(scope.row)">修改</el-button>
        <el-button size="small" type="danger" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
   <!-- 增加 弹框  默认不显示  点击添加事件显示 -->
  <el-dialog 
  v-model="xsfrom.is_from" 
  :title="xsfrom.title"
   width="70%">
       <!-- 添加 页面表单                  填写数据双向绑定                         与添加按钮关联，判断是否显示 -->
  <el-form :model="fromData" label-width="120px" size="large"   >
    <el-form-item label="账户">
      <!-- 填写数据双向绑定     -->
      <el-input v-model="fromData.account"  />
    </el-form-item>
    <el-form-item label="姓名">
                <el-input v-model="fromData.name" />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="fromData.phone" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="fromData.password" type = "password"  show-password />
            </el-form-item>
              <!-- 注意位置 -->
            <el-form-item label="状态">
                <el-select v-model="fromData.status" placeholder="请选择状态">
                    <el-option label="开启" :value="1" />
                    <el-option label="关闭" :value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="入职时间">
              <el-date-picker
                    v-model="fromData.add_time"
                    type="date"
                    placeholder="请选择日期"
                    :size="size"
                />
              </el-form-item>
            <el-button type="success" size="large" @click="fun">确定</el-button>
  </el-form>
</el-dialog>
</template>
<script setup>
import { reactive } from 'vue';
import axios from 'axios';
import { index } from '../../../network/index.js';
import { UserLists, UserSave} from '../../../network/index.js';
import { ElMessage } from 'element-plus';
  const xsfrom= reactive({
    is_from : false,
    title : "添加",
  }) ;
  const fromData= reactive( {
     account :'',
     name : '',
        phone : '',
        add_time : '',
        status: 1,
        password:'',
  });
  //  const instan =  axios.create({
  //              baseURL : "http://bite.com",
  //              timeout :5000,
  //   });
  //     instan({
  //            method :"get",
  //            url :"Index.php/index/Api/index"
  //     }).then((e)=>{
  //     console.log(e.data);
  //     }).catch((e)=>{
  //       console.log(e);
  //     })
  //  常量不允许赋值 这样是错误的 const tableData = []; 
  // 正确的应该：  改为响应式的 ，注意lists给表单 匹配
const tableData = reactive ({
   lists : [ ]
});
// 更换方法名称
// index().then((e)=>{
  UserLists().then( (e)=>{
    // console.log(e.data);
    console.log(e);
     tableData.lists = e;
   });
// const tableData = [
//   {
//     uid: "1",
//     account:'xiaogou',
//     name: '小狗',
//     phone:'18963300000',
//     status: '在职',
//     add_time: '2022年09月1日',
//     last_time: '2022年09月2日',
//   },
// ];
// 添加修改确定按钮
const fun = () =>{
  console.log(fromData);
  //  有返回值
  // 传值 fromData
  UserSave(fromData).then((e)=>{
    console.log(e);
    // 方式一
    // alert('成功');
    // 方式二
    // ElMessage(e.ms);
    // 方式三
    if(e.code == 0){
                ElMessage({
                    message: e.msg,
                    type: 'success'
                });
            }else{
                ElMessage({
                    message: e.msg,
                    type: 'error'
                });
            }
    // if(e.code == 0){
    // }else{
    // }
    // 成功后关闭对话框
    xsfrom.is_from = false;
  })
};
// const add = (e,ee) =>{
const add = (e) =>{
  xsfrom.is_from = true;
  console.log(e);
  // console.log(ee);
  if (e !=0){
    xsfrom.title ="修改";
    fromData.account = e.account;
    fromData.phone = e.phone;
    fromData.name = e.name;
    fromData.status = e.status;
    fromData.add_time = e.add_time;
    fromData.password = '';
  }else{
    xsfrom.title ="添加";
    fromData.account = '';
    fromData.phone ='';
    fromData.name = '';
    fromData.password = '';
  }
};
</script>

编写php添加管理员接口和请求添加管理员接口

api.js接口
<?php
namespace app\index\controller;
use app\BaseController;
// 引入数据库门面类
use think\facade\Db;
// 普通类 不能跟门面类一起使用
// use think\Db;
// 引入请求门面类 request
use think\facade\Request;
// 每个文件必有一个class   不会有多个class
// 类名要与文件名保持一致
class Api extends BaseController
{
    // public function index(){
public function UserLists(){
        // 如果 是跨域问题，就两步
    // 1、设置 header 
    // 2\、设置中间件 
    //  是否允许跨域  中间件  middleware.php文件
    // \thinkl\middleware\AllowCrossDomain::class
    header("Access-Control-Allow-Origin:*");
    // echo 111;
    // 在thinkphp写接口 
    // 第一步：  接收传值，如果没有传值或者你需要传值，就把数据返回
    // 第二步： 把数据获取出来，进行整理
    // 第三步： 把数据返回回去，使用统一格式（xml \json）
    //  第四步  ：当我们把数据从数据库读取出来之后  ，整理成新数组，然后使用函数转为json格式，返回给调用者
        //--------------------------------
    // 拓展知识
//     JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色
// JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。
// JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
// JSON的值只能是以下几种数据格式，其他任何格式都会触发报错。
// 1, 数字，包含浮点数和整数
// 2, 字符串，需要包裹在双引号中
// 3, Bool值，true 或者 false
// 4, 数组，需要包裹在方括号中 []
// 5, 对象，需要包裹在大括号中 {}
// 6, Null
// 还需要注意的是 JSON 文件中无法使用注释，添加注释将会引发报错。
// json数据最后一个元素，不能有,号。数组和对象里的最后一个元素，也不能有,号。
        //--------------------------------
    // json 格式为主     但是在PHP中不方便，要先创建
    // 数组然后转为json格式
//    $json =' {
//     oy =>"欧阳";
//    }';
// echo $json;
// echo "<hr>";
// $arr = [
    // json 里面有 整邢、浮点型、字符串数据、布尔
// [
//     'uid' => 1,
//     'name' => '欧阳',
// ],
// [
//     'uid' => 2,
//     'name' => '欧阳',
// ],
// ];
// Array ( [0] => Array ( [uid] => 1 [name] => 欧阳 ) [1] => Array ( [uid] => 2 [name] => 欧阳 ) ) 
// print_r($arr);
// echo '<hr>';
// 将数组 转为 json 格式
// $json =json_encode($arr);
// [{"uid":1,"name":"\u6b27\u9633"},{"uid":2,"name":"\u6b27\u9633"}]
// print_r($json);
// echo'<hr>';
// 打印的是 字符串   string(65) "[{"uid":1,"name":"\u6b27\u9633"},{"uid":2,"name":"\u6b27\u9633"}]" 
// var_dump($json);
// echo '<hr>';
//   将json 改为 数组格式
//  $arr2 = json_decode($json,true);
//  Array ( [0] => Array ( [uid] => 1 [name] => 欧阳 ) [1] => Array ( [uid] => 2 [name] => 欧阳 ) ) 
//  print_r($arr2);
// echo '<hr>';
 $user =Db::table('lh_kds')->select()->toArray();
//  输出数组
// print_r($user);
// echo '<hr>';
// 注意顺序
if(!empty($user)){
                        //    注意加上& 符号，不然不能修改 $user 属性值
    foreach($user as &$user_v){
        if($user_v['status']  ==1){
            $user_v['status'] = '开启';
        }else{
            $user_v['status'] = '关闭';
        }
        $user_v['add_time'] = date('Y-m-d H:i:s', $user_v['add_time']);
        $user_v['last_time'] =  date('Y-m-d H:i:s',  $user_v['last_time'] );
    }
}
// print_r( $user_v);
// 数组转为字符串
$json=json_encode($user);
// 输出字符串
echo $json;
// 接口这里面的返回数据一定要注意共用性 
// 提前见附返回的数据转义
}
public  function UserSave(){
//    比如账户，传mysql 原生语句
//    链式Db类已经做了放置注入sql语句了
    // header("Access-Control-Allow-Origin:*");
    // 助手函数
    $post  = input ('post.');
    // print_r($post);
    $data = [
       'account' =>$post['account'],
    //    'password' =>md5($post['password']),
       'name' =>$post['name'],
       'status' =>$post['status'],
       'phone' =>$post['phone'],
       'add_time'=>time(),
    ];
   $insert = Db::table('lh_kds')->insert($data);
   if(empty( $insert)){
    $arr = [
        'code' => 1,
        'msg' => '失败'
      ];
   }else{
    $arr = [
        'code' => 0,
        'msg' => '成功'
      ];
   }
   json_encode($arr);
}
}