Elementui

1.简介

element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面。   里面有一些常用的组件和按钮表单  下面附上网页Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/form

2.引用Elementui

在引用Elementui.js之前应先引入Vue.js

  <script type="text/javascript" src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <link type="text/css" rel="stylesheet" href="css/index.css">
    <script type="text/javascript" src="js/axios.min.js"></script>

3.跨域问题两种解决方法

3.1 什么是跨域问题

   跨域就是从一个服务器端跳转到另外一个服务器端，这种请求必须为ajax请求。 只要这两个服务器之间 协议 ip port有一个不一致的。则出现跨域问题。在运用Elementui进行跨域操作时  我们应当先解决跨域问题  

3.2.1第一种方法 

     在controller添加@CrossOrigin 解决跨域问题 但时添加注解的缺点就是每创建一个controller 就要在上面添加注解。

3.2.2第二种方法

创建跨域配置类

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

4.使用elementui

在body中定义一个div

<div id="add">
    <el-table
            :data="student"
            border
            style="width: 100%">
        <el-table-column
                prop="sid"
                label="学生编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sname"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="sage"
                label="年龄">
        </el-table-column>
        <el-table-column
                prop="aclass.cname"
                label="班级">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作">
            <template slot-scope="scope">
                <el-button type="primary" size="small" icon="el-icon-edit" @click="upt(scope.row)">编辑</el-button>
                <el-button type="danger" size="small" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
            </template>
        </el-table-column>
 <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

在body外定义script

<script>
    let ee = new Vue({
        el: "#add",
        data: {
            
            dialogVisible: false,
            //查询
            studentFrom: {},
            //页码
            student: [],
            //默认页
            currentPage: 1,
            //默认每页几条
            pageSize: 5,
            //总条数
            total: 0,
        }, 
      //网页加载完毕调用
        created() {
            this.init();
}，
  methods: {
            //查询全部
            init() {
                axios.post("http://localhost:8080/student/find/" + this.currentPage + "/" + this.pageSize, this.studentFrom).then(result => {
                    console.log()
                    this.student = result.data.data.records
                    this.total = result.data.data.total;
                    console.log(this.student)
                })
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.init();

            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.init();
            },

其他的CURD基本上和查询差不多     需要原码请私信