Bootstrap

tp6+vue实现简单CURD

现在自己的项目中引入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();
        },
        metho
;