京淘專案筆記04 -- 2020.11.02
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
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.jsp
3. 京淘後臺頁面結構說明
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;
@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;
}
}
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) 是一種輕量級的資料交換格式。
4.3.2 JSON格式之物件格式
物件(object) 是一個無序的“‘名稱/值’對”集合。一個物件以**“{”(左括號)開始,“}”**(右括號)結束。每個“名稱”後跟一個“:”(冒號);“‘名稱/值’ 對”之間使用“,”(逗號)分隔。
eg: {“id”:“100”,“name”:“tomcat貓”}
4.3.3 JSON格式之陣列格式
eg: [“1”,“玩”,“學習”]
4.3.4 JSON格式之巢狀格式
例子:
[“敲程式碼”,“打遊戲”,[1,2,3,4,5],{“id”:100,“name”:“tomcat貓”,“hobby”:[“吃東西”,“打豆豆”,“玩聯盟”]}]
相關文章
- 京淘專案總結day02
- jeesite專案筆記筆記
- laravel專案筆記Laravel筆記
- BI專案記筆記索引筆記索引
- 筆記linux_04筆記Linux
- 專案規範筆記筆記
- django專案筆記1Django筆記
- TaintDroid專案筆記AI筆記
- 《專案管理》-筆記1專案管理筆記
- 《專案管理》-筆記2專案管理筆記
- 【PB案例學習筆記】-04檔案瀏覽器筆記瀏覽器
- 黔村淘專案開發計劃
- 打靶筆記-04-vulnhub-Jangow筆記Go
- [BI專案記]-文件版本管理筆記筆記
- 一個失敗專案的專案筆記(轉)筆記
- vue 基礎入門筆記 04Vue筆記
- 《構建之法》閱讀筆記04筆記
- 構建之法閱讀筆記04筆記
- Java基礎-學習筆記04Java筆記
- 小程式視訊專案筆記筆記
- 信管筆記 -- 專案管理過程筆記專案管理
- 信管筆記 -- 專案整體管理筆記
- 信管筆記 -- 專案範圍管理筆記
- 專案管理--PMBOK 讀書筆記(4)【專案整合管理】專案管理筆記
- 04-k8s專案部署K8S
- Redis核心技術筆記03-04Redis筆記
- [SQL] Datawhale 學習筆記 Task04SQL筆記
- 06構建之法閱讀筆記04筆記
- 04夢斷程式碼閱讀筆記筆記
- 專案管理學習筆記五:專案整體管理薦專案管理筆記
- 手淘雙十一521 效能優化專案揭祕優化
- idea ssm maven專案搭建筆記IdeaSSMMaven筆記
- 阿里雲OSS專案搭建筆記阿里筆記
- IDEA匯入專案筆記二Idea筆記
- minjun信管筆記 -- 專案管理過程筆記專案管理
- minjun信管筆記 -- 專案整體管理筆記
- minjun信管筆記 -- 專案範圍管理筆記
- easy雲盤專案開發筆記筆記