• ElementUI--数据表格增删改查与表单验证

    一、CRUD实现

    1.1 后台CRUD编写

    1. package com.zking.ssm.controller;
    2.  
    3. import com.zking.ssm.model.Book;
    4. import com.zking.ssm.service.IBookService;
    5. import com.zking.ssm.util.JsonResponseBody;
    6. import com.zking.ssm.util.PageBean;
    7. import com.zking.ssm.vo.BookFileVo;
    8. import org.apache.commons.io.IOUtils;
    9. import org.springframework.beans.factory.annotation.Autowired;
    10. import org.springframework.stereotype.Controller;
    11. import org.springframework.web.bind.annotation.RequestMapping;
    12. import org.springframework.web.bind.annotation.ResponseBody;
    13. import org.springframework.web.multipart.MultipartFile;
    14.  
    15. import javax.servlet.http.HttpServletRequest;
    16. import javax.servlet.http.HttpServletResponse;
    17. import java.io.File;
    18. import java.io.FileInputStream;
    19. import java.io.InputStream;
    20. import java.io.OutputStream;
    21. import java.net.URLEncoder;
    22. import java.util.List;
    23. import java.util.Map;
    24.  
    25. @Controller
    26. @RequestMapping("/book")
    27. public class BookController {
    28.  
    29.     @Autowired
    30.     private IBookService bookService;
    31.  
    32.     @RequestMapping("/addBook")
    33.     @ResponseBody
    34.     public JsonResponseBody addBook(Book book){
    35.         try {
    36.             bookService.insert(book);
    37.             return new JsonResponseBody<>("新增书本成功",true,0,null);
    38.         } catch (Exception e) {
    39.             e.printStackTrace();
    40.             return new JsonResponseBody<>("新增书本失败",false,0,null);
    41.         }
    42.     }
    43.  
    44.     @RequestMapping("/editBook")
    45.     @ResponseBody
    46.     public JsonResponseBody editBook(Book book){
    47.         try {
    48.             bookService.updateByPrimaryKey(book);
    49.             return new JsonResponseBody<>("编辑书本成功",true,0,null);
    50.         } catch (Exception e) {
    51.             e.printStackTrace();
    52.             return new JsonResponseBody<>("编辑书本失败",false,0,null);
    53.         }
    54.     }
    55.  
    56.     @RequestMapping("/delBook")
    57.     @ResponseBody
    58.     public JsonResponseBody delBook(Book book){
    59.         try {
    60.             bookService.deleteByPrimaryKey(book.getId());
    61.             return new JsonResponseBody<>("删除书本成功",true,0,null);
    62.         } catch (Exception e) {
    63.             e.printStackTrace();
    64.             return new JsonResponseBody<>("删除书本失败",false,0,null);
    65.         }
    66.     }
    67.  
    68.     @RequestMapping("/queryBookPager")
    69.     @ResponseBody
    70.     public JsonResponseBody> queryBookPager(Book book, HttpServletRequest req){
    71.         try {
    72.             PageBean pageBean=new PageBean();
    73.             pageBean.setRequest(req);
    74.             List books = bookService.queryBookPager(book, pageBean);
    75.             return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
    76.         } catch (Exception e) {
    77.             e.printStackTrace();
    78.             return new JsonResponseBody<>("分页查询书本失败",false,0,null);
    79.         }
    80.     }
    81.  
    82.     @RequestMapping("/queryBookCharts")
    83.     @ResponseBody
    84.     public JsonResponseBody queryBookCharts(){
    85.         try{
    86.             Map charts = bookService.queryBookCharts();
    87.             return new JsonResponseBody<>("OK",true,0,charts);
    88.         }catch (Exception e){
    89.             e.printStackTrace();
    90.             return new JsonResponseBody<>("查询统计分析数据失败",false,0,null);
    91.         }
    92.     }
    93.  
    94.     @RequestMapping("/upload")
    95.     @ResponseBody
    96.     public JsonResponseBody upload(BookFileVo bookFileVo){
    97.         try {
    98.             MultipartFile bookFile = bookFileVo.getBookFile();
    99.             System.out.println(bookFileVo);
    100.             System.out.println(bookFile.getContentType());
    101.             System.out.println(bookFile.getOriginalFilename());
    102.             return new JsonResponseBody<>("上传成功",true,0,null);
    103.         } catch (Exception e) {
    104.             e.printStackTrace();
    105.             return new JsonResponseBody<>("上传失败",false,0,null);
    106.         }
    107.     }
    108.  
    109.     @RequestMapping("/download")
    110.     public void download(HttpServletRequest request, HttpServletResponse response){
    111.         try {
    112.             String relativePath = "uploads/1.jpg";
    113.             String absolutePath = request.getRealPath(relativePath);
    114.             InputStream is = new FileInputStream(new File(absolutePath));
    115.             OutputStream out = response.getOutputStream();
    116.             response.setContentType("application/octet-stream");
    117.             response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));
    118.             byte[] by = new byte[1024];
    119.             int len = -1;
    120.             while (-1 != (len = is.read(by))) {
    121.                 out.write(by);
    122.             }
    123.             is.close();
    124.             out.close();
    125.         } catch (Exception e) {
    126.             e.printStackTrace();
    127.         }
    128.     }
    129.  
    130.     @RequestMapping("/downloadUrl")
    131.     public void downloadUrl(HttpServletRequest request, HttpServletResponse response){
    132.         String relativePath = "uploads/1.jpg";
    133.         String absolutePath = request.getRealPath(relativePath);
    134.         InputStream is = null;
    135.         OutputStream out = null;
    136.  
    137.         try {
    138.             is = new FileInputStream(new File(absolutePath));
    139.             // 设置Content-Disposition
    140.             response.setHeader("Content-Disposition",
    141.                     "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));
    142.             out = response.getOutputStream();
    143.             IOUtils.copy(is, out);
    144.             response.flushBuffer();
    145.             System.out.println("完成");
    146.         } catch (Exception e) {
    147.             e.printStackTrace();
    148.         } finally {
    149.             IOUtils.closeQuietly(is);
    150.             IOUtils.closeQuietly(out);
    151.         }
    152.     }
    153. }
    154.  
    155.  
    156.  
    157.  
    158.  
    159.  
    160.  
    161.  
    162.  
    163.  
    164.  
    165.  
    166.

    1.2 配置访问路径

    src/api/action.js :

    1.   //获取书本信息
    2.   'BOOKMSG_BOOKINFO_REQ': '/book/queryBookPager',
    3.   //新增书本
    4.   'BOOK_ADD': '/book/addBook',
    5.   //修改书本
    6.   'BOOK_EDIT': '/book/editBook',
    7.   //删除书本
    8.   'BOOK_DEL': '/book/delBook',

    1.3 前端编写（及窗口）

    1. <template>
    2.   <div class="Book" style="padding: 30px;">
    3.     
    4.     <el-form :inline="true" class="demo-form-inline">
    5.       <el-form-item label="书籍名称 : ">
    6.         <el-input v-model="bookname" placeholder="书籍名称">el-input>
    7.       el-form-item>
    8.       <el-form-item>
    9.         <el-button type="warning" @click="onSubmit()">查询el-button>
    10.         <el-button type="warning" icon="el-icon-plus" @click="addBook()">新增el-button>
    11.       el-form-item>
    12.     el-form>
    13.     
    14.     <el-table :data="tableData" style="width: 100%">
    15.       <el-table-column prop="id" label="书籍ID">el-table-column>
    16.       <el-table-column prop="bookname" label="书籍名称">el-table-column>
    17.       <el-table-column prop="price" label="书籍价格">el-table-column>
    18.       <el-table-column prop="booktype" label="书籍类型">el-table-column>
    19.       
    20.       <el-table-column label="操作">
    21.         
    22.         <template slot-scope="scope">
    23.           <el-button size="mini" @click="handleEdit(scope.row)">编辑el-button>
    24.           <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除el-button>
    25.         template>
    26.       el-table-column>
    27.     el-table>
    28.     
    29.     <div class="block" style="padding: 20px;">
    30.       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
    31.         background :page-sizes="[10, 20, 30, 40]" :page-size="rows" layout="total, sizes, prev, pager, next, jumper"
    32.         :total="total">
    33.       el-pagination>
    34.     div>
    35.  
    36.     
    37.     <el-dialog :title="dialogName" :visible.sync="dialogFormVisible" @close="closeBookForm" width="500px">
    38.       <el-form :model="bookForm">
    39.         <el-form-item v-show="optiontype == 'update'" label="编号" :label-width="formLabelWidth">
    40.           <el-input v-model="bookForm.id" autocomplete="off" :style="{width: formEleWidth}">el-input>
    41.         el-form-item>
    42.         <el-form-item label="书名" :label-width="formLabelWidth">
    43.           <el-input v-model="bookForm.bookname" autocomplete="off" :style="{width: formEleWidth}">el-input>
    44.         el-form-item>
    45.         <el-form-item label="价格" :label-width="formLabelWidth">
    46.           <el-input v-model="bookForm.price" autocomplete="off" :style="{width: formEleWidth}">el-input>
    47.         el-form-item>
    48.         <el-form-item label="类型" :label-width="formLabelWidth">
    49.           <el-select v-model="bookForm.booktype" placeholder="选择类型" :style="{width:formEleWidth}">
    50.             <el-option label="名著" value="mz">el-option>
    51.             <el-option label="小说" value="xs">el-option>
    52.           el-select>
    53.         el-form-item>
    54.       el-form>
    55.       <div slot="footer" class="dialog-footer">
    56.         <el-button @click="dialogFormVisible = false">取 消el-button>
    57.         <el-button type="primary" @click="saveBook()">确 定el-button>
    58.       div>
    59.     el-dialog>
    60.  
    61.   div>
    62.  
    63. template>

    注1：隐藏显示设置，通过Vue实例对象中的dialogFormVisible="true|false"来控制dialog显示隐藏
           :visible.sync="dialogFormVisible"
        
    注2：通过close或closed事件，在关闭dialog弹出框时清空form表单数据和验证信息；
           @close="dialogClose" 

    1.4 增删改查实现

    1.4.1 新增示例

    1.4.2 修改示例

    1.4.3 删除示例

    二、表单验证

    2.1 设置表单验证属性

            Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator

    2.2 自定义验证规则

    1.  //定义验证规则
    2.         rules:{
    3.           bookname: [{
    4.               required: true,
    5.               message: '请输入书籍名称',
    6.               trigger: 'blur'
    7.             },
    8.             {
    9.               min: 1,
    10.               max: 10,
    11.               message: '长度在 1 到 10 个字符',
    12.               trigger: 'blur'
    13.             }
    14.           ],
    15.           price: [{
    16.             required: true,
    17.             message: '请输入价格',
    18.             trigger: 'blur'
    19.           }],
    20.           booktype: [{
    21.             required: true,
    22.             message: '请输入书籍类别',
    23.             trigger: 'blur'
    24.           }]
    25.         },

    2.3 使用规则

    1.       /* 新增书本 */
    2.       saveBook() {
    3.  
    4.         this.$refs['bookForm'].validate((valid) => {
    5.           if (valid) {
    6.             //默认新增
    7.             var url = this.axios.urls.BOOK_ADD;
    8.             if (this.optiontype == 'update') {
    9.               url = this.axios.urls.BOOK_EDIT;
    10.             }
    11.             console.log(url)
    12.             this.axios.post(url, this.bookForm).then(d => {
    13.               //关闭窗口
    14.               this.closeBookForm();
    15.               this.dialogFormVisible = false;
    16.               this.query({});
    17.             }).catch();
    18.           } else {
    19.             console.log('error submit!!');
    20.             return false;
    21.           }
    22.         });
    23.  
    24.       },

    2.4 效果演示

  • 相关阅读:
    『忘了再学』Shell基础 — 21、变量的测试与内容置换
    Trino 387 Docker 部署配置数据源后不显示对应数据Catalog
    y116.第七章 服务网格与治理-Istio从入门到精通 -- Istio基础(二)
    免费小程序商城搭建之b2b2c o2o 多商家入驻商城 直播带货商城 电子商务b2b2c o2o 多商家入驻商城 直播带货商城 电子商务
    全自动备份文件：数据安全新卫士
    Web消息推送之SSE
    js echarts踩坑记录
    产品周报第33期｜完善铁粉规则，优化原创保护策略，升级创作中心的数据展示，开放业界专家自定义域名权益……
    JavaWeb项目(登录注册页面)全过程详细总结
    MCDF--lab03
  • 原文地址：https://blog.csdn.net/Ying_hao_kun/article/details/133718735