elementui使用

1 elementui是什么

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

如何使用elementui

elementui中文官方文档
https://element.eleme.cn/#/zh-CN/component/form
(1)引入js以及css

<script type="text/javascript" src="./js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="./js/index.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/axios.min.js"></script>

(2)body中定义一个div

<div id="app">
        <!--: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后台获取数据

上面写的数据是一个死数据。现在需要从数据库中获取数据。必须axios异步请求。上述中已经加过了.

vue中created（）是一个钩子函数
它的目的是页面加载完毕后执行该函数

 created(){
            //从新加载页面
            this.searchWeather();
            //查询所有班级
            this.loadAllClass();
        },

向后台接口发送请求。
如果向后台发送请求时在前端控制台出现了 403 报错, 这个啥时候是跨域请求的错误,

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

这里只说在后端解决跨域问题:

第一种:使用@CrossOrigin----需要在每个接口类上添加.
第二种:使用一个跨域配置类。

package com.xak.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

/**
 * Software：IntelliJ IDEA 2021.1.1 x64
 * Author: 
 * Date: 2021/7/7 10:55
 * ClassName:CorsConfig
 * 类描述： cors配置类
 */
@Configuration
public class CorsConfig {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            // 重写父类提供的跨域请求处理的接口
            @Override
            public void addCorsMappings(CorsRegistry registry) {
            // 添加映射路径
            registry.addMapping("/**")
            // 放行哪些原始域
            .allowedOrigins("*")
            //.allowedOriginPatterns("*")
            // 是否发送Cookie信息
            .allowCredentials(true)
            // 放行哪些原始域(请求方式)
            .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS", "PATCH")
            // 放行哪些原始域(头部信息)
            .allowedHeaders("*")
            // 暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
            .exposedHeaders("Header1", "Header2")
            // 预请求的结果有效期，默认1800分钟,3600是一小时
            .maxAge(3600);
            }
        };
    }
}

注意:上面两种java解决跨域只能使用一个