SpringBoot part4 day04

最新推荐文章于 2022-08-29 20:30:27 发布
最新推荐文章于 2022-08-29 20:30:27 发布
阅读量163 收藏
点赞数
分类专栏： springboot 文章标签： java spring spring boot
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47562812/article/details/110221842
版权

1.页面结构

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css" href="/css/jt.css" />
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
</head>
<body class="easyui-layout">

  <div data-options="region:'west',title:'菜单',split:true" style="width:10%;">
   		<ul class="easyui-tree">
   			<li>
   			<span>商品管理</span>
   			<ul>
   			<li><a onclick="addTab('商品新增','/item-add')">商品新增</a></li>
   			<li><a onclick="addTab('商品查询','/item-list')">商品查询</a></li>
   			<li><a onclick="addTab('商品更新','/item-update')">商品更新</a></li>
   			</ul>
			</li>
			
			<li>
   			<span>网站内容管理</span>
   			<ul>
   			<li>内容新增</li>
   			<li>内容修改</li>
   			</ul>
			</li>
   		
   		</ul>
   </div>
   <div id="tt" class="easyui-tabs" data-options="region:'center',title:'首页'"></div>


</body>
<script type="text/javascript">
function addTab(title, url){  
    if ($('#tt').tabs('exists', title)){
        $('#tt').tabs('select', title);
    } else {
        var url2 = "https://map.baidu.com/@12964432.517776728,4826375.366248961,13z";
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url2+'" style="width:100%;height:100%;"></iframe>';
        $('#tt').tabs('add',{
            title:title,  
            content:content,  
            closable:false
        });  
    }
}

</script>

</html>

2.商品列表的展现

2.1pojo

商品item

package com.jt.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

import lombok.Data;
import lombok.experimental.Accessors;

@JsonIgnoreProperties(ignoreUnknown=true) //表示JSON转化时忽略未知属性
@TableName("tb_item")
@Data
@Accessors(chain=true)
public class Item extends BasePojo{
	@TableId(type=IdType.AUTO)
	private Long id;				//商品id
	private String title;			//商品标题
	private String sellPoint;		//商品卖点信息
	private Long   price;			//商品价格 Long > dubbo  存入数据库用整数，但是页面展现使用小数（小数运算不精确而且存储麻烦）
	private Integer num;			//商品数量
	private String barcode;			//条形码
	private String image;			//商品图片信息   1.jpg,2.jpg,3.jpg
	private Long   cid;				//表示商品的分类id
	private Integer status;			//1正常，2下架
	
	//为了满足页面调用需求,添加get方法
	public String[] getImages(){
		
		return image.split(",");
	}
}

2.2UI列表的展现
在这里插入图片描述
在这里插入图片描述
页面json抽取为类的过程
在这里插入图片描述

2.3JSON串的说明

2.3.1什么是JSON（json本质是String）
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它使得人们很容易的进行阅读和编写。同时也方便了机器进行解析和生成。 JSON本质是String
2.3.2JSON的基本类型
1.object 对象的格式 名称/值 对的集合 是无序的
在这里插入图片描述
2.数组 值的有序集合

[1,2,3,4,"打游戏"，"逛街"]

基本类型两种，延申出嵌套格式（值的嵌套）
在这里插入图片描述

{"id":1,"name":"白雪公主","hobbys":["逛街","看电视","打游戏"],"method":[{"id":1,"type":[{"id":1,"method":[{"id":1,"method":"自己走路"}]}]}]}

在这里插入图片描述

{"id"：1,"name":"哈利珀特","hobbys":["学魔法","打伏地","敲代码"],"method":[{"type":"火系"，"name":"三味真火"}]}

json严格条件下字符串要加引号

2.4表格数据展现的说明

2.4.1编写EasyUITable Vo对象
在这里插入图片描述
编辑EasyUITable VO对象

package com.jt.vo;

import com.jt.pojo.Item;
import jdk.internal.dynalink.ChainedCallSite;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

import java.util.List;
@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITable {
    /**
     * 记录总数
     * */
    private Long total;
    /**
     * 每页展现的记录
     * */
    private List<Item> rows;


}

通过对象的get()方法获取JSON属性及属性值
JSON转化为对象时，通过对象的set()方法为属性赋值

package com.jt.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonIgnoreProperties;

import lombok.Data;
import lombok.experimental.Accessors;

@JsonIgnoreProperties(ignoreUnknown=true) //表示JSON转化时忽略未知属性
@TableName("tb_item")
@Data
@Accessors(chain=true)
public class Item extends BasePojo{
	@TableId(type=IdType.AUTO)
	private Long id;				//商品id
	private String title;			//商品标题
	private String sellPoint;		//商品卖点信息
	private Long   price;			//商品价格 Long > dubbo  存入数据库用整数，但是页面展现使用小数（小数运算不精确而且存储麻烦）
	private Integer num;			//商品数量
	private String barcode;			//条形码
	private String image;			//商品图片信息   1.jpg,2.jpg,3.jpg
	private Long   cid;				//表示商品的分类id
	private Integer status;			//1正常，2下架
	
	//为了满足页面调用需求,添加get方法
	public String[] getImages(){
		
		return image.split(",");
	}
}

2.4.2 controller

@RequestMapping("testVO")
	public EasyUITable testVO(){
		Item item1=new Item();
		item1=item1.setId(1000L).setTitle("饮水机").setPrice(2000L);
		Item item2=new Item();
		item2.setId(2000L).setTitle("电冰箱").setPrice(30000L);
		List<Item> rows=new ArrayList<>();
		rows.add(item1);
		rows.add(item2);

return new EasyUITable(2000L, rows);

	}

说明：对象转化为json用get()方法，json转化为对象用set()方法

2.4.3 页面请求

表格页面分析：
说明:当添加了分页插件之后,当ajax程序解析时会动态的拼接参数.
在这里插入图片描述
ItemController

package com.jt.controller;

import com.jt.pojo.Item;
import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.jt.service.ItemService;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import java.util.ArrayList;
import java.util.List;

@RestController //表示返回的都是json
@RequestMapping("/item")
public class ItemController {
	
	@Autowired
	private ItemService itemService;

    @RequestMapping("/query")
	@ResponseBody
	public EasyUITable doFindItemByPage(Integer page,Integer rows){
     return itemService.findItemByPage(page,rows);


	}
	
	
}

1.手写SQL查询
ItemServiceImpl

package com.jt.service;

import com.jt.pojo.Item;
import com.jt.vo.EasyUITable;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.jt.mapper.ItemMapper;

import java.util.List;

@Service
public class ItemServiceImpl implements ItemService {
	
	@Autowired
	private ItemMapper itemMapper;


	@Override
	public EasyUITable findItemByPage(Integer page, Integer rows) {

		long total=itemMapper.selectCount(null);
		int startIndex=(page-1)*rows;
		List<Item> itemList = itemMapper.findItemByPage(startIndex,rows);



		return new EasyUITable(total, itemList);
	}
}

ItemMapper

package com.jt.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.Item;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface ItemMapper extends BaseMapper<Item>{
    @Select("select * from tb_item order by updated desc limit #{startIndex},#{rows}")
    List<Item> findItemByPage(int startIndex, Integer rows);
}

2.使用MybatisPlus

@Override//使用MybatisPlus
	public EasyUITable findItemByPage(Integer page, Integer rows) {
		QueryWrapper queryWrapper=new QueryWrapper();
		queryWrapper.orderByDesc("updated");
		IPage<Item> iPage=new Page<>(page,rows);//IPage是接口，Page是实现的类
		//根据分页模型执行分页操作，并将结果返回给分页对象
		iPage=itemMapper.selectPage(iPage, queryWrapper);
		Long total=iPage.getTotal();//由分页工具自动获取，获取记录总数
		List<Item> itemList=iPage.getRecords();//获取查询当前页

		return new EasyUITable(total, itemList);
	}

需要增加配置类
在这里插入图片描述

package com.jt.config;

import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration//bean标签使用
public class MybatisPlusConfig {
   //讲分页拦截器交给spring管理  MP是Mybatis的增强工具
    @Bean
    public PaginationInterceptor paginationInterceptor(){

        return new PaginationInterceptor();
    }

}

在这里插入图片描述
在这里插入图片描述

2.5数据格式化

2.5.1格式化价格
在这里插入图片描述
在这里插入图片描述
formatter:KindEditorUtil

2.5.2格式化状态：

在这里插入图片描述
2.5.3实现商品分类的回显
说明：
在这里插入图片描述
编辑Item-list页面
在这里插入图片描述
在这里插入图片描述
改为
在这里插入图片描述
ItemCat

package com.jt.pojo;

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;
import lombok.experimental.Accessors;

@Data
@TableName("tb_item_cat")
@Accessors(chain = true)
public class ItemCat extends BasePojo{
    @TableId
    private Long id;         //主键
    private Long parentId;   //父级ID
    private String name;       //父级
    private Integer status;     //状态信息
    private Integer sortOrder;   //排序号
    private Boolean isParent;   //是否为父级  tinyint用boolean进行转化
    
}

BasePojo

package com.jt.pojo;

import java.io.Serializable;
import java.util.Date;

import lombok.Data;
import lombok.experimental.Accessors;

//pojo基类，完成2个任务，2个日期，实现序列化
@Data
@Accessors(chain=true)
public class BasePojo implements Serializable{
	private Date created;
	private Date updated;

}

在这里插入图片描述
有了这个注解不用每个都写@Mapper

package com.jt.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.ItemCat;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface ItemCatMapper extends BaseMapper<ItemCat> {

}

在这里插入图片描述

package com.jt.service;

import com.jt.mapper.ItemCatMapper;
import com.jt.pojo.ItemCat;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

@Service
public class ItemCatServiceImpl implements ItemCatService{
   @Autowired
   private ItemCatMapper itemCatMapper;

    @Override
    public ItemCat findItemCatName(Integer id) {
        return itemCatMapper.selectById(id);
    }


}


package com.jt.controller;

import com.jt.pojo.ItemCat;
import com.jt.service.ItemCatService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/item/cat")
public class ItemCatController {
    @Autowired
    private ItemCatService itemCatService;
    @RequestMapping("/queryItemName")
    @ResponseBody
    public String doFindItemCat(Integer itemCatId){
       // System.out.println("itemCat获取id："+itemCatId);
        ItemCat itemCat=itemCatService.findItemCatName(itemCatId);
        //System.out.println(itemCat.getName()+"--------------");
        return itemCat.getName();
    }

}

每条数据都需要与后台进行一次交互，效率低（缓存）

2.6Ajax嵌套问题

在这里插入图片描述
若改为异步：false
在这里插入图片描述
页面数据不会显示
原因：页面一共发两次ajax请求，并且两次请求是嵌套关系，页面只刷新一次
解决办法：将第二次的ajax请求改为同步
在这里插入图片描述
扩展知识：JS中闭包问题

3 树形结构的展现

3.1common.js的依赖问题

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

3.2商品分类的业务分析

一般情况下，结构分为三级
在这里插入图片描述
在这里插入图片描述
layUI
在这里插入图片描述
elementUI
在这里插入图片描述

3.3树形结构的问题

3.3.1页面js
在这里插入图片描述
3.3.2json结构
在这里插入图片描述
3.3.3 EasyUITree对象的封装

package com.jt.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class EasyUITree {

    private Long id;//数据库id为long类型
    private String text;//定义节点名称
    private String state;//节点状态信息

}

在这里插入图片描述

3.4新增页面的分析

3.4.1页面流转过程

3.4.2页面流转分析
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

关于参数异常问题（Mybatis版本较低）

mybatis允许单值传参,不允许多值传参，将多值封装成单值，就是封装成map集合
底层sql:#{}取值,获取的是key，然后获取value
在这里插入图片描述

weixin_47562812
关注
专栏目录
Springboot2.0+Spring5.0 reactor Controller&Handler 实战
Wandys的博客
01-31 2829
前面初体验之后，我们尝试一下进行route Path的迁移，我们实战只写日常用到的配置实现方式，不具体分析原理，具体原理后续分析。在传统springMvc项目中我们使用Controller来处理serverlet的请求，在spring 5.0中的reactive方式中，对这些做了基本的兼容，如果把传统编码方式的项目迁移到react，只需要做一些特定的调整，在react mvc中，推荐使用handl
Spring-java 之pojo 继承关系 连点不成功问题 基础笔记
pingzhuyan的博客
11-26 722
目录 引言: 建造实体类的时候 总写几个属性 -> 创建个基类pojo BasePojo呀 里面把一些经常写的属性放到里面 引言: 建造实体类的时候 总写几个属性 创建时间 更新时间 每次写都很烦躁 墨迹 那么有没有什么解决办法呢 有....... -> 创建个基类pojo BasePojo呀 里面把一些经常写的属性放到里面 但是 这里有个坑 大家还是注意一下 先看demo [连点写法会遇到的问题 , 不喜欢连点的可以划走了] 创建三个类 ...
CGB2005 0918 jt19
qq_43765881的博客
09-18 140
今日任务 cookie的方式进行跨域 1.先找到对应的服务器 sso jsonp 是http协议 判断在哪里写 还是看Js前端给的url地址 用户登出操作 登出分析 还得删除cookie和redis里面的数据(要得到key) 然后执行删除操作 自我实现 同域 判断 写在自家web服务器上 jt-web @Autowired private JedisCluster jedisCluster; /** * 实现用户的登出操作 要求删除cookie
Swagger配置文件成功出现Cannot access com.google.common.base.Predicate错误解决方法
热门推荐
不怕万人阻挡，只怕自己投降
11-16 1万+
我最近自己再搭建一个springboot、springcloud、vue的项目来玩一下。在配置Swagger的时候产生了上述的错误。一个报错产生的原因有很多种，下面我总结一下自己遇到的问题以及解决办法： 爆红的配置文件如下： @Configuration @EnableSwagger2 public class SwaggerConfig { @Bean public Docket cr...
SpringBoot part4 day16
weixin_47562812的博客
12-15 135
1 优化JSONP的调用 2 SOA的思想/RPC调用 3微服务调用方式 4 搭建注册中心 5完成doubble入门案例
SpringBoot part4 day07
weixin_47562812的博客
12-02 189
1.实现文件上传 2.实现反向和正向代理机制 3.学习nginx服务器 4.tomcat集群的搭建
SpringBoot part4 day15
weixin_47562812的博客
12-15 240
1 完成用户信息的校验 2 了解常规远程调用的方式 3 连接什么是SOA思想 4 了解什么是RPC调用 5 了解HTTP协议传输的规定
全面解剖RocketMQ和项目实战-day2-part2.7z
06-25
在描述中提到的是"全面解剖RocketMQ和项目实战-day2-part2.7z"，这表明这是一个关于RocketMQ的进阶教程，可能是系列课程的一部分，重点在于理论知识与实践操作的结合。这部分内容可能涵盖了RocketMQ的高级特性，如...
全面解剖RocketMQ和项目实战-day2-part1.7z
06-25
《全面解剖RocketMQ与项目实战》课程是深入学习分布式消息中间件RocketMQ的重要资源，本部分为"day2-part1"，包含了多个关键主题，旨在帮助开发者掌握RocketMQ的核心概念以及如何在实际项目中应用。以下是各视频文件...
Springboot+POI 带有图片的表格导入导出功能解析
studyday1的博客
08-29 2019
这里的难点主要在于，对于获取表格中图片列的图片数据进行保存到服务器以及对应插入数据库，建议一般是用图片的保存服务器的路径地址保存到数据库中，或者通过封装一个附件VO类，有id属性与路径属性，保存id属性到数据库中也是可以的。今天来讲下在导入数据的场景时，表格中会有一列存放的是对应的图片信息，导入后在前端页面进行表格数据展示。总结一下，这里重点是提炼了POI表格导入导出时涉及的。，可根据业务实际场景需求进行灵活处理。...
【大数据入门笔记系列】第五节 SpringBoot集成hadoop开发环境（复杂版的WordCount）
Jack_Roy的博客
02-17 1万+
【大数据入门笔记系列】第五节 SpringBoot集成hadoop开发环境（复杂版的WordCount）前言环境清单创建SpringBoot项目创建包创建yml编写代码 前言 本来是想直接扒一扒MapReduce的工作原理，但是觉得只是图解或者文字描述，没有Demo的运行体验总是无趣的，一遍走下来也没有什么成就感，因此还是要撸一撸代码的。 那么谈到MapReduce的工作原理，我们的Demo首选...
解决idea报错 “cannot access com.***...***.class“
h_and_g的博客
10-12 1万+
项目场景： Idea项目开发过程中，突然出现莫名的找不到包错误 问题描述： idea开发，突然出现：同一个包下的java代码，突然飘红，出现红色的波浪下划线，错误提示： cannot access com.xx......xx.class 原因分析： 同一个项目里面怎么会报这个错误呢？由此怀疑是idea本身的问题，自己google了一下发现有人在官网写了反馈，官网人员解答：重启试试 但是自己测试发现：有时好使，但有时并不好使。 根本原因：IDEA缓存出现问题，可以强制删除缓存！！！ .
CGB2005京淘-4笔记
weixin_50633453的博客
09-17 162
1. 构建京淘项目 1.1 构建项目说明 1.什么是聚合工程 一个大型项目中包含了多个小型项目. 通过打包方式进行定义!! 2.常见打包方式: 1.jar包 2.war包 3.pom包 3.京淘项目创建说明 父级项目jt 打包类型:pom 工具API项目 jt-common 打包类型:jar包 业务项目 jt-manage 打包类型:jar/war包. 1.2 创建父级工程JT 1.2.1创建项目 1.什么是聚合工程 ：一个大型项目包含了多个小型项目，通过打包方式进行定义！ 2.打包方式：1. jar包
Dubbo中消费者生产者启动顺序报错
weixin_47562812的博客
12-16 1460
SpringBoot 项目中Dubbo的消费者和生产者启动顺序错误报错 解决方案1： 关闭当前消费者再启动服务生产者，最后再启动消费者 解决方案2： 在配置文件中添加相应的注解 @Bean public ConsumerConfig consumerConfig() { ConsumerConfig consumerConfig = new ConsumerConfig(); consumerConfig.setCheck(false); consumerConfig.setTimeou
动吧旅游项目 菜单管理模块 part 3
weixin_47562812的博客
11-25 714
业务设计说明 菜单管理又称为资源管理，是系统资源对外的表现形式。本模块主要是实现对菜单进行添加、修改、查询、删除等操作。 菜单表与角色表是多对多的关系，在表设计时，多对多关系通常由中间表(关系表)进行维护，如图： 基于角色菜单表的设计，其角色和菜单对应的关系数据要存储到关系表中，其具体存 储形式，如图： 原型设计说明 基于用户需求，实现菜单静态页面(html/css/js)，通过静态页面为用户呈现菜单模块的基本需求实现。 当在主页左侧菜单栏，点击菜单管理时，在主页内容呈现区，呈现菜单列表页面，如 图：
动吧旅游 生态系统项目 part 1
weixin_47562812的博客
11-25 551
产品功能的实现： 1.首先实现软件的功能； 2.学会控制； 3.运维（项目运行时日志的分析，项目的布署，项目的拓展） 1. 项目简介 1.1概述 动吧旅游生态系统,应市场高端用户需求，公司决定开发这样的一套旅游系统，此系统包含旅游电商系统（广告子系统，推荐子系统，评价子系统，商品子系统，订单子系统，…），旅游分销系统(分销商的管理)，旅游业务系统(产品研发，计调服务，系统管理，… 1.2原型分析 基于用户需求,进行原型设计（基于html+css+js进行静态页面实现）。例如系统登录页面:（bootstrap
springboot 3.0.6 怎么注入MultipartResolver
最新发布
05-18
在 Spring Boot 3.0.6 中，可以通过在配置类中添加 `MultipartResolver` 的 `@Bean` 注解来进行注入。具体实现步骤如下： 1. 在配置类中添加 `MultipartResolver` 的 `@Bean` 注解，并指定 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值