1 Star 0 Fork 0

kohler19/kohler19

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Please pay attention to the specific project description and its upstream code dependency when using it.
Clone or Download
vue案例.md 3.73 KB
Copy Edit Raw Blame History
kohler19 authored 2024-05-14 11:16 . add Vue学习/vue案例.md.

使用表格展示所有文章的数据, 并完成条件搜索功能

  • 钩子函数mounted中, 获取所有的文章数据
  • 使用v-for指令,把数据渲染到表格上展示
  • 使用v-model指令完成表单数据的双向绑定
  • 使用v-on指令为搜索按钮绑定单击事件

后端代码:https://gitee.com/kohler19/kohler19/tree/master/Vue%E5%AD%A6%E4%B9%A0/axios_demo/axios_demo

前端代码:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        文章分类: <input type="text" v-model="searchCondition.category" />

        发布状态: <input type="text" v-model="searchCondition.state" />

        <button v-on:click="search">搜索</button>
        <button @click="clear">重置</button>
        <br />
        <br />
        <table border="1 solid" colspa="0" cellspacing="0">
            <tr>
                <th>文章标题</th>
                <th>分类</th>
                <th>发表时间</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            <tr v-for="(article,index) in articleList">
                <td>{{article.title}}</td>
                <td>{{article.category}}</td>
                <td>{{article.time}}</td>
                <td>{{article.state}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script type="module">
        //导入vue模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        //创建vue应用实例
        createApp({
            data(){
                return {
                    articleList:[],
                    searchCondition:{
                        category:'',
                        state:''
                    }
                }
             },
             //钩子函数mounted中,获取所有文章数据
             mounted:function(){
                //发送异步请求 axios
                axios.get('http://localhost:8080/article/getAll').then(result=>{
                    //成功回调
                   // console.log(result.data);
                   this.articleList=result.data;
                }).catch(err=>{
                    //失败回调
                    console.log(err);
                });

             },
            methods:{
                clear:function(){
                     //清空category以及state的数据
                    //在methods对应的方法里,使用this获取到vue实例中转杯的数据
                    this.searchCondition.category='';
                    this.searchCondition.state='';
                },
                search:function(){
                    //发送请求完成搜索,携带搜索条件
                    axios.get('http://localhost:8080/article/search?category='+this.searchCondition.category+'&state='+this.searchCondition.state)
                    .then(result=>{
                        //成功回调
                        //把得到的数据赋值给articleList
                        this.articleList=result.data
                    }).catch(err=>{
                        //失败回调
                        console.log(err);
                    });
                }
            }

        }).mount("#app")//控制html元素
    </script>
</body>

</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/kohler19/kohler19.git
git@gitee.com:kohler19/kohler19.git
kohler19
kohler19
kohler19
master

Search