vue+elementui+axios

1.elementui简介

        1.1

        Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

        Element - The world's most popular Vue UI framework

        1.2入门使用

        （1）引入对应的js及css

   <!--引入vue的js-->
    <script type="text/javascript" src="js/vue.js"></script>
    <!--引入elementui的js前必须引入vue的js-->
    <script type="text/javascript" src="js/index.js"></script>
    <!--引入elemengtui的css样式-->
    <link type="text/css" rel="stylesheet" href="css/index.css"/>

        （2）在body标签中创建div标签

<div id="aaa">
        <!--:data 引入vue中的变量tableData 必须为数组类型-->
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <!--el-table-column:表格的列  prop:必须和tableData中的属性名对于 -->
            <el-table-column
                    prop="date"
                    label="出生日期"
                    >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    >
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
    </div>

        （3）创建vue对象  并添加数据

let app=new Vue({
            el:"#app",
            data:{
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }]
            }
      })

 2.elementui+axios

        2.1 axios跨域请求使用

        上一步中添加的数据为自己编写的是数据，在实际开发过程中，数据需要通过查询数据库来获取，这时就需要和后端建立连接。

        跨域请求时需要在后端代码进行配置

@Configuration // 一定不要忽略此注解
public class CorsConfig implements WebMvcConfigurer {
 @Override
 public void addCorsMappings(CorsRegistry registry) {
     registry.addMapping("/**") // 所有接口
             .allowCredentials(true) // 是否发送 Cookie---
             .allowedOrigins("*") //支持哪些域跨域
//                .allowedOriginPatterns("*") // 支持域
             .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"}) // 支持方法
             .allowedHeaders("*")
             .exposedHeaders("*");
 }
}

        2.2  如何实现数据传输

        （1）引入axios

<!--引入axios的js-->
    <script type="text/ja vascript" src="js/axios.min.js"></script>

        （2）从数据库中获取数据并进行渲染