Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 1、安装axios。 2、封装axios。 3、编写php管理员接口。 4、获取管理员接口数据。。 5、编写php添加管理员接口。6、请求添加管理员接口
Blogger Information
Blog 46
fans 2
comment 0
visits 19590
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
1、安装axios。 2、封装axios。 3、编写php管理员接口。 4、获取管理员接口数据。。 5、编写php添加管理员接口。6、请求添加管理员接口
P粉314265155
Original
368 people have browsed it

安装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. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post