关于java:京淘项目day04

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 您好 Springboot</title>

<!-- 1. 导入函数类库 -->
<script src="../js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    
    // 让 JS 页面加载实现, 之后执行 JS
    $(function(){
        
        /* 
            
            需要: 利用 ajax 形式动静获取 user 数据信息
            申请网址:  /findAjax
            知识点:  
                返回值类型: 能够依据数据主动匹配类型, 所以能够不写.
                1. $.get(url 地址, 传递的参数, 回调函数, 返回值类型)
                2. $.post(.....)
                3. $.getJSON(.....)
         */
        $.get("/findAjax2",function(result){
            //1. 能够应用 js 中的 for 循环
            /* for(let i=0; i<result.length;i++){ } */
            
            /* for(let index in result){console.log(index);
            } */
        
            for(let user of result){
                let id = user.id;
                let name = user.name;
                let age = user.age;
                let sex = user.sex;
                let tr  = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
                $("#tab1").append(tr);
            }
        })
        
        /* 
            原生 ajax 写法   $.ajax 变形 jQuery 的编程特点: 函数式编程
            需要: 传递 Id=100,name= 喵
            参数写法 1:data : {"id":100,"name":"喵"}
            参数写法 2:data: "id=100&name= 喵",
        */
        $.ajax({
            url : "/findAjax",
            type : "get",            //method: "post"
            //data : {"id":100,"name":"喵"}
            data: "id=100&name= 喵",
            success: function(result){for(let user of result){
                    let id = user.id;
                    let name = user.name;
                    let age = user.age;
                    let sex = user.sex;
                    let tr  = "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
                    $("#tab1").append(tr);
                }
            },
            error: function(result){alert("申请失败, 请分割管理员!!!")
            },
            cache: false,            // 默认值 true
            async: false            // 默认值 true 异步操作  false 同步操作
        });
    })
</script>


</head>
<body>
    <table id="tab1"  border="1px" width="65%" align="center">
        <tr>
            <td colspan="6" align="center"><h3> 学生信息 </h3></td>
        </tr>
        <tr>
            <th> 编号 </th>
            <th> 姓名 </th>
            <th> 年龄 </th>
            <th> 性别 </th>
        </tr>
    </table>
</body>
</html>

1. 分布式计算
    阐明: 一项工作由多个服务器共同完成的.
    例子: 假如一项工作独自实现须要 10 天, 如果有 10 集体同时执行则一天实现. 大数据处理技术
2. 分布式系统
    阐明: 将我的项目依照特定的功能模块及层级进行拆分. 从而升高整个零碎架构的耦合性问题.

总结: 传统我的项目将所有的模块都写到了一起, 如果其中一个模块呈现了问题, 则可能导致所有的服务不可用, 用户的体验较差, 并且架构设计耦合性高.

外围: 无论未来怎么拆分, 都是同一个零碎,口诀: 对外对立, 对内互相独立

1.2.3.1 依照模块拆分

因为单体架构中耦合性太高, 所以采纳了分布式思维, 将我的项目依照模块进行拆分, 使得各个模块之间相互不影响, 进步了整体的扩展性

1.2.3.2 依照层级拆分

阐明: 因为某些我的项目性能实现起来比较复杂, 须要多人协同单干, 则须要将我的项目依照层级再次拆分.

1. 分布式系统 jar 包文件如何对立治理?
2. 分布式系统中工具 API 如何对立治理?

打包形式:pom 示意该我的项目是一个聚合工程里边蕴含了很多小的我的项目, 并且该我的项目能够对立治理公共的 jar 包文件.

打包形式: pom 示意: 该我的项目是一个聚合工程, 里边蕴含了很多的小我的项目, 并且该我的项目能够对立治理公共的 jar 包文件.

<?xml version="1.0" encoding="UTF-8"?>
<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.jt</groupId>
    <artifactId>jt2007</artifactId>
    <version>1.0-SNAPSHOT</version>
    <!--1. 设定打包形式 为聚合工程 -->
    <packaging>pom</packaging>

    <!--2. 对立治理 jar 包 -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.4.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <java.version>1.8</java.version>
        <skipTests>true</skipTests>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </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>

        <!--spring 整合 mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.2.0</version>
        </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>

        <!-- 增加 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>-->

        <!-- 引入 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>
    </dependencies>

    <!--
        注意事项: 聚合工程自身不须要公布, 所以不要增加 build 标签
    -->

</project>

打包类型:jar

打包形式:war 留神 IDEA 的工作目录的配置

<?xml version="1.0" encoding="UTF-8"?>
<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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <artifactId>jt-manage</artifactId>
    <!--1.web 我的项目打成 war 包 -->
    <packaging>war</packaging>

    <!--2. 继承父级我的项目 -->
    <parent>
        <artifactId>jt2007</artifactId>
        <groupId>com.jt</groupId>
        <version>1.0-SNAPSHOT</version>
    </parent>

    <!--3. 依赖工具 API-->
    <dependencies>
        <dependency>
            <groupId>com.jt</groupId>
            <artifactId>jt-common</artifactId>
            <version>1.0-SNAPSHOT</version>
        </dependency>
    </dependencies>

    <!--4. 增加 maven 插件 -->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>


</project>

阐明: 将课前材料中 jt-manage 中的 src 文件进行导入

阐明:SpringBoot 我的项目中如果用户采纳缺省值拜访时, 则 SpringBoot 会采纳 API 进行页面跳转. 如果应用模板工具 API 则会动静拼接视图解析器的前缀和后缀

eg:
    前缀: /WEB-INF/views
    后缀:.jsp
    默认零碎欢送页面的全门路: /WEB-INF/views/index.jsp

<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:'north',title:'North Title',split:true" style="height:100px;"></div>
      <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div>
      <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>
      <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div>
      <div data-options="region:'center',title:'center title'"style="padding:5px;background:#eee;"></div>
</body>

<ul class="easyui-tree">
      
        <li>
            <span> 商品治理 </span>
            <ul>
                <li> 商品查问 </li>
                <li> 商品新增 </li>
                <li>
                    <span> 今日价格 </span>
                    <ul>
                        <li> 猪肉: 10 块 / 斤 </li>
                        <li> 牛肉: 30 块 / 斤 </li>
                        <li> 羊肉: 24 块 / 斤 </li>
                    </ul>
                </li>
            </ul>
        </li>
      </ul>

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.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class IndexController {/*@RequestMapping("/index")
    public String index(){return "index";}*/

    /**
     * 需要: 实现通用页面跳转
     *  url: /page/item-add    页面:item-add.jsp
     *  url: /page/item-list   页面:item-list.jsp
     * 论断: url 中的地址就是跳转的页面信息.
     *
     * restFul 格调实现 1:
     *     作用: 能够动静的接管 url 中的参数
     *     语法:
     *          1.url 中的地址如果是参数, 则须要应用 / 宰割
     *          2.controller 办法接管参数时, 须要应用 {} 号形式获取
     *          3. 如果须要获取参数信息, 则应用特定的注解标识
     *
     * restFul 格调实现 2: 须要指定拜访的申请类型, 并且依据特定的类型执行业务
     *      申请类型:
     *          1.get    执行查问操作
     *          2.post   执行入库操作
     *          3.put    执行更新操作
     *          4.delete 执行删除操作
     */
   //@RequestMapping(value = "/page/{moduleName}",method = RequestMethod.GET)
    @GetMapping("/page/{moduleName}")
    public String module(@PathVariable String moduleName){return moduleName;}
}

外围:JS 中须要什么数据, 则后端程序员就封装什么数据!!

1.POJO 与数据映射的实体类对象
2.VO: 数据展示层的对象 次要与页面 JS 进行数据交互的媒介

<div>
            定义表格，并且通过 url 拜访 json 数据，fitColumns:true 示意主动适应，singleSelect:true 示意选中单个
            <table class="easyui-datagrid" style="width:500px;height:300px"
                   data-options="url:'datagrid_data.json',method:'get',
                   fitColumns:true,singleSelect:false,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>

{
    "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"}
    ]
}

答:JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格局。

对象（object）是一个 无序的“‘名称 / 值’对”汇合。一个对象以“{”（左括号）开始，“}”（右括号）完结。每个“名称”后跟一个“:”（冒号）；“‘名称 / 值’对”之间应用“,”（逗号）分隔。

eg: {“id”:”100″,”name”:”tomcat”}

eg:[“1″,” 玩 ”,” 学习 ”]

eg:["郭桂强","杨宏杰",[1,2,3,4,5],{"id":100,"name":"罗彭","hobby":["吃货色","打游戏","睡觉"]}]

关于java:京淘项目day04

1. 京淘后盾管理系统

1.1 Ajax 总结

1.2 分布式思维

1.2.1 分布式分类

1.2.2 传统我的项目存在的问题

1.2.3 分布式系统拆分

1.2.3.1 依照模块拆分

1.2.3.2 依照层级拆分

1.2.4 分布式系统引发的问题

2 京淘我的项目后端搭建

2.1 创立父级工程 jt

2.1.1 新建我的项目

2.1.2 编辑 POM.xml 文件

2.2 编辑工具 API jt-common

2.2.1 创立我的项目

2.2.2 查看是否有父子级关系

2.2.3 导入课前材料

2.3 创立 jt-manage 我的项目

2.3.1 创立我的项目

2.3.2 编辑 POM.xml 文件

2.3.3 导入动态资源文件

2.3.4 批改启动项

2.4 对于 SpringBoot 默认页面拜访阐明

3. 京淘我的项目后盾页面构造阐明

3.1 京淘后端页面布局阐明

3.2 树形构造

4. 京淘后盾实现(1)

4.1 通用页面跳转实现

4.2 UI 框架 - 表格数据展示阐明

4.2.0 常见缩写介绍

4.2.1 EasyUI 表格定义

4.2.2 表格数据返回格局阐明

4.2.3 依据返回值定义 VO 对象

4.3 JSON 构造阐明

4.3.1 什么是 JSON

4.3.2 JSON 格局之对象格局

4.3.2 JSON 格局之数组格局

4.3.3 JSON 格局之嵌套格局

1. 京淘后盾管理系统

1.1 Ajax 总结

1.2 分布式思维

1.2.1 分布式分类

1.2.2 传统我的项目存在的问题

1.2.3 分布式系统拆分

1.2.3.1 依照模块拆分

1.2.3.2 依照层级拆分

1.2.4 分布式系统引发的问题

2 京淘我的项目后端搭建

2.1 创立父级工程 jt

2.1.1 新建我的项目

2.1.2 编辑 POM.xml 文件

2.2 编辑工具 API jt-common

2.2.1 创立我的项目

2.2.2 查看是否有父子级关系

2.2.3 导入课前材料

2.3 创立 jt-manage 我的项目

2.3.1 创立我的项目

2.3.2 编辑 POM.xml 文件

2.3.3 导入动态资源文件

2.3.4 批改启动项

2.4 对于 SpringBoot 默认页面拜访阐明

3. 京淘我的项目后盾页面构造阐明

3.1 京淘后端页面布局阐明

3.2 树形构造

4. 京淘后盾实现(1)

4.1 通用页面跳转实现

4.2 UI 框架 - 表格数据展示阐明

4.2.0 常见缩写介绍

4.2.1 EasyUI 表格定义

4.2.2 表格数据返回格局阐明

4.2.3 依据返回值 定义 VO 对象

4.3 JSON 构造阐明

4.3.1 什么是 JSON

4.3.2 JSON 格局之对象格局

4.3.2 JSON 格局之数组格局

4.3.3 JSON 格局之嵌套格局

4.2.3 依据返回值定义 VO 对象