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"