首页 > 博客列表 > 实战2ele与tp：添加修改删除管理员，管理组操作(增删改查)

博主信息

博文 77

粉丝 0

访问量 82547

专题推荐

更多>

一、涉及代码文件

文件：

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文件代码

<template>
    <div>
    <el-space wrap style="margin-bottom:20px;">
        <el-input v-model="data.search" size="small" placeholder="Type to search" />
        <el-button type="" @click="search()">搜索</el-button>
    </el-space>
    <el-space wrap>
        <el-button type="" @click="add()">添加</el-button>
    </el-space>
    <el-table 
        :data="data.table" 
        border 
        style="width: 100%"
        @select="select"
    >
    <!--
    <el-table-column align="right">
    </el-table-column>
      <el-table-column label="选择" type="selection" />-->
      <el-table-column prop="uid" label="ID" min-width="50" />
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="account" label="账号" />
      <el-table-column prop="phone" label="手机号" />
      <el-table-column prop="qq" label="QQ">
      </el-table-column>
      <el-table-column prop="sex" label="性别">
        <!--插槽-->
        <!-- scope 相当于循环里的一次数据
            foreach ( $data['table] as $v)
            scope.row 就是相当于是 $v
            -->
        <template #default="scope">
            <span v-if="scope.row.sex == 'mimi'">
                保密
            </span>
            <span v-else-if="scope.row.sex == 'nan'">
                男
            </span>
            <span v-else-if="scope.row.sex == 'nv'">
                女
            </span>
        </template>
      </el-table-column>
      <el-table-column prop="uid" label="修改" width="160px;">
        <template #default="scope">
            <el-space wrap>
                <!--传点击这条数据的( scope.row )-->
                <el-button type="warning" @click="add(scope.row)">修改</el-button>
            </el-space>
            <el-space wrap>
                <el-button type="danger" @click="del(scope.row)">删除</el-button>
            </el-space>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination 
        layout="prev, pager, next" 
        :total="data.total"
        :page-size="5"
        @current-change="fun"
    />
    <!--
        total:总条数
        page-size:一页显示多少条
    -->
    <!--添加/修改 弹窗-->
    <el-dialog v-model="data.add_form" :title="data.title">
        <el-form :model="form" label-width="120px">
            <el-form-item label="账号">
                <el-input v-model="form.account" />
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="form.password" />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="手机号">
                <el-input v-model="form.phone" />
            </el-form-item>
            <el-form-item label="QQ号">
                <el-input v-model="form.qq" />
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="form.sex" class="m-2" placeholder="Select" size="large">
                    <el-option label="男" value="nan" />
                    <el-option label="女" value="nv" />
                    <el-option label="保密" value="mimi" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="data.add_form = false">取消</el-button>
                <el-button type="primary" @click="add_form_json()">
                    {{ data.title }}
                </el-button>
            </span>
        </template>
    </el-dialog>
</div>
</template>
<script>
import { reactive } from "vue"; // 引入动态创建
import { UserLists , UserAdd ,UserDel } from "../network/index";
export default{
    setup () {
        // 展示数据
        const data = reactive({
            table : [],
            total : 0,
            search : '',
            add_form : false,
            title : '添加',
        });
        // 展示的请求接口
        UserLists().then( (e)=>{
            data.table = e.data.data.user;
            data.total = e.data.data.count;
            console.log(data.table);
        })
        // 选择事件
        const select = (selection,row)=>{
            console.log(selection);
            console.log(row);
        }
        // 翻页方法
        const fun = (p) => {
            UserLists({p:p}).then( (e)=>{
                data.table = e.data.data.user;
                data.total = e.data.data.count;
            })
            // Index.php接收传值
        }
        // 搜索方法
        const search = () => {
            UserLists({search:data.search}).then( (e)=>{
                data.table = e.data.data.user;
                data.total = e.data.data.count;
            })
        }
        // 添加 修改
        // 展开form表单
        const form = reactive({
            uid : 0,
            account: '',
            password: '',
            name : '',
            phone : '',
            qq: '',
            sex: 'nan',
        })
        // 添加方法,如果为真,打开表单
        // 点击接收传uid数据,若有
        const add = (e) => {
            console.log(e);
            data.add_form = true;
            if(e){
                form.uid = e.uid;
                form.account = e.account;
                form.password = '';
                form.name = e.name;
                form.phone = e.phone;
                form.qq = e.qq;
                form.sex = e.sex;
                data.title = '修改';
            }else{
                form.uid = 0;
                form.account = '';
                form.password = '';
                form.name = '';
                form.phone = '';
                form.qq = '';
                form.sex = 'nan';
                data.title = '添加';
            }
        }
        // 确定提交添加的数据
        const add_form_json = () => {
            // 需要把数据提交给php接口
            // console.log(form);
            UserAdd(form).then((e) =>{
                // console.log(e);
                alert(e.data.msg);
                if(e.data.code == 0){
                    UserLists().then( (e)=>{
                        // 添加成功后自动刷新数据
                        data.table = e.data.data.user;
                        data.total = e.data.data.count;
                        console.log(data.table);
                        // 关闭添加表单
                        data.add_form = false;
                    })
                }
            })
        }
        // 删除
        const del = (e) => {
            UserDel({uid:e.uid}).then( (res) => {
                alert(res.data.msg);
                if( res.data.code == 0 ){
                    UserLists().then( (e)=>{
                        // 添加成功后自动刷新数据
                        data.table = e.data.data.user;
                        data.total = e.data.data.count;
                        data.add_form = false;
                    })
                }
            })
        }
        // 数据暴露出去
        return {
            data,
            select,
            fun,
            search,
            add,
            form,
            add_form_json,
            del,
        }
    }
}
</script>

2、Index.php文件代码

<?php
namespace app\admin\controller;
use app\BaseController;
use think\facade\Db;
class Index extends BaseController
{
    public function __construct(){
        // 跨域请求
        header("Access-Control-Allow-Origin:*");
    }
    public function index()
    {
        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>';
    }
    // 管理员列表
    public function UserLists(){
        $p = input('post.p',1);
        $search = input('post.search','');
        // 在查询数出来的时候，
        // $user = Db::table('xpcms_admin')->select()->toArray();
        // limit方法、pgae方法
        // count方法统计数据库有多少条数据
        $where = [];
        if(!empty($search)){
            $where1 = [['username','like','%'.$search.'%']];
            $where2 = [['real_name','like','%'.$search.'%']];
            $where3 = [['mobile','like','%'.$search.'%']];
            $where = [$where1,$where2,$where3];
        }
        $count = Db::table('bew_admin_user')->whereOr($where)->where('status','<>','2')->count();
        $user = Db::table('bew_admin_user')->whereOr($where)->where('status','<>','2')->page($p,5)->select()->toArray();
        // toArray 数组形式，显示时间戳
        foreach($user as &$u){
            $u['time_add_s'] = date('Y-m-d H:i:s',$u['time_add']);
        }
        $arr = [
            'count' => $count,
            'user' => $user,
        ];
        // php接口、只能有一次输出结果值
        echo json_encode([
            'code' => 0,
            'msg' => '成功',
            'data' => $arr
        ]);
    }
    // 添加&修改管理员，接收数据
    public function UserAdd(){
        $post = input('post.');
        $data = [
            'account' => $post['account'],
            'name' => $post['name'],
            'phone' => $post['phone'],
            'qq' => $post['qq'],
            'sex' => $post['sex'],
            'time_last' => time(),
        ];
        // 查询单条数据
        $user = Db::table('bew_admin_user')->where('account',$post['account'])->find();
        if ( $post['uid'] == 0 ){
            // 判断查询出来的用户是否存在，若存在就退出，否则新建
            if(!empty($user)){
                echo json_encode([
                    'code' => 1,
                    'msg' => '账号已存在'
                ]);
                exit;
            }
            // 如果为0.就添加
            $data['password'] = md5($post['password']);
            $data['time_add'] = time();
            $ret = Db::table('bew_admin_user')->insert($data);
        } else {
            // 判断查询出来的用户名是否存在，且是不等于查询出来的uid，则修改
            if(!empty($user) && $post['uid'] != $user['uid']){
                echo json_encode([
                    'code' => 1,
                    'msg' => '账号已存在'
                ]);
                exit;
            }
            // 如果不为0 就修改
            if(!empty($post['password'])){
                $data['password'] = md5($post['password']);
            }
            $ret = Db::table('bew_admin_user')->where('uid', $post['uid'])->update($data);
        }
        // 添加&修改 后输出结果
        if( $post['uid'] == 0 ){
            if(empty($ret)){
                echo json_encode([
                    'code' => 1,
                    'msg' => '添加失败，请重试'
                ]);
                exit;
            };    
            echo json_encode([
                'code' => 0,
                'msg' => '添加成功'
            ]);
        } else {        
            if(empty($ret)){
                echo json_encode([
                    'code' => 1,
                    'msg' => '修改失败，请重试'
                ]);
                exit;
            };    
            echo json_encode([
                'code' => 0,
                'msg' => '修改成功'
            ]);
        }
    }
    // 删除方法
    public function UserDel(){
        $uid = input('post.uid',0);
        if($uid ==0){
            echo json_encode([
                'code' => 1,
                'msg' => '请选择要删除的账号'
            ]);
            exit;
        }
        $del = Db::table('bew_admin_user')->where('uid', $uid)->update([
            'status'=>2,
            'time_last' => time(),
        ]);
        if(empty($del)){
            echo json_encode([
                'code' => 1,
                'msg' => '删除失败，请重试'
            ]);
            exit;
        }
        echo json_encode([
            'code' => 0,
            'msg' => '删除成功'
        ]);
        exit;
    }
    // 管理组列表接口
    public function GroupLists(){
        $p = input('post.p',1);
        $search = input('post.search','');
        $where = [];
        if(!empty($search)){
            $where[] = ['group_name','like','%'.$search.'%'];
        }
        $count = Db::table('bew_admin_user_group')->where('status','<>',0)->where($where)->count();
        $group = Db::table('bew_admin_user_group')->where('status','<>',0)->where($where)->page($p,3)->select()->toArray();
        foreach($group as &$u){
            $u['time_add_s'] = date('Y-m-d H:i:s',$u['time_add']);
        }
        $arr = [
            'count' => $count,
            'group' => $group,
        ];
        // php接口、只能有一次输出结果值
        echo json_encode([
            'code' => 0,
            'msg' => '成功',
            'data' => $arr
        ]);
    }
    // 添加管理组
    public function GroupAdd(){
        $post = input('post.');
        $group = Db::table('bew_admin_user_group')->where('group_name', $post['group_name'])->find();
        if($post['group_id'] == 0){
            if(!empty($group)){
                echo json_encode([
                    'code' => 1,
                    'msg' => '添加失败，部门已存在'
                ]);
                exit;
            }
            $ret = Db::table('bew_admin_user_group')->insert([
                'group_name' => $post['group_name'],
                'status' => $post['status'],
                'time_add' => time()
            ]);
        } else {
            if(!empty($group) && $group['group_name'] == $post['group_name']){
                echo json_encode([
                    'code' => 1,
                    'msg' => '修改失败，部门已存在'
                ]);
                exit;
            }
            $ret = Db::table('bew_admin_user_group')->where('group_id',$post['group_id'])->update([
                'group_name' => $post['group_name'],
                'status' => $post['status'],
                'time_add' => time(),
                'time_last' => time()
            ]);
        }
        if($post['group_id'] == 0 ){
            if(empty($ret)){
                echo json_encode([
                    'code' => 1,
                    'msg' => '添加失败，请重试'
                ]);
                exit;
            }
            echo json_encode([
                'code' => 0,
                'msg' => '添加成功'
            ]);
        } else {
            if(empty($ret)){
                echo json_encode([
                    'code' => 1,
                    'msg' => '修改失败，请重试'
                ]);
                exit;
            }
            echo json_encode([
                'code' => 0,
                'msg' => '修改成功'
            ]);
        }
    }
    // 删除管理组
    public function GroupDel(){
        $group_id = input('post.group_id',0);
        if($group_id == 0){
            echo json_encode([
                'code' => 1,
                'msg' => '请选择要删除的管理组'
            ]);
            exit;
        }
        $ret = Db::table('bew_admin_user_group')->where('group_id',$group_id)->update([
            'status' => 0,
            'time_last' => time()
        ]);
        if(empty($ret)){
            echo json_encode([
                'code' => 1,
                'msg' => '删除失败，请重试'
            ]);
            exit;
        }
        echo json_encode([
            'code' => 0,
            'msg' => '删除成功'
        ]);
    }
    public function hello($name = 'ThinkPHP6')
    {
        return 'hello,' . $name;
    }
}

3、Group.vue文件代码

<template>
    <div>
    <el-space wrap style="margin-bottom:20px;">
        <el-input v-model="data.search" size="small" placeholder="Type to search" />
        <el-button type="" @click="search()">搜索</el-button>
    </el-space>
    <el-space wrap>
        <el-button type="" @click="add()">添加</el-button>
    </el-space>
    <el-table 
        :data="data.table" 
        border 
        style="width: 100%"
        @select="select"
    >
    <!--
    <el-table-column align="right">
    </el-table-column>
      <el-table-column label="选择" type="selection" />-->
      <el-table-column prop="group_id" label="ID" min-width="50" />
      <el-table-column prop="group_name" label="Name" />
      <el-table-column prop="status" label="状态">
        <!--插槽-->
        <!-- scope 相当于循环里的一次数据
            foreach ( $data['table] as $v)
            scope.row 就是相当于是 $v
            -->
        <template #default="scope">
            <span v-if="scope.row.status == 0">
                关闭
            </span>
            <span v-else-if="scope.row.status == 1">
                开启
            </span>
        </template>
      </el-table-column>
      <el-table-column prop="uid" label="修改" width="160px;">
        <template #default="scope">
            <el-space wrap>
                <!--传点击这条数据的( scope.row )-->
                <el-button type="warning" @click="add(scope.row)">修改</el-button>
            </el-space>
            <el-space wrap>
                <el-button type="danger" @click="del(scope.row)">删除</el-button>
            </el-space>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination 
        layout="prev, pager, next" 
        :total="data.total"
        :page-size="3"
        @current-change="fun"
    />
    <!--
        total:总条数
        page-size:一页显示多少条
    -->
    <!--添加/修改 弹窗-->
    <el-dialog v-model="data.add_form" :title="data.title">
        <el-form :model="form" label-width="120px">
            <el-form-item label="部门名">
                <el-input v-model="form.group_name" />
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="form.stutas" class="m-2" placeholder="Select" size="large">
                    <el-option label="开启" value="1" />
                    <el-option label="关闭" value="0" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="data.add_form = false">取消</el-button>
                <el-button type="primary" @click="add_form_json()">
                    {{ data.title }}
                </el-button>
            </span>
        </template>
    </el-dialog>
</div>
</template>
<script>
import { reactive } from "vue"; // 引入动态创建
import { GroupLists , GroupAdd ,GroupDel } from "../network/index";
export default{
    setup () {
        // 展示数据
        const data = reactive({
            table : [],
            total : 0,
            search : '',
            add_form : false,
            title : '添加',
        });
        // 展示的请求接口
        GroupLists().then( (e)=>{
            data.table = e.data.data.group;
            data.total = e.data.data.count;
            console.log(data.table);
        })
        // 选择事件
        const select = (selection,row)=>{
            console.log(selection);
            console.log(row);
        }
        // 翻页方法
        const fun = (p) => {
            GroupLists({p:p}).then( (e)=>{
                data.table = e.data.data.group;
                data.total = e.data.data.count;
            })
            // Index.php接收传值
        }
        // 搜索方法
        const search = () => {
            GroupLists({search:data.search}).then( (e)=>{
                data.table = e.data.data.group;
                data.total = e.data.data.count;
            })
        }
        // 添加 修改
        // 展开form表单
        const form = reactive({
            group_id : 0,
            group_name: '',
            status: '',
        })
        // 添加方法,如果为真,打开表单
        // 点击接收传uid数据,若有
        const add = (e) => {
            console.log(e);
            data.add_form = true;
            if(e){
                form.group_id = e.group_id;
                form.group_name = e.group_name;
                form.status = e.status;
                data.title = '修改';
            }else{
                form.group_id = 0;
                form.group_name = '';
                form.status = '1';
                data.title = '添加';
            }
        }
        // 确定提交添加的数据
        const add_form_json = () => {
            // 需要把数据提交给php接口
            // console.log(form);
            GroupAdd(form).then((e) =>{
                // console.log(e);
                alert(e.data.msg);
                if(e.data.code == 0){
                    GroupLists().then( (e)=>{
                        // 添加成功后自动刷新数据
                        data.table = e.data.data.group;
                        data.total = e.data.data.count;
                        console.log(data.table);
                        // 关闭添加表单
                        data.add_form = false;
                    })
                }
            })
        }
        // 删除
        const del = (e) => {
            GroupDel({group_id:e.group_id}).then( (res) => {
                alert(res.data.msg);
                if( res.data.code == 0 ){
                    GroupLists().then( (e)=>{
                        // 添加成功后自动刷新数据
                        data.table = e.data.data.group;
                        data.total = e.data.data.count;
                        data.add_form = false;
                    })
                }
            })
        }
        // 数据暴露出去
        return {
            data,
            select,
            fun,
            search,
            add,
            form,
            add_form_json,
            del,
        }
    }
}
</script>

4、index.js文件代码

import { request } from "./request.js";
// 跳转至tp项目文件
export function login(data){
    return request ({
        url : "Login/index",
        method: "POST",
        data
    })
}
export function UserLists(data){
    return request ({
        url : "Index/UserLists",
        method: "POST",
        data
    })
}
// 添加数据请求
export function UserAdd(data){
    return request ({
        url : "Index/UserAdd",
        method: "POST",
        data
    })
}
// 修改数据请求
export function UserEdit(data){
    return request ({
        url : "Index/UserEdit",
        method: "POST",
        data
    })
}
// 删除数据请求
export function UserDel(data){
    return request ({
        url : "Index/UserDel",
        method: "POST",
        data
    })
}
// 展示管理组请求
export function GroupLists(data){
    return request ({
        url : "Index/GroupLists",
        method: "POST",
        data
    })
}
// 新增管理组请求
export function GroupAdd(data){
    return request ({
        url : "Index/GroupAdd",
        method: "post",
        data
    })
}
// 删除管理组请求
export function GroupDel(data){
    return request ({
        url : "Index/GroupDel",
        method: "post",
        data
    })
}

5、运行截图：

6、踩坑点：

6.1、SQL查询语句：

方法1：

        $where = [];
        if(!empty($search)){
            $where1 = [['account','like','%'.$search.'%']];
            $where2 = [['name','like','%'.$search.'%']];
            $where3 = [['phone','like','%'.$search.'%']];
            $where = [$where1,$where2,$where3];
        }
        $count = Db::table('bew_admin_user')->whereOr($where)->where('status','<>','2')->count();
        $user = Db::table('bew_admin_user')->whereOr($where)->where('status','<>','2')->page($p,5)->select()->toArray();

方法2：

        $where = [];
        if(!empty($search)){
            $where1 = [['account','like','%'.$search.'%']];
            $where2 = [['name','like','%'.$search.'%']];
            $where3 = [['phone','like','%'.$search.'%']];
            $where = [$where1,$where2,$where3];
        }
        $count = Db::table('bew_admin_user')->where('status','<>','2')->whereOr($where)->count();
        $user = Db::table('bew_admin_user')->where('status','<>','2')->whereOr($where)->page($p,5)->select()->toArray();

由此可见：whereOr在前，where在后，会先判断whereOr后继续判断where
如果where在前，whereOr在后，判断完where就不再判断whereOr了

6.2、跨域问题

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

1、跨域解决：添加一个魔术方法
    public function __construct(){
        // 跨域请求
        header("Access-Control-Allow-Origin:*");
    }
2、代码写错，详情检查了
如：
正确：$ret = Db::table('bew_admin_user')->insert($data)；
错误：insert([$data])

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

匿名函数与命名空间_0929

2019-10-08 13:01:48