现在自己的项目中引入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