search

博客列表 >专门处理网络请求的axios的安装及其示例与管理员查询数据与添加数据

专门处理网络请求的axios的安装及其示例与管理员查询数据与添加数据

P粉479712293
P粉479712293原创
2023年03月17日 23:22:27523浏览

题目1：专门处理网络请求的axios的安装及其示例

1.

2.

3.

4.

5.

6.

7.

题目2：管理员查询数据与添加数据

一.文件：

1.App.vue文件：

  1. <template>
  2.   <el-container class="layout" style="height: 100%">
  3.       <aside style="height: 100%">
  4.           <el-menu default-active="-1" class="el-menu-vertical-demo" :collapse="isCollapse" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff">
  5.               <div class="logo">
  6.                   <router-link to="/" class="router">
  7.                       <img src="" alt="logo" />
  8.                       <h1>phpAdmin</h1>
  9.                   </router-link>
  10.               </div>
  11.               <router-link to="/">
  12.                   <el-menu-item index="-1">
  13.                       <template #title>
  14.                           首页
  15.                       </template>
  16.                   </el-menu-item>
  17.               </router-link>
  18.               <el-sub-menu index="2">
  19.                   <template #title>
  20.                       <span>课袋鼠项目</span>
  21.                   </template>
  22.                   <router-link to="/ad">
  23.                     <el-menu-item index="2-1">
  24.                       <span>广告管理</span>
  25.                     </el-menu-item>
  26.                   </router-link>
  27.                   <router-link to="/course">
  28.                     <el-menu-item index="2-2">
  29.                       <span>课程管理</span>
  30.                     </el-menu-item>
  31.                   </router-link> 
  32.                   <el-menu-item index="2-3">
  33.                       <span>用户管理</span>
  34.                   </el-menu-item>
  35.                   <el-menu-item index="2-4">
  36.                       <span>订单管理</span>
  37.                   </el-menu-item>
  38.                   <el-menu-item index="2-5">
  39.                       <span>优惠券管理</span>
  40.                   </el-menu-item>
  41.               </el-sub-menu>
  42.               <el-sub-menu index="3">
  43.                   <template #title>
  44.                       <span>后台管理系统</span>
  45.                   </template>
  46.                   <router-link to="/admin_user">
  47.                       <el-menu-item index="3-1">
  48.                           <span>管理员管理</span>
  49.                       </el-menu-item>
  50.                   </router-link>
  51.                   <router-link to="/ad">
  52.                       <el-menu-item index="3-2">
  53.                           <span>菜单管理</span>
  54.                       </el-menu-item>
  55.                   </router-link>
  56.               </el-sub-menu>
  57.           </el-menu>
  58.           <div class="flexible" @click="isCollapse = !isCollapse">
  59.               <el-icon v-if="isCollapse" color="white" :size="40"><ArrowRight /></el-icon>
  60.               <el-icon v-else color="white" :size="40"><ArrowLeft /></el-icon>
  61.           </div>
  62.       </aside>
  63.       <el-container>
  64.           <el-header style="text-align: right; font-size: 20px">
  65.               <div class="toolbar">
  66.                   <el-dropdown size="large" type="primary">
  67.                       <span>{{name}}<el-icon style="margin-left: 8px; margin-top: 1px"><ArrowDown /></el-icon></span>
  68.                       <template #dropdown>
  69.                           <el-dropdown-menu>
  70.                               <el-dropdown-item>个人中心</el-dropdown-item>
  71.                               <el-dropdown-item>退出</el-dropdown-item>
  72.                           </el-dropdown-menu>
  73.                       </template>
  74.                   </el-dropdown>
  75.               </div>
  76.           </el-header>
  77.           <el-main>
  78.               <router-view></router-view>
  79.           </el-main>
  80.       </el-container>
  81.   </el-container>
  82. </template>
  83. <script>
  84. import { reactive, toRefs } from "vue";
  85. // import axios from "axios";
  86. export default {
  87.   name: "App",
  88.   setup() {
  89.       // 获取左侧菜单和用户信息
  90.       const state = reactive({
  91.           isCollapse: false,
  92.           name : "欧阳克"
  93.       });
  94.       // const instan=axios.create({
  95.       //   baseURL:"http://www.by2.com/",
  96.       //   timeout:5000,
  97.       // });
  98.       // instan({
  99.       //   method:"get",
  100.       //   // url:"index.php/index/Api/index"
  101.       //   // 在tp2项目中
  102.       //   url:"index.php/Api2/index"
  103.       // }).then((e)=>{
  104.       //   console.log(e.data);
  105.       // }).catch((e)=>{
  106.       //   console.log(e);
  107.       // })
  108.       return {
  109.           ...toRefs(state),
  110.       };
  111.   }
  112. };
  113. </script>
  114. <style>
  115. a {
  116.   text-decoration: none;
  117. }
  118. .layout {
  119.   background-color: #f0f2f5;
  120. }
  121. .layout .el-header {
  122.   position: relative;
  123.   background-color: white;
  124.   color: var(--el-text-color-primary);
  125. }
  126. .layout aside {
  127.   color: var(--el-text-color-primary);
  128.   background: #001529;
  129. }
  130. .layout .el-menu {
  131.   border-right: none;
  132. }
  133. .layout .el-main {
  134.   margin: 30px 10px;
  135.   background-color: white;
  136. }
  137. .layout .toolbar {
  138.   display: inline-flex;
  139.   align-items: center;
  140.   justify-content: center;
  141.   height: 100%;
  142.   right: 20px;
  143. }
  144. aside {
  145.   position: relative;
  146. }
  147. .flexible {
  148.   background-color: #002140;
  149.   text-align: center;
  150.   position: absolute;
  151.   bottom: 0px;
  152.   left: 0px;
  153.   right: 0px;
  154. }
  155. .el-menu-vertical-demo:not(.el-menu--collapse) {
  156.   width: 200px;
  157.   min-height: 400px;
  158. }
  159. .layout aside .logo .router {
  160.   display: flex;
  161.   justify-content: space-evenly;
  162.   align-items: center;
  163.   animation-duration: 0.1s;
  164.   overflow: hidden;
  165.   text-decoration: none;
  166.   padding-left: 1px;
  167.   position: relative;
  168.   left: 2px;
  169. }
  170. .layout aside .logo .router h1 {
  171.   margin-left: 10px;
  172.   color: aliceblue;
  173.   overflow: hidden;
  174. }
  175. .layout aside .logo .router img {
  176.   padding-left: 5px;
  177.   width: 48px;
  178.   height: 48px;
  179. }
  180. </style>

2.user.vue文件

  1. <template>
  2.     <div style="margin:0 0 20px 0;">
  3.       <!-- 当添加按钮点击时调用add方法并传一个为0的值 -->
  4.       <el-button type="success" size="large" @click="add(0)">添加</el-button>
  5.     </div>
  6.     <el-form label-width="120px" :inline="true">
  7.       <el-form-item label="搜索项">
  8.          <el-select  placeholder="请选择您要搜索的项">
  9.            <el-option label="姓名" value="" />
  10.            <el-option label="手机" value="" />
  11.          </el-select>
  12.       </el-form-item>
  13.       <el-form-item>
  14.         <el-button type="primary">搜索</el-button>
  15.       </el-form-item>
  16.     </el-form>
  17.     <el-table :data="tableData.lists" border style="width: 100%" size="large">
  18.       <el-table-column prop="uid" label="ID" />
  19.       <el-table-column prop="account" label="账号" />
  20.       <el-table-column prop="name" label="姓名" />
  21.       <el-table-column prop="phone" label="手机号" />
  22.       <el-table-column prop="status" label="状态" />
  23.       <el-table-column prop="add_time" label="入职时间" />
  24.       <el-table-column prop="last_time" label="最后登录时间" />
  25.       <el-table-column label="操作">
  26.            <template #default="scope">
  27.               <el-button size="small" type="primary" @click="add(scope.row)">修改</el-button>
  28.               <el-button size="small" type="danger">删除</el-button>
  29.             </template>
  30.         </el-table-column>
  31.     </el-table>
  32.     <!-- 弹出的对话框(弹窗) -->
  33.   <el-dialog v-model="data.is_form" :title="data.title" width="30%">
  34.     <!-- 弹窗中的表单 -->
  35.     <el-form :model="fromData" label-width="120px" size="small">
  36.       <el-form-item label="账号">
  37.         <el-input v-model="fromData.account"/>
  38.       </el-form-item>
  39.       <el-form-item label="密码">
  40.         <el-input v-model="fromData.password" type="password" show-password />
  41.       </el-form-item>
  42.       <el-form-item label="姓名">
  43.         <el-input v-model="fromData.name"/>
  44.       </el-form-item>
  45.       <el-form-item label="手机号">
  46.         <el-input v-model="fromData.phone"/>
  47.       </el-form-item>
  48.       <el-form-item label="状态">
  49.          <el-select v-model="fromData.status"  placeholder="请选择状态">
  50.            <el-option label="开启" :value="1" />
  51.            <el-option label="关闭" :value="0" />
  52.          </el-select>
  53.       </el-form-item>
  54.       <el-form-item label="入职时间">
  55.         <el-date-picker
  56.         v-model="fromData.add_time"
  57.         type="date"
  58.         placeholder="选一日期"
  59.         :size="size"
  60.       />
  61.       <!-- <el-date-picker
  62.         v-model="fromData.add_time"
  63.         type="date"
  64.         placeholder="Pick a day"
  65.         :disabled-date="disabledDate"
  66.         :shortcuts="shortcuts"
  67.         :size="size"
  68.       /> -->
  69.       </el-form-item>
  70.       <el-form-item label="最后登录时间">
  71.         <el-date-picker
  72.         v-model="fromData.last_time"
  73.         type="date"
  74.         placeholder="选一日期"
  75.         :size="size"
  76.       />
  77.       </el-form-item>
  78.       <!-- '确定'按钮 -->
  79.       <el-button type="success" size="largr" @click="fun">确定</el-button>
  80.     </el-form>
  81.   </el-dialog>
  82. </template>
  83. <script setup>
  84.   //从vue中引入响应式数据reactive(数据改变后视图也会自动更新，就叫响应式数据)
  85.   import {reactive} from 'vue';
  86.   import axios from "axios";
  87.   //引入index.js文件中的UserLists,UserSave方法
  88.   import {UserLists,UserSave} from "../../network/index.js"
  89.   // 引入element组件中的消息框
  90.   import { ElMessage } from 'element-plus';
  91.   // 引入element组件中的告示框
  92.   import { alertProps } from 'element-plus';
  93.   // reactive表示data下有多个值，如data.is_form,data.title
  94.   const data=reactive({
  95.     is_form:false,
  96.     title:"添加"
  97.   });
  98.   const fromData=reactive({
  99.     account:'',
  100.     password:'',
  101.     name:'',
  102.     phone:'',
  103.     add_time:'',
  104.     last_time:'',
  105.     status:1,
  106.   });
  107.   const tableData=reactive({
  108.     lists:[]
  109.   });
  110.   UserLists().then((e)=>{
  111.     tableData.lists=e;
  112.   })
  113.   // 添加和修改弹框
  114.   const add=(e)=>{ //e传一个0的值（看第4行）
  115.     console.log(e);
  116.     data.is_form=true;//
  117.     if(e!=0){
  118.       data.title="修改";
  119.       fromData.account=e.account;
  120.       fromData.name=e.name;
  121.       fromData.phone=e.phone;
  122.       // fromData.password="";
  123.     }else{
  124.       data.title="添加";
  125.       fromData.account="";
  126.       fromData.name="";
  127.       fromData.phone="";
  128.       fromData.add_time="";
  129.       fromData.last_time="";
  130.       fromData.password="";
  131.     }
  132.   }
  133.   //'确定'按钮点击时调用以下fun方法
  134.   const fun=()=>{
  135.     console.log(fromData);
  136.     UserSave(fromData).then((e)=>{
  137.       //console.log(e);
  138.       // alert(e.msg);
  139.       // console.log(fromData.add_time);
  140.       // console.log(fromData.last_time);
  141.       data.is_form=false;//弹窗关闭
  142.     UserLists().then((e)=>{
  143.       tableData.lists=e;
  144.     })
  145.       if(e.code==0){
  146.           ElMessage({
  147.             message: e.msg,
  148.             type: 'success',
  149.           })
  150.       }else{
  151.         ElMessage({
  152.            message: e.msg,
  153.            type: 'error',
  154.         })
  155.       }
  156.     })
  157.     // data.is_form=false;//弹窗关闭
  158.     // UserLists().then((e)=>{
  159.     //   tableData.lists=e;
  160.     // })
  161.   }
  162. </script>

3.Api2.php文件

  1. <?php
  2. namespace app\controller;
  3. use app\BaseController;
  4. // *要使用Db类必须使用门面方式（ think\facade\Db ）调用
  5. use think\facade\Db;
  6. // *引用门面方式的请求类
  7. use think\facade\Request;
  8. class Api2 extends BaseController{
  9.     //public function index(){
  10.         //header("Access-Control-Allow-Origin:*");
  11.         //------------------------------------
  12.         // echo 333;
  13.         //------------------------------------
  14.         // json格式，叫json字符串，在php中，不方便创建，先创建数组，用数组转成json格式
  15.         //------------------------------------
  16.         // $json = '{
  17.         //     ouyangke => "欧阳克"
  18.         // }';
  19.         // echo $json;
  20.         //------------------------------------
  21.         // 数组格式
  22.         // $arr = [
  23.         //     [
  24.         //         'uid' => 1,
  25.         //         'name' => '欧阳克'
  26.         //     ],
  27.         //     [
  28.         //         'uid' => 2,
  29.         //         'name' => '朱天蓬'
  30.         //     ]
  31.         // ];
  32.         //      print_r($arr);
  33.         //------------------------------------
  34.         // 把数组转换成json格式
  35.         // $arr = [
  36.         //     [
  37.         //         'uid' => 1,
  38.         //         'name' => '欧阳克'
  39.         //     ],
  40.         //     [
  41.         //         'uid' => 2,
  42.         //         'name' => '朱天蓬'
  43.         //     ]
  44.         // ];
  45.         // $json = json_encode($arr);
  46.         //  print_r($json);
  47.           // [{"uid":1,"name":"\u6b27\u9633\u514b"},{"uid":2,"name":"\u6731\u5929\u84ec"}]
  48.         //------------------------------------
  49.         // 使用var_dump判断json是一个字符串////------------------------------------//------------------------------------ // 打印json数据的类型，是字符串
  50.         // $arr = [
  52.         //     [
  53.         //         'uid' => 1,
  54.         //         'name' => '欧阳克'
  55.         //     ],
  56.         //     [
  57.         //         'uid' => 2,
  58.         //         'name' => '朱天蓬'
  59.         //     ]
  60.         // ];
  61.         // $json = json_encode($arr);
  62.         //  var_dump($json);
  63.         //  string(77) "[{"uid":1,"name":"\u6b27\u9633\u514b"},{"uid":2,"name":"\u6731\u5929\u84ec"}]" 
  64.         //------------------------------------
  65.         // 把json转换为数组的形式
  66.         // $json = '[{"uid":1,"name":"\u6b27\u9633\u514b"},{"uid":2,"name":"\u6731\u5929\u84ec"}]';
  67.         //  $array = json_decode($json,true);
  68.         //  print_r($array);
  69.         //------------------------------------
  70.         //  用户表转换为数组形式
  71.         //$arr_user = Db::table('bew_user')->select()->toArray();
  72.         //打印
  73.         // print_r($arr_user);
  74.         // if(!empty( $arr_user)){
  75.         //     foreach( $arr_user as &$user_v){
  76.         //         if($user_v['status'] == 1){
  77.         //             $user_v['status_s'] = '开启';
  78.         //         }else{
  79.         //             $user_v['status_s'] = '关闭';
  80.         //         }
  81.         //         //把时间的值由时间戳改为年月日
  82.         //         $user_v['add_time'] = date('Y-m-d',$user_v['add_time']);
  83.         //         $user_v['last_time'] = date('Y-m-d',$user_v['last_time']);
  84.         //     }
  85.         // }
  86.         // 用户表由数组形式转换为json形式
  87.         //$json_user = json_encode( $arr_user);
  88.         //输出
  89.         // echo $json_user;
  90.         //也可以打印的方法
  91.         // print_r($json_user);
  92.         //------------------------------------
  93.     //}
  94.     public function UserLists(){
  95.         //header("Access-Control-Allow-Origin:*");
  96.         //  用户表转换为数组形式
  97.         $arr_user = Db::table('bew_user')->select()->toArray();
  98.         if (!empty($arr_user)) {
  99.             foreach ($arr_user as & $user_v) {
  100.                 if ($user_v['status'] == 1) {
  101.                     $user_v['status'] = '开启';
  102.                 } else {
  103.                     $user_v['status'] = '关闭';
  104.                 }
  105.                 //把时间的值由时间戳改为年月日
  106.                $user_v['add_time'] = date('Y-m-d', $user_v['add_time']);
  107.                 $user_v['last_time'] = date('Y-m-d', $user_v['last_time']);
  108.             }
  109.         }
  110.         // 用户表由数组形式转换为json形式
  111.         $json_user = json_encode($arr_user);
  112.         //输出
  113.         //   echo $json_user;
  114.         //也可以打印的方法
  115.         print_r($json_user);
  116.     }
  117.     public function UserSave(){
  118.         //header("Access-Control-Allow-Origin:*");
  119.         //$post相当于前台的弹窗表单
  120.         $post=input('post.');
  121.         //print_r($post);
  122.        //以下$data就是要传的数据
  123.        $data=[
  124.             'account' => $post['account'],//如'account'是$post下的'account'传过来的
  125.             'password'=>md5($post['password']),
  126.             'name' => $post['name'],
  127.             'phone' => $post['phone'],
  128.             'status' => $post['status'],
  129.            // 'add_time'=>time(),//time()表示当前日期
  130.            //strtotime表示获取某个时间的时间戳
  131.             'add_time'=>strtotime($post['add_time']),
  132.            // 'last_time'=>strtotime($post['last_time'])//数据库中如果对该字段(add_time)设为不可null,则该项就要加上去(即不能注释)
  133.             'last_time'=>strtotime($post['last_time']),
  134.        ];
  135.     //    print_r ($data);
  136.         $insert = Db::table('bew_user')->insert($data);
  137.         if(empty($insert)){
  138.             $arr=[
  139.                 'code'=>1,//以上添加中的插入语句通常返回为code码，有0或1，0表示成功，1表示失败，这里用数组包括0及1
  140.                 'msg'=>'失败'
  141.               ];
  142.         }else{
  143.             $arr=[
  144.                 'code'=>0,
  145.                 'msg'=>'成功'
  146.               ];
  147.         }
  148.         echo json_encode( $arr);// 由数组形式转换为json形式
  149.     }
  150. }

二.浏览器运行效果：

1.

2.

3.

4.

上一条：VUE TS语法tsconfig.json配置下一条：第五课:简单的页面结构布局,字体图标和媒体查询的综合应用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多