使用 Vue + LayUI 做后台管理、RESTful 交互

使用 Vue + LayUI 做后台管理、RESTful 交互一、前言1、之前使用了React/Angular,使用起来显然是比jQuery好多了,但时隔半年,最近再次深入研究了vue,很惊喜。故以后选择MVC/MVVM框架的话,建议首选vue,主要是其代码结构,清晰简单。2、使用vue+layui了,但layui里边的layui.js模块vue.js冲突,因此放弃使用layui.js,导致很多高级…

大家好,又见面了,我是你们的朋友全栈君。

一、前言

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.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>

四、小结

本文使用的框架 VueLayUI,以及推荐的 UI 框架 ElementUI(pc端)/MintUI(移动端),都是国产的,值得支持。

2018/8/25 更新

解决本文前言的痛点(没有使用 webpack,代码冗余)

[增删改查] 使用 Vue + ElementUI + Webpack + VueRouter 做后台管理、REST 交互

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/152819.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 死链处理的详细步骤[通俗易懂]

    死链处理的详细步骤[通俗易懂]死链处理:查找死链;收集死链;提交处理  一:查找死链  1.工具检测,在360极速浏览器的拓展中心下载安装检查网页死链的插件,可以查找当前网页的死链  2.直接点击页面查找死链  3.网站日志分析查找死链,去空间商后台下载IIS。  4.百度站长平台里面有个链接分析,也可以查看  二:收集死链  1.建一个TXT文

  • linux mail发邮件_python邮件发送

    linux mail发邮件_python邮件发送linux安装mailx发邮件文章目录linux安装mailx发邮件原理安装配置qq的smtps服务器配置Peer的证书发布者为信任​ mail命令是Linux终端发送邮件用的最多的命令。mailx是mail命令的更新版本,基于BerkeleyMail8.1,意在提供POSIXmailx命令的功能,并支持MIME、IMAP、POP3、SMTP和S/MIME扩展。mailx在某些交互特性上更加强大,如缓冲邮件消息、垃圾邮件评分和过滤等。在Linux发行版上,mail

    2022年10月20日
  • mybatis log plugin激活码-激活码分享

    (mybatis log plugin激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。https://javaforall.cn/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~W…

  • BeanCopier工具类_BeanUtils

    BeanCopier工具类_BeanUtilscglib的BeanCopier功能很强大,不过频繁的create太占用资源,降低服务器性能,所以写了下面的代码进行优化。以达到提升性能的目的。主要就是用缓存将类型相同的copier缓存起来,后续copy的时候就不用再继续创建了。这样的话如果有频繁用到BeanCopier的地方,将是很有用处滴。importorg.springframework.cglib.beans.BeanCopi…

  • The existing index has no NexusIndexer descriptor

    The existing index has no NexusIndexer descriptor

  • ubuntu nginx安装配置_PHP开发环境搭建步骤

    ubuntu nginx安装配置_PHP开发环境搭建步骤一、说明正在尝试基于nginx+php搭建web服务器,中途遇到不少问题。挣扎了三四个小时终于完成了,这里分享下经验。实验环境操作系统:Ubuntu18.0464位nginx:1.14.0php:7.2.17-0php-fram:php7.2-fpm二、实验步骤1、安装必要程序以及依赖#安装程序包sudoapt-getinstallphp7.2…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号