1.京淘后盾管理系统
1.1 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><!-- 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.2分布式思维
1.2.1 分布式分类
1.分布式计算 阐明:一项工作由多个服务器共同完成的. 例子:假如一项工作独自实现须要10天,如果有10集体同时执行则一天实现. 大数据处理技术2.分布式系统 阐明:将我的项目依照特定的功能模块及层级进行拆分.从而升高整个零碎架构的耦合性问题.1.2.2 传统我的项目存在的问题
总结:传统我的项目将所有的模块都写到了一起,如果其中一个模块呈现了问题,则可能导致所有的服务不可用,用户的体验较差,并且架构设计耦合性高.
1.2.3 分布式系统拆分
外围:无论未来怎么拆分,都是同一个零碎,口诀:对外对立,对内互相独立
1.2.3.1 依照模块拆分
因为单体架构中耦合性太高,所以采纳了分布式思维,将我的项目依照模块进行拆分,使得各个模块之间相互不影响,进步了整体的扩展性
1.2.3.2 依照层级拆分
阐明:因为某些我的项目性能实现起来比较复杂,须要多人协同单干,则须要将我的项目依照层级再次拆分.
1.2.4 分布式系统引发的问题
1.分布式系统jar包文件如何对立治理?
2.分布式系统中工具API如何对立治理?
2 京淘我的项目后端搭建
2.1 创立父级工程jt
打包形式:pom 示意该我的项目是一个聚合工程里边蕴含了很多小的我的项目,并且该我的项目能够对立治理公共的jar包文件.
2.1.1 新建我的项目
打包形式: pom 示意:该我的项目是一个聚合工程,里边蕴含了很多的小我的项目,并且该我的项目能够对立治理公共的jar包文件.
2.1.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>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>2.2 编辑工具API jt-common
打包类型:jar
2.2.1 创立我的项目
2.2.2查看是否有父子级关系
2.2.3 导入课前材料
2.3 创立jt-manage我的项目
打包形式:war 留神IDEA的工作目录的配置
2.3.1 创立我的项目
2.3.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> <!--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>2.3.3 导入动态资源文件
阐明:将课前材料中jt-manage中的src文件进行导入
2.3.4 批改启动项
2.4 对于SpringBoot默认页面拜访阐明
阐明:SpringBoot我的项目中如果用户采纳缺省值拜访时,则SpringBoot会采纳API进行页面跳转.如果应用模板工具API则会动静拼接视图解析器的前缀和后缀
eg: 前缀: /WEB-INF/views 后缀:.jsp 默认零碎欢送页面的全门路: /WEB-INF/views/index.jsp3. 京淘我的项目后盾页面构造阐明
3.1 京淘后端页面布局阐明
<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>3.2 树形构造
<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>4. 京淘后盾实现(1)
4.1 通用页面跳转实现
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;@Controllerpublic 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; }}4.2 UI框架-表格数据展示阐明
外围:JS中须要什么数据,则后端程序员就封装什么数据!!
4.2.0 常见缩写介绍
1.POJO与数据映射的实体类对象2.VO:数据展示层的对象 次要与页面JS进行数据交互的媒介4.2.1 EasyUI表格定义
<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>4.2.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"} ]}4.2.3 依据返回值 定义VO对象
4.3 JSON构造阐明
4.3.1 什么是JSON
答:JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格局。
4.3.2 JSON格局之对象格局
对象（object） 是一个无序的“‘名称/值’对”汇合。一个对象以“{”（左括号）开始，“}”（右括号）完结。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间应用“,”（逗号）分隔。
eg: {"id":"100","name":"tomcat"}
4.3.2 JSON格局之数组格局
eg:["1","玩","学习"]
4.3.3 JSON格局之嵌套格局
eg:["郭桂强","杨宏杰",[1,2,3,4,5],{"id":100,"name":"罗彭","hobby":["吃货色","打游戏","睡觉"]}]