• Java web（七）：Vue&Element

    文章目录

    一、Vue

    1.1 基本介绍

    Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
    在这里插入图片描述
    基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
    在这里插入图片描述
    vue的使用需要引入脚本 在webapp目录下建一个js/vue.js

    1.2 常用指令

    在这里插入图片描述
    演示

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input v-model="username">{{username}}<br>

    <a v-bind:href="url">演示v-bind:href</a><br>
    <a :href="url">也可以这么写</a><br>
    <input v-model="url"><br>

    <input type="button" value="演示v-on:click" v-on:click="show()"><br>
    <input type="button" value="演示v-on:click简写" @click="show()"><br>

    <div v-if="count==3">v-if</div>
    <div v-else-if="count==4">v-else-if</div>
    <div v-else="">v-else</div>
    <div v-show="count==3">v-show</div>
    <input v-model="count"><br>

    <div v-for="addr in addrs">{{addr}}<br></div>
    <div v-for="(addr,i) in addrs">{{i}}---{{addr}}<br></div>



</div>

</body>

<script src="js/vue.js"></script>
<script>
    new Vue({
        // el:用来指定哪儿些标签受 Vue 管理
        el: "#app",

        // data:用来定义数据模型
        data() {
            return {
                username: "演示v-model",
                url: "https://www.baidu.com",
                count: 4,
                addrs:["北京","天津"]
            }
        },

        // method:用来定义函数
        methods: {
            show() {
                alert("演示v-on:click")
            }
        },

        // mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据
        mounted:{

        }
    });
</script>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62

    1.3 生命周期

    在这里插入图片描述

    在这里插入图片描述

    1.4 案例Vue+Axios

    brand.html

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<div id="app">
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序号</th>
            <th>品牌名称</th>
            <th>企业名称</th>
            <th>排序</th>
            <th>品牌介绍</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        <tr v-for="(brand,i) in brands" align="center">
            <td>{{i}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td v-if="brand.status == 0">禁用</td>
            <td v-else-if="brand.status == 1">启用</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>


    </table>
</div>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",
        data(){
            return{
                brands:[]
            }
        },
        mounted() {
            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/selectAllServlet"
            }).then(function(resp){
                _this.brands=resp.data;
            })
        }
    });


</script>


</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63

    addBrand.html

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>添加品牌</title>
</head>
<body>
<h3>添加品牌</h3>
<div id="app">
    <form action="" method="post">
        品牌名称：<input id="brandName" name="brandName" v-model="brand.brandName"><br>
        企业名称：<input id="companyName" name="companyName" v-model="brand.companyName"><br>
        排序：<input id="ordered" name="ordered" v-model="brand.ordered"><br>
        描述信息：<textarea rows="5" cols="20" id="description" name="description"
                           v-model="brand.description"></textarea><br>
        状态：
        <input type="radio" name="status" value="0" v-model="brand.status">禁用
        <input type="radio" name="status" value="1" v-model="brand.status">启用<br>

        <input type="button" id="btn" value="提交" @click="submitForm">
    </form>
</div>

<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>

<script>
    new Vue({
        el: "#app",
        data(){
          return{
              brand:{}
          }
        },
        methods:{
            submitForm(){
                var _this=this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/vue-demo/addServlet",
                    data:_this.brand
                }).then(function (resp){
                    if(resp.data == "success"){
                        location.href="http://localhost:8080/vue-demo/brand.html"
                    }
                })
            }
        }
    });

</script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54

    二、Element

    1. 将资源 element-ui 文件夹直接拷贝到项目的 webapp 下
      在这里插入图片描述

    2. 创建页面，并在页面引入Element 的css、js文件 和 Vue.js

    <script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

    • 1
    • 2
    • 3
    1. 创建Vue核心对象，Element 是基于 Vue 的，所以使用Element时必须要创建 Vue 对象
    <script>
	new Vue({
		el:"#app"
	})
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    1. 官网复制Element组件代码 https://element.eleme.io/

    三、综合案例【Vue+Element+Axios+Servelt+Mybatis】

  • 相关阅读:
    LVS负载均衡集群
    一些关于运筹学和机器学习之间协同作用的思考
    c++中多态调用场景下基类析构函数的virtual声明
    一键自动化博客发布工具,用过的人都说好(infoq篇)
    使用yx-tiny命令行工具进行图片压缩
    liunx jmter 环境配置
    Java基础：Java面向对象
    ModbusTCP服务端
    [NSSCTF]prize_p1~p5五道题学习
    Java CountDownLatch 学习总结
  • 原文地址：https://blog.csdn.net/shendaiyan/article/details/134223938