学习 elementui

1. 什么是elementui

vue中elementUI是基于vue实现的一套不依赖业务的UI组件库，提供了丰富的PC端组件，减少用户对常用组件的封装，降低了开发的难易程度。

2.Element-Ui简介

element 是基于 vue 实现的一套不依赖业务的 UI 组件库，提供了丰富的PC端组件，减少用户对常用组件的封装，降低了开发的难易程度。

3.如何使用elementui

(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="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 弄'
                }]
            }
      })

4. elementui+axios后台获取数据

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

（1）引入axios

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

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

（3）向后台接口发送请求。  

 

5.发生请求回出现跨域问题有两种解决方案

一、什么是跨域？

在了解什么是跨域的时候，我们首先要了解一个概念，叫同源策略，什么是同源策略呢，就是我我们的浏览器出于安全考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

二、跨域的解决方法

解决方案一： 第一种:使用@CrossOrigin----需要在每个接口类上添加

解决方案一： 第二种:使用一个跨域配置类。

package com.yyj.config;

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

/**
 * @program: qy164-springboot4
 * @description:
 * @author: 杨英俊
 * @create: 2023-04-14 15:11
 **/
@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("*");
        }
}

两种方案知可以使用一种，不可同时开启