elementui快速入门详细介绍_elmentui

作者：Cpp五条 | 2024-03-05 06:14:51

踩

elmentui

element:

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。它是由饿了么前端团队推出的基于 Vue 封装的 UI 组件库，提供了丰富的 PC 端组件，简化了常用组件的封装，大大降低了开发难度。

什么是element-ui:

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

如何使用elementui

1.引入js以及css

2.body中定义一个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 弄'
}]
}
})

elementui+axios后台获取数据

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

1.引入axios

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

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

向后台接口发送请求。

跨域请求错误：

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

如何解决跨域问题:

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

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

两种方式:

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

第二种:使用一个跨域配置类。

package com.lzx.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("*")
                //.allowedOriginPatterns("*") // 支持域
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 支持方法
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/189754