[增删改查] 使用 Vue + LayUI 做后台管理 CRUD 界面和 REST 交互

其他 2018-08-27 09:10:13 阅读次数: 0
版权声明：欢迎评论，转载请声明出处 https://blog.csdn.net/larger5/article/details/81943525

一、前言

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 的，无缝对接。

3、使用 html + css + js 经典模式，来编写前端 vue 工程了，但代码十分冗余
而使用了 webpack 话，代码结构清晰简洁，且只需简单的配置即可解决跨域请求，减少后台的负担。

故以后创建 vue 工程，建议借助 webpack。

二、功能演示

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>

四、小结

本文使用的框架 Vue、LayUI，以及推荐的 UI 框架 ElementUI（pc端）/MintUI（移动端），都是国产的，值得支持。
2018/8/25 更新：解决本文前言的痛点
[增删改查] 使用 Vue + ElementUI + Webpack + VueRouter 做后台管理、REST 交互

猜你喜欢

转载自blog.csdn.net/larger5/article/details/81943525
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022