Vue框架+Element组件库学习笔记+Java读写

吾浴西风

已于 2023-10-17 09:50:14 修改

阅读量954

点赞数 4

文章标签： vue.js 学习笔记前端 javascript spring java

于 2023-09-10 17:29:24 首次发布

本文链接：https://blog.csdn.net/ruanfun/article/details/132793470

版权

一、Vue入门

vue：是一款前端框架，免除原生JavaScript中的DOM操作（如document.getElementById("文本输入框名").value），简化书写。基于MVVM（Model-View-ViewModel）思想，实现数据的双向绑定，将编程的关注点放在数据上。

MVVM思想：vue提供ViewModel（VM）实现视图（V）和模型（M）间的双向绑定。

MVC思想：只能实现模型到视图的单向展示。将模型里的数据取出来存放到视图中。但并不能实现模型与视图间的绑定（模型的数据发生变化视图也自动发生变化）。

1.1. Vue项目构建

首先检查是否有webapp目录，如果缺失需要新建。

第1步：在webapp目录下新建HTML页面，引入Vue.js文件

<script src="js/vue.js"></script>

第2步：在JS代码区域，创建Vue核心对象，进行数据绑定

<script>
new Vue({
    el:"#app",
    data(){
        return{
            username:""
        }
    }
})
</script>

用new方式立一个Vue对象，里面是javascript对象，el是element代表哪个代码区域用vue来控制，写入一个对应的选择器：

例如这里el的值“app”对应的是下面视图里的id属性值，代表<div>标签所包裹的所有内容都由Vue来控制。

data里返回一个数据，在这里是username是空。

第3步：编写视图

<div id="app">
    <input name="username" v-model="username">
    {{username}}
</div>

id里的值要和vue中el里的值对应，代表将被控制的区域。

v-model里的值要和上面data数据返回的属性名一致。

下面是完整代码：

<body>
    <div id="app">
        <input v-model="username">
        {{username}}
    </div>
<script src="js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data(){
                return{
                    username:""
                }
            }
        });
    </script>
</body>

第4步：运行

直接点击浏览器的图标即可访问：

1.2. Vue常用指令

1. v-bind可以绑定属性值，包括链接等：

href后面的值url对应的是返回值中的url属性名，表示将视图与模型中url的内容绑定，会出现一个点击一下可跳转的链接，点击即可进入百度首页。

<div id="app">
   <a v-bind:href="url">点击一下</a>
   <a :href="url">点击一下</a>
</div>

2. v-model可以将用户输入的值绑定到某个模型上。

3. v-on为HTML标签绑定事件

注意下面2种书写方式：

<div id="app">
   <input type="button" value="点击按钮" v-on:click="show()"/>
   <input type="button" value="点击按钮" @click="show()"/>
</div>

4. v-if 、v-else-if 、 v-else 用于判断：

<div id="app">
    <div v-if="count == 3">div1</div>
    <div v-else-if="count ==4">div2</div>
    <div v-else>div3</div>
    <br> <input v-model="count">
</div>

注意这个变量要写在return里面，在方框里输入不同的数字可以实时返回不同结果，很神奇：

5. v-for用于循环遍历

addr是一个临时变量，addrs是模型里的数据，是一个数组，{{addr}}是输出数据：

注意要将<div v-for="addr in addrs"> </div>看作一个整体，循环几次，整个标签就重复出现几次！

<div id="app">
    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>
</div>

可以加个角标i，i默认从0开始

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

1.3. Vue生命周期

生命周期八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）：

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。

1.4. 案例

1. 查询所有

SelectAllServlet代码见ajax，注意需要在pojo目录下添加Brand类，代码如下：

public String getStatusStr(){
  if(this.status == 1){
      return "启用";
  }
  return "禁用";
}

brand.html代码如下书写：

<body>
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <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+1}}</td>
            <td>{{brand.brandName}}</td>
            <td>{{brand.companyName}}</td>
            <td>{{brand.ordered}}</td>
            <td>{{brand.description}}</td>
            <td>{{brand.statusStr}}</td>
            <td><a href="#">修改</a> <a href="#">删除</a></td>
        </tr>
    </table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app", //设置Vue作用范围就是div标签包裹的部分
        data() {
            return {
                brands: []
            }
        },
        mounted() { //页面加载完成后，发送异步请求查询数据
            var _this = this;
            axios({
                method: "get",
                url: "http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function (resp) {
                _this.brands = resp.data;
            })
        }
    })
</script>
</body>

2. 添加

SelectAllServlet和addServlet代码见ajax，addBrand.html代码如下：

<body>
<div id="app">
    <h3>添加品牌</h3>
    <form action="" method="post">
        品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
        企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
        排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
        描述信息：<textarea rows="5" v-model="brand.description" cols="20" id="description" name="description"></textarea><br>
        状态：
        <input type="radio" v-model="brand.status" name="status" value="0">禁用
        <input type="radio" v-model="brand.status" name="status" value="1">启用<br>
        <input type="button" id="btn" @click="submitForm" value="提交">
    </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(){
                //2.发送ajax请求
                var _this = this;
                axios({
                    method: "post",
                    url:"http://localhost:8080/brand-demo/addServlet",
                    data:_this.brand
                }).then(function(resp){
                    //判断响应数据是否为success
                    if(resp.data =="success"){
                        location.href="http://localhost:8080/brand-demo/brand.html";
                    }
                })

            }
        }
    })
</script>
</body>

二、Element组件库

2.1. Element快速入门

Element：是一套组件库库，由饿了么前端开发团队提供，用于快速构建网页。

组件：组成网页的部件，例如：超链接、按钮、图片、表格等等~

第1步：在webapp下导入element-ui，同时还要引入Element的css、js文件和Vue.js，如果没导入会不显示千万小心！注意目录的层次结构：

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

第2步：创建Vue核心对象

<script>
    new Vue({
        el:"#app"
    })
</script>

第3步：官网复制Element组件代码，代码写入：

<div id="app">
    代码书写区域
</div>

2.2 Element布局

1. Layout布局：通过基础的24分栏，迅速简便地创建布局

规定布局的宽度为24，每一行可以设置多个组件，分别占据一定的宽度（总宽要是24）。

<div class="grid-content bg-purple-dark"></div> //暗色模块

<div class="grid-content bg-purple"></div> //亮色模块

2. Container布局容器：用于布局的容器组件，方便快速搭建页面的基本结构。

<script>
  new Vue({
   el:"#app",
   data() {
     const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
         };
    return {
        tableData: Array(20).fill(item)
       }
   }
})
</script>

布局注意：将css代码中<style>包裹的代码放在<head>标签内，将<el-row>的代码放在<div id="app">中，data的数据粘贴到el:"#app"下面，一定要粘贴到Vue里面！

2.3 Element组件

1. 表格

— — — — — — 知识加油站 — — — — — —

Template在前端中是用于生成HTML代码的一种工具或技术。它可以将数据和HTML结构进行绑定，以便动态地生成页面内容。

— — — — — — — — — — — — — — — —

<el-table-column prop="address" label="地址"></el-table-column>

【el标签里面prop的名称要和数据库的字段一致，也就是将数据库字段里面的内容展示在el标签里面。】

Table Attributes是Table整体的属性。Table Events是表的事件。Table Methods是表的方法。Table-column Attributes是设置Table列的属性。

align用于调整居中，修改方式：属性="设置参数"

表格间的间隔过大或者过小是因为加了width，只需要让其自适应即可。

按钮可以通过size属性来更改大小。

点击复选框如何获取行的数据呢？答：复选框要绑定事件。

加入下面3个当选中复选框会获取信息：

加入console.log是给控制台发消息需要f12打开查看：

2. 表单

包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。

3. 对话框

当前按钮点击@click会有dialogVisible属性被设置为true，用于控制对话框是否展示，当设置为true对话框展示

想取消的话只需要设置点击事件让diaogVisible为false即可：

<el-button @click="dialogVisible = false">取消</el-button>

可以让多个前端视图使用同一个数据模型，因此数据模型对单个前端视图来说属性可以是冗余的。

4. 分页工具条

total是总共有多少条信息；page-size取得是page-sizes里的值，是动态变化的；page-sizes是下拉框里的，自己定义的每页可以显示的数据条数。current-change是页码的变化，size-change是信息量的变化。

三、外观总结

1. 不同组件放在同一行

<el-row type="flex"></el-row>

2. 调整组件高度

style="height: 40px;"

3. 将按钮放到页面最右边

<div style="margin-left: auto" >
        <el-button type="primary" plain >新增</el-button>
</div>

4. 可点击的图标按钮：

<el-button class="el-icon-shopping-cart-1" size="mini" class="button"></el-button>
<el-button type="text" class="button">￥12.05</el-button>

Java读文件输出：

String fileName = "E:\\input.txt";
try(BufferedReader br = new BufferedReader(new FileReader(fileName))){
    String line;
    while((line = br.readLine())!=null){
        System.out.println(line);
    }
}