共计 11945 个字符，预计需要花费 30 分钟才能阅读完成。
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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 您好 Springboot</title>
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
/**
for 语法 1:
for(let i=0;i<xxx.length;i++){.....}
for 语法 2: index 代表下标
for(let index in data){console.log("测试 for 循环")
let user = data[index];
alert(user.name);
}
for 语法 3: user 以后循环遍历的对象
for(let user of data){console.log("for 循环测试:"+user.name);
}
**/
$(function(){
$.ajax({
type : "get",
url : "/findAjax",
//dataType : "text/json/html/xml", // 返回值类型
async : false, // 敞开异步操作, 改为同步的申请
success : function(data){
let trs = "";
for(let user of data){
let id = user.id;
let name = user.name;
let age = user.age;
let sex = user.sex;
trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
}
$("#tab1").append(trs);
},
error : function(){alert("申请异样!!!!");
}
})
//1. $.get(url,data, 回调函数)
//findAjax 查问后端 userList 汇合信息.
/* $.get("/findAjax",function(data){$(data).foreach(function(index,user){console.log(user);
})
let trs = "";
for(let user of data){
let id = user.id;
let name = user.name;
let age = user.age;
let sex = user.sex;
trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>"
}
$("#tab1").append(trs);
}); */
});
</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>`
- 京淘我的项目架构设计
============
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 文件
`<?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>jt</artifactId>
<version>1.0-SNAPSHOT</version>
<!-- 定义父级工程打包类型 -->
<packaging>pom</packaging>
<!--1. 引入 springBoot 父级我的项目 -->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<!--2. 引入属性的配置 -->
<properties>
<java.version>1.8</java.version>
<!-- 跳过测试类打包 -->
<skipTests>true</skipTests>
</properties>
<!--3. 在父级我的项目中增加 jar 包文件 -->
<dependencies>
<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>
<!-- 引入插件 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>
<!--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>
<!-- 反对热部署 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</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>`
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 文件
留神增加继承 / 依赖 / 插件
`<?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>
<!-- 指定打包形式 -->
<packaging>war</packaging>
<!-- 指定父级我的项目 -->
<parent>
<artifactId>jt</artifactId>
<groupId>com.jt</groupId>
<version>1.0-SNAPSHOT</version>
</parent>
<!--2. 增加依赖信息 -->
<dependencies>
<dependency>
<groupId>com.jt</groupId>
<artifactId>jt-common</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
</dependencies>
<!--3. 增加插件 -->
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>`
2.6.3 导入 src 文件
阐明: 将课前材料中的 jt-manage 中的 src 文件导入即可
2.6.4 批改 YML 配置文件
2.6.5 启动项配置
2.6.6 拜访测试
2.7 我的项目默认页面跳转阐明
步骤:
- http://localhost:8091/
- 默认机制 http://localhost:8091/index 申请… 被 springBoot 程序优化过了.
- 利用默认工具 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 导入函数类库
`<!-- 引入 jquery 的 js，EasyUI 的执行须要依赖于 jQuery -->
<script type="text/javascript"
src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<!--easyUI 的 js 主文件 -->
<script type="text/javascript"
src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<!-- 国际化的 js 文件 -->
<script type="text/javascript"
src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
<!-- 引入 easyUI 的款式 -->
<link rel="stylesheet" type="text/css"
href="/js/jquery-easyui-1.4.1/themes/icon.css" />
<link rel="stylesheet" type="text/css"
href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />`
3.2.2 编辑页面代码
`<body>
<!--easyUI 入门案例 只有引入特定的款式就能够有对应的性能 -->
<div class="easyui-draggable"> 拖动 DIV</div>
<div class="easyui-draggable"> 测试 div</div>
</body>`
3.3 对于后盾页面阐明
3.3.1 对于页面布局阐明
`<body class="easyui-layout">
<-- data-options 是 UI 框架的特定的属性 -->
<div data-options="region:'west',title:' 菜单 ',split:true" style="width:25%;"></div>
<div data-options="region:'center',title:' 首页 '"></div>
</body>`
3.3.2 树形构造展示
`<ul class="easyui-tree">
<li>
<span> 商品治理 </span>
<ul>
<li> 商品查问 </li>
<li> 商品新增 </li>
<li> 商品编辑 </li>
<li>
<span> 三级题目 </span>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
</li>
</ul>
</li>
</ul>`
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 = '<iframe scrolling="auto"frameborder="0"src="'+url2+'"></iframe>';
$('#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 标识
`<ul>
<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>`
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 页面标识
`<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>`
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 串如何封装!!!
<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>
<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>正文完