vue-elementUi-day02

最新推荐文章于 2025-02-17 18:35:14 发布

DDHuao

最新推荐文章于 2025-02-17 18:35:14 发布

阅读量325

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/DDHuao/article/details/130169153

版权

1、elementUi 入门

1.1 elementUi简介

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

1.2 elementUi优点

（1）基于 Vue.js，可以和 Vue.js 很好地配合使用，方便开发者熟悉 Vue.js 的使用。

（2）丰富的 UI 组件，可以满足开发者对于界面设计的需求。

（3）完善的文档和示例，方便开发者学习和使用。

（4）组件的封装程度较高，使用起来比较方便。

（5）具有良好的兼容性，可以在多种浏览器中正常使用。

（6）社区活跃，有较多的用户和贡献者，问题得到及时解决。

1.3 官方网址

Element - The world's most popular Vue UI framework

2、elementUi 编写

2.1 引入js以及css

<!-- 引 入 顺 序-->
    <!-- 必须 先引入 vue 的 js -->
    <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>

    <!--再引入 elementUi 的 js-->
    <script type="text/javascript" src="../js/index.js"></script>

    <!--再引入 css-->
    <link rel="stylesheet" href="../css/index.css"/>

2.2 body中定义一个div

<body>
<div id="app">
    <el-table
            :data="tableData"
            stripe
            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>

</div>

</body>

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后台获取数据

3.1 引入axios的js

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

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

//页面加载完执行立即的代码
        created(){
            this.int();
        },

3.3 向后台请求数据

//页面
            int(){
                axios.post("http://localhost:8080/student/list/" + this.currentPage + "/" + this.pageSize,this.studentvo).then(result=>{
                    this.tableData=result.data.data.records;
                    //获 取 条 数
                    this.total=result.data.data.total;
                })
            },

3.4 如何解决跨域问题:

跨域问题

简单来说，当一台服务器资源从另一台服务器（不同的域名或者端口）请求一个资源或者接口，就会发起一个跨域 HTTP 请求。

1、前端人员完成（了解）

2、后端人员完成

2.1 使用@CrossOrigin注解

这个方法仅对Java有用。springboot中，在Controller类上添加一个 @CrossOrigin(origins ="*") 注解就可以实现对当前controller 的跨域访问了，当然这个标签也可以加到方法上，或者直接加到入口类上对所有接口进行跨域处理，注意这个注解只在JDK1.8版本以上才起作用。

@Api(tags = "学生接口")
@RestController
@RequestMapping("student")
//@CrossOrigin //实现跨域问题
public class StudentController {
    @Autowired
    private StudentService studentService;

    @PostMapping("list/{current}/{pageSize}")
    //接口方法加以说明
    @ApiOperation (value = "根据条件查询学生信息")

    public Result findByPage(
            @ApiParam(value = "当前页面",name = "current",required = true,defaultValue = "1")
            //映射url绑定的占位符
            @PathVariable Integer current,
            @ApiParam(value = "每页显示条数",name = "pageSize",required = true,defaultValue = "3")
            @PathVariable Integer pageSize,
            //用来接收前端传递给后端的json字符串中的数据
            @RequestBody StudentVo studentVo

    ){
        return studentService.findByPage (current, pageSize, studentVo);
    }

2.2 使用 CORSConfiguration 跨域配置类

@Configuration//spring2.0以上
public class CORSConfiguration extends WebMvcConfigurationSupport {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping ("/**")
                .allowedMethods ("*")
                .allowedOrigins ("*")
                .allowedHeaders ("*");
        super.addCorsMappings (registry);
    }
}

2.3 上面两种只能使用一个

4、elementui+axios 完成增删改查

4.1 引入 js css

<!-- 引 入 顺 序-->
    <!-- 必须 先引入 vue 的 js -->
    <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>

    <!--再引入 elementUi 的 js-->
    <script type="text/javascript" src="../js/index.js"></script>

    <!--再引入 css-->
    <link rel="stylesheet" href="../css/index.css"/>

    <!-- 引入 axios.min.js -->
    <script  src="../js/axios.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 引 入 顺 序-->
    <!-- 必须 先引入 vue 的 js -->
    <script type="text/javascript" src="../js/v2.6.10/vue.js"></script>

    <!--再引入 elementUi 的 js-->
    <script type="text/javascript" src="../js/index.js"></script>

    <!--再引入 css-->
    <link rel="stylesheet" href="../css/index.css"/>

    <!-- 引入 axios.min.js -->
    <script  src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">

    <!-- 搜 索 表 单-->
    <el-form :inline="true" :model="studentvo" class="demo-form-inline">
        <el-form-item label="姓名">
            <el-input v-model="studentvo.sname" placeholder="姓名"></el-input>
        </el-form-item>

        <!-- 查询 条件 -->
        <el-form-item
                label="最大年龄"
                prop="maxAge"
                :rules="[
      { required: true, message: '最大年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
        >
            <el-input v-model.number="studentvo.maxAge" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item
                label="最小年龄"
                prop="minAge"
                :rules="[
      { required: true, message: '最小年龄不能为空'},
      { type: 'number', message: '年龄必须为数字值'}
    ]"
        >
            <el-input v-model.number="studentvo.minAge" autocomplete="off"></el-input>
        </el-form-item>

        <!-- 搜 索 框 -->
        <el-form-item>
            <el-button type="primary" @click="int">搜 索</el-button>
        </el-form-item>

        <!-- 批 量 删 除 -->
        <el-form-item>
            <el-button type="primary" @click="deletes">批量删除</el-button>
        </el-form-item>

        <!-- 添 加 -->
        <el-form-item>
            <el-button type="primary" @click="tianjiaStu">添加</el-button>
        </el-form-item>
    </el-form>


    <el-table

            :data="tableData"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <!--多选框-->
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>

        <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="age"
                label="年龄"
                width="180">
        </el-table-column>
        <el-table-column
                prop="cid"
                label="班级号">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                >
            <template slot-scope="scope">
                <el-button type="success" icon="el-icon-edit" @click="editStu(scope.row)">编辑</el-button>
                <el-button type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>

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

    <!-- 编 辑 弹 窗 -->

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="学生名">
                <el-input v-model="form.sname"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="班级名">
                <!--下拉框-->
                <el-select v-model="form.cid" placeholder="请选择">

                    <el-option
                            v-for="item in class01"
                            :key="item.cid"
                            :label="item.cname"
                            :value="item.cid">
                    </el-option>

                </el-select>
                <!--<el-input v-model="form.cid"></el-input>-->
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="cancellation">取 消</el-button>
    <el-button type="primary" @click="updateStu">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 添 加 弹 窗 -->

    <el-dialog
            title="提示"
            :visible.sync="insertStudent"
            width="30%"
    >
        <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="学生名">
                <el-input v-model="form.sname"></el-input>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input v-model="form.age"></el-input>
            </el-form-item>
            <el-form-item label="班级名">
                <!--下拉框-->
                <el-select v-model="form.cid" placeholder="请选择">

                    <el-option
                            v-for="item in class01"
                            :key="item.cid"
                            :label="item.cname"
                            :value="item.cid">
                    </el-option>

                </el-select>
                <!--<el-input v-model="form.cid"></el-input>-->
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="cancellation01">取 消</el-button>
    <el-button type="primary" @click="insertStu">确 定</el-button>
        </span>
    </el-dialog>

</div>

</body>
<script type="text/javascript">
    let app = new Vue({
        el:"#app",
        data:{
            tableData: [],

            studentvo: {},

            //当 前 页 数
            currentPage:1,

            //每 页 数 量
            pageSize:5,

            //总 条 数
            total:0,

            form:{},
            //编辑弹窗
            dialogVisible:false,
            //添加弹窗
            insertStudent:false,
            //多选
            selectionChange:[],

            class01:[],
            /*item:{}*/


        },
        //页面加载完执行立即的代码
        created(){
            this.int();
        },

        methods:{
            //页面
            int(){
                axios.post("http://localhost:8080/student/list/" + this.currentPage + "/" + this.pageSize,this.studentvo).then(result=>{
                    this.tableData=result.data.data.records;
                    //获 取 条 数
                    this.total=result.data.data.total;
                })
            },
            //改变每页条数触发
            handleSizeChange(val){
                this.pageSize=val;
                this.int();
            },
            //改变当前页码触发的方法
            handleCurrentChange(val){
                this.currentPage=val;
                this.int();
            },
            onSubmit(){

            },
            //删除
            del(row){
                let del = row.sid;
                axios.delete("http://localhost:8080/student/deleteBySid/" + del,this.studentvo).then(result=>{
                    if (result.data.code===200){
                        this.$message(result.data.msg)

                        this.int();
                    }else(
                        this.$message(result.data().msg)
                    )


                })

            },
            //编辑班级事件
            editStu(row){
                this.dialogVisible=true;
                this.form=row;
                axios.get("http://localhost:8080/class01/queryAllClass").then(result=>{
                    this.class01=result.data.data;
                    //console.log(result)

                })
            },

            //修改确定按钮
            updateStu(){
                axios.put("http://localhost:8080/student/updateStu",this.form).then(result=>{
                    if (result.data.code===200){
                        this.$message(result.data.msg);

                        this.dialogVisible=false;

                        this.int();
                    }

                })
            },
            //批量删除
            deletes(){
                axios.post("http://localhost:8080/student/deletes",this.selectionChange).then(result=>{
                    if (result.data.code===200){
                        this.$message.success(result.data.msg)
                        this.int();
                    }else(
                        this.$message(result.data.msg)
                    )
                })
            },

            //点击多选框获取学生班级信息
            handleSelectionChange(val){
                this.selectionChange=val;
            },
            //编 辑 弹 窗 取 消 键
            cancellation(){
                this.int();
                this.dialogVisible=false;
            },
            //添 加 弹窗 取 消 键
            cancellation01(){
                this.int();
                this.insertStudent=false
            },
            //添 加 弹 窗 出 现
            tianjiaStu(){

                this.insertStudent=true;
                axios.get("http://localhost:8080/class01/queryAllClass").then(result=>{
                    this.class01=result.data.data;
                })

            },

            //添 加
            insertStu(){
                axios.post("http://localhost:8080/student/InsertStu",this.form).then(result=>{
                    if (result.data.code===200){
                        this.$message(result.data.msg);

                        this.insertStudent=false;

                        this.int();
                    }

                })
            }
        }
    })
</script>
</html>