springboot项目如何快速增减字段

element-ui简单学习+基于springboot实现增删改查

 

文章目录

• element-ui简单学习+基于springboot实现增删改查

• 样例演示

• element -ui提供的图标

• element ui 里面的button按钮
• element-ui的超链接（linked）的使用
• radio单选框使用
• CheckBox
• input输入框

• 如何修改我们输入框的大小
• 在我们的input组件里面加入我们的图片（icon）

• select下拉框的使用
• Switch组件的使用
• upload中的上传我们的文件
• form表单

• 数据校验
• 自定义数据的校验（就是我们自己决定如何进行邮箱的校验）

• 增删改查（结合组件crud）
• 前端代码的编写

• 删除数据

• 修改

 

样例演示

 

sprinngbooy+vue实现简单的增删改查（简单的前后端分离）

 

如何启动我们的vue ui

在这里进行创建的我们的element ui 进行设计

就是我们的图形化

ui（图形化界面）（执行我们的 vue ui 这个是我们要进行创建的）

我们进行的操作就是 首先我们进行的是先创建一个vue项目

创建完之后 我们就是要进行安装我们的element ui的插件

这个是我们要进行选择的插件

但是我们要删除的就是那个format 那个是对我们的代码进行格式化处理 这个是不是很重要的

这个还是比较重要的

开始历史模块

创建完成之后的效果

然后我们的一个element ui的插件就已经安装好了 那么我们就可以直接进行的是安装插件就好啦

直接搜索然后安装就好了

安装完成就好了

接下来启动这个项目

我们直接在我们的idea里面打开我们的 vue（也就是我们刚刚创建的那个vue项目），然后用idea

打开就好

然后我们在idea集成的控制台里面直接运行我们的命令就好

npm run serve

下面这个图片就是我们的运行成功的效果

element -ui提供的图标

也就是一套常用的图标组件

就是非常的简单 我们就是直接修改我们想要的类名就ok

我们直接用他们的标签就好

element ui 里面的button按钮

这个也是一组常用的一组常用的操作按钮

这个就是我们要进行的 样式的处理 我们可以看到的就是这样的圆角加上我我们的背景的弱化

这些效果就是可以叠加的 plain和 round都是可以进行叠加处理 通过我们的叠加处理达到更好的效果

circle就是将我们的按钮直接设置为圆形这个就是直接为圆形

还有就是一个绑定我们的点击事件

就是我们可以设置我们的图标到底是不是可以被点击处理

设置我们的disabled

loading属性 可以给按钮设置加载中的效果

<el-button type="success" icon="el-icon-check" circle @click="test()" :loading="loading"></el-button>

这里就是给我们的button绑定我们的button属性进去，当我们点击我们的这个按钮之后就会绑定我们的加载属性，

我们给我们的加载属性进行了我们的数值绑定，

//这里就是给我们的代码进行的包装处理 比如说我们的test 以及我们的settimeout就是设置我们的定时开关 
<script>
    export default {
        name: "test",
        methods: {
            test() {
                this.loading = true
                setTimeout(()=>{
                    this.loading=false
                },3000)
            }
        },
        data() {
            return {
                loading: false
            }
        }
    }
</script>

size给我们的图片设置大小 不是我们设置像素 而是设置我们的minus big 啥的

这里可以设置我们的从大到小进行处理实现我们的数据

element-ui的超链接（linked）的使用

link的使用

就是文件超链接

我们采取的是el-linked标签

设置完成之后我们就可以直接进行使用这个标签进行处理一些数据

当我们给他设置我们的target属性之后 并且将它的target属性设置成为blank 那即是会默认打开一个空的页面

同样我们可以给我们的这个标签设置我们的disabled属性进行不能点击。

underline

这个就是设置我们的下划线有没有的一个操作

我们直接进行属性的绑定处理

这个icon也是可以给我们的文字超链接设置图标

我们直接在这个标签的里面进行修改就好啦

radio单选框使用

采取的标签是el-radio即可

通过v-model进行数据的绑定 进行数据对象的绑定，label代表我们单选框的值

文本直接写在标签里面就行

<el-radio v-model="radio" label="1">备选项</el-radio>
  <el-radio v-model="radio" label="2">备选项</el-radio>

一个是按钮 一个是复选框 这里一共有两个选项

CheckBox

多选框

这个采取的是

el-checkbox标签

源码剖析：其实就是对一个数组进行循环操作的过程比较好理解

<template>
    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
    </el-checkbox-group>
</template>

<script>
    const cityOptions = ['上海', '北京', '广州', '深圳'];
    export default {
        name: "testCheckbox",
        data() {
            return {
                checkAll: false,
                checkedCities: ['上海', '北京'],
                cities: cityOptions,
                isIndeterminate: true
            };
        },
        methods: {
            handleCheckAllChange(val) {
                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                //如果要是不确定某些数据是什么 我们就可以将这个数据打印出来
                //在这里我们可以进行的操作就是
                //alert(value)//这里就是打印出来我们想要的数据处理 这一点很重要的
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            }
        }


    }


</script>

<style scoped>

</style>

input输入框

受控组件

<el-input v-model="input" placeholder="请输入内容"
            ></el-input>
            <el-button type="primary"@click="click()">一个小按钮</el-button>

通过我们的size属性修改我们的输入框的属性 large/medium 就可以设置我们的属性

如何修改我们输入框的大小

关于这个输入框的修改大小 因为本是增组件是没有给我们进行听提供这个宽度的修改 所以说 我们要是想修改的话

可以采取下面的方法进行实际的操作处理

<div style="width: 300px">
            <el-row>
                <el-input v-model="input" placeholder="请输入内容"
                ></el-input>
                <el-button type="primary" @click="click()">一个小按钮</el-button>
            </el-row>
        </div>

就是我们通过修改我们外边所嵌套的div标签的style进行修改从而达到这个属性

show-password属性 可以切换

加上我们的show-password属性之后我们就可以将我们的密码进行隐藏处理 了

是可以自己自行进行切换的

我们还可以设置我们的图片

在我们的input组件里面加入我们的图片（icon）

prefix-icon和我们的suffix-icon进行图标的设置首位的图标

展示效果：

其中这里的数据一个是我们的最大长度的限制另一个就是我们的最大长度是多少

select下拉框的使用

首先是实现的效果

el-select/el-option

都是采用我们的v-model进行我们的数据的绑定而已

然后里面利用我们的label进行我们的文本的展示处理

value是我们的当前选项的值

<template>
  <el-select v-model="value" placeholder="请选择">
    <el-option
     //进行一个for循环进行遍历渲染我们的数据进入
     //从我们的数组里面拿东西
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
      }
    }
  }
</script>

Switch组件的使用

这个就代表我们两组相对对立事件的开关处理

我们采用的是el-Switch进行处理我们的数据

我们依然采用的是v-model进行我们的数据的绑定处理

采用的是Switch开关

采用我们的Boolean类型进行我们的开关处理 就是我们的TRUE代表的是开 FALSE代表的是关闭属性

我们可以在我们的Switch的数据里面进行实际的操作处理

<el-switch
        v-model="value1"
        active-color="#13ce66"
        active-text="上架"
        inactive-color="#ff4949"
            inactive-text="下架">
    <!--就是这个颜色的值 我们是可以进行改变的 这个是由我们自行决定的 取决于我们自己的操作 如何进行操作 这个都是比较重要的-->
</el-switch>

这个active-text="上架"代表的就是我们在将我们的Switch放到我们的左侧的时候做出的变化，然后我们的移到我们的右边的时候 我们的文字内容又是什么

upload中的上传我们的文件

这里我们选择一个比较美观的一个代码进行我们的实际的操作处理

这样的话 我们其实是可以直接将我们的数据进行拖拽到此的

下面是我们的代码

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
           //这个是我们的后端请求的接口
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

action是我们后端的接口 会将我们的数据通过这个接口将我们的数据传输到我们的后端

后端我们采用springboot+easyExcel数据进行解析

我们的思路就是将我们的这个Excel表格放到我们的这个拖拽框中去，然后我们从后台解析出我们的数据

<dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel</artifactId>
            <version>2.2.6</version>
        </dependency>

这个是我们在pom文件里面添加的依赖

2.创建一个类，用来映射Excel文件

就是类的属性 和这个相对应

@Data
public class ExcelVo {
    //这个就是我们的实体类
    @ExcelProperty("编号")
    private Integer id;//我们在这个上边加上我们的注解就可以将我们的数据和Excel里面的数据进行相应的映射处理
    @ExcelProperty("姓名")
    private String name;
    @ExcelProperty("性别")
    private String gender;
    @ExcelProperty("年龄")
    private String age;
    @ExcelProperty("班级")
    private String classes;

}

然后我们创建一个Excelservice 实现我们的业务逻辑

下面是我们的service层干的事情

package com.example.test.excelService;

import com.alibaba.excel.EasyExcel;
import com.alibaba.excel.context.AnalysisContext;
import com.alibaba.excel.event.AnalysisEventListener;
import com.example.test.entity.ExcelVo;
import org.springframework.stereotype.Service;

import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;

/**
 * @author yt1105
 * @version 1.0
 */
@Service
public class ExcelServiceImpl implements ExcelService {
    @Override
    public List<ExcelVo> list(InputStream inputStream) {
        List<ExcelVo> list = new ArrayList<>();
        EasyExcel.read(inputStream).
                head(ExcelVo.class).sheet().
                registerReadListener(new AnalysisEventListener<ExcelVo>
                        () {
                    @Override
                    public void invoke(ExcelVo excelVo, AnalysisContext analysisContext) {
                        list.add(excelVo);//这个函数里面就是每一次都会将我们的Excel里面的数据解析成为我们的一个实体类
                        //任何我们放进去就可以
                    }
                    @Override
                    public void doAfterAllAnalysed(AnalysisContext analysisContext) {
                        System.out.println("数据解析完成");
                    }
                }).doRead();
        return list;
    }
}

创建控制器Excelcontroller

接收前端请求，调用Excelservice进行数据解析

package com.example.test.ExcelController;

import com.example.test.entity.ExcelVo;
import com.example.test.excelService.ExcelService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.util.List;

/**
 * @author yt1105
 * @version 1.0
 */
@RestController
@RequestMapping("/excel")
public class controller {
    @Autowired
    private ExcelService excelService;

    @PostMapping("/import")
    public String importDate(@RequestParam("file") MultipartFile file) {
        try {
            List<ExcelVo> list = this.excelService.list(file.getInputStream());
            for (ExcelVo excelvo : list
            ) {
                System.out.println(excelvo);

            }
        } catch (IOException e) {
            return "失败";
        }
        return "success";
    }
}

存在问题就是没法将前台的数据放到后端里面去

上传的数据没法进行上传

还需要进一步进行解决

form表单

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

表单域中可以放置各种类型的表单控件。

就是我们之前学的东西 都可以嵌入到我们的这个表单里面去。

整个表单域的值直接和vue对象进行绑定的

这个是我们的演示的效果

我们可以看到的是就是我们的数据是封装好都是在我们的form表单里面的

我们直接可以进行使用的也就是我们要传递给后台的数据即可

这个也可以说是我们的数据的绑定

数据校验

这个是我们之后再我们的开发过程中经常会遇到的问题 所以说这个也是我们需要经常去掌握的一个问题，

所以说 我们就可以进一步的去处理我们所需要的数据

因为我们一旦没有准确的输入我们的数据的话，我们就会报错

下面就是我们的数据校验代码

自定义数据的校验（就是我们自己决定如何进行邮箱的校验）

我们可以自己定义我们的正则表达式进行校验

采用的是我们的正则表达式进行的校验处理

var checkEmail = (
                rule, value, callback
            ) => {
                const mailReg = /^(?![0-9]+$)(?![a-zA-Z]+$)(?!([^(0-9a-zA-Z)]|[\(\)])+$)([^(0-9a-zA-Z)]|[\(\)]|[a-zA-Z]|[0-9]){6,}$/
                if (!value) {
                    return callback(new Error("邮箱不能为空"))
                }
                setTimeout(() => {
                    if (mailReg.test(value)) {
                        callback();
                    } else {
                        callback(new Error("请输入正确的格式"))
                    }
                }, 100)
            };

增删改查（结合组件crud）

这个是我们的数据表

我们就是对我们的这个表的数据进行所谓的增删改查的进行处理

我们先写出来我们后端的接口

<dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>org.apache.velocity</groupId>
            <artifactId>velocity</artifactId>
            <version>1.6.2</version>
        </dependency>

一个是本身的依赖

一个是代码生成

通过mybaits-plus自动生成后端代码

这个代码自动生成器就比较的好用

package com.example.test;

import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.config.DataSourceConfig;
import com.baomidou.mybatisplus.generator.config.GlobalConfig;
import com.baomidou.mybatisplus.generator.config.PackageConfig;
import com.baomidou.mybatisplus.generator.config.StrategyConfig;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;

/**
 * @author yt1105
 * @version 1.0
 */
public class Main {
    public static void main(String[] args) {
        AutoGenerator autoGenerator = new AutoGenerator();
        //数据源
        DataSourceConfig dataSourceConfig = new DataSourceConfig();
        //后面相当于给我们的数据进行传递参数
        dataSourceConfig.setDbType(DbType.MYSQL);//这个就是配置我们的mysql属性
        dataSourceConfig.setDriverName("com.mysql.cj.jdbc.Driver");
        dataSourceConfig.setUrl("jdbc:mysql://localhost:3306/yt01?serverTimezone=Asia/Shanghai");
        dataSourceConfig.setUsername("root");
        dataSourceConfig.setPassword("root");
        autoGenerator.setDataSource(dataSourceConfig);

        //全局配置
        GlobalConfig globalConfig = new GlobalConfig();
        globalConfig.setOutputDir(System.getProperty("user.dir") + "/src/main/java");
        globalConfig.setAuthor("yt");
        globalConfig.setOpen(false);//设置是否将我们的代码打开就是资源管理器打开 我们不需要打开就行
        //包的配置
        PackageConfig packageConfig = new PackageConfig();
        packageConfig.setParent("com.yt");
        packageConfig.setEntity("entity");
        packageConfig.setMapper("mapper");
        packageConfig.setService("service");
        packageConfig.setServiceImpl("service.impl");
        packageConfig.setController("controller");
        autoGenerator.setPackageInfo(packageConfig);
        //策略配置
        StrategyConfig strategyConfig = new StrategyConfig();
        strategyConfig.setInclude("temp");
        strategyConfig.setNaming(NamingStrategy.underline_to_camel);
        strategyConfig.setNaming(NamingStrategy.underline_to_camel);
        strategyConfig.setEntityLombokModel(true);
        autoGenerator.setStrategy(strategyConfig);//加入我们的配置处理
        autoGenerator.execute();

    }
}

这就是显示成功了

我们将我们的数据成功的进行显示到一个页面上面去了

同样大家还是要在自己的yml文件中进行数据的配置

server:
  port: 8081
spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/yt01?serverTimezone=Asia/Shanghai
    username: root
    password: root
  thymeleaf:
    cache: false
mybatis-plus:
  configuration:
    map-underscore-to-camel-case: true
  mapper-locations: classpath:mapper/*.xml

由于我们是可以直接使用人家给我们的代码

我们直接编写controller层就可

前端代码的编写

1.我们需要一个axios插件

选择第一项直接安装就欧克

和我们之前安装element ui基本是一样的操作

1.数据的展示

我们只需要将我们的这个假的数据用我们的data里面的数据进行替换一下就可以了

什么意思 我们目前这个数据不是可以动态进行修改的

但是我们可以

但是我们前后端进行交互的过程中 就会发生所谓的跨域问题

什么意思 我们来看一下就是 说

我们首先遇到的

我们后端的代码

localhost:8081/temp/list

前端的域名

(http://localhost:8080/index01)

我们很明显的就是可以看出这两个端口号是不一样的 那么这个也是我们要解决的重点

在我们的后台加上跨域注解解决我们的跨域问题

这个是后端的操作形式当然还是有前端的操作 但是我们就不在这里进行一一解决

只讲这一个方法就欧克

这个就是我们的数据

<template>

    <el-table
            :data="tableData"
            border
            style="width: 800px">
        <el-table-column
                fixed
                prop="bookid"
                label="编号"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="书名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="price"
                label="价格"
                width="250">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="200">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑
                </el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        name: "index01",
        created() {
            let _this = this;//由于回调函数 我们不能直接写我们的data对象
            axios.get('http://localhost:8081/temp/list').then(function (resp) {
                console.log(resp.data)
                //然后我们只需要将·我们的这个拿到的数据复制给我们的tabledata
                //解决了跨域问题
                _this.tableData = resp.data;//这里的话 我们的数据就可以进行一一对应
            })
        },
        methods: {
            handleClick(row) {
                console.log(row);
            }
        },
        data() {
            return {
                tableData: ''
                //这里我们直接将我们的tabledata设置为null就行，因为这里根本用不到这个数据了 我们是动态的进行传递我们的数据
            }
        }
    }
</script>

<style scoped>

</style>

删除数据

这个就是我们采用的是element ui设计的一个提示我们弹窗的一个功能，这个代码我们直接拿来用就可以

handleClick(row) {
                let _this=this;
                console.log(row);
            },handleDelete(row){
                this.$confirm('此操作将永久删除'+row.name+', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                   axios.delete('http://localhost:8081/temp/delete/'+row.bookid).then(function (resp) {
                        if (resp.data){
                            _this.$alert('《'+row.name+'》', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                 location.reload();
                                 //我们的数据要是加载成功的话 我们就直接重新加载一下我们的页面就行
                                }
                            });
                        }
                   })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }

这个是我们的删除代码 就是绑定了一下

修改

代码演示

利用到了我们的一个回显就是我们的findbyid

当我们点击我们编辑按钮的时候 我们就会跳转到一个新的页面

我们在哪里进行新的编辑

我们可以通过后端提供给我们的接口，然后就可以进行回调函数这个操作，获取到我们想要的数据

然后前端进行相应的渲染就可以

关键是要注意跨域这个问题如何进行处理

这里我采取的是后端添加注解的方式进行处理我们的跨域问题。

删除数据就是调用我们后端的接口然后将你要删除的id传入就好

至于后端是如何进行的，大家就可以不必要去管如何去实现这个底层的，也即是前端是不需要知道，后端是如何操作我们的数据库，同时我们后端由于具有了mybaits-plus导致我们可以直接利用封装好的代码，但是实际开发中，我们不能过分的依赖这些东西。我们要理智的使用。

至于前端的代码，给我的感觉就是很杂，东西很多，要进行布局，要将一些数据进行绑定，

然后通过请求路由，布置路由，设置页面的跳转，这些事情都是前端同学要进行操作。

熟练的使用axios同时也要知道背后的原理是什么，这些都是很重要的。

给我的感觉就是

前端同学进行的操作就是，通过调用后端同学传递给的数据，之后进行数据的渲染，

然后可以进行一些弹窗的处理，就是处理获取完数据之后要做些什么事情，这些都是前端同学，比如说点击完这个按钮之后，会触发什么事件，然后根据具体的需求，处理之后的事情。

}).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }

这个是我们的删除代码 就是绑定了一下