Element Ul快速入门
Element Ul是基于Vue的一套桌面端组件库，提前封装好的Ul模板，方便开发者快速搭建一个网站前端界面
官网：https://element.eleme.cn/
1.Element Ul安装
在插件中，点击添加插件 搜索element
安装成功，界面如下所示
如果安装成功，会看到如下界面
2.Icon图标的使用
3.Button按钮
是Element Ul 提供的一组常用的操作按钮组件，直接使用封装好的el-button,比如
按钮
基于el-button,按钮，可以使用type、plain、round、circle属性对按钮进行修饰。
type：设置按钮的样式
默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮plain 可以减弱按钮的背景颜色效果
主要按钮round 可以给按钮设置圆角
主要按钮circle 将按钮设置为圆形
disabled设置按钮的可以状态
loading属性可以给按钮设置”加载中”的效果
export default { name: "test", methods:{ test(){ // alert("11111"); this.loading = true; setTimeout(()=>{ this.loading = false; },3000) } }, data(){ return{ loading:false } } }size属性可以设置按钮的大小，medium，small,mini
主要按钮
4.Link超链接
文字超链接，使用 el-link标签来实现
baidutarget="_blank 可以让页面在新的窗口打开
disabled 设置超链接不可用
underline设置下划线
:underline=”false” 来去掉超链接的下划线
icon给文字超链接设置图标
baidu
5.Radio单选框
使用el-radio标签即可，通过v-model进行对象数据的绑定，label表示该单选框的值，文本直接写入到标签内部即可
选项1 选项2 export default { data () { return { radio: '1' }; } }
change绑定切换事件
选项1 选项2methods:{ change(){ console.log('当前radio的值： '+this.radio); } }
6.Checkbox多选框的使用
全选 {{city}} 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; } } };
7.input输入框
成功按钮methods:{ click(){ this.input="hello" }} data(){ return{ input:'' } }
通过size属性修改输入框的尺寸，large/medium / small / mini,size修改的是输入框的高度
修改宽度可以在外出嵌套一个div，通过修改div的宽度来实现输入框宽度的修改
show-password 属性设置可以切换显示隐藏的密码框
通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标
maxlength、minlength限制输入框的字符长度
show-word-limit //显示输入了几个字符，一共能输入几个字符
8. Select下拉框
使用el-select/el-option 标签进行操作，v-model进行数据绑定,label进行文本的展示，value是当前选项的值
v-model的值为当前被选中的el-option的 value 属性值disabled 表示禁止使用change 下拉框进行修改之后会自动触发该事件(该事件加在el-select中) /el-option> export default { methods:{ change1(){ console.log('当前选择的是：'+this.value) } } data() { return { options: [{ value: '选项1', label: '黄金糕', disabled:true }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎', disabled:true }, { value: '选项4', label: '龙须面' }, { value: '选项5', label: '北京烤鸭' }], value: '' } } }
9.Switch开关
switch组件表示两种相互对立状态之间的切换，开发，el-switch标签完成，v-model进行数据绑定，Boolean表示开/关的状态，active-color属性与inactive-color属性来设置开关的背景色。
active-text属性与inactive-text属性来设置开关的文字描述。
change事件进行开/关操作时触发该方法 export default { data() { return { value: true } }, methods:{ change1(){ console.log('当前开关的状态是：'+this.value) }, };
10.Upload上传文件10.1前端
使用el-upload组件完成，action属性为后端请求的接口
将文件拖到此处，或点击上传 只能上传jpg/png文件，且不超过500kb 10.2后端
springboot +easyExcel完成Excel数据的解析
1.pom.xml导入easyExcel相关依赖
com.alibaba easyexcel 2.2.6
2.创建一个类，用来映射Excel文件
ExcelVo
package com.example.upload.vo;import com.alibaba.excel.annotation.ExcelProperty;import lombok.Data;@Datapublic class ExcelVo { @ExcelProperty("标号") private Integer id; @ExcelProperty("姓名") private String name; @ExcelProperty("性别") private String gender; @ExcelProperty("年龄") private String age; @ExcelProperty("班级") private String classes; }
ExcelService
package com.example.upload.service;import com.example.upload.vo.ExcelVo;import java.io.InputStream;import java.util.List;public interface ExcelService { public List list(InputStream inputStream);}
ExcelServiceimpl
package com.example.upload.service.impl;import com.alibaba.excel.EasyExcel;import com.alibaba.excel.context.AnalysisContext;import com.alibaba.excel.event.AnalysisEventListener;import com.example.upload.service.ExcelService;import com.example.upload.vo.ExcelVo;import java.io.InputStream;import java.util.ArrayList;import java.util.List;public class ExcelServiceimpl implements ExcelService { @Override public List list(InputStream inputStream) { List list = new ArrayList(); EasyExcel.read(inputStream) .head(ExcelVo.class) .sheet() .registerReadListener(new AnalysisEventListener() { @Override public void invoke(ExcelVo excelVo, AnalysisContext analysisContext) { list.add(excelVo); } @Override public void doAfterAllAnalysed(AnalysisContext analysisContext) { System.out.println("数据解析完成"); } }).doRead(); return list; }}
ExcelController
package com.example.upload.controller;import com.example.upload.service.ExcelService;import com.example.upload.vo.ExcelVo;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;@RestController@RequestMapping("/excel")public class ExcelController { @Autowired private ExcelService excelService; @PostMapping("/import") public String importData(@RequestParam("file")MultipartFile file){ try { List list = excelService.list(file.getInputStream()); for (ExcelVo excelVo:list){ System.out.println(excelVo); } } catch (IOException e) { return "false"; } return "success"; }}
需要解决跨域问题
CorsConfig
package com.example.upload.config;import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configurationpublic class CorsConfig implements WebMvcConfigurer { @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurer() { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowCredentials(false) .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") .allowedOrigins("*"); } }; }}
示例：
11.Form表单
Form组件，每一个表单域由一个el-form-item组件构成的，表单域中可以放置各种类型的表单控件，input、select、CheckBox、radio、switch，表单域的的值直接跟Vue对象进行绑定
11.1基本使用
- 立即创建 取消 export default { data() { return { form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' } } }, methods: { onSubmit() { console.log(this.form); } } }
11.2数据效验
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
- 立即创建 取消 export default { name: "test", methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } }, data() { return { form: { name: '', region: '', date1: '', date2: '' }, 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' } ], } } } }
11.3自定义数据效验（邮箱效验）
邮箱效验的正则表达式
const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
立即创建 取消 export default { name: "test", methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { //alert('submit!'); alert(this.form.email) } else { //console.log('error submit!!'); alert("error submit") return false; } }); } }, data() { var checkEmail = (rule,value,callback)=>{ //const mailReg = /^([a-z0-9A-Z]+[-|\\.]?)+[a-z0-9A-Z]@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-zA-Z]{2,}$/ const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ if (!value){ return callback(new Error('邮箱不能为空')) } setTimeout(()=>{ if (mailReg.test(value)){ callback() }else{ callback(new Error('请输入正确的邮箱格式')) } },100) } return { form: { email: '', }, rules: { email: [ { required: true,validator:checkEmail , trigger: 'blur' }, ] } } } }
11.4数字类型效验
数字类型的验证需要在 v-model 处加上 .number 的修饰符，这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。
立即创建 取消 export default { name: "test", methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert(this.form.age) } else { alert("error submit") return false; } }); } }, data() { return { form: { age: '', } } } }
12.CRUD小案例1.数据库
2.后端1.在pom.xml添加mybatis plus相关依赖
com.baomidou mybatis-plus-boot-starter 3.4.3 com.baomidou mybatis-plus-generator 3.3.2 org.apache.velocity velocity 1.7
2.application.properties
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driverspring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=Asia/Shanghaispring.datasource.username=rootspring.datasource.password=123456
在启动类(Application)中指定mapper的位置
@MapperScan("com.example.upload.mapper")
3.LianxiController
package com.example.upload.controller;import com.example.upload.entity.Lianxi;import com.example.upload.service.LianxiService;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.web.bind.annotation.*;import org.springframework.stereotype.Controller;import java.util.List;/** * * 前端控制器 *
* * @author southwind * @since 2023-01-03 */@RestController@RequestMapping("/lianxi")public class LianxiController { @Autowired private LianxiService lianxiService; @GetMapping("/list") public List list(){ return this.lianxiService.list(); }/*一般来讲的话是以两种方式为主，分别为Post和Get，这两种方式都是向一个url传参，而Get方式体现到了地址栏里，Post方式则将内容放在了 body 里面。@PathParam 和 @PathVariable 注解是用于从 request 中接收请求的，两个都可以接收参数，关键点不同的是@PathParam 是从 request 里面拿取值，而 @PathVariable 是从一个url模板里面来填充(绑定 URL 占位符到功能处理方法的参数上，主要实现RESTFULL风格的请求)，也就是从地址栏中取值（以键值对形式）。@PathVariable它是以“/”方式来获取参数值。 */ @GetMapping("/findById/{id}") public Lianxi findById(@PathVariable("id") Integer id){ return this.lianxiService.getById(id); } @DeleteMapping("/delete/{id}") public boolean delete(@PathVariable("id") Integer id){ return this.lianxiService.removeById(id); } //RequestBody是把json格式字符串串 ，转换为java类型的 @PostMapping("/add") public boolean add(@RequestBody Lianxi lianxi){ return this.lianxiService.save(lianxi); } @PutMapping("/update") public boolean update(@RequestBody Lianxi lianxi){ return this.lianxiService.updateById(lianxi); }}
3.前端1.安装axios插件
2.首页数据加载
编辑 删除 export default { name: "Index", created() { let _this = this; axios.get('http://localhost:9000/lianxi/list').then(function (resp) { //alert(resp.data[0].name); // console.log(resp.data) _this.tableData = resp.data; }) }, methods:{ handleClick(row) { console.log(row); } }, data() { return { tableData: [] } } }
3.删除数据
编辑 删除 export default { name: "Index", created() { let _this = this; axios.get('http://localhost:9000/lianxi/list').then(function (resp) { //alert(resp.data[0].name); // console.log(resp.data) _this.tableData = resp.data; }) }, methods:{ handleDelete(row) { let _this = this; //console.log(row.name); this.$confirm('是否确定删除《'+row.name+'》?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { axios.delete('http://localhost:9000/lianxi/delete/'+row.bookid).then(function (resp) { if (resp.data){ _this.$alert('《'+row.name+'》 删除成功', '提示', { confirmButtonText: '确定', callback: action => { //重新加载一下页面 location.reload(); } }); } }) }).catch(() => { /* this.$message({ type: 'info', message: '已取消删除' });*/ }); } }, data() { return { tableData: [] } } }
4.修改数据
index.vue
编辑 删除 export default { name: "Index", created() { let _this = this; axios.get('http://localhost:9000/lianxi/list').then(function (resp) { //alert(resp.data[0].name); // console.log(resp.data) _this.tableData = resp.data; }) }, methods:{ handleEdit(row){ //把id传给update页面 this.$router.push('/update?id='+row.bookid) }, handleDelete(row) { let _this = this; //console.log(row.name); this.$confirm('是否确定删除《'+row.name+'》?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { axios.delete('http://localhost:9000/lianxi/delete/'+row.bookid).then(function (resp) { if (resp.data){ _this.$alert('《'+row.name+'》 删除成功', '提示', { confirmButtonText: '确定', callback: action => { //重新加载一下页面 location.reload(); } }); } }) }).catch(() => { /* this.$message({ type: 'info', message: '已取消删除' });*/ }); } }, data() { return { tableData: [] } } }
update.vue
立即修改 取消 export default { name: "Update", created() { let _this = this; //this.$route.query.id可以用来接收点击编辑传过来的id axios.get('http://localhost:9000/lianxi/findById/'+this.$route.query.id).then(function (resp){ // console.log(resp.data); _this.form = resp.data; }) }, data(){ return { form: { bookid: '', name: '', price: '' }, rules: { name: [ { required: true,message:'请输入图书名称' , trigger: 'blur' }, {min:3,max:20,message: '长度在3 到20 个字符',trigger: 'blur' } ] } } }, methods:{ submitForm(formName) { let _this = this; this.$refs[formName].validate((valid) => { if (valid) { //console.log(this.form); axios.put('http://localhost:9000/lianxi/update',this.form).then(function (resp) { if (resp.data){ _this.$alert('《'+_this.form.name+'》 修改成功', '提示', { confirmButtonText: '确定', callback: action => { _this.$router.push('/index') } }); } }) } else { alert("error submit") return false; } }); } } }
5.添加数据
添加 取消 export default { name: "Add", data(){ return { form: { bookid: '', name: '', price: '' }, rules: { name: [ { required: true,message:'请输入图书名称' , trigger: 'blur' }, {min:3,max:20,message: '长度在3 到20 个字符',trigger: 'blur' } ] } } }, methods:{ submitForm(formName) { let _this = this; this.$refs[formName].validate((valid) => { if (valid) { //console.log(this.form); axios.post('http://localhost:9000/lianxi/add',this.form).then(function (resp) { if (resp.data){ _this.$alert('《'+_this.form.name+'》 添加成功', '提示', { confirmButtonText: '确定', callback: action => { _this.$router.push('/index') } }); } }) } else { alert("error submit") return false; } }); } } }
<!– 顶 –><!– Top –> 收藏 关注 评论