ElementUI之CUD+表单验证

Dear 丶 2024-02-23 04:15 45阅读 0赞

## ![76896d430d554fe795fdfe74e12272d0.jpeg][] ##

## 一.ELementUI之CUD ##

#### 后端CUD编写 ####

@Controller
    @RequestMapping("/book")
    public class BookController {
     
        @Autowired
        private IBookService bookService;
     
        @RequestMapping("/addBook")
        @ResponseBody
        public JsonResponseBody<?> addBook(Book book){
            try {
                bookService.insert(book);
                return new JsonResponseBody<>("新增书本成功",true,0,null);
            } catch (Exception e) {
                e.printStackTrace();
                return new JsonResponseBody<>("新增书本失败",false,0,null);
            }
        }
     
        @RequestMapping("/editBook")
        @ResponseBody
        public JsonResponseBody<?> editBook(Book book){
            try {
                bookService.updateByPrimaryKey(book);
                return new JsonResponseBody<>("编辑书本成功",true,0,null);
            } catch (Exception e) {
                e.printStackTrace();
                return new JsonResponseBody<>("编辑书本失败",false,0,null);
            }
        }
     
        @RequestMapping("/delBook")
        @ResponseBody
        public JsonResponseBody<?> delBook(Book book){
            try {
                bookService.deleteByPrimaryKey(book.getId());
                return new JsonResponseBody<>("删除书本成功",true,0,null);
            } catch (Exception e) {
                e.printStackTrace();
                return new JsonResponseBody<>("删除书本失败",false,0,null);
            }
        }
     
        @RequestMapping("/queryBookPager")
        @ResponseBody
        public JsonResponseBody<List<Book>> queryBookPager(Book book, HttpServletRequest req){
            try {
                PageBean pageBean=new PageBean();
                pageBean.setRequest(req);
                List<Book> books = bookService.queryBookPager(book, pageBean);
                return new JsonResponseBody<>("OK",true,pageBean.getTotal(),books);
            } catch (Exception e) {
                e.printStackTrace();
                return new JsonResponseBody<>("分页查询书本失败",false,0,null);
            }
        }
     
        @RequestMapping("/queryBookCharts")
        @ResponseBody
        public JsonResponseBody<?> queryBookCharts(){
            try{
                Map<String, Object> charts = bookService.queryBookCharts();
                return new JsonResponseBody<>("OK",true,0,charts);
            }catch (Exception e){
                e.printStackTrace();
                return new JsonResponseBody<>("查询统计分析数据失败",false,0,null);
            }
        }
     
        @RequestMapping("/upload")
        @ResponseBody
        public JsonResponseBody<?> upload(BookFileVo bookFileVo){
            try {
                MultipartFile bookFile = bookFileVo.getBookFile();
                System.out.println(bookFileVo);
                System.out.println(bookFile.getContentType());
                System.out.println(bookFile.getOriginalFilename());
                return new JsonResponseBody<>("上传成功",true,0,null);
            } catch (Exception e) {
                e.printStackTrace();
                return new JsonResponseBody<>("上传失败",false,0,null);
            }
        }
     
        @RequestMapping("/download")
        public void download(HttpServletRequest request, HttpServletResponse response){
            try {
                String relativePath = "uploads/1.jpg";
                String absolutePath = request.getRealPath(relativePath);
                InputStream is = new FileInputStream(new File(absolutePath));
                OutputStream out = response.getOutputStream();
                response.setContentType("application/octet-stream");
                response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));
                byte[] by = new byte[1024];
                int len = -1;
                while (-1 != (len = is.read(by))) {
                    out.write(by);
                }
                is.close();
                out.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
     
        @RequestMapping("/downloadUrl")
        public void downloadUrl(HttpServletRequest request, HttpServletResponse response){
            String relativePath = "uploads/1.jpg";
            String absolutePath = request.getRealPath(relativePath);
            InputStream is = null;
            OutputStream out = null;
     
            try {
                is = new FileInputStream(new File(absolutePath));
                // 设置Content-Disposition
                response.setHeader("Content-Disposition",
                        "attachment;filename=" + URLEncoder.encode("1.jpg", "UTF-8"));
                out = response.getOutputStream();
                IOUtils.copy(is, out);
                response.flushBuffer();
                System.out.println("完成");
            } catch (Exception e) {
                e.printStackTrace();
            } finally {
                IOUtils.closeQuietly(is);
                IOUtils.closeQuietly(out);
            }
        }
    }

#### 前端编写 ####

##### 配置访问路径： #####

在项目中的src文件下api中找到action.js进行配置数据访问的地址:

'BOOKMSG_BOOKINFO_REQ': '/book/queryBookPager', //获取书本信息
      'BOOK_ADD': '/book/addBook',  //新增书本
      'BOOK_EDIT': '/book/editBook',  //修改书本
      'BOOK_DEL': '/book/delBook', //删除书本

弹出框窗口编写

增删改查实现

新增演示：

![4a69c632eb81495a9c8822cda93ac145.gif][]

修改演示：

![cfe8cc7ded5d41f29e3d4e4e470ac8c9.gif][]

删除演示：

![e7755b546b0040d1a2efe477a9922468.gif][]

#### 二、表单验证 ####

##### 自定义验证规则 #####

//定义验证规则
            rules:{
              bookname: [{
                  required: true,
                  message: '请输入书籍名称',
                  trigger: 'blur'
                },
                {
                  min: 1,
                  max: 10,
                  message: '长度在 1 到 10 个字符',
                  trigger: 'blur'
                }
              ],
              price: [{
                required: true,
                message: '请输入价格',
                trigger: 'blur'
              }],
              booktype: [{
                required: true,
                message: '请输入书籍类别',
                trigger: 'blur'
              }]
            },

使用规则

/* 新增书本 */
          saveBook() {
     
            this.$refs['bookForm'].validate((valid) => {
              if (valid) {
                //默认新增
                var url = this.axios.urls.BOOK_ADD;
                if (this.optiontype == 'update') {
                  url = this.axios.urls.BOOK_EDIT;
                }
                console.log(url)
                this.axios.post(url, this.bookForm).then(d => {
                  //关闭窗口
                  this.closeBookForm();
                  this.dialogFormVisible = false;
                  this.query({});
                }).catch();
              } else {
                console.log('error submit!!');
                return false;
              }
            });
     
          },

效果演示：

![8477159512234e35a41215efb35417f0.gif][]

[76896d430d554fe795fdfe74e12272d0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/8040c6d72f194f128090712b7ead7839.png
[4a69c632eb81495a9c8822cda93ac145.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/0d483b96818943b5bfdd2015f4410d4e.png
[cfe8cc7ded5d41f29e3d4e4e470ac8c9.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/24df2505e8f8457d89baf26f6cffe9ff.png
[e7755b546b0040d1a2efe477a9922468.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/a307441fdba44d83af784f62c6d5235e.png
[8477159512234e35a41215efb35417f0.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/144089c75ed64efc8bba8204825eb531.png