商品栏后台搭建-001

最新推荐文章于 2022-05-03 17:37:03 发布
最新推荐文章于 2022-05-03 17:37:03 发布
阅读量374 收藏
点赞数 2
分类专栏： 02练习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SkyCloud_/article/details/107177779
版权

JT项目后台搭建

逻辑分析

分布式思想

说明: 由于程序将所有的功能模块放到同一台tomcat服务器中,那么如果服务器内部出现了问题,则直接导致整个服务器不能正常执行. 系统架构的耦合性高
在这里插入图片描述

1. 分布式系统

核心理念: 按照指定的规则,将系统进行拆分.各自独立运行,减少架构的耦合性

2. 按照模块拆分

优点: 如果其中一个服务器出现了问题,则不会影响整个项目的正常运行.
在这里插入图片描述

3. 按照层级拆分

说明:有时代码的业务逻辑特别的复杂.如何减少开发的耦合性.可以按照层级的方式进行拆分.
在这里插入图片描述

4. 总结
优点: 可以将大型项目按照指定规则拆分.降低了系统架构的耦合性.方便开发和"维护".
弊端: 拆分完成之后由于项目个数重点 运维不易. 可以接受!!!
分布式另外表现形式: 准备多台服务器一起为用户提供服务.

1.2集群

1. 什么是集群
说明:采用多台服务器部署项目,共同为用户提供服务的.同时可以满足**高可用(HA)**的需求时,称之为集群.
什么是高可用: 当服务器发生宕机的现象时,可以自动的实现故障迁移.保证服务运算能力.
在这里插入图片描述

1.3JT分布式项目架构设计

如何管理JAR包
问题说明: 由于分布式的项目构建,导致服务器中jar包维护的份数变多.如果长时间按照该方式运行,则必然导致jar包管理混乱.
解决方案: 准备一个公共的项目,由该项目管理所需要的jar包文件. 其它项目继承该项目即可.
聚合工程

  • 项目划分

1.父级工程 jt 项目打包类型: pom
2.工具API jt-common 打包类型:jar
3.业务系统 jt-manage 打包类型:war

构建聚合工程

说明:
修改IDE配置,让new的选项中出现maven相关信息.
在这里插入图片描述
在这里插入图片描述

2.1创建父级工程Maven Project

在这里插入图片描述

  • 添加jar包
  <!-- parent标签作用:管理所有被SpringBoot整合的jar版本的定义 springboot特点:开箱即用,映入jar包就可以添加相对应的功能. 
		定义了当前springboot2.3.1所有有关依赖的版本号信息 -->
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.3.1.RELEASE</version>
		<relativePath /> <!-- lookup parent from repository -->
	</parent>


	<properties>
		<java.version>1.8</java.version>
		<!-- 指定插件版本 -->
		<maven-jar-plugin.version>3.1.1</maven-jar-plugin.version>
		<!-- 跳过测试类打包 -->
		<skipTests>true</skipTests>
	</properties>

	<dependencies>
		<!-- 在webjar包的内部关联了所有被springMVC的jar包信息. 定义了当前依赖包的版本  
		所以只需要引入一个jar包,则可以关联整合所有的有关mvc的依赖包信息-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>
		<!-- 配置properties添加属性注入依赖 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-configuration-processor</artifactId>
			<optional>true</optional>
		</dependency>
		<!-- 支持热部署 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
		</dependency>
		<!--引入插件lombok 自动的set/get/构造方法插件 -->
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
		</dependency>
		
		<!--引入数据库驱动 -->
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
		<!--springBoot数据库连接  -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-jdbc</artifactId>
		</dependency>
		<!--springBoot整合JSP添加依赖  -->
		<!--servlet依赖 -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>javax.servlet-api</artifactId>
		</dependency>

		<!--jstl依赖 -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
		</dependency>

		<!--使jsp页面生效 -->
		<dependency>
			<groupId>org.apache.tomcat.embed</groupId>
			<artifactId>tomcat-embed-jasper</artifactId>
		</dependency>
		<!--spring整合mybatis-plus -->
		<dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-boot-starter</artifactId>
			<version>3.3.2</version>
		</dependency>
		<!-- 引入aop支持 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-aop</artifactId>
		</dependency>
		<!--spring整合redis -->
		<dependency>
			<groupId>redis.clients</groupId>
			<artifactId>jedis</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.data</groupId>
			<artifactId>spring-data-redis</artifactId>
		</dependency>
		<!--添加httpClient jar包 -->
		<dependency>
			<groupId>org.apache.httpcomponents</groupId>
			<artifactId>httpclient</artifactId>
		</dependency>
		
		<!--引入dubbo配置 -->
		<!--<dependency>
			<groupId>com.alibaba.boot</groupId>
			<artifactId>dubbo-spring-boot-starter</artifactId>
			<version>0.2.0</version>
		</dependency>-->
		
		<!--添加Quartz的支持 -->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-quartz</artifactId>
		</dependency>	
	</dependencies>
	
	<!-- 父级项目中不要添加maven的插件 -->

2.2创建jt-common(Maven Module)

jar包
在这里插入图片描述
导入src文件
在这里插入图片描述

2.3创建jt-manage(Maven Module)

war包
在这里插入图片描述
导入src文件
在这里插入图片描述

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <parent>
    <groupId>com.jt</groupId>
    <artifactId>jt</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <!-- 1.继承父级 -->
  </parent>
  <artifactId>jt-manage</artifactId>
  <packaging>war</packaging>
  <dependencies>
  <!-- 2.添加依赖 -->
  	<dependency>
  		<groupId>com.jt</groupId>
  		<artifactId>jt-common</artifactId>
  		<version>0.0.1-SNAPSHOT</version>
  	</dependency>
  </dependencies>
  <!-- 3.添加依赖 -->
  <!-- 负责打包更新maven操作相关配置,必须配置 -->
	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>
2.3.1修改yml配置
server:
  port: 8091
  servlet:
    context-path: /
spring:
  datasource:
    #引入druid数据源
    #type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://127.0.0.1:3306/jtdb?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
    username: root
    password: tarena

  mvc:
    view:
      prefix: /WEB-INF/views/
      suffix: .jsp
#mybatis-plush配置
mybatis-plus:
  type-aliases-package: com.jt.pojo
  mapper-locations: classpath:/mybatis/mappers/*.xml
  configuration:
    map-underscore-to-camel-case: true

logging:
  level: 
    com.jt.mapper: debug

1.京淘后端页面介绍

1.1 页面跳转说明

1.1.1 系统首页跳转说明

问题:http://localhost:8091/ 回车之后可以展现正常的页面信息. 如何跳转的页面
在这里插入图片描述
http://localhost:8091/------template-----添加index请求----->/WEB-INF/views/index.jsp
说明:如果将来想通过默认的访问路径跳转首页,则将页面名称改为index.之后配置视图解析器的前后缀即可.

1.2 EasyUI介绍

在这里插入图片描述

1.2.1页面布局

<!-- 引入css样式 -->
<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" />
<!-- 引入js -->
<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>

<body class="easyui-layout">

   <div data-options="region:'west',title:'菜单',split:true" style="width:10%;"></div>
   <div data-options="region:'center',title:'首页'"></div>

</body>

1.2.2树形结构

<body class="easyui-layout">

	<div data-options="region:'west',title:'菜单',split:true"
		style="width: 10%;">

		<ul class="easyui-tree">
			<li>
				<!--一级标题元素  -->
				<span>商品管理</span>
				<ul>
					<li>商品查询</li>
					<li>商品新增</li>
				</ul>
			</li>
			<li>
				<span>人员管理</span>
				<ul>
					<li>保安</li>
					<li>员工</li>
				</ul>
			</li>
		</ul>

	</div>
	<div data-options="region:'center',title:'首页'"></div>

</body>

1.2.3选项卡技术

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

//addTab('商品新增','/item-add')
function addTab(title, url){  
	//框架自己提供的函数方法.tabs
    if ($('#tt').tabs('exists', title)){  
        $('#tt').tabs('select', title);  //选中
    } else {  
        /*<iframe 画中画效果/>  */
        var url2 = "https://map.baidu.com/@12954908,4837179,13z";
        var content = '<iframe scrolling="auto" frameborder="0"  src="'+url2+'" style="width:100%;height:100%;"></iframe>';  
        $('#tt').tabs('add',{  
            title:title,  
            content:content,  //页面加载的内容
            closable:true  
        });  
    }  
} 

</script>

1.3 通用页面跳转实现

1.3.1 页面结构说明

如果需要跳转页面,需要页面中发起ajax请求.之后在Controller中需要接收改请求.
想法:能否利用一个Controller方法,实现通用页面跳转.

<ul>
       <!--url 发起ajax请求  -->
	   <li data-options="attributes:{'url':'/page/item-add'}">新增商品</li>
	   <li data-options="attributes:{'url':'/page/item-list'}">查询商品</li>
	   <li data-options="attributes:{'url':'/page/item-param-list'}">规格参数</li>
</ul>

1.3.2 编辑IndexController

package com.jt.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class IndexController {
	/**
	 * 1.url地址:/page/item-add
	 * 			/page/item-list
	 * 			/page/item-param-list
	 * 需求:使用一个方法实现页面跳转
	 * 
	 * 实现: RestFul风格
	 * 语法: 
	 * 		1.使用/方式分割参数.
	 * 		2.使用{}包裹参数
	 * 		3.在参数方法中 动态接收参数时使用特定注解@PathVariable
	 * 注解: @PathVariable
	 * 		name/value 表示接收参数的名称
	 * 		required   改参数是否必须  默认true
	
	 * restFul风格2:
	 * 	思路:利用通用的url地址,实现不同的业务调用
	 * 	 例子1:  http://www.jt.com/user?id=1    查询      			GET
	 * 	 例子2:  http://www.jt.com/user?id=1    删除				DELETE
	 * 	 例子3:  http://www.jt.com/user?id=1&name=xxx  更新          PUT
	 * 	 例子4:  http://www.jt.com/user	       新增操作			POST
	 * 	
	 * 	@RequestMapping(value = "/user",method = RequestMethod.POST)
		@PostMapping("/user")
	 * 
	 *  总结:
	 *  	一般在工作中有2种用法.
	 *  	作用1: 动态获取url路径中的参数
	 * 		作用2: 以统一的url地址,不同的请求类型,实现不同业务的调用.
	 * 		一般都会添加请求类型进行标识.为了安全.
	 */
	
	@RequestMapping("/page/{moduleName}")
	public String moduleName(@PathVariable String moduleName) {
		
		return moduleName;
	}
	
	
	
//	  @RequestMapping(value = "/user",method = RequestMethod.POST)
//	  @PostMapping("/user") 
//	  public String insertUser(User user) 
//	  { //入库
//		  
//	  }
//	  
//	  @RequestMapping(value = "/user",method = RequestMethod.GET) 
//	  public User selectUser(int id) 
//	  { //入库 }

}

1.4 EasyUI表格数据展现

1.4.1 POJO对象说明

在这里插入图片描述

1.4.2 EasyUI表格数据入门案例

1).页面表格设计

<div>
	定义表格，并且通过url访问json数据， fitColumns:true表示自动适应，singleSelect:true 表示选中单个,pagination:true分页查询
	<table class="easyui-datagrid" style="width:500px;height:300px" data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:true,pagination:true"> 
		<thead> 
			<tr> 
				<th data-options="field:'code',width:100">Code</th> 
				<th data-options="field:'name',width:100">Name</th> 
				<th data-options="field:'price',width:100,align:'right'">Price</th>
			</tr> 
		</thead> 
	/table> 
</div>

2).表格数据返回值格式

{
	"total":2000,
	"rows":[
		{"code":"A","name":"果汁","price":"20"},
		{"code":"B","name":"汉堡","price":"30"},
		{"code":"C","name":"鸡柳","price":"40"},
		{"code":"D","name":"可乐","price":"50"},
		{"code":"E","name":"薯条","price":"10"},
		{"code":"F","name":"麦旋风","price":"20"},
		{"code":"G","name":"套餐","price":"100"}
	]
}

1.4.3 定义EasyUITrable VO对象

真理: 学习任何的UI框架 按照指定的格式返回数据即可.
说明:改对象只要的作用于页面数据进行交互.,并且返回值的json串要求是指定的格式.

@Data
@NoArgsConstructor
@AllArgsConstructor
@Accessors(chain = true)   //开启链式加载结构
public class EasyUITable {
	private Integer total;
	private List<Item> rows;
	
}

1.5 JSON复习

1.5.1 什么是JSON

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

1.5.2 Object格式

在这里插入图片描述

 例子:  {"id":"1","name":"tomcat猫"}

1.5.3 Array格式

在这里插入图片描述

例子:  ["100","A","B"]

1.5.4 "复杂"格式 (嵌套格式)

在这里插入图片描述

例子:["1","2","3",true,false,["吃","喝",{"id":"101","hobbys":["打游戏","敲代码","看美女"]}]]

2.京淘商品列表展现

2.1 业务分析

2.1.1 页面分析

说明: url:’/item/query’ 当js解析改行代码,发起get类型的ajax请求.

<table class="easyui-datagrid" id="itemList" title="商品列表" 
       data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar">
    <thead>
        <tr>
        	<th data-options="field:'ck',checkbox:true"></th>
        	<th data-options="field:'id',width:60">商品ID</th>
            <th data-options="field:'title',width:200">商品标题</th>
            <th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th>
            <th data-options="field:'sellPoint',width:100">卖点</th>
            <!-- formatter:EasyUI中特定属性,调用指定的JS,之后将返回值结果进行展现. -->
            <th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>
            <th data-options="field:'num',width:70,align:'right'">库存数量</th>
            <th data-options="field:'barcode',width:100">条形码</th>
            <th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">状态</th>
            <th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">创建日期</th>
            <th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th>
         </tr>
    </thead>
</table>

2.1.2 参数分析

在这里插入图片描述
返回值: VO对象 EasyUITable.

2.1.3编辑ItemController

package com.jt.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.jt.service.ItemService;
import com.jt.vo.EasyUITable;

@RestController //返回数据不需要经过视图解析器.所以不用Controller
@RequestMapping("/item")
public class ItemController {
	@Autowired
	private ItemService itemService;
	/**
	 * 业务:展现商品列表数据,一EasyUI表格数据展现
	 * url地址:http://localhost:8091/item/query?page=1&rows=20
	 * 参数:page=1&rows=20
	 * 返回值:EasyUITable  VO对象
	 */
	@RequestMapping("/query")
	public EasyUITable findItemByPage(Integer page,Integer rows) {
		return itemService.findItemByPage(page,rows);
	}
}

2.1.4编辑UserService

package com.jt.service;

import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.jt.mapper.ItemMapper;
import com.jt.pojo.Item;
import com.jt.vo.EasyUITable;

@Service
public class ItemServiceImpl implements ItemService {
	@Autowired
	private ItemMapper itemMapper;
	/**
	 * 分页的SQL:select xxxx,xxxx from tb_item limit 起始位置,查询记录数
	 * 查询第一页:select * from tb_item limit 0,20		(规则:含头不含尾特点)0-19共20个记录
	 * 查询第二页:select * from tb_item limit 20,20		(规则:含头不含尾特点)20-39共20个记录
	 * 查询第三页:select * from tb_item limit 40,20		(规则:含头不含尾特点)40-59共20个记录
	 * 等差数列第N项:	(n-1)*rows
	 */

两种方法

	//利用Mp方式进行查询
	@Override
	public EasyUITable findItemByPage(Integer page, Integer rows) {
		//1.定义分页对象
		Page<Item> mpPage = new Page<>(page,rows);
		//2.定义条件构造器
		QueryWrapper<Item> queryWrapper =new QueryWrapper<Item>();
		//3.要求:按照更新时间,进行排序,降序排序
		queryWrapper.orderByDesc("updated");
		//执行分页操作,之后封装Page对象数据
		mpPage=itemMapper.selectPage(mpPage, queryWrapper);
		int total =(int)mpPage.getTotal();		//获取总记录数
		List<Item> items = mpPage.getRecords(); //获取当前分页记录
		return new EasyUITable(total, items);//(总数,分页记录数)
	}

或

@Override
	public EasyUITable findItemByPage(Integer page, Integer rows) {
		//1.获取记录总数
		int total=itemMapper.selectCount(null);
		//2.查询分页后的结果
		int start =(page-1)*rows;
		List<Item> itemList=itemMapper.selectItemByPage(start,rows);
		return new EasyUITable(total, itemList);
	}

2.1.5编辑UserMapper

public interface ItemMapper extends BaseMapper<Item>{

	@Select("select * from tb_item order by updated desc limit #{start},#{rows}")
	List<Item> selectItemByPage(int start, Integer rows);
	
}

2.1.6页面效果展现

在这里插入图片描述

2.2 Mybatis-plus分页实现

2.2.1编辑配置类

mybatis-plus

package com.jt.config;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.transaction.annotation.EnableTransactionManagement;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import com.baomidou.mybatisplus.extension.plugins.pagination.optimize.JsqlParserCountOptimize;
//Spring boot方式
@EnableTransactionManagement
@MapperScan("com.jt.mapper")
//表示配置类   .xml 配置文件
@Configuration
public class MybatisPlusConfig {
	@Bean	//一般和bean注解联用 ,表示将返回的对象实例化之后,交给spring容器管理
	public PaginationInterceptor paginationInterceptor() {
        PaginationInterceptor paginationInterceptor = new PaginationInterceptor();
        // 设置请求的页面大于最大页后操作， true调回到首页，false 继续请求  默认false
        // paginationInterceptor.setOverflow(false);
        // 设置最大单页限制数量，默认 500 条，-1 不受限制
        // paginationInterceptor.setLimit(500);
        // 开启 count 的 join 优化,只针对部分 left join
        paginationInterceptor.setCountSqlParser(new JsqlParserCountOptimize(true));
        return paginationInterceptor;
    }
}

3.商品分类信息展现

3.1 格式化价格

3.1.1 页面结构标识

<!-- formatter:EasyUI中特定属性,调用指定的JS,之后将返回值结果进行展现. -->
            <th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">价格</th>

3.1.2 查看common.js

	// 格式化价格  数据库价格/100 保留2位小数
	formatPrice : function(val,row){
		return (val/100).toFixed(2);
	},

3.2 格式化时间

3.2.1 页面标识

<th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">创建日期</th>

3.2.2编辑common.js

	// 格式化时间
	formatDateTime : function(val,row){
		var now = new Date(val);
    	return now.format("yyyy-MM-dd hh:mm:ss");
	},

3.3 格式化商品分类目录

3.3.1 业务说明

说明:当用户展现商品分类信息时,应该展现的是具体商品分类名称,而不是编号.
在这里插入图片描述

3.3.2 页面标识

<th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">叶子类目</th>

页面JS:

	 //格式化名称   根据商品分类ID查询名称
    findItemCatName : function(val,row){
    	var name;
    	$.ajax({
    		type:"get",   //查询一般为get请求
    		url:"/item/cat/queryItemName",
    		data:{itemCatId:val},	//参数信息
    		cache:true,    //缓存
    		async:false,    //表示同步   默认的是异步的true
    		dataType:"text",//表示返回值参数类型
    		success:function(data){
        		name = data;
        	}
    	});
    	return name;
	},

3.3.3 编辑ItemCat POJO

//POJO等实体类对象,一般都使用包装类型
@Data
@Accessors(chain = true)  //开启链式加载结构 重写了set方法 返回对象本身htis
@TableName("tb_item_cat") //关联商品分类表
public class ItemCat extends BasePojo{
	private static final long serialVersionUID = 5006550716849464495L;
	@TableId(type = IdType.AUTO)	//主键自增
	private Long id;
	private Long parentId;
	private String name;
	private Integer status;		//1.正常,2.删除
	private Integer sortOrder;	//排序号
	private Boolean isParent;	//0 false    1真
}

3.3.4 编辑ItemCatController

说明: 根据ItemCat的Id查询商品分类名称.

package com.jt.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.jt.pojo.ItemCat;
import com.jt.service.ItemCatService;

@RestController
@RequestMapping("/item/cat")
public class ItemCatController {

	@Autowired
	private ItemCatService itemCatService ;
	/**
	 * 业务:查询商品分类名称  根据id
	 * url地址:http://localhost:8091/item/cat/queryItemName?itemCatId=560
	 * 参数:	itemCatId=560
	 * 返回值:商品分类名称
	 *  
	 */
	@RequestMapping("/queryItemName")
	public String findItemCatNameById(Long itemCatId) {
		ItemCat itemCat=itemCatService.findItemCatById(itemCatId);
		return itemCat.getName();
	}
}

3.3.5 编辑ItemCatServiceImpl

@Service
public class ItemCatServiceImpl implements ItemCatService {
	@Autowired
	private ItemCatMapper itemCatMapper;
	@Override
	public ItemCat findItemCatById(Long itemCatId) {
//	QueryWrapper<ItemCat> queryWrapper =new QueryWrapper<ItemCat>();
//	queryWrapper.select("name,id");
//	itemCatMapper.selectByMaps  (queryWrapper);
		return itemCatMapper.selectById(itemCatId);
	}
}

3.3.7 关于ajax嵌套问题说明

叶子类目：一般将内部的ajax设置为同步（item/query）

小白天下第一
关注
专栏目录
互联网大项目第三天(共21天)-使用easyUI实现商品信息的分页展示
汤小萌的博客
05-03 1025
1.使用restFul的方式实现页面的跳转: 看一下后台的页面是的请求路径: &lt;span&gt;商品管理&lt;/span&gt; &lt;ul&gt; &lt;li data-options="attributes:{'url':'/page/item-add'}"&gt;新增商品&lt;/li&gt; &lt;li data-o..
ThinkPHP3.2.3 分组设置 搭建Admin后台登录页面 后台首页面搭建 tp框架常量 后台商品相关页面搭建
qq_37171379的博客
03-19 830
1.分组设置 分组： 同一个项目里边，由于业务规则的划分，有多个相关的功能模块，它们都有独立的控制器、view视图、配置文件、函数库文件等文件，为了开发维护方便，就给它们创建独立的分组出来，每个分组都有自己的控制器、view视图、配置文件、函数库文件。 如果还有其他的业务功能模块，也都是独立的，可以继续创建分组。 对分组进行访问： http://网址/index.php/分组/控制器/操作方法 在...
DoDo商城后台商品管理搭建
weixin_45493633的博客
11-09 257
开发工具 IDEA2019 Java版本 1.8 数据库 Mysql 8.0.12 框架Springcloud 结构 dodo 项目父工程，定义版本 （1） pom.xml <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" ...
JavaWeb开发知识总结(网上商城项目总结)
热门推荐
Somnus blog
06-02 2万+
JavaWeb开发知识总结-网上商城项目小结
spring5-学习总结
qq_17200461的博客
06-17 608
整体内容 spring框架的概述及spring中基于xml的IOC配置 spring中基于注释的IOC和ioc案例 spring中的aop和基于xml已经注解的AOP配置 spring中的jdbcTemplate已经Spring事务控制 官网 spring.io 当前使用spring5.0 概述 spring是分层的javase/ee应用full-stack轻量级开源框架，以IOC反转控制和AOP面向切面编程为核心，提供了展现spring mvc 和持久层spring jdbc一级业务层事务管理等众多的企
6套基于Bootstrap的后台模板-moltran
07-06
5. **后台管理系统**：这些模板特别针对商城后台管理系统进行了优化，可能包含订单管理、商品管理、用户管理、营销活动管理等功能模块的界面设计，便于后台操作人员进行数据监控和业务处理。 6. **自定义与扩展**：...
【Vue】实战项目：电商后台管理系统（Element-UI）（一）前后端搭建 - 登录界面 - 主页界面
YK菌的博客
03-11 1万+
文章目录0. 项目介绍电商管理系统（Element-UI）前端技术栈后端技术栈1. 配置前端项目① 安装 Vue 脚手架② 通过 Vue 脚手架创建项目③ 配置 Vue 路由④ 配置 Element-UI 组件库⑤ 配置 axios 库⑥ 初始化 git 远程仓库⑦ 将本地项目托管到 Github 或 码云 中2. 配置后端接口① 安装 MySQL 数据库② 安装 Node.js 环境③ 配置项目相关信息④ 启动项目⑤ 使用 Postman 测试后台项目接口是否正常3. 登录/退出功能3.1 登录业务流程3
安卓市场框架搭建--3
07-23
这需要后台数据分析和算法支持，但在前端实现时，我们通常需要一个列表视图展示推荐内容，同时可能需要加载网络数据，这就涉及到网络请求库的使用，如Retrofit、OkHttp等，以及JSON解析库如Gson或Jackson，将服务器...
Vue后台管理系统练习-1首页侧栏搭建
Yuki_Aruki的博客
05-03 1682
这里利用element-ui的container布局，在官网->组件->base里可以找到相关组件的使用方法，以及布局模板，也可以根据自己的需求进行布局 使用前先在main.js中引入需要使用的组件： import { Container, Main, Header, Aside } from 'element-ui'; Vue.use(Container, Main, Header, Aside) 引用后可以直接在Home.vue搭建基本布局，此处使用官网的布局： <el-contai
使用bootstrap搭建后台管理系统页面《二》
空空说技术的博客
03-24 1万+
1.使用bootstrap搭建后台管理系统页面《二》 这次不需要另外写css。直接完全引用bootstrap下的样式。 完成以后的效果： 源代码： &amp;lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=utf-8&quot; pageEncoding=&quot;utf-8&quot;%&amp;gt; &am
easyui data-options的使用
xwnxwn的专栏
07-18 7061
data-options是jQuery Easyui 最近两个版本才加上的一个特殊属性。通过这个属性，我们可以对easyui组件的实例化可以完全写入到html中，例如： 1 <div class="easyui-dialog" style="width:400px;height:200px" 2     d
京淘项目-04
qq_36703564的博客
08-02 226
1.关于项目打包/发布问题说明 1.1 利用maven工具项目打包 说明: 父级JT 其中包含了2个子级项目 jt-manager 依赖于jt-common.所以项目打包是有顺序的. 1.2 maven-install 1.项目打包 2.打包效果 target目录中: 1.3 SpringBoot项目发布 说明: springBoot项目中,内置了tomcat服务器. 所以发布项目时,只需要通过java命令让程序执行即可. JAVA命令: java -jar xxxxx.jar/war 关闭tomc
cgb2007-京淘day05
qq_16804847的博客
11-03 7157
1.展现商品列表信息 2.实现商品分类信息回显 3.展现商品的树形结构 4.实现商品新增操作
(精编版)SSH网上商城项目讲解+源码
bangche3676的博客
04-10 920
SSH网上商城（ 源 码 密码：fnox） 1.1前台需求分析: 1.1.1用户模块: 注册: 1.前台JS校验: 2.使用AJAX完成对用户名异步校验: 3.后台Struts2校验: 4.验证码: 5.发送激活邮件: 6.将用户信息存入到数据库: 激活: 1.点击链接完成激活: * 根据激活码,查询数据库中是否有该用户: * 如果有:激活.(将...
【笔记4-商品模块】从0开始 独立完成企业级Java电商网站开发(服务端)
Hello World
02-11 1099
分类管理模块 数据表结构设计 分类表 CREATE TABLE、mmall_ category' ( 'id' int(11) NOT NULL AUTO_ INCREMENT COMMENT ' 类别Id'， 'parent_ id' int(11) DEFAULT NULL COMMENT '父类 别id当id=0时说明是根节点,一级类别' , 'name' varchar(50) DEF...
Spreadsheet与FineReport数据连接对比
明月说数据
09-11 257
什么是数据连接？相信大多数没有使用过BI工具的小伙伴看到这篇文章标题时都会发出这样的疑问。我们要进行制作报表或者数据分析的前提条件都是要有数据，而实际用户系统最常见的就是将数据保存在数据库中，并且在不断的更新，数据连接就是创建BI工具与业务数据库之间的链接，使用数据库数据来制作报表，并且报表内容会随着数据库的更新而更新。 而目前主流的一些数据来源大概可以分为下图几大模块，关系数据库（RDBMS）、多维数据库（OLAP)、大数据库（BIGDATA）、本地文件、非关系型数据库（NOSQL）等，所以是否支持这些
easyUI
didui0897的博客
09-18 166
获取所有树叶子节点 注册添加事件 if ($(node).tree('isLeaf', node.target)) 是否叶子节点 //获取所有树叶子节点 注册添加事件 if ($('#menu').tree('isLeaf', node.target)) 是否叶子节点 $(function(){ 　　$('#menu').tree({ 　　　　onClick: ...
电商后台管理系统——商品管理
weixin_41274200的博客
07-25 8670
电商后台管理系统——商品管理 商品管理模块分为商品分类，分类参数，商品列表三个小模块，商品分类模块实现展示商品分类数据，添加分类功能，编辑删除分类功能；分类参数模块实现根据商品分类展示该分类的静态属性和动态参数，添加动态参数和静态属性功能，并实现删除修改每项属性以及每项属性下的tag内容功能；商品列表模块实现展示商品列表信息以及修改删除商品信息，搜索商品，添加商品功能。 一、商品分类 商品分类实现图 商品分类流程图 创建cate商品组件并设置路由规则——添加cate组件基本布局——请求商品分类数据保存
像淘宝、京东这样的大型电商网站服务器构架完全部署方案
weixin_30328063的博客
01-21 841
任何一个大型网站都是经历用户积累然后成长，从一台服务器到多台服务器才能构架支撑网站现有数据、用户、页面请求等。大型网站(如淘宝、京东等)的系统架构并不是开始设计就具备完整的高性能、高可用、安全等特性，它总是随着用户量的增加，业务功能的扩展逐渐演变完善的，在这个过程中，开发模式、技术架构、设计思想也发生了很大的变化，就连技术人员也从几个人发展到一个部门甚至一条产品线。所以成熟的系统架构是随业务扩展而...
vue3搭建后台管理系统
最新发布
07-28
每个页面组件对应着后台管理系统的不同功能页面，比如用户管理、商品管理等。 5. 设置状态管理：使用Vue 3的新特性——Composition API和Vuex来管理应用程序的状态。可以使用命令`npm install vuex@next`来安装Vuex...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值