elementUI 基础

1  elementUI介绍

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。

 网址：Element - The world's most popular Vue UI framework

2  如何使用elementUI

        2.1 先引入js和css

 <!--引入vue-->
<script src="../js/vue.js"></script> 
<!--在引入elementui之前必须先引入vue的js-->
<script type="text/javascript" src="../js/index.js"></script>

        2.2在body中定义一个div

<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>

         2.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 弄'
                }]
            }
      })

3  elementUI + axios后台获取数据

上面表格数据是固定， 需要通过axios异步请求 动态获取后台数据库的数据。

         3.1引入axios的js

<script src="../js/axios.min.js"></script>

         3.2 axios请求后端数据，在页面加载完毕后执行函数

 
 let app = new Vue({
        el:"#app",
        data:{
            tableData:[],  // 学生对象数组
            currentPage:1,  // 第几页--默认
            pageSize: 5,    //一页几条-- 默认
            total:0,
            pageSizes:[5,10,15],
            formInline:{},  //条件查询， 将条件封装为对象
        },
        //页面加载完毕， 执行方法，查询后端数据
        created(){
            this.initTable()
        },
        methods:{
            initTable(){
                axios.post("http://localhost:8080/student/findAll/"+this.currentPage+"/"+this.pageSize ,this.formInline).then(result=>{
                    this.tableData=result.data.data.data.records
                    this.total=result.data.data.data.total
                    console.log(result)
                })
            },
         }
 
    })

             向后台发送数据，报错CORS，因为端口号不同

 

           后端解决方案1：通过注解跨域: 使用@CrossOrigin注解， 这个注解可以放在类上，也可以放在方法上，在类上表示此类中所有方法都可以跨域， 在方法上表示次方法可以实现跨域

        方案2：通过配置文件实现跨域

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