2024/03/18

学习时长：2小时

代码量：137行

博客数量：一篇

今天主要在尝试自己新建vue使用接口来连接后端，但是网上的内容很多，比较杂乱，尝试过直接使用异步请求，但是网上每个人的方式都不一样，直接使用一直无法成功，后来就不知道该怎么尝试，只能逐步来推进。

部分代码：

复制代码
<!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="id">

        <button v-on:click="search">搜索</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="(dept,index) in depts">
                <td>{{dept.id}}</td>
                <td>{{dept.name}}</td>
                <td>{{dept.createTime}}</td>
                <td>{{dept.updateTime}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
            <!-- <tr>
                <td>标题2</td>
                <td>分类2</td>
                <td>2000-01-01</td>
                <td>已发布</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td>标题3</td>
                <td>分类3</td>
                <td>2000-01-01</td>
                <td>已发布</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr> -->
        </table>
    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
<script type="module">
    import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
    createApp({
        data(){
            return{
                depts:[],
                id:'',
            }
        },
        methods:{
                search:function(){
                    console.log('http://localhost:8080/depts/i/'+this.id);
                    axios.get('http://localhost:8080/depts/i/'+this.id)
                    .then(result=>{
                        this.depts=result.data.data;
                        console.log(this.depts);
                    })
                    .catch(err=>{

                    });
                }
        },
        mounted:
            function(){
                axios.get('http://localhost:8080/depts')
                .then(result=>{
                    // console.log(result.data.data);
                    this.depts=result.data.data;
                })
                .catch(err=>{
                    
                });
            }
    }).mount('#app');
</script>
</html>
 
posted @ 2024-03-18 08:57  Snor9  阅读(12)  评论(0)    收藏  举报