软工博客23

用户列表数据

ID	用户名	密码	姓名	年龄	更新时间
{{user.id}}	{{user.username}}	{{user.password}}	{{user.name}}	{{user.age}}	{{user.updateTime}}

<!--引入axios-->
<script src="js/axios.min.js"></script>
<script type="module">
    import { createApp } from './js/vue.esm-browser.js'
    createApp({
        data() {
            return {
                userList: [
                    { id: 1, username: 'daqiao', password: '1234567890', name: '大乔', age: 22, updateTime: '2024-07-15 15:05:45' },
                    { id: 2, username: 'xiaoqiao', password: '1234567890', name: '小乔', age: 18, updateTime: '2024-07-15 15:12:09' },
                    { id: 3, username: 'diaochan', password: '1234567890', name: '貂蝉', age: 21, updateTime: '2024-07-15 15:07:16' },
                    { id: 4, username: 'lvbu', password: '1234567890', name: '吕布', age: 28, updateTime: '2024-07-16 10:05:15' },
                    { id: 5, username: 'zhaoyun', password: '1234567890', name: '赵云', age: 27, updateTime: '2024-07-16 11:03:28' },
                    { id: 6, username: 'zhangfei', password: '1234567890', name: '张飞', age: 31, updateTime: '2024-07-16 11:03:28' },
                    { id: 7, username: 'guanyu', password: '1234567890', name: '关羽', age: 34, updateTime: '2024-07-16 12:05:12' },
                    { id: 8, username: 'liubei', password: '1234567890', name: '刘备', age: 37, updateTime: '2024-07-16 15:03:28' }
                ]
            }
        },
        methods: {
            async search(){
                const result = await axios.get('/list');
                this.userList = result.data;
            }
        },
        mounted() {
            this.search();
        }
    }).mount('#app')
</script>