使用 Vue + LayUI 做后台管理、RESTful 交互
一、前言
1、之前使用了 React/Angular,使用起来显然是比 jQuery 好多了,但时隔半年,最近再次深入研究了 vue,很惊喜。
故以后选择 MVC/MVVM 框架的话,建议首选 vue,主要是其代码结构,清晰简单。
[增删改查] 使用 React + LayUI 做后台管理 CRUD 界面和 RESTful 交互
2、使用 vue + layui
了,但 layui 里边的 layui.js 模块 vue.js 冲突,
因此放弃使用 layui.js,导致很多高级功能用不了,如日期 laydate 模块,
只使用了 layui 的 css样式,这时显得 layui 鸡肋了好多。
故以后使用 UI 配合 vue 的话,建议选择 ElementUI/MintUI,毕竟是基于 vue 的,无缝对接。
二、功能演示
1、显示 index.html
2、添加 add.html
3、搜索 index.html
4、修改 update.html
5、删除 index.html
三、代码与结构
前端的代码已经放到 github 上了:https://github.com/larger5/CRUD_Vue_LayUI.git
后台完整的代码也已经放到 github 上了:https://github.com/larger5/springboot_Vue.git(ITAEM团队官网后台 v1.0)
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.bodyif (result.code === 200) {// 成功了this.list = result.dataconsole.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.bodyif (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.bodyif (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.bodyif (result.code === 200) {// 成功了this.id = result.data.idthis.title = result.data.titlethis.link = result.data.linkthis.author = result.data.authorthis.tag = result.data.tag} else {// 失败了alert('获取数据失败!')}})},methods: {upd() { // 注意方法名不能为 updatethis.$http.put('updateBlog',{'id': this.id,'title': this.title,'link': this.link,'author': this.author,'tag': this.tag}).then(result => {var result = result.bodyif (result.code === 200) {alert('修改成功!')} else {// 失败了alert('修改失败!')}})}}})
</script>
</body>
</html>
四、小结
本文使用的框架 Vue
、LayUI
,以及推荐的 UI 框架 ElementUI
(pc端)/MintUI
(移动端),都是国产的,值得支持。
2018/8/25 更新
解决本文前言的痛点(没有使用 webpack,代码冗余)
[增删改查] 使用 Vue + ElementUI + Webpack + VueRouter 做后台管理、REST 交互
使用 Vue + LayUI 做后台管理、RESTful 交互相关推荐
- 使用layui 做后台管理界面,在Tab中的链接点击后添加一个新TAB的解决方法
使用layui 做后台管理界面,在Tab中的链接点击后添加一个新TAB的解决方法 参考文章: (1)使用layui 做后台管理界面,在Tab中的链接点击后添加一个新TAB的解决方法 (2)https: ...
- vue考试系统后台管理项目-接口封装调用
上一篇文章 : vue考试系统后台管理项目-登录.记住密码功能_船长在船上的博客-CSDN博客 考试系统后台管理项目介绍: 技术选型:Vue2.0+Element-ui 项目功能介绍: 账户信息模块: ...
- 介绍一款贼美的Vue+Element开源后台管理UI
点击上方 好好学java ,选择 星标 公众号 重磅资讯.干货,第一时间送达 今日推荐:又一程序员进了ICU:压垮一个家庭,一张结算单就够 个人原创100W+访问量博客:点击前往,查看更多 前言 Eu ...
- [vue] vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?
[vue] vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做? 可以通过指令去做 Vue.directive('hasPermission', { bind(el, binding, vno ...
- 基于layui的后台管理模板
介绍: 基于layui的后台管理模板 网盘下载地址: http://kekewangLuo.cc/U6mcEZKHXpb 图片:
- vue+antd搭建后台管理界面模版(PC端),适配中文、英文、日文 mock数据,开箱即用
vue+antd搭建后台管理界面模版(PC端) 完整代码下载地址:vue+antd搭建后台管理界面模版(PC端) 技术栈 vue2 + vuex + vue-router + webpack + ES ...
- vue框架 做后台管理系统的总结(WZ)
1.备注:(此项是转载,但是我们的项目目前用的就是这个.) **本项目是后台管理框架,集成了权限管理.登录功能.UI组件.七牛上传等功能,建议直接使用.** -**注意**:便于前端调试,所以数据请求 ...
- 为element ui+Vue搭建的后台管理项目添加图标
问题:使用element UI 及Vue 2.0搭建一个后台管理项目,想要在页面中为其添加对勾及叉的图标. 解决方案:问题涉及到为页面添加图标.有两种解决方案. (1)Element官网提供了Icon ...
- 【永久开源】Pear Admin Layui 基于 Layui 的后台管理模板
Pear Admin Layui 是基于 Layui 的后台管理系统模板,扩展Layui原生UI样式,整合第三方开源组件,提供便捷快速的开发方式,延续LayuiAdmin的设计风格,持续完善的样式与组 ...
最新文章
- unix to linux,UNIX to Linux 的关键问题都有哪些?
- java中flush 函数,Java DataOutputStream.flush()类型
- eslint 保存自动格式化_代码规范之理解ESLint、Prettier、EditorConfig
- 通过transmittable-thread-local源码理解线程池线程本地变量传递的原理
- android6.0关机动画,安卓系统修改开机动画,关机动画
- AppLoader发布
- 网站通过了QQ安全认证了
- 用git上传自己的第一个github项目
- SharePoint 2013 Deploy Master Page And Page Layout
- 深入了解TMG企業版的獨立陣列
- vb 远程连接 SQLserver数据库的连接语句
- 【jvm jdk】锁状态位之偏向锁
- paddle 图标注_数据标注工具大全汇总,有了这些工具再也不用自己开发了
- 用PHP搞掂黑群晖IPv6的DNSPod解析【7月23日更新,支持v4和v6】
- 异步十二进制加法计数器(统一使用上升沿触发的D触发器)
- 理论小知识:字符串mset命令
- 用C语言求解各类求和问题
- Pymoo:使用多目标优化搜索解集的实现方法
- 使用 kickstart 半自动化安装CentOS系统 利用PXE实现自动化安装centos系统
- Win32编程---在窗体添加一个按钮