开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> SSM整合Vue -> 正文阅读

[JavaScript知识库]SSM整合Vue

昨日知识点总结

今日总结

文章目录

一.昨日知识
- 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-picker
                        v-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 {

    @Autowired
    EmpService empService;

    @Autowired
    DeptService 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-picker
                        v-model="form.birth"
                        type="date"
                        placeholder="选择生日">
                </el-date-picker>
            </el-form-item>
            <!--添加头像-->
            <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>

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