实战2ele与tp：添加修改删除管理员，管理组操作

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
一、涉及代码文件文件：
  • shop/src/views/User.vue（更新：管理员新增/修改/删除操作）
  • shop/src/views/Group.vue（新增：管理组新增/修改/删除/搜索方法）
  • tp6/app/admin/controller/Index.php（更新：管理员新增/修改/删除操作方法、管理组新增/修改/删除/搜索方法，给User.vue和Group.vue访问提供数据）
  • shop/src/network/index.js（更新：管理员新增/修改/删除请求方法，管理组新增/修改/删除/请求方法）
1、User.vue文件代码
  1. <template>
  2.     <div>
  3.     <el-space wrap style="margin-bottom:20px;">
  4.         <el-input v-model="data.search" size="small" placeholder="Type to search" />
  5.         <el-button type="" @click="search()">搜索</el-button>
  6.     </el-space>
  7.     <el-space wrap>
  8.         <el-button type="" @click="add()">添加</el-button>
  9.     </el-space>
  11.     <el-table 
  12.         :data="data.table" 
  13.         border 
  14.         style="width: 100%"
  15.         @select="select"
  16.     >
  17.     <!--
  18.     <el-table-column align="right">
  19.     </el-table-column>
  20.       <el-table-column label="选择" type="selection" />-->
  21.       <el-table-column prop="uid" label="ID" min-width="50" />
  22.       <el-table-column prop="name" label="Name" />
  23.       <el-table-column prop="account" label="账号" />
  24.       <el-table-column prop="phone" label="手机号" />
  25.       <el-table-column prop="qq" label="QQ">
  26.       </el-table-column>
  27.       <el-table-column prop="sex" label="性别">
  28.         <!--插槽-->
  29.         <!-- scope 相当于循环里的一次数据
  30.             foreach ( $data['table] as $v)
  31.             scope.row 就是相当于是 $v
  32.             -->
  33.         <template #default="scope">
  34.             <span v-if="scope.row.sex == 'mimi'">
  35.                 保密
  36.             </span>
  37.             <span v-else-if="scope.row.sex == 'nan'">
  38.                 男
  39.             </span>
  40.             <span v-else-if="scope.row.sex == 'nv'">
  41.                 女
  42.             </span>
  43.         </template>
  44.       </el-table-column>
  45.       <el-table-column prop="uid" label="修改" width="160px;">
  47.         <template #default="scope">
  48.             <el-space wrap>
  49.                 <!--传点击这条数据的( scope.row )-->
  50.                 <el-button type="warning" @click="add(scope.row)">修改</el-button>
  51.             </el-space>
  52.             <el-space wrap>
  53.                 <el-button type="danger" @click="del(scope.row)">删除</el-button>
  54.             </el-space>
  55.         </template>
  56.       </el-table-column>
  57.     </el-table>
  58.     <el-pagination 
  59.         layout="prev, pager, next" 
  60.         :total="data.total"
  61.         :page-size="5"
  62.         @current-change="fun"
  63.     />
  64.     <!--
  65.         total:总条数
  66.         page-size:一页显示多少条
  67.     -->
  69.     <!--添加/修改 弹窗-->
  70.     <el-dialog v-model="data.add_form" :title="data.title">
  71.         <el-form :model="form" label-width="120px">
  72.             <el-form-item label="账号">
  73.                 <el-input v-model="form.account" />
  74.             </el-form-item>
  75.             <el-form-item label="密码">
  76.                 <el-input v-model="form.password" />
  77.             </el-form-item>
  78.             <el-form-item label="姓名">
  79.                 <el-input v-model="form.name" />
  80.             </el-form-item>
  81.             <el-form-item label="手机号">
  82.                 <el-input v-model="form.phone" />
  83.             </el-form-item>
  84.             <el-form-item label="QQ号">
  85.                 <el-input v-model="form.qq" />
  86.             </el-form-item>
  87.             <el-form-item label="性别">
  88.                 <el-select v-model="form.sex" class="m-2" placeholder="Select" size="large">
  89.                     <el-option label="男" value="nan" />
  90.                     <el-option label="女" value="nv" />
  91.                     <el-option label="保密" value="mimi" />
  92.                 </el-select>
  93.             </el-form-item>
  94.         </el-form>
  96.         <template #footer>
  97.             <span class="dialog-footer">
  98.                 <el-button @click="data.add_form = false">取消</el-button>
  99.                 <el-button type="primary" @click="add_form_json()">
  100.                     {{ data.title }}
  101.                 </el-button>
  102.             </span>
  103.         </template>
  105.     </el-dialog>
  107. </div>
  108. </template>
  109. <script>
  110. import { reactive } from "vue"; // 引入动态创建
  111. import { UserLists , UserAdd ,UserDel } from "../network/index";
  112. export default{
  113.     setup () {
  114.         // 展示数据
  115.         const data = reactive({
  116.             table : [],
  117.             total : 0,
  118.             search : '',
  119.             add_form : false,
  120.             title : '添加',
  121.         });
  123.         // 展示的请求接口
  124.         UserLists().then( (e)=>{
  125.             data.table = e.data.data.user;
  126.             data.total = e.data.data.count;
  127.             console.log(data.table);
  128.         })
  130.         // 选择事件
  131.         const select = (selection,row)=>{
  132.             console.log(selection);
  133.             console.log(row);
  134.         }
  136.         // 翻页方法
  137.         const fun = (p) => {
  138.             UserLists({p:p}).then( (e)=>{
  139.                 data.table = e.data.data.user;
  140.                 data.total = e.data.data.count;
  141.             })
  142.             // Index.php接收传值
  143.         }
  145.         // 搜索方法
  146.         const search = () => {
  147.             UserLists({search:data.search}).then( (e)=>{
  148.                 data.table = e.data.data.user;
  149.                 data.total = e.data.data.count;
  150.             })
  151.         }
  153.         // 添加 修改
  154.         // 展开form表单
  155.         const form = reactive({
  156.             uid : 0,
  157.             account: '',
  158.             password: '',
  159.             name : '',
  160.             phone : '',
  161.             qq: '',
  162.             sex: 'nan',
  163.         })
  164.         // 添加方法,如果为真,打开表单
  165.         // 点击接收传uid数据,若有
  166.         const add = (e) => {
  167.             console.log(e);
  168.             data.add_form = true;
  169.             if(e){
  170.                 form.uid = e.uid;
  171.                 form.account = e.account;
  172.                 form.password = '';
  173.                 form.name = e.name;
  174.                 form.phone = e.phone;
  175.                 form.qq = e.qq;
  176.                 form.sex = e.sex;
  177.                 data.title = '修改';
  178.             }else{
  179.                 form.uid = 0;
  180.                 form.account = '';
  181.                 form.password = '';
  182.                 form.name = '';
  183.                 form.phone = '';
  184.                 form.qq = '';
  185.                 form.sex = 'nan';
  186.                 data.title = '添加';
  187.             }
  188.         }
  189.         // 确定提交添加的数据
  190.         const add_form_json = () => {
  191.             // 需要把数据提交给php接口
  192.             // console.log(form);
  193.             UserAdd(form).then((e) =>{
  194.                 // console.log(e);
  195.                 alert(e.data.msg);
  196.                 if(e.data.code == 0){
  197.                     UserLists().then( (e)=>{
  198.                         // 添加成功后自动刷新数据
  199.                         data.table = e.data.data.user;
  200.                         data.total = e.data.data.count;
  201.                         console.log(data.table);
  202.                         // 关闭添加表单
  203.                         data.add_form = false;
  204.                     })
  205.                 }
  206.             })
  207.         }
  209.         // 删除
  210.         const del = (e) => {
  211.             UserDel({uid:e.uid}).then( (res) => {
  212.                 alert(res.data.msg);
  213.                 if( res.data.code == 0 ){
  214.                     UserLists().then( (e)=>{
  215.                         // 添加成功后自动刷新数据
  216.                         data.table = e.data.data.user;
  217.                         data.total = e.data.data.count;
  218.                         data.add_form = false;
  219.                     })
  220.                 }
  221.             })
  222.         }
  224.         // 数据暴露出去
  225.         return {
  226.             data,
  227.             select,
  228.             fun,
  229.             search,
  230.             add,
  231.             form,
  232.             add_form_json,
  233.             del,
  234.         }
  235.     }
  236. }
  237. </script>
2、Index.php文件代码
  1. <?php
  2. namespace app\admin\controller;
  4. use app\BaseController;
  5. use think\facade\Db;
  7. class Index extends BaseController
  8. {
  9.     public function __construct(){
  10.         // 跨域请求
  11.         header("Access-Control-Allow-Origin:*");
  12.     }
  14.     public function index()
  15.     {
  16.         return '<style type="text/css">*{ padding: 0; margin: 0; } div{ padding: 4px 48px;} a{color:#2E5CD5;cursor: pointer;text-decoration: none} a:hover{text-decoration:underline; } body{ background: #fff; font-family: "Century Gothic","Microsoft yahei"; color: #333;font-size:18px;} h1{ font-size: 100px; font-weight: normal; margin-bottom: 12px; } p{ line-height: 1.6em; font-size: 42px }</style><div style="padding: 24px 48px;"> <h1>:) </h1><p> ThinkPHP V' . \think\facade\App::version() . '<br/><span style="font-size:30px;">16载初心不改 - 你值得信赖的PHP框架</span></p><span style="font-size:25px;">[ V6.0 版本由 <a href="https://www.yisu.com/" target="yisu">亿速云</a> 独家赞助发布 ]</span></div><script type="text/javascript" src="https://e.topthink.com/Public/static/client.js"></script><think id="ee9b1aa918103c4fc"></think>';
  17.     }
  19.     // 管理员列表
  20.     public function UserLists(){
  21.         $p = input('post.p',1);
  22.         $search = input('post.search','');
  24.         // 在查询数出来的时候，
  25.         // $user = Db::table('xpcms_admin')->select()->toArray();
  27.         // limit方法、pgae方法
  28.         // count方法统计数据库有多少条数据
  30.         $where = [];
  31.         if(!empty($search)){
  32.             $where1 = [['username','like','%'.$search.'%']];
  33.             $where2 = [['real_name','like','%'.$search.'%']];
  34.             $where3 = [['mobile','like','%'.$search.'%']];
  35.             $where = [$where1,$where2,$where3];
  36.         }
  37.         $count = Db::table('bew_admin_user')->whereOr($where)->where('status','<>','2')->count();
  38.         $user = Db::table('bew_admin_user')->whereOr($where)->where('status','<>','2')->page($p,5)->select()->toArray();
  39.         // toArray 数组形式，显示时间戳
  40.         foreach($user as &$u){
  41.             $u['time_add_s'] = date('Y-m-d H:i:s',$u['time_add']);
  42.         }
  44.         $arr = [
  45.             'count' => $count,
  46.             'user' => $user,
  47.         ];
  49.         // php接口、只能有一次输出结果值
  50.         echo json_encode([
  51.             'code' => 0,
  52.             'msg' => '成功',
  53.             'data' => $arr
  54.         ]);
  55.     }
  57.     // 添加&修改管理员，接收数据
  58.     public function UserAdd(){
  59.         $post = input('post.');
  61.         $data = [
  62.             'account' => $post['account'],
  63.             'name' => $post['name'],
  64.             'phone' => $post['phone'],
  65.             'qq' => $post['qq'],
  66.             'sex' => $post['sex'],
  67.             'time_last' => time(),
  68.         ];
  70.         // 查询单条数据
  71.         $user = Db::table('bew_admin_user')->where('account',$post['account'])->find();
  74.         if ( $post['uid'] == 0 ){
  76.             // 判断查询出来的用户是否存在，若存在就退出，否则新建
  77.             if(!empty($user)){
  78.                 echo json_encode([
  79.                     'code' => 1,
  80.                     'msg' => '账号已存在'
  81.                 ]);
  82.                 exit;
  83.             }
  85.             // 如果为0.就添加
  86.             $data['password'] = md5($post['password']);
  87.             $data['time_add'] = time();
  88.             $ret = Db::table('bew_admin_user')->insert($data);
  90.         } else {
  92.             // 判断查询出来的用户名是否存在，且是不等于查询出来的uid，则修改
  93.             if(!empty($user) && $post['uid'] != $user['uid']){
  94.                 echo json_encode([
  95.                     'code' => 1,
  96.                     'msg' => '账号已存在'
  97.                 ]);
  98.                 exit;
  99.             }
  101.             // 如果不为0 就修改
  102.             if(!empty($post['password'])){
  103.                 $data['password'] = md5($post['password']);
  104.             }
  105.             $ret = Db::table('bew_admin_user')->where('uid', $post['uid'])->update($data);
  107.         }
  109.         // 添加&修改 后输出结果
  110.         if( $post['uid'] == 0 ){
  111.             if(empty($ret)){
  112.                 echo json_encode([
  113.                     'code' => 1,
  114.                     'msg' => '添加失败，请重试'
  115.                 ]);
  116.                 exit;
  117.             };    
  118.             echo json_encode([
  119.                 'code' => 0,
  120.                 'msg' => '添加成功'
  121.             ]);
  122.         } else {        
  123.             if(empty($ret)){
  124.                 echo json_encode([
  125.                     'code' => 1,
  126.                     'msg' => '修改失败，请重试'
  127.                 ]);
  128.                 exit;
  129.             };    
  130.             echo json_encode([
  131.                 'code' => 0,
  132.                 'msg' => '修改成功'
  133.             ]);
  134.         }
  135.     }
  137.     // 删除方法
  138.     public function UserDel(){
  139.         $uid = input('post.uid',0);
  140.         if($uid ==0){
  141.             echo json_encode([
  142.                 'code' => 1,
  143.                 'msg' => '请选择要删除的账号'
  144.             ]);
  145.             exit;
  146.         }
  148.         $del = Db::table('bew_admin_user')->where('uid', $uid)->update([
  149.             'status'=>2,
  150.             'time_last' => time(),
  151.         ]);
  153.         if(empty($del)){
  154.             echo json_encode([
  155.                 'code' => 1,
  156.                 'msg' => '删除失败，请重试'
  157.             ]);
  158.             exit;
  159.         }
  161.         echo json_encode([
  162.             'code' => 0,
  163.             'msg' => '删除成功'
  164.         ]);
  165.         exit;
  166.     }
  169.     // 管理组列表接口
  170.     public function GroupLists(){
  171.         $p = input('post.p',1);
  172.         $search = input('post.search','');
  173.         $where = [];
  174.         if(!empty($search)){
  175.             $where[] = ['group_name','like','%'.$search.'%'];
  176.         }
  178.         $count = Db::table('bew_admin_user_group')->where('status','<>',0)->where($where)->count();
  179.         $group = Db::table('bew_admin_user_group')->where('status','<>',0)->where($where)->page($p,3)->select()->toArray();
  180.         foreach($group as &$u){
  181.             $u['time_add_s'] = date('Y-m-d H:i:s',$u['time_add']);
  182.         }
  184.         $arr = [
  185.             'count' => $count,
  186.             'group' => $group,
  187.         ];
  189.         // php接口、只能有一次输出结果值
  190.         echo json_encode([
  191.             'code' => 0,
  192.             'msg' => '成功',
  193.             'data' => $arr
  194.         ]);
  196.     }
  198.     // 添加管理组
  199.     public function GroupAdd(){
  200.         $post = input('post.');
  202.         $group = Db::table('bew_admin_user_group')->where('group_name', $post['group_name'])->find();
  204.         if($post['group_id'] == 0){
  205.             if(!empty($group)){
  206.                 echo json_encode([
  207.                     'code' => 1,
  208.                     'msg' => '添加失败，部门已存在'
  209.                 ]);
  210.                 exit;
  211.             }
  212.             $ret = Db::table('bew_admin_user_group')->insert([
  213.                 'group_name' => $post['group_name'],
  214.                 'status' => $post['status'],
  215.                 'time_add' => time()
  216.             ]);
  217.         } else {
  218.             if(!empty($group) && $group['group_name'] == $post['group_name']){
  219.                 echo json_encode([
  220.                     'code' => 1,
  221.                     'msg' => '修改失败，部门已存在'
  222.                 ]);
  223.                 exit;
  224.             }
  225.             $ret = Db::table('bew_admin_user_group')->where('group_id',$post['group_id'])->update([
  226.                 'group_name' => $post['group_name'],
  227.                 'status' => $post['status'],
  228.                 'time_add' => time(),
  229.                 'time_last' => time()
  230.             ]);
  231.         }
  233.         if($post['group_id'] == 0 ){
  234.             if(empty($ret)){
  235.                 echo json_encode([
  236.                     'code' => 1,
  237.                     'msg' => '添加失败，请重试'
  238.                 ]);
  239.                 exit;
  240.             }
  241.             echo json_encode([
  242.                 'code' => 0,
  243.                 'msg' => '添加成功'
  244.             ]);
  245.         } else {
  246.             if(empty($ret)){
  247.                 echo json_encode([
  248.                     'code' => 1,
  249.                     'msg' => '修改失败，请重试'
  250.                 ]);
  251.                 exit;
  252.             }
  253.             echo json_encode([
  254.                 'code' => 0,
  255.                 'msg' => '修改成功'
  256.             ]);
  257.         }
  258.     }
  260.     // 删除管理组
  261.     public function GroupDel(){
  262.         $group_id = input('post.group_id',0);
  263.         if($group_id == 0){
  264.             echo json_encode([
  265.                 'code' => 1,
  266.                 'msg' => '请选择要删除的管理组'
  267.             ]);
  268.             exit;
  269.         }
  271.         $ret = Db::table('bew_admin_user_group')->where('group_id',$group_id)->update([
  272.             'status' => 0,
  273.             'time_last' => time()
  274.         ]);
  276.         if(empty($ret)){
  277.             echo json_encode([
  278.                 'code' => 1,
  279.                 'msg' => '删除失败，请重试'
  280.             ]);
  281.             exit;
  282.         }
  284.         echo json_encode([
  285.             'code' => 0,
  286.             'msg' => '删除成功'
  287.         ]);
  288.     }
  292.     public function hello($name = 'ThinkPHP6')
  293.     {
  294.         return 'hello,' . $name;
  295.     }
  296. }
3、Group.vue文件代码
  1. <template>
  2.     <div>
  3.     <el-space wrap style="margin-bottom:20px;">
  4.         <el-input v-model="data.search" size="small" placeholder="Type to search" />
  5.         <el-button type="" @click="search()">搜索</el-button>
  6.     </el-space>
  7.     <el-space wrap>
  8.         <el-button type="" @click="add()">添加</el-button>
  9.     </el-space>
  11.     <el-table 
  12.         :data="data.table" 
  13.         border 
  14.         style="width: 100%"
  15.         @select="select"
  16.     >
  17.     <!--
  18.     <el-table-column align="right">
  19.     </el-table-column>
  20.       <el-table-column label="选择" type="selection" />-->
  21.       <el-table-column prop="group_id" label="ID" min-width="50" />
  22.       <el-table-column prop="group_name" label="Name" />
  23.       <el-table-column prop="status" label="状态">
  24.         <!--插槽-->
  25.         <!-- scope 相当于循环里的一次数据
  26.             foreach ( $data['table] as $v)
  27.             scope.row 就是相当于是 $v
  28.             -->
  29.         <template #default="scope">
  30.             <span v-if="scope.row.status == 0">
  31.                 关闭
  32.             </span>
  33.             <span v-else-if="scope.row.status == 1">
  34.                 开启
  35.             </span>
  36.         </template>
  37.       </el-table-column>
  38.       <el-table-column prop="uid" label="修改" width="160px;">
  40.         <template #default="scope">
  41.             <el-space wrap>
  42.                 <!--传点击这条数据的( scope.row )-->
  43.                 <el-button type="warning" @click="add(scope.row)">修改</el-button>
  44.             </el-space>
  45.             <el-space wrap>
  46.                 <el-button type="danger" @click="del(scope.row)">删除</el-button>
  47.             </el-space>
  48.         </template>
  49.       </el-table-column>
  50.     </el-table>
  51.     <el-pagination 
  52.         layout="prev, pager, next" 
  53.         :total="data.total"
  54.         :page-size="3"
  55.         @current-change="fun"
  56.     />
  57.     <!--
  58.         total:总条数
  59.         page-size:一页显示多少条
  60.     -->
  62.     <!--添加/修改 弹窗-->
  63.     <el-dialog v-model="data.add_form" :title="data.title">
  64.         <el-form :model="form" label-width="120px">
  65.             <el-form-item label="部门名">
  66.                 <el-input v-model="form.group_name" />
  67.             </el-form-item>
  68.             <el-form-item label="状态">
  69.                 <el-select v-model="form.stutas" class="m-2" placeholder="Select" size="large">
  70.                     <el-option label="开启" value="1" />
  71.                     <el-option label="关闭" value="0" />
  72.                 </el-select>
  73.             </el-form-item>
  74.         </el-form>
  76.         <template #footer>
  77.             <span class="dialog-footer">
  78.                 <el-button @click="data.add_form = false">取消</el-button>
  79.                 <el-button type="primary" @click="add_form_json()">
  80.                     {{ data.title }}
  81.                 </el-button>
  82.             </span>
  83.         </template>
  85.     </el-dialog>
  87. </div>
  88. </template>
  89. <script>
  90. import { reactive } from "vue"; // 引入动态创建
  91. import { GroupLists , GroupAdd ,GroupDel } from "../network/index";
  92. export default{
  93.     setup () {
  94.         // 展示数据
  95.         const data = reactive({
  96.             table : [],
  97.             total : 0,
  98.             search : '',
  99.             add_form : false,
  100.             title : '添加',
  101.         });
  103.         // 展示的请求接口
  104.         GroupLists().then( (e)=>{
  105.             data.table = e.data.data.group;
  106.             data.total = e.data.data.count;
  107.             console.log(data.table);
  108.         })
  110.         // 选择事件
  111.         const select = (selection,row)=>{
  112.             console.log(selection);
  113.             console.log(row);
  114.         }
  116.         // 翻页方法
  117.         const fun = (p) => {
  118.             GroupLists({p:p}).then( (e)=>{
  119.                 data.table = e.data.data.group;
  120.                 data.total = e.data.data.count;
  121.             })
  122.             // Index.php接收传值
  123.         }
  125.         // 搜索方法
  126.         const search = () => {
  127.             GroupLists({search:data.search}).then( (e)=>{
  128.                 data.table = e.data.data.group;
  129.                 data.total = e.data.data.count;
  130.             })
  131.         }
  133.         // 添加 修改
  134.         // 展开form表单
  135.         const form = reactive({
  136.             group_id : 0,
  137.             group_name: '',
  138.             status: '',
  139.         })
  140.         // 添加方法,如果为真,打开表单
  141.         // 点击接收传uid数据,若有
  142.         const add = (e) => {
  143.             console.log(e);
  144.             data.add_form = true;
  145.             if(e){
  146.                 form.group_id = e.group_id;
  147.                 form.group_name = e.group_name;
  148.                 form.status = e.status;
  149.                 data.title = '修改';
  150.             }else{
  151.                 form.group_id = 0;
  152.                 form.group_name = '';
  153.                 form.status = '1';
  154.                 data.title = '添加';
  155.             }
  156.         }
  157.         // 确定提交添加的数据
  158.         const add_form_json = () => {
  159.             // 需要把数据提交给php接口
  160.             // console.log(form);
  161.             GroupAdd(form).then((e) =>{
  162.                 // console.log(e);
  163.                 alert(e.data.msg);
  164.                 if(e.data.code == 0){
  165.                     GroupLists().then( (e)=>{
  166.                         // 添加成功后自动刷新数据
  167.                         data.table = e.data.data.group;
  168.                         data.total = e.data.data.count;
  169.                         console.log(data.table);
  170.                         // 关闭添加表单
  171.                         data.add_form = false;
  172.                     })
  173.                 }
  174.             })
  175.         }
  177.         // 删除
  178.         const del = (e) => {
  179.             GroupDel({group_id:e.group_id}).then( (res) => {
  180.                 alert(res.data.msg);
  181.                 if( res.data.code == 0 ){
  182.                     GroupLists().then( (e)=>{
  183.                         // 添加成功后自动刷新数据
  184.                         data.table = e.data.data.group;
  185.                         data.total = e.data.data.count;
  186.                         data.add_form = false;
  187.                     })
  188.                 }
  189.             })
  190.         }
  192.         // 数据暴露出去
  193.         return {
  194.             data,
  195.             select,
  196.             fun,
  197.             search,
  198.             add,
  199.             form,
  200.             add_form_json,
  201.             del,
  202.         }
  203.     }
  204. }
  205. </script>
4、index.js文件代码
  1. import { request } from "./request.js";
  3. // 跳转至tp项目文件
  4. export function login(data){
  5.     return request ({
  6.         url : "Login/index",
  7.         method: "POST",
  8.         data
  9.     })
  10. }
  12. export function UserLists(data){
  13.     return request ({
  14.         url : "Index/UserLists",
  15.         method: "POST",
  16.         data
  17.     })
  18. }
  20. // 添加数据请求
  21. export function UserAdd(data){
  22.     return request ({
  23.         url : "Index/UserAdd",
  24.         method: "POST",
  25.         data
  26.     })
  27. }
  29. // 修改数据请求
  30. export function UserEdit(data){
  31.     return request ({
  32.         url : "Index/UserEdit",
  33.         method: "POST",
  34.         data
  35.     })
  36. }
  39. // 删除数据请求
  40. export function UserDel(data){
  41.     return request ({
  42.         url : "Index/UserDel",
  43.         method: "POST",
  44.         data
  45.     })
  46. }
  48. // 展示管理组请求
  49. export function GroupLists(data){
  50.     return request ({
  51.         url : "Index/GroupLists",
  52.         method: "POST",
  53.         data
  54.     })
  55. }
  57. // 新增管理组请求
  58. export function GroupAdd(data){
  59.     return request ({
  60.         url : "Index/GroupAdd",
  61.         method: "post",
  62.         data
  63.     })
  64. }
  66. // 删除管理组请求
  67. export function GroupDel(data){
  68.     return request ({
  69.         url : "Index/GroupDel",
  70.         method: "post",
  71.         data
  72.     })
  73. }
5、运行截图：

6、踩坑点：6.1、SQL查询语句：
  • 方法1：
  1.         $where = [];
  2.         if(!empty($search)){
  3.             $where1 = [['account','like','%'.$search.'%']];
  4.             $where2 = [['name','like','%'.$search.'%']];
  5.             $where3 = [['phone','like','%'.$search.'%']];
  6.             $where = [$where1,$where2,$where3];
  7.         }
  8.         $count = Db::table('bew_admin_user')->whereOr($where)->where('status','<>','2')->count();
  9.         $user = Db::table('bew_admin_user')->whereOr($where)->where('status','<>','2')->page($p,5)->select()->toArray();

  • 方法2：
  1.         $where = [];
  2.         if(!empty($search)){
  3.             $where1 = [['account','like','%'.$search.'%']];
  4.             $where2 = [['name','like','%'.$search.'%']];
  5.             $where3 = [['phone','like','%'.$search.'%']];
  6.             $where = [$where1,$where2,$where3];
  7.         }
  8.         $count = Db::table('bew_admin_user')->where('status','<>','2')->whereOr($where)->count();
  9.         $user = Db::table('bew_admin_user')->where('status','<>','2')->whereOr($where)->page($p,5)->select()->toArray();

  1. 由此可见：whereOr在前，where在后，会先判断whereOr后继续判断where
  2. 如果where在前，whereOr在后，判断完where就不再判断whereOr了
6.2、跨域问题

出现错误，有可能是因为跨域问题，或者是代码写错

  1. 1、跨域解决：添加一个魔术方法
  2.     public function __construct(){
  3.         // 跨域请求
  4.         header("Access-Control-Allow-Origin:*");
  5.     }
  6. 2、代码写错，详情检查了
  7. 如：
  8. 正确：$ret = Db::table('bew_admin_user')->insert($data)；
  9. 错误：insert([$data])
【本文转自：香港服务器 http://www.558idc.com/hk.html提供,感谢支持】
更多阅读