昨日知识点总结

今日总结

文章目录

一.昨日知识
- 1.表单验证
- 2.上传组件
- 3.时间插件
- 4.ElementUI简介

二.今日总结
- 1.页面静态化
  - 通过html页面，制作展示所有
  - 制作添加页面
  - 制作修改页面以及批量删除
  - 制作分页
  - 制作多条件查询

一、昨日重点复习

1.表单验证

在vue中使用rules对表单字段进行验证

vue 中表单字段验证的写法和方式有多种,以下是我们今天用到的其中之一

写在data中验证：

表单内容：

 <!-- 表单 -->
<el-form :model="form" :rules="rules" ref="ruleForm"><el-form-item label="姓名" :label-width="formLabelWidth" prop="name"><el-input v-model="form.name" autocomplete="off" placeholder="姓名（*必填）"></el-input></el-form-item></el-form><!-- 表单 -->
<el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px"><el-form-item label="用户名称:" prop="userName"><el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/></el-form-item>
</el-form><!-- 第二种为常用的有这几种 -->

<el-form>：代表这是一个表单
<el-form> -> ref：表单被引用时的名称，标识
<el-form> -> rules：表单验证规则
<el-form> -> model：表单数据对象
<el-form> -> label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
<el-form> -> <el-form-item>：表单中的每一项子元素
<el-form-item> -> label：标签文本
<el-form-item> -> prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
<el-input>：输入框
<el-input> -> v-model：绑定的表单数据对象属性
<el-input> -> style：行内样式
<el-input> -> maxlength：最大字符长度限制

2.上传组件

upload上传是前端开发很常用的一个功能，在Vue开发中常用的Element组件库也提供了非常好用的upload组件。

基本用法：

<el-upload :action="uploadActionUrl"><el-button size="small" type="primary">点击上传</el-button>
</el-upload>

属性含义:action是执行上传动作的后台接口，el-button是触发上传的按钮

常用案例如下：

  <!--添加头像--><!--multiple--><!--accept="image/jpeg,image/gif,image/png"-->
<el-form-item label="头像" :label-width="formLabelWidth" prop="img"><!--选择路径--><!--:limit将值变为数字limit字符串--><el-upload:limit="1"action="/upload/AddUrl.action"list-type="picture-card":file-list="fileList":on-success="AddUrlSuccess":on-preview="handlePictureCardPreview":on-remove="handleRemove"><i class="el-icon-plus"></i></el-upload><!--文件大小--><el-dialog :visible.sync="dialogVisible" append-to-body><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-form-item>

上传文件数量

首先是设置是否可以同时选中多个文件上传，这个也是的属性，添加multiple即可。另外el-upload组件提供了:limit属性来设置最多可以上传的文件数量，超出此数量后选择的文件是不会被上传的。:on-exceed绑定的方法则是处理超出数量后的动作。

但因为我们做了最大的上传处理 (limit=”1“)，所以我只能选择性上传1个；

上传格式及大小限制

如果需要限制上传文件的格式，需要添加accept属性，这个是直接使用一样的属性了，accept属性的值可以是accept="image/gif, image/jpeg, text/plain, application/pdf"等等。文件格式的提示，则可以使用slot。

上传过程中的各种钩子

官网上的说明：如图所示

3.时间插件

案例如下:

 <!--日期选择添加生日--><!--切记表单路径--><el-form-item label="生日" :label-width="formLabelWidth" prop="birth"><el-date-pickerv-model="form.birth"type="date"placeholder="选择生日"></el-date-picker></el-form-item>

选用elementui常用的日期插件

日期格式

用于控制输入框中显示的文本格式。用于控制绑定值的格式。formatvalue-format

默认情况下，组件接受并发出一个对象。

测量值由属性确定。您可以通过创建具有属性的对象来启用快速选项

4.ElementUI简介

ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。Element UI由饿了么前端开源维护，当前版本是2.13.2，是最流行的Vue框架之一。

案例：

Dropdown 下拉菜单：将动作或菜单折叠到下拉菜单中可设置触发方式，点击或者鼠标放上去就显示也可设置下拉列表分割等等

Table 表格：用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作

Pagination 分页：当数据量过多时，使用分页分解数据

二、页面静态化

1.页面静态化有哪些优势

我们在使用购物网站的时候，会选择相应的商品点击查看详情，其实会发现每件商品的商品详情页面都是差不多的，除了一些数据外，其余结构布局都是一模一样的，那么是为每件商品都写一个详情页面吗？很显然这是不可能的，数以百万千万的商品都写页面，会把人逼疯。既然结构布局都一样，只是数据不同，那么就可以用页面静态技术很完美的解决。

而为什么要进行页面静态化

像电商网站的商品详细页来说，至少几百万个商品，每个商品又有大量的信息，这样的情况同样也适用于使用网页静态化来解决。页面静态化的好处如下：

静态页面相对于动态页面更容易被搜索引擎收录。
访问静态页面不需要经过程序处理，因此可以提高运行速度。
减轻服务器负担。
HTML页面不会受Asp相关漏洞的影响。
网页静态化技术是为了减轻数据库的访问压力，比较适合大规模且相对变化不太频繁的数据。另外网页静态化还有利于SEO。

如何进行页面静态化

一个页面等于模板加数据。页面静态化就是将页面模板和数据通过技术手段将二者合二为一，生成一个html网页文件。因此，我们需要获取模板，然后获取数据模型，那么模板+数据模型就可以生成一个html页面了。

2.通过html页面，制作展示所有

制作展示所有的后台，通过ajax完成数据的获取

1.Vue中的js代码

var app = new Vue({el:"#app",data:{list:[]},methods:{findAll(){axios.get("emp.findAll").then(function(response){app.list = response.data;	});}},created(){this.findAll();}
});

控制层代码


@RestController
@RequestMapping("emp")
public class EmpController {@AutowiredEmpService empService;@AutowiredDeptService deptService;@RequestMapping("findAllDept")public List<Dept> findAllDept() {return deptService.findAll();}@RequestMapping("add")public void add(@RequestBody Emp emp) {empService.add(emp);}@RequestMapping("edit")public void edit(@RequestBody Emp emp) {empService.edit(emp);}@RequestMapping("del")public void del(Integer id) {empService.del(id);}@RequestMapping("delAll")public void delAll(String ids) {for (String id : ids.split(",")) {empService.del(Integer.parseInt(id));}}@RequestMapping("queryEmp")public PageInfo<EmpVo> queryEmp(@RequestBody EmpVo empVo, Integer page, Integer size) {return empService.findEmp(page, size, empVo);}
}

3.制作添加弹窗页面

页面展示效果

  <!--添加--><el-dialog :title="mode.title" :visible.sync="dialogFormVisible":close-on-click-modal="false" top="5px" :before-close="closeDialog"><el-form :model="form" :rules="rules" ref="ruleForm"><!--输入框添加名字--><el-form-item label="姓名" :label-width="formLabelWidth" prop="name"><el-input v-model="form.name" autocomplete="off" placeholder="姓名（*必填）"></el-input></el-form-item><el-form-item label="年龄" :label-width="formLabelWidth"><el-input v-model="form.age" type="number" autocomplete="off"></el-input></el-form-item><el-form-item label="性别" :label-width="formLabelWidth"><el-radio-group v-model="form.sex"><el-radio :label="1">男</el-radio><el-radio :label="2">女</el-radio></el-radio-group></el-form-item><el-form-item label="爱好" :label-width="formLabelWidth"><el-checkbox-group v-model="formHobby"><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="部门" :label-width="formLabelWidth"><el-select v-model="form.did" clearable placeholder="请选择部门"><el-option :label="d.name" :value="d.id" v-for="d in deptList   "></el-option></el-select></el-form-item><!--日期选择添加生日--><!--切记表单路径--><el-form-item label="生日" :label-width="formLabelWidth" prop="birth"><el-date-pickerv-model="form.birth"type="date"placeholder="选择生日"></el-date-picker></el-form-item><!--添加头像--><el-form-item label="头像" :label-width="formLabelWidth" prop="img"><!--选择路径--><!--:limit将值变为数字limit字符串--><el-uploadlimit="1"action="/upload/AddUrl.action"list-type="picture-card":file-list="fileList":on-success="AddUrlSuccess":on-preview="handlePictureCardPreview":on-remove="handleRemove"><i class="el-icon-plus"></i></el-upload><!--文件大小--><el-dialog :visible.sync="dialogVisible" append-to-body><img width="100%" :src="dialogImageUrl" alt=""></el-dialog></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="initFormDate">取 消</el-button><el-button type="primary" @click="addStu">确 定</el-button></div></el-dialog>

完成双向数据绑定内容

*注意处理复选框

data: {dialogFormVisible: false,form: {name: "",age: "",sex: "",did: "",hobby: "",birth: "",img: ""},formHobby: [],//用于姓名formLabelWidth: "100px",

4.制作修改与删除以及批量删除

完成编辑按钮的功能

 <template slot-scope="scope"><el-button size="mini" @click="toEdit(scope.row)">编辑</el-button><el-button size="mini" type="danger" @click="delOne(scope.row.id)">删除</el-button></template>

完成按钮功能之后再次点击触发添加的弹出窗口调用添加弹窗即可

注意js里的路径和处理复选以及回显图片：

//修改回显toEdit(s) {this.mode = {title: "修改员工",url: "/emp/edit.action"};this.form = JSON.parse(JSON.stringify(s));//处理复选this.form.hobby = this.formHobby.split(",");//回显对象（图片）,有几个图片加几个对象this.fileList = [{url: this.form.img}];this.dialogFormVisible = true;},

删除方法：

 //删除delOne(id) {this.$confirm('是否删除数据?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {axios.post("/emp/del.action?id=" + id).then(res => {this.initData();})this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},

全选删除方法:

 //批量删除delAll() {if (this.multipleSelection.length > 0) {this.$confirm('是否删除这些数据?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//让每个元素都执行的回到函数，把每次执行的结果组装成一个数组返回let idsArr = this.multipleSelection.map((value) => value.id)axios.post("/emp/delAll.action?ids=" + idsArr.join(",")).then(res => {this.initData();})this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});} else {this.$message({type: 'info',message: '请选择数据'});}},

5.制作分页

页面的代码:

  <el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="query.page":page-sizes="[1, 2, 3, 4]":page-size="query.size"layout="total, sizes, prev, pager, next, jumper":total="pageInfo.total"></el-pagination>

js代码：

 //分页handleSelectionChange(val) {this.multipleSelection = val;},handleSizeChange(val) {//当pagesize发生变化回调的函数this.query.size = val;},handleCurrentChange(val) {//当前页发生变化回调的函数this.query.page = val;},initDeptList() {axios.post(`/emp/findAllDept.action`).then(res => {this.deptList = res.data;})},

6.制作多条件查询

*注意:

写此法时需要在控制层单独写方法调其中间类来方便于查询时使用

前端代码：

 <!--输入框,查询区域-->姓名:<el-input style="width: 200px" v-model="query.name" clearable placeholder="姓名、部门模糊查询"></el-input>年龄区间:<el-input style="width: 80px" v-model="query.age1" type="number" clearable placeholder="age1"></el-input>--<el-input style="width: 80px" v-model="query.age2" type="number" clearable placeholder="age2"></el-input>日期区间:<el-date-picker v-model="query.birth1" type="date" placeholder="选择日期1"></el-date-picker>--<el-date-picker v-model="query.birth2" type="date" placeholder="选择日期2"></el-date-picker>部门选择:<el-select v-model="query.did" clearable placeholder="请选择部门"><el-option label="" value="">请选择</el-option><el-option :label="d.name" :value="d.id" v-for="d in deptList"></el-option></el-select><el-button type="primary" @click="toadd">添加</el-button><el-button type="danger" @click="delAll">批量删除</el-button>

mapper层代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="cn.jiyun.dao.EmpMapper"><select id="findEmp" parameterType="cn.jiyun.vo.EmpVo" resultType="cn.jiyun.vo.EmpVo">select e.*,d.name dname from emp e,dept d where e.did=d.id<if test="name !=null and name !=''">and (e.name like '%${name}%'or d.name like '%${name}%')</if><if test="age1!=null">and e.age &gt;=#{age1}</if><if test="age2!=null">and e.age &lt;=#{age2}</if><if test="birth1 != null">and e.birth &gt;=#{birth1}</if><if test="birth2 != null">and e.birth &lt;=#{birth2}</if><if test="did != null">and e.did = #{did}</if></select>
</mapper>