ElementUI
基于Vue的一套桌面端的组件库，提前封装好的UI模版，方便开发者快速搭建一个网站前端界面。
官网：https://element.eleme.cn/#/zh-CN/component/installation
先创建vue工程，然后再elemntui
安装ElementUI
1.安装vue环境
2.执行vue ui
vue -V
vue ui
1点击小房子
2.创建vue的项目
3.设置项目存放路径
4.点击按钮
5.输入工程名称---git
6.手动配置项目
- Babel
- Router
- Vuex
- history
7.等待项目创建成功
8.给项目安装ElementUI插件
9.搜索elementUI--完成安装
10.启动项目
11.导入到idea里面
npm run serve
ElementUI图标
提供了一套常用的图标集合
<i class="el-icon-edit"></i>
el-icon-iconName 官方定义的图标名称：直接官网查找对应的使用即可
ElementUI按钮
是ElementUI提供的常用组件
<el-button>默认按钮</el-button>
可以使用type、plain、round、circle属性对按钮进行修饰
type设置按钮的样式：
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
plain减弱背景颜色
<el-button plain>朴素按钮</el-button>
<el-button type="primary" plain>主要按钮</el-button>
<el-button type="success" plain>成功按钮</el-button>
<el-button type="info" plain>信息按钮</el-button>
<el-button type="warning" plain>警告按钮</el-button>
<el-button type="danger" plain>危险按钮</el-button>
round:按钮设置圆角
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
circle将按钮设置成圆形：
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
添加icon属性：
<el-button icon="el-icon-search" circle></el-button>
<el-button type="primary" icon="el-icon-edit" circle></el-button>
<el-button type="success" icon="el-icon-check" circle></el-button>
<el-button type="info" icon="el-icon-message" circle></el-button>
<el-button type="warning" icon="el-icon-star-off" circle></el-button>
<el-button type="danger" icon="el-icon-delete" circle></el-button>
disabled:设置按钮的使用状态
loading属性设置加载中的效果：
<template>
<div>
<el-button type="danger" icon="el-icon-delete" circle @click="tset":loading="loading"></el-button>
</div>
</template>
<script>
export default {
name: "Test",
methods:{
tset(){
this.loading=true;
setTimeout(()=>{
this.loading=false
},3000)
}
},
data(){
return{
loading:false
}
}
}
</script>
<style scoped>
</style>
size属性设置按钮的大小：
medium small mini
ElementUI超链接
Link：文字超链接
el-link
<el-link href="https://www.baidu.com" target="_blank">Element</el-link>
disable:设置超链接不可用
underline:设置下划线
<el-link href="https://www.baidu.com" target="_blank" :underline="underline">Element</el-link>
<script>
export default {
name: "Test",
methods:{
tset(){
this.loading=true;
setTimeout(()=>{
this.loading=false
},3000)
}
},
data(){
return{
loading:false,
underline:false
}
}
}
</script>
设置图标：
<el-link href="https://www.baidu.com" target="_blank" :underline="underline" icon="el-icon-user-solid">Element</el-link>
ElementUI单选框
使用：
el-radion
使用:数据绑定
v-model:
@change=""绑定切换的事件
<template>
<div>
<el-radio v-model="radio" label="1" @change="change">备选项</el-radio>
<el-radio v-model="radio" label="2" @change="change">备选项</el-radio>
</div>
</template>
<script>
export default {
name: "Test",
methods:{
change(){
console.log("选项的序号是"+this.radio)
}
},
data(){
return{
loading:false,
underline:false,
radio:"2"
}
}
}
</script>
<style scoped>
</style>
ElementUI多选框
Checkbox
使用
<el-checkbox v-model="checked">备选项</el-checkbox>
<template>
<div>
<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>
</div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
data() {
return {
checkAll: false,
checkedCities: ['上海', '北京'],
cities: cityOptions,
isIndeterminate: true
};
},
methods: {
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.cities.length;
this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
}
}
};
</script>
<style scoped>
</style>
ElementUI输入框
受控组件：只能用v-model绑定
size属性修改输入框的大小：修改的是高度
large/medium/small/mini
修改宽度可以在外层套一个div，通过修改div的宽度来修改输入框的宽度
show-password是一个可以切换显示效果的密码框
通过prefix-icon、suffix-icon来设置首尾的图标
maxlength来设置最大长度
minlength来设置最小长度
show-word-limit显示输入的长度
<template>
<div>
<el-input v-model="input" placeholder="请输入内容" maxlength="20" show-word-limit></el-input>
<el-button type="primary" @click="click">按钮</el-button>
</div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {
data() {
return {
input:''
};
},
methods: {
click(){
this.input='abc'
}
}
};
</script>
<style scoped>
</style>
ElementUI下拉框
el-select和el-option
:disabled="true"
<template>
<div>
<el-select v-model="value" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</template>
<script>
export default {
data() {
return {
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: ''
}
}
}
</script>
<style scoped>
</style>
ElementUI开关
Switch组件：两种相互对立状态的切换
el-switch
v-model来数据绑定
Boolean来表示开关
active-color:与inactive-colorl来设置开关的颜色
active-text和inactive-text设置开关对应的文本
change事件开关时触发该时间
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<script>
export default {
data() {
return {
value: true
}
}
};
</script>
ElementUI上传文件
前段
el-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>
后端
springboot+EasyExcel完成后端数据的解析
1.pom.xml 中导入easyExcel的依赖
<!-- easyEecel-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>easyexcel</artifactId>
<version>2.2.6</version>
</dependency>
2.创建一个类来映射Excel文件
package com.southwind.springboot.entity;
import com.alibaba.excel.annotation.ExcelProperty;
import lombok.Data;
@Data
public class test {
@ExcelProperty("编号")
private Integer id;
@ExcelProperty("姓名")
private String name;
@ExcelProperty("性别")
private String gender;
@ExcelProperty("年龄")
private Integer age;
@ExcelProperty("班级")
private String classes;
}
3.创建一个ExcelService，实现数据解析
接口：
package com.southwind.springboot.service;
import com.southwind.springboot.entity.Test;
import java.io.InputStream;
import java.util.List;
public interface ExcelService {
public List<Test> list(InputStream inputStream);
}
实现：
package com.southwind.springboot.service.impl;
import com.alibaba.excel.EasyExcel;
import com.alibaba.excel.context.AnalysisContext;
import com.alibaba.excel.event.AnalysisEventListener;
import com.southwind.springboot.entity.Test;
import com.southwind.springboot.service.ExcelService;
import org.springframework.stereotype.Service;
import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
@Service
public class ExcelServiceImpl implements ExcelService {
@Override
public List<Test> list(InputStream inputStream) {
List<Test> list=new ArrayList<>();
EasyExcel.read(inputStream)
.head(Test.class)
.sheet()
.registerReadListener(new AnalysisEventListener<Test>() {
@Override
public void invoke(Test test, AnalysisContext analysisContext) {
list.add(test);
}
@Override
public void doAfterAllAnalysed(AnalysisContext analysisContext) {
System.out.println("数据解析完成");
}
}).doRead();
return list;
}
}
ElementUI表单
Form表单，每一个表单域是由一个form-item组件构成的，表单域中可以放置各种类型的表单控键，有input、switch、checkbox
表单的绑定form
内容分别是form内的对象
<template>
<div>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
<style scoped>
</style>
表单的数据校验：
表单要绑定rules
内容在绑定rules里面的内容
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
自定义数据校验
案例
CRUD
后端的代码：
1.数据库建表
2.pom.xml添加mybatisplus的相关依赖
<!-- mybatisPlus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.3.2</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>3.3.2</version>
</dependency>
<dependency>
<groupId>org.apache.velocity</groupId>
<artifactId>velocity</artifactId>
<version>1.7</version>
</dependency>
代码生成器
3.通过mybatis plus generator自动生成后端代码
package com.southwind.springboot;
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;
public class Main {
public static void main(String[] args) {
//创建对象
AutoGenerator autoGenerator = new AutoGenerator();
//数据源
DataSourceConfig dataSourceConfig= new DataSourceConfig();
dataSourceConfig.setDbType(DbType.MYSQL);
dataSourceConfig.setDriverName("com.mysql.jdbc.Driver");
dataSourceConfig.setUrl("jdbc:mysql://localhost:3306/text?serverTimezone=UTC&useUnicode=true&characterEncoding=utf8");
dataSourceConfig.setUsername("root");
dataSourceConfig.setPassword("123456");
autoGenerator.setDataSource(dataSourceConfig);
//全局配置
GlobalConfig globalConfig=new GlobalConfig();
globalConfig.setOutputDir(System.getProperty("user.dir")+"/src/main/java");
globalConfig.setAuthor("张三");
globalConfig.setOpen(false);
//去掉Service
globalConfig.setServiceName("%sService");
autoGenerator.setGlobalConfig(globalConfig);
//包配置
PackageConfig packageConfig =new PackageConfig();
packageConfig.setParent("com.southwind");
packageConfig.setEntity("entity");
packageConfig.setMapper("mapper");
packageConfig.setService("service");
packageConfig.setServiceImpl("service.impl");
packageConfig.setController("controller");
//策略配置
StrategyConfig strategyConfig =new StrategyConfig();
strategyConfig.setInclude("peopel");
strategyConfig.setNaming(NamingStrategy.underline_to_camel);
strategyConfig.setColumnNaming(NamingStrategy.underline_to_camel);
strategyConfig.setEntityLombokModel(true);
autoGenerator.setStrategy(strategyConfig);
//启动
autoGenerator.execute();
}
}
4.Controller中添加其他方法
package com.baomidou.controller;
import com.baomidou.entity.People;
import com.baomidou.service.PeopleService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import org.springframework.stereotype.Controller;
import java.util.List;
/**
* <p>
* 前端控制器
* </p>
*
* @author 张三
* @since 2022-04-28
*/
@RestController
@RequestMapping("/people")
public class PeopleController {
@Autowired
private PeopleService peopleService;
@GetMapping("/list")
public List<People> list(){
return this.peopleService.list();
}
@GetMapping("/findbyid/{id}")
public People findById(@RequestParam("id") Integer id){
return this.peopleService.getById(id);
}
@DeleteMapping("/delete/{id}")
public boolean delete(@RequestParam("id")Integer id){
return this.peopleService.removeById(id);
}
@PostMapping("/add/")
public boolean add(@RequestBody People people){
return this.peopleService.save(people);
}
@PutMapping("/update")
public boolean update(@RequestBody People people){
return this.peopleService.updateById(people);
}
}
配置文件：
server:
port: 8080
servlet:
context-path: /
session:
cookie:
max-age: 100
timeout: 100
tomcat:
uri-encoding: utf-8
spring:
datasource:
url: jdbc:mysql://localhost:3306/text?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
driver-class-name: com.mysql.cj.jdbc.Driver
username: root
password: 123456
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
type-aliases-package: com.baomidou.entity
前段的代码
1.安装axios插件
输入axios然后安装成功
解决跨域
控制类加：
@CrossOrigin
@RestController
@RequestMapping("/people")
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律