用SpringBoot写一个Vue单页面遇到的问题记录

最新推荐文章于 2024-05-14 19:49:44 发布

hellotqq

最新推荐文章于 2024-05-14 19:49:44 发布

阅读量367

点赞数

分类专栏： vue 文章标签： vue.js spring boot

本文链接：https://blog.csdn.net/weixin_42072357/article/details/124600955

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

1、按照在ElementUI官方文档中的样例引入CDN样式没有展现；

原因是因为：
ElementUI库是建立在Vue.js上面使用的，在使用CDN引入ElementUI库时，需要先使用CDN引入Vue.js，之后再引入ElementUI的样式文件与组件库，在使用时，Vue.js必须完整，也就是说HTML文件中需要实例化Vue.js
参考了这篇博客，感谢

2、引入原生的axios进行网络请求，获得数据后渲染不到表格中，

后来发现是this的传递问题。

在这里插入图片描述
这样做就就解决了，
axios的原生写法参考了这篇博客，感谢

下面是我这次写的vue的代码，表格中的列缩减了。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 1. 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 2. 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 3. 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
    <title>Document</title>
</head>


<body>
<div id="app">
    <div>
        <el-table
                :data="dataList"
                border
                style="width: 100%">
            <el-table-column
                    prop="uRealName"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="uTel"
                    label="电话"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="uIndentity"
                    label="身份证号"
                    width="170">
            </el-table-column>
        </el-table>
    </div>
</div>
</body>

<script>
    new Vue({
        el: '#app',
        mounted() {
            console.log("进入了")
        this.getList()
        },
        data() {
            return {
                dataList:[],
                loading: true
            }
        },
        methods:{
            getList(){
                let that = this
                axios.get('http://localhost:8088/getCheckingList')
                    .then(function (res) {
                        if (res.status==200){
                            that.dataList = res.data
                            console.log(res);
                            console.log(this.dataList)
                            that.loading = false
                        }

                    })
                    .catch(function (err) {
                        // 请求失败返回
                        console.log(err);
                    })
                    .then(function () {
                        // 不管成功失败都会执行，可以用来关闭加载效果等
                    });
            }
        }
    })
</script>
</html>