element-ui

1.element-ui是什么

学习vue 用于dom和vue数据之间的交互。但是无法完成页面布局。element-ui可以帮你完成优美的网页布局。

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/form

2.如何使用element-ui

（1）引入js及css

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

（2）在body中定义一个div

<div id="#app">
    <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="date"
          label="日期"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址">
        </el-table-column>
    </el-table>
</div>

（3）创建vue对象

<script>
    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 弄'
            }]
        }
    })
</script>

4.element-ui + axios后台获取数据

上面写的死数据，现在需要从数据库中获取数据。必须axios异步请求

（1）引入axios

<script type="text/javascript" src="js/axios.min.js"></script>

（2）vue中created() 页面加载完毕后执行该函数

向后端接口发送请求

跨域请求错误：

什么是跨域：从一个服务器请求另一个服务器。这种请求必须ajax请求。只要这两个服务器之间 协议 ip port有一个不一致的。则出现跨域问题。、

如何解决跨域：

[1] 前端人员解决   --过

[2] 后端解决 -----

方式一：使用@CrossOrigin  ------ 需要在每个接口类上添加

方式二：使用一个跨域配置类

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

== 上面两种跨域方式使用一种即可 ==