使用 Vue + LayUI 做后台管理、RESTful 交互
一、前言
1、之前使用了 React/Angular，使用起来显然是比 jQuery 好多了，但时隔半年，最近再次深入研究了 vue，很惊喜。
故以后选择 MVC/MVVM 框架的话，建议首选 vue，主要是其代码结构，清晰简单。
2、使用 vue + layui 了，但 layui 里边的 layui.js 模块 vue.js 冲突，
因此放弃使用 layui.js，导致很多高级功能用不了，如日期 laydate 模块，
只使用了 layui 的 css样式，这时显得 layui 鸡肋了好多。
故以后使用 UI 配合 vue 的话，建议选择 ElementUI/MintUI，毕竟是基于 vue 的，无缝对接。
1.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ITAEM</title>
<link href="lib/layui.css" type="text/css" rel="stylesheet">
<script src="lib/vue-2.4.0.js" type="text/javascript"></script>
<script src="lib/vue-resource-1.3.4.js"></script></head><body><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.link}}</td>
<td>{{item.author}}</td>
<td>{{item.tag}}</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>
<a href="add.html" class="layui-btn layui-btn-warm">添加</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: {
searchId: '',// 搜索用的
list: [] // 存放列表数据
},
created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
this.getAllList()
},
methods: {
getAllList() {
// 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过 this.$http 来发起数据请求
this.$http.get('getAllBlogs').then(result => {
// 注意： 通过 $http 获取到的数据，都在 result.body 中放着
var result = result.body if (result.code === 200) {
// 成功了
this.list = result.data
console.log(result.data)
} else {
// 失败了
alert('获取数据失败！')
}
})
},
del(id) {
this.$http.delete('deleteBlogById/' + id).then(result => {
if (result.body.code === 200) {
// 删除成功
this.getAllList()
} else {
alert('删除失败！')
}
})
},
search() {
this.$http.get('getBlogById/'+this.searchId).then(result => {
var result = result.body if (result.code === 200) {
this.list=[]
this.list.push(result.data)
} else {
alert('查找失败！')
}
})
},
upd(updateId){
window.location.href="http://localhost:63343/forVue/VueCRUD/update.html?#"+updateId }
}
})</script></body></html>2.add.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>ITAEM</title>
<link href="lib/layui.css" type="text/css" rel="stylesheet">
<script src="lib/vue-2.4.0.js" type="text/javascript"></script>
<script src="lib/vue-resource-1.3.4.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>3.update.html
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>ITAEM</title>
<link href="lib/layui.css" type="text/css" rel="stylesheet">
<script src="lib/vue-2.4.0.js" type="text/javascript"></script>
<script src="lib/vue-resource-1.3.4.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>四、小结
本文使用的框架 Vue、LayUI，以及推荐的 UI 框架 ElementUI（pc端）/MintUI（移动端），都是国产的，值得支持。
解决本文前言的痛点（没有使用 webpack，代码冗余）
