tp6+vue实现简单CURD

濮阳旺

2023-12-01

现在自己的项目中引入css文件（x-admin文件中的样式放入public中方便后续引入虽然只需要一个layui.css文件）

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="/static/lib/layui/css/layui.css" type="text/css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<a href="{:url('admin/special/add')}"><input type="button" class="layui-btn" @click="add" value="添加"></a>
<div id="app"  class="layui-container">
    <div className="layui-row layui-col-space2">
        <div class="layui-col-md1">
            <input type="text" v-model="searchId" required lay-verify="required" placeholder="id" class="layui-input" autocomplete="off"/>
        </div>
        <div class="layui-col-md1">
            <button id="btn2"  class="layui-btn" @click.prevent="search()">搜索</button>
        </div>
    </div>
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>博客id</th>
            <th>标题</th>
            <th>文章内容</th>
            <th>状态</th>
            <th>时间</th>
            <th>修改</th>
            <th>删除</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in list" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.title}}</td>
            <td>{{item.name}}</td>
            <td>{{item.status}}</td>
            <td>{{item.time}}</td>
            <th>
                <a class="layui-btn layui-btn-normal" @click.prevent="upd(item.id)">修改</a>
            </th>
            <th>
                <button class="layui-btn layui-btn-danger" @click.prevent="del(item.id)">删除</button>
            </th>
        </tr>
        </tbody>
    </table>
</div>
<script type = "text/javascript">
    new Vue({
        el: '#app',
        data: {
            searchId: '',// 搜索用的
            list: [] // 存放列表数据
        },
        created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
            this.getAllList();
        },
        methods:{
            getAllList() {
                // 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过  this.$http 来发起数据请求
                this.$http.get("{:url('admin/special/create')}").then(result => {
                    // 注意： 通过 $http 获取到的数据，都在 result.body 中放着
                    // console.log(result.data)
                    var result = result.body
                    if (result.code === 0) {
                        // 成功了
                        this.list = result.data
                        console.log(result.data)
                    } else {
                        // 失败了
                        alert('获取数据失败！')
                    }
                })
            },
            del(id) {
                this.$http.delete("{:url('admin/special/delete')}?id=" + id).then(result => {
                    console.log(result)
                    if (result.body.code === 0) {
                        // 删除成功
                        this.getAllList()
                    } else {
                        alert('删除失败！')
                    }
                })
            },
            search() {
                this.$http.get("{:url('admin/special/create')}").then(result => {
                    var result = result.body
                    if (result.code === 200) {
                        this.list=[]
                        this.list.push(result.data)
                    } else {
                        alert('查找失败！')
                    }
                })
            },
            upd(updateId){
                // console.log(updateId);
                window.location.href="{:url('admin/special/update')}?id="+updateId
            }
        }
    })
</script>
</body>
</html>

add.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="/static/lib/layui/css/layui.css" type="text/css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app" class="layui-container">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input v-model="title" type="text" placeholder="title" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-block">
                <input v-model="link" type="text" placeholder="https://www.baidu.com/" class="layui-input"
                       autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block">
                <input v-model="author" type="text" placeholder="author" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否展示</label>
            <div class="layui-input-block">
                <input v-model="tag" type="text" placeholder="0/1" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" @click="add">添加</button>
            </div>
        </div>
    </form>
    <a href="index.html" class="layui-btn layui-btn-primary">返回</a>
</div>
<script>
    // 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
    Vue.http.options.root = 'http://120.79.197.130:8080/';

    // 全局启用 emulateJSON 选项:如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。
    Vue.http.options.emulateJSON = true;

    var vm = new Vue({
        el: '#app',
        data: {
            title: '',
            link: '',
            author: '',
            tag: ''
        },
        methods: {
            add() {
                this.$http.post('insertBlog',
                    {
                        title: this.title,
                        link: this.link,
                        author: this.author,
                        tag: this.tag,
                    })
                    .then(result => {
                        var result = result.body
                        if (result.code === 200) {
                            alert('添加成功！')
                        } else {
                            // 失败了
                            alert('添加失败！')
                        }
                    })
            }
        }
    })
</script>
</body>
</html>

update.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="/static/lib/layui/css/layui.css" type="text/css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
</head>
<body>
<div id="app" class="layui-container">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input v-model="id" type="text" placeholder="title" class="layui-input" autocomplete="off" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">标题</label>
            <div class="layui-input-block">
                <input v-model="title" type="text" placeholder="title" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">链接</label>
            <div class="layui-input-block">
                <input v-model="link" type="text" placeholder="https://www.baidu.com/" class="layui-input"
                       autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-block">
                <input v-model="author" type="text" placeholder="author" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否展示</label>
            <div class="layui-input-block">
                <input v-model="tag" type="text" placeholder="0/1" class="layui-input" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" @click="upd()">修改</button>
            </div>
        </div>
    </form>
    <a href="index.html" class="layui-btn layui-btn-primary">返回</a>

</div>
<script>
    // 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
    Vue.http.options.root = 'http://120.79.197.130:8080/';

    // 全局启用 emulateJSON 选项:如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。
    Vue.http.options.emulateJSON = true;

    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            title: '',
            link: '',
            author: '',
            tag: ''
        },
        created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
            var userId = location.hash.substring(1) // 去掉 #
            this.$http.get('getBlogById/' + userId).then(result => {
                // 注意： 通过 $http 获取到的数据，都在 result.body 中放着
                var result = result.body
                if (result.code === 200) {
                    // 成功了
                    this.id = result.data.id
                    this.title = result.data.title
                    this.link = result.data.link
                    this.author = result.data.author
                    this.tag = result.data.tag
                } else {
                    // 失败了
                    alert('获取数据失败！')
                }
            })
        },
        methods: {
            upd() { // 注意方法名不能为 update
                this.$http.put('updateBlog',
                    {
                        'id': this.id,
                        'title': this.title,
                        'link': this.link,
                        'author': this.author,
                        'tag': this.tag
                    })
                    .then(result => {
                        var result = result.body
                        if (result.code === 200) {
                            alert('修改成功！')
                        } else {
                            // 失败了
                            alert('修改失败！')
                        }
                    })
            }
        }
    })
</script>
</body>
</html>

最后再来一个控制器special.php

<?php
declare (strict_types = 1);

namespace app\admin\controller;

use think\Request;

class special
{
    public function index()
    {
        return view('index');
    }

    public function create()
    {
        $par = request()->param();
        $page = request()->param('page');
        $limit = request()->param('limit');
        if (isset($par['key'])){
            $data = \app\admin\model\special::where('id','like',$par['key']['id'])->whereOr('name','like',$par['key']['name'])->paginate($page)->toArray();
            return json(['data'=>$data['data'],'code'=>0,'msg'=>'']);
        }else{
            $data = \app\admin\model\special::paginate($limit)->toArray();
            $count = \app\admin\model\special::select()->count();
            return json(['data'=>$data['data'],'code'=>0,'msg'=>'','count'=>$count]);
        }
    }

    public function save()
    {
        return view('add');
    }
    
    public function add()
    {
        return view('add');
    }
    
    public function update()
    {
        $id = input('id');
        $res = \app\admin\model\special::where('id',$id)->find();
        return view('update',compact('res'));
    }

    public function delete()
    {
        $id = input('id');
        $res = \app\admin\model\special::where('id',$id)->delete();
        if ($res){
            return json(['data'=>'','msg'=>'','code'=>0]);
        }
    }

    public function search()
    {
        dd(1);
    }
}

tp6+vue实现简单CURD

相关阅读

相关文章

相关问答

相关文档