search

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

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

P粉314265155
P粉314265155原创
2022年09月19日 21:59:24369浏览

安装axios

  1. npm i axios -S

封装axios

  1. network/index.js
  2. import { request } from "./request";
  3. // 所有请求放到一个目录里面
  4. export function index(){
  5.   return  request({
  6.        url:"Api/index",
  7.        method :"get",
  8.     })
  9. }
  10. export function UserLists(){
  11.     return  request({
  12.          url:"Api/UserLists",
  13.          method :"post",
  14.       })
  15.   }
  17.                             //    接收穿过来的值 data
  18.   export function UserSave(data){
  19.     return  request({
  20.          url:"Api/UserSave",
  21.          method :"post",
  22.          data:data,
  23.       })
  24.   }
  1. network/request.js
  2. import axios from "axios";
  4. // config  就是下列参数
  5.   //   instan({
  6.     //          method :"get",
  7.     //          url :"Index.php/index/Api/index"
  8.     //   })
  9. export function request(config) {
  10.     // # 1.3、创建axios
  11.     const instance = axios.create({
  12.         baseURL: "http://bite.com/Index.php/index/",
  13.         timeout: 5000,
  14.     });
  15.     //请求拦截
  16.     instance.interceptors.request.use(
  17.         (config) => {
  18.             // 如果API需要认证， 在这统一设置
  19.             return config;
  20.         },
  21.         (err) => {
  23.         }
  24.     );
  25.     //响应拦截
  26.     instance.interceptors.response.use(
  27.         (res) => {
  28.             // return res.data ? res.data : res;
  29.             if(!res){
  30.                 alert ('未找到数据');
  31.                 return false;
  33.             }else{
  34.                 // alert ('找到数据');
  35.                 // return res;
  36.                 return res.data? res.data :res;
  37.             }
  38.         },
  39.         (err) => {
  40.             // 如果没有授权， 去login
  41.             // 如果有错误， 在这里可以提示
  42.         }
  43.     );
  44.     return instance(config);
  45. }

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

  1. user.vue
  2. <template>
  3.   <div style="margin: 0 0 20px 10px">
  4.                                                                     <!-- 增加点击事件，打开表单 -->
  5.     <el-button type="success" size="large" @click="add(0)">添加</el-button>
  6.   </div>
  7.   <!-- <el-form  label-width = "120px"> -->
  8.     <!-- <el-form-item label="姓名"> -->
  9.       <!-- 填写数据双向绑定     -->
  10.       <!-- <el-input /> -->
  11.     <!-- </el-form-item> -->
  12.     <!-- <el-form-item > -->
  13.     <!-- <el-button type="primary"  @click="onSubmit" >搜索</el-button> -->
  14.   <!-- </el-form-item> -->
  15.   <!-- </el-form> -->
  16.   <el-table :data="tableData.lists" border style="width: 100%" size="large">
  17.     <el-table-column prop="uid" label="ID"  />
  18.     <el-table-column prop="account" label="用户账户"  />
  19.     <el-table-column prop="name" label="姓名" />
  20.     <el-table-column prop="phone" label="手机号" />
  21.     <el-table-column prop="status" label="状态" />
  22.         <el-table-column prop="add_time" label="添加时间" />
  23.         <el-table-column prop="last_time" label="最后登录时间" />
  24.     <el-table-column label="操作">
  25.            <!-- default 这个是默认的插槽 -->
  26.             <!-- scope 是传值给这个插槽，这个值是什么呢？就是当前这条数据 -->
  27.               <!-- 当数据有多条时，放el-table 这个标签里，它会自动循环，每次循环都会把当前的循环值给到el-table-column -->
  28.       <template #default="scope">
  29.           <!-- @click="handleEdit(scope.$index, scope.row)" -->
  30.         <!-- <el-button size="small" type="primary" @click ="add(1)">修改1</el-button> -->
  31.             <!-- <el-button size="small" type="primary"  @click="add(scope.$index, scope.row)>修改2</el-button> -->
  32.             <el-button size="small" type="primary" @click="add(scope.row)">修改</el-button>
  33.         <el-button size="small" type="danger" >删除</el-button>
  34.       </template>
  35.     </el-table-column>
  36.   </el-table>
  37.    <!-- 增加 弹框  默认不显示  点击添加事件显示 -->
  38.   <el-dialog 
  39.   v-model="xsfrom.is_from" 
  40.   :title="xsfrom.title"
  41.    width="70%">
  42.        <!-- 添加 页面表单                  填写数据双向绑定                         与添加按钮关联，判断是否显示 -->
  43.   <el-form :model="fromData" label-width="120px" size="large"   >
  44.     <el-form-item label="账户">
  45.       <!-- 填写数据双向绑定     -->
  46.       <el-input v-model="fromData.account"  />
  47.     </el-form-item>
  48.     <el-form-item label="姓名">
  49.                 <el-input v-model="fromData.name" />
  50.             </el-form-item>
  51.             <el-form-item label="手机号">
  52.                 <el-input v-model="fromData.phone" />
  53.             </el-form-item>
  56.             <el-form-item label="密码">
  57.                 <el-input v-model="fromData.password" type = "password"  show-password />
  58.             </el-form-item>
  61.               <!-- 注意位置 -->
  62.             <el-form-item label="状态">
  63.                 <el-select v-model="fromData.status" placeholder="请选择状态">
  64.                     <el-option label="开启" :value="1" />
  65.                     <el-option label="关闭" :value="2" />
  66.                 </el-select>
  67.             </el-form-item>
  69.             <el-form-item label="入职时间">
  70.               <el-date-picker
  71.                     v-model="fromData.add_time"
  72.                     type="date"
  73.                     placeholder="请选择日期"
  74.                     :size="size"
  75.                 />
  76.               </el-form-item>
  77.             <el-button type="success" size="large" @click="fun">确定</el-button>
  79.   </el-form>
  81. </el-dialog>
  85. </template>
  87. <script setup>
  89. import { reactive } from 'vue';
  90. import axios from 'axios';
  91. import { index } from '../../../network/index.js';
  92. import { UserLists, UserSave} from '../../../network/index.js';
  93. import { ElMessage } from 'element-plus';
  94.   const xsfrom= reactive({
  95.     is_from : false,
  96.     title : "添加",
  97.   }) ;
  98.   const fromData= reactive( {
  99.      account :'',
  100.      name : '',
  101.         phone : '',
  102.         add_time : '',
  103.         status: 1,
  104.         password:'',
  106.   });
  108.   //  const instan =  axios.create({
  109.   //              baseURL : "http://bite.com",
  110.   //              timeout :5000,
  111.   //   });
  113.   //     instan({
  114.   //            method :"get",
  115.   //            url :"Index.php/index/Api/index"
  116.   //     }).then((e)=>{
  117.   //     console.log(e.data);
  118.   //     }).catch((e)=>{
  119.   //       console.log(e);
  120.   //     })
  121.   //  常量不允许赋值 这样是错误的 const tableData = []; 
  122.   // 正确的应该：  改为响应式的 ，注意lists给表单 匹配
  123. const tableData = reactive ({
  124.    lists : [ ]
  125. });
  126. // 更换方法名称
  127. // index().then((e)=>{
  128.   UserLists().then( (e)=>{
  129.     // console.log(e.data);
  130.     console.log(e);
  131.      tableData.lists = e;
  132.    });
  134. // const tableData = [
  135. //   {
  136. //     uid: "1",
  137. //     account:'xiaogou',
  138. //     name: '小狗',
  139. //     phone:'18963300000',
  140. //     status: '在职',
  141. //     add_time: '2022年09月1日',
  142. //     last_time: '2022年09月2日',
  143. //   },
  144. // ];
  145. // 添加修改确定按钮
  146. const fun = () =>{
  147.   console.log(fromData);
  149.   //  有返回值
  150.   // 传值 fromData
  151.   UserSave(fromData).then((e)=>{
  152.     console.log(e);
  153.     // 方式一
  154.     // alert('成功');
  155.     // 方式二
  156.     // ElMessage(e.ms);
  157.     // 方式三
  158.     if(e.code == 0){
  159.                 ElMessage({
  160.                     message: e.msg,
  161.                     type: 'success'
  162.                 });
  163.             }else{
  164.                 ElMessage({
  165.                     message: e.msg,
  166.                     type: 'error'
  167.                 });
  168.             }
  170.     // if(e.code == 0){
  172.     // }else{
  174.     // }
  175.     // 成功后关闭对话框
  176.     xsfrom.is_from = false;
  177.   })
  178. };
  179. // const add = (e,ee) =>{
  180. const add = (e) =>{
  181.   xsfrom.is_from = true;
  182.   console.log(e);
  183.   // console.log(ee);
  184.   if (e !=0){
  185.     xsfrom.title ="修改";
  186.     fromData.account = e.account;
  187.     fromData.phone = e.phone;
  188.     fromData.name = e.name;
  189.     fromData.status = e.status;
  190.     fromData.add_time = e.add_time;
  191.     fromData.password = '';
  192.   }else{
  193.     xsfrom.title ="添加";
  194.     fromData.account = '';
  195.     fromData.phone ='';
  196.     fromData.name = '';
  197.     fromData.password = '';
  199.   }
  200. };
  202. </script>

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

  1. api.js接口
  2. <?php
  3. namespace app\index\controller;
  5. use app\BaseController;
  6. // 引入数据库门面类
  7. use think\facade\Db;
  9. // 普通类 不能跟门面类一起使用
  10. // use think\Db;
  11. // 引入请求门面类 request
  12. use think\facade\Request;
  14. // 每个文件必有一个class   不会有多个class
  15. // 类名要与文件名保持一致
  16. class Api extends BaseController
  17. {
  18.     // public function index(){
  19. public function UserLists(){
  20.         // 如果 是跨域问题，就两步
  21.     // 1、设置 header 
  22.     // 2\、设置中间件 
  23.     //  是否允许跨域  中间件  middleware.php文件
  24.     // \thinkl\middleware\AllowCrossDomain::class
  25.     header("Access-Control-Allow-Origin:*");
  26.     // echo 111;
  27.     // 在thinkphp写接口 
  28.     // 第一步：  接收传值，如果没有传值或者你需要传值，就把数据返回
  29.     // 第二步： 把数据获取出来，进行整理
  30.     // 第三步： 把数据返回回去，使用统一格式（xml \json）
  31.     //  第四步  ：当我们把数据从数据库读取出来之后  ，整理成新数组，然后使用函数转为json格式，返回给调用者
  32.         //--------------------------------
  33.     // 拓展知识
  34. //     JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色
  35. // JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。
  36. // JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
  37. // JSON的值只能是以下几种数据格式，其他任何格式都会触发报错。
  38. // 1, 数字，包含浮点数和整数
  39. // 2, 字符串，需要包裹在双引号中
  40. // 3, Bool值，true 或者 false
  41. // 4, 数组，需要包裹在方括号中 []
  42. // 5, 对象，需要包裹在大括号中 {}
  43. // 6, Null
  44. // 还需要注意的是 JSON 文件中无法使用注释，添加注释将会引发报错。
  45. // json数据最后一个元素，不能有,号。数组和对象里的最后一个元素，也不能有,号。
  46.         //--------------------------------
  48.     // json 格式为主     但是在PHP中不方便，要先创建
  49.     // 数组然后转为json格式
  50. //    $json =' {
  51. //     oy =>"欧阳";
  52. //    }';
  53. // echo $json;
  54. // echo "<hr>";
  55. // $arr = [
  56.     // json 里面有 整邢、浮点型、字符串数据、布尔
  57. // [
  58. //     'uid' => 1,
  59. //     'name' => '欧阳',
  60. // ],
  61. // [
  62. //     'uid' => 2,
  63. //     'name' => '欧阳',
  64. // ],
  65. // ];
  66. // Array ( [0] => Array ( [uid] => 1 [name] => 欧阳 ) [1] => Array ( [uid] => 2 [name] => 欧阳 ) ) 
  67. // print_r($arr);
  68. // echo '<hr>';
  69. // 将数组 转为 json 格式
  70. // $json =json_encode($arr);
  71. // [{"uid":1,"name":"\u6b27\u9633"},{"uid":2,"name":"\u6b27\u9633"}]
  72. // print_r($json);
  74. // echo'<hr>';
  75. // 打印的是 字符串   string(65) "[{"uid":1,"name":"\u6b27\u9633"},{"uid":2,"name":"\u6b27\u9633"}]" 
  76. // var_dump($json);
  77. // echo '<hr>';
  78. //   将json 改为 数组格式
  79. //  $arr2 = json_decode($json,true);
  80. //  Array ( [0] => Array ( [uid] => 1 [name] => 欧阳 ) [1] => Array ( [uid] => 2 [name] => 欧阳 ) ) 
  81. //  print_r($arr2);
  82. // echo '<hr>';
  83.  $user =Db::table('lh_kds')->select()->toArray();
  84. //  输出数组
  85. // print_r($user);
  86. // echo '<hr>';
  88. // 注意顺序
  89. if(!empty($user)){
  90.                         //    注意加上& 符号，不然不能修改 $user 属性值
  91.     foreach($user as &$user_v){
  92.         if($user_v['status']  ==1){
  93.             $user_v['status'] = '开启';
  94.         }else{
  95.             $user_v['status'] = '关闭';
  96.         }
  97.         $user_v['add_time'] = date('Y-m-d H:i:s', $user_v['add_time']);
  98.         $user_v['last_time'] =  date('Y-m-d H:i:s',  $user_v['last_time'] );
  99.     }
  100. }
  101. // print_r( $user_v);
  103. // 数组转为字符串
  104. $json=json_encode($user);
  105. // 输出字符串
  106. echo $json;
  107. // 接口这里面的返回数据一定要注意共用性 
  108. // 提前见附返回的数据转义
  111. }
  112. public  function UserSave(){
  114. //    比如账户，传mysql 原生语句
  115. //    链式Db类已经做了放置注入sql语句了
  117.     // header("Access-Control-Allow-Origin:*");
  118.     // 助手函数
  119.     $post  = input ('post.');
  120.     // print_r($post);
  121.     $data = [
  122.        'account' =>$post['account'],
  123.     //    'password' =>md5($post['password']),
  124.        'name' =>$post['name'],
  125.        'status' =>$post['status'],
  126.        'phone' =>$post['phone'],
  127.        'add_time'=>time(),
  128.     ];
  129.    $insert = Db::table('lh_kds')->insert($data);
  130.    if(empty( $insert)){
  131.     $arr = [
  132.         'code' => 1,
  133.         'msg' => '失败'
  134.       ];
  135.    }else{
  136.     $arr = [
  137.         'code' => 0,
  138.         'msg' => '成功'
  139.       ];
  140.    }
  142.    json_encode($arr);
  143. }
  146. }
上一条：2022年9月19日测试 IntelliJ IDEA永久激活 2022.2最新激活码 破解 账号一年 教育授权学生账号注册图文教程下一条：MarkDown使用指南
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多