京淘 day04

1.Ajax加强

1.1 Ajax特点

使用ajax特点为: 局部刷新,异步响应.
同步缺点: 如果进行了同步的请求,那么用户不可以做任何的操作,只能等待任务的完成. 用户的友好性差.

1.2 关于Ajax调用说明

`<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>



您好Springboot





    

学生信息

编号 姓名 年龄 性别
`
  1. 京淘项目架构设计

============

2.1 传统项目架构设计问题

说明:由于单体项目将所有的模块都写到了一起,将来如果其中一个模块出现了问题,将导致整个项目不能正常的运行.

2.2 分布式架构设计

2.2.1 分布式介绍

由于传统项目导致各个模块之间的耦合性较高.所以需要采用分布式的思想将项目进行拆分.
核心理念: 化整为零 将项目按照某些特定的规则进行拆分.

2.2.2 按照功能模块拆分

说明:由于单体项目的耦合性高,所以需要按照功能模块进行拆分.降低系统架构的耦合性

2.2.3 按照层级拆分

在按照模块拆分的基础之上,将项目按照层级拆分,将粒度控制的更加的具体.分工更加的明确,有效的提高软件的开发效率.

2.3 分布式思想带来的问题

2.3.1 分布式思想jar包如何维护?

2.3.2 分布式思想中工具api如何管理?

2.4 创建父级工程

2.4.1 创建项目

2.4.2 编辑 pom.xml文件

`

    4.0.0
    com.jt
    jt
    1.0-SNAPSHOT
    
    pom

    
    
        org.springframework.boot
        spring-boot-starter-parent
        2.3.4.RELEASE
         
    

    
    
        1.8
        
        true
    

    
    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
            
                
                    org.junit.vintage
                    junit-vintage-engine
                
            
        

        
        
            org.projectlombok
            lombok
        

        
        
            mysql
            mysql-connector-java
            runtime
        

        
        
            org.springframework.boot
            spring-boot-starter-jdbc
        

        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.2.0
        

        
        
        
            javax.servlet
            javax.servlet-api
        

        
        
            javax.servlet
            jstl
        

        
        
            org.apache.tomcat.embed
            tomcat-embed-jasper
        

        
        
            org.springframework.boot
            spring-boot-devtools
        

        
        
            org.apache.httpcomponents
            httpclient
        

        
        

        
       

        
        
            org.springframework.boot
            spring-boot-starter-aop
        

        
        
            redis.clients
            jedis
        
        
            org.springframework.data
            spring-data-redis
        
    

    

` 



2.5 编辑工具API项目 jt-common

2.5.1 创建项目

2.5.2 导入src文件

说明:将课前资料中的jt-common中的src导入项目即可

2.6 定义jt-manage项目

2.6.1 创建项目

2.6.2 编辑pom.xml文件

注意添加继承/依赖/插件

`

    4.0.0
    jt-manage
    
    war

    
    
        jt
        com.jt
        1.0-SNAPSHOT
    

    
    
        
            com.jt
            jt-common
            1.0-SNAPSHOT
        
    

    
    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

` 

2.6.3 导入src文件

说明:将课前资料中的jt-manage中的src文件导入即可

2.6.4 修改YML配置文件

2.6.5 启动项配置

2.6.6 访问测试

2.7 项目默认页面跳转说明

步骤:

  1. http://localhost:8091/
  2. 默认机制http://localhost:8091/index请求… 被springBoot程序优化过了.
  3. 利用默认工具API

WelcomePageHandlerMapping : Adding welcome page template: index
动态的发起的/index请求,之后配合视图解析器形成动态的页面路径:
/WEB-INF/views/index.jsp

注意事项:
当使用SpringBoot程序时,可以通过缺省值访问,但是系统的首页的名称必须为index.xxxx

3 关于京淘页面学习

3.1 EasyUI框架

easyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。

easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能。

使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面。

easyui是个完美支持HTML5网页的完整框架。

easyui节省您网页开发的时间和规模。

easyui很简单但功能强大的。

3.2 EasyUI入门案例

3.2.1 导入函数类库

`







` 



3.2.2 编辑页面代码

`
        
        
拖动DIV
测试div
`

3.3 关于后台页面说明

3.3.1 关于页面布局说明

`

   <-- data-options 是UI框架的特定的属性 -->
   
`

3.3.2 树形结构展现

`
  • 商品管理
    • 商品查询
    • 商品新增
    • 商品编辑
    • 三级标题
      • 11
      • 22
      • 33
`

3.3.3 选项卡技术

`function addTab(title, url){  
    if ($('#tt').tabs('exists', title)){
        $('#tt').tabs('select', title);
    } else {
        //iframe  画中画的效果
        var url2 = "https://map.baidu.com/search/%E5%85%A8%E5%9B%BD/@12959219.601961922,4825334.624608941,5z?querytype=s&wd=%E5%85%A8%E5%9B%BD&c=1&provider=pc-aladin&pn=0&device_ratio=1&da_src=shareurl";
        var content = '';
        $('#tt').tabs('add',{  
            title:title,  
            content:content,
            closable:true  
        });  
    }
}` 


4 京淘后台商品业务实现

4.1 表设计

`create table tb_item
(
   id                   bigint(10) not null auto_increment comment '商品ID,也是商品编号',
   title                varchar(100),
   sell_point           varchar(150),
   price                bigint(20) comment '单位为:分',
   num                  int(10),
   barcode              varchar(30),
   image                varchar(500) comment '最多5张图片',
   cid                  bigint(10),
   status               int(1) default 1 comment '默认值为1,可选值:1正常,2下架,3删除',
   created              datetime,
   updated              datetime comment '列表排序时按修改时间排序,所以在新增时需要设置此值。',
   primary key (id)
);` 


4.2 编辑POJO

`@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;            //商品价格 0.98 * 100 = 98 /100 = 0.98
    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(",");
    }
}` 


4.3 通用页面跳转实现

4.3.1 页面url标识

 `
  • 新增商品
  • 查询商品
  • 规格参数
`

4.3.2 编辑IndexController

`package com.jt.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

@Controller
public class IndexController {

    /*@RequestMapping("/index")
    public String index(){

        return "index";
    }*/

    /**
     * 业务需求:
     *         实现用户页面的跳转
     *     url:  http://localhost:8091/page/item-add    页面:item-add
     *           http://localhost:8091/page/item-list     页面:item-list
     *
     *     能否利用一个方法实现通用页面的跳转功能!!!!
     *  实现的思路: 如果能够动态的获取url中的参数就可以实现页面的跳转. restFul风格....
     *  restFul语法:
     *      1. 参数必须使用"/"分隔
     *      2. 参数必须使用{}形式包裹
     *      3. 参数接收时需要使用 @PathVariable 获取
     *
     *  restFul风格用法2:
     *      利用不同的请求的类型,定义不同的业务功能!!
     *      type="GET",       查询业务
     *      type="POST",      新增操作
     *      type="PUT",          更新操作
     *      type="DELETE"     删除操作
     * @return
     */

    //@RequestMapping(value = "/page/{moduleName}",method = RequestMethod.GET)
    @GetMapping("/page/{moduleName}")
    /*@PutMapping
    @DeleteMapping
    @PostMapping*/
    public String module(@PathVariable String moduleName) {
        
        return moduleName;
    }
}` 


4.4 EasyUI中表格数据展现说明

4.4.1 页面标识

`
Code Name Price
`

4.4.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"}
    ]
}` 


作业:

要求:动态的接收用户的url地址,之后查询item表的数据, 利用分页的方式实现
url: http://localhost:8091/item/query?page=1&rows=20
难点: JSON串如何封装!!!

商品ID 商品标题 叶子类目 卖点 价格 库存数量 条形码 状态 创建日期 更新日期

你可能感兴趣的:(springboot,spring)