1. 生成訂單操作分析
先看下訂單頁面:
分析下訂單表需要那些字段
id 收貨人(receiverName) 收貨地址(receiverAddress) 收貨人電話(receiverPhone) 總計(totalPrice)
分析下表之間的關系
這里面涉及到三張表,分別是用戶表,訂單表,商品表.他們之間的關系為
用戶表和訂單表之間是一對多的關系
訂單表和商品表之間是多對多的關系
表的設計:
在訂單表中添加一個用戶id,表示用戶和訂單的關系
添加一張中間表,表示訂單和商品的關系
中間表的字段 訂單oid 商品pid 購買商品數量buynum 商品小計littleprice
創建表
用戶表
create table user(
id int primary key AUTO_INCREMENT,
username varchar(20),
password varchar(20)
);
訂單表(添加一個外鍵)
create table orders(
id varchar(50) primary key,
receivername varchar(20),
receiveraddress varchar(100),
receiverphone varchar(20),
totalprice double,
user_id int
);
中間表(訂單項表 orderitem)
create table orderitem(
oid varchar(50),
pid varchar(50),
buynum int,
littleprice double,
primary key(oid,pid)
);
生成訂單的過程,
先把收貨人信息及用戶id存入訂單表(receiver... 訂單id 用戶id 商品總價)
把購物車里的商品及數量放到訂單項表中(訂單id 商品id 購買數量 小計)
最后修改商品表中的數量
以上三個操作必須在一個事務控制范圍內
2. 生成訂單操作實現
保證用戶登錄
編寫javabean(訂單bean,訂單項bean)
訂單bean
private String id;
private String receiverName;
private String receiverAddress;
private String receiverPhone;
private Double totalPrice;
private User user;
private List<OrderItem> items;
訂單項實體bean
private Order order;
private Product product;
private Integer buyNum;
private Double littlePrice;
用戶實體:user
private Integer id;
private String username;
private String password;
訂單生成
保證用戶登錄
從cart.jsp點擊”結賬”按鈕開始
跳轉到order.jsp(取出購物車里面商品信息及用戶信息,還需自己錄入收貨信息)
點擊提交訂單,發送請求到createOrderSevlet(主要邏輯如下)
Order order=new Order();
try {
//封裝收貨人信息及訂單總價
BeanUtils.populate(order, request.getParameterMap());
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
//手動設置訂單id
order.setId(UUIDUtils.getId());
order.setUser((User)request.getSession().getAttribute("user"));
//設置商品集合
List<OrderItem> list=new ArrayList<OrderItem>();
Map<Product,Integer> cart=(Map<Product, Integer>) request.getSession().getAttribute("cart");
for (Product p : cart.keySet()) {
list.add(new OrderItem(order, p, cart.get(p), p.getPrice()*cart.get(p)));
}
order.setItems(list);
注意:事務然后調用orderservice添加訂單
public void addOrder(Order order) {
try {
DataSourceUtils.startTransaction();
//添加訂單
orderDao orderDao=new orderDao();
orderDao.addOrder(order);
//添加訂單項
OrderItemDao oiDao=new OrderItemDao();
oiDao.addOrderItem(order);
//修改商品表
ProductDao pDao=new ProductDao();
pDao.updateProductPnum(order);
} catch (SQLException e) {
e.printStackTrace();
try {
DataSourceUtils.rollback();
} catch (SQLException e1) {
e1.printStackTrace();
}
} finally{
try {
DataSourceUtils.commitAndRelease();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
添加訂單(orderDao)
public void addOrder(Order order) throws SQLException {
QueryRunner runner=new QueryRunner();
String sql="insert into orders values (?,?,?,?,?,?);";
runner.update(DataSourceUtils.getConnection(), sql, order.getId(),
order.getReceiverName(),order.getReceiverAddress(),
order.getReceiverPhone(),order.getTotalPrice(),
order.getUser().getId());
}
添加訂單項(orderItemDao)
public void addOrderItem(Order order) throws SQLException {
QueryRunner runner=new QueryRunner();
String sql="insert into orderitem values(?,?,?,?);";
Object[][] params=new Object[order.getItems().size()][4];
for (int i=0; i < order.getItems().size(); i++) {
OrderItem item=order.getItems().get(i);
params[i][0]=item.getOrder().getId();
params[i][1]=item.getProduct().getId();
params[i][2]=item.getBuyNum();
params[i][3]=item.getLittlePrice();
}
runner.batch(DataSourceUtils.getConnection(), sql, params);
}
修改商品數量(productDao)
public void updateProductPnum(Order order) throws SQLException {
//修改當前訂單里的所含商品的數量
QueryRunner runner=new QueryRunner();
String sql="update products set pnum=pnum - ? where id=?";
Object[][] params=new Object[order.getItems().size()][2];
for (int i=0; i < order.getItems().size(); i++) {
OrderItem item=order.getItems().get(i);
params[i][0]=item.getBuyNum();
params[i][1]=item.getProduct().getId();
}
runner.batch(DataSourceUtils.getConnection(), sql, params);
}
1. ajax介紹
AJAX即“Asynchronous Javascript And XML”(異步JavaScript和XML),是指一種創建交互式網頁應用的網頁開發技術。
AJAX 是一種用于創建快速動態網頁的技術。
通過在后臺與服務器進行少量數據交換,AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下,對網頁的某部分進行更新。傳統的網頁(不使用 AJAX)如果需要更新內容,必須重載整個網頁頁面。
ajax作用:
AJAX不是一種新的編程語言,而是一種用于創建更好更快以及交互性更強的Web應用程序的技術。
使用Javascript向服務器提出請求并處理響應而不阻塞用戶!核心對象XMLHTTPRequest。通過這個對象,您的 JavaScript 可在不重載頁面的情況與Web服務器交換數據。
AJAX 在瀏覽器與 Web 服務器之間使用異步數據傳輸(HTTP 請求),這樣就可使網頁從服務器請求少量的信息,而不是整個頁面。
AJAX 可使因特網應用程序更小、更快,更友好。
2. ajax入門案例
獲取XMLHttpRequest對象
對于不同的瀏覽器,獲取方式有區別(從文檔上粘過來)
function getXMLHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for all new browsers
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
設置回調函數(onreadystatechange)
xmlHttp.onreadystatechange=function(){};
目的是服務器端響應完成后,瀏覽器端可以知道,并完成后續工作。
open操作
xmlHttp.open(“GET”,”/day/ajax”);
設置訪問的資源路徑以及請求方式
send操作
xmlhttp.send(null);
發送請求
回調函數編寫
在第二步的回調函數內完成操作。
3. XMLHttpRequest之API詳解
Ajax 的核心是 JavaScript 對象 XmlHttpRequest。該對象在 Internet Explorer 5 中首次引入,它是一種支持異步請求的技術。簡而言之,XmlHttpRequest 使您可以使用 JavaScript 向服務器提出請求并處理響應,而不阻塞用戶。XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問,包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步地返回 Web 服務器的響應,并且能夠以文本或者一個 DOM 文檔的形式返回內容。
onreadystatechange屬性
當XMLHttpRequest對象的狀態改變時會調用的一個函數.
readyState屬性
對于XMLHttpRequest對象,它有一個屬性readyState,它有五個狀態
0創建XMLHttpRequest對象.
1當open時
2當send時
3響應頭已經返回,但響應正文沒有完成,也就是響應沒有完全完成.
4響應完成了
一般情況下,在回調的函數中,我們都是判斷
if(xmlhttp.readyState==4&&xmlhttp.status==200)
來接收服務器端響應的信息.
status屬性
由服務器返回的 HTTP 狀態代碼,如 200 表示成功,而 404 表示 "Not Found" 錯誤。當 readyState 小于 3 的時候讀取這一屬性會導致一個異常。
responseText屬性
目前為止為服務器接收到的響應體(不包括頭部),或者如果還沒有接收到數據的話,就是空字符串。
如果 readyState 小于 3,這個屬性就是一個空字符串。當 readyState 為 3,這個屬性返回目前已經接收的響應部分。如果 readyState 為 4,這個屬性保存了完整的響應體。
如果響應包含了為響應體指定字符編碼的頭部,就使用該編碼。否則,假定使用 Unicode UTF-8。
responseXML屬性
對請求的響應,解析為 XML 并作為 Document 對象返回。
open方法
初始化 HTTP 請求參數,例如 URL 和 HTTP 方法,但是并不發送請求。
xmlhttp.open(請求方式,url);
請求方式: POST GET
路徑:客戶端路徑 格式 /工程名/資源路徑
如果是GET方式,想要向服務器發送請求,并且攜帶請求參數,可以直接在url后面連接。
如果是POST方式,想要向服務器發送請求,并且攜帶請求參數,我們需要在send時傳遞參數
send方法
發送 HTTP 請求,使用傳遞給 open() 方法的參數,以及傳遞給該方法的可選請求體。
如果請求方式是post,并且要攜帶參數,可以通過send的參數來傳遞
setRequestHeader方法
向一個打開但未發送的請求設置或添加一個 HTTP 請求。
如果請求方式是POST,并且要攜帶參數,需要設置一個請求頭.
setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
中文亂碼問題
get請求需要在發送請求的時候對中文進行編碼,如下:
服務器端處理方式和之前request的處理亂碼方式一樣.
4. 案例-驗證用戶名是否重復
5. 案例-商品信息模糊查詢
a. 修改頁面(menu_search.jsp),在這個頁面的搜索欄添加ajax請求
給搜索框添加鍵盤彈起事件,發送ajax請求,將輸入的值出給后臺
b. 編寫后臺功能
接受ajax發送過來的值
查找數據庫(dao使用ColumnListHandler)
生成響應信息
c. 效果如下
前臺代碼
//模糊匹配
function searchName(d){
var xmlhttp;
if (window.XMLHttpRequest) {// code for all new browsers
xmlhttp=new XMLHttpRequest();
} else if (window.ActiveXObject) {// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
//回調函數
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var data=xmlhttp.responseText;
if(data!=null && data!=""){
var arr=data.split(/\s*,\s*/);
var cDiv=document.getElementById("content");
cDiv.innerHTML="";
for(var i=0;i<arr.length;i++){
cDiv.innerHTML+=("<div onmouseover='changeColor1(this)' onmouseout='changeColor2(this)' onclick='setName(this)'>"+arr[i]+"</div>");
}
cDiv.style.display="block";
}
}
}
//open
xmlhttp.open("GET", "${pageContext.request.contextPath}/findProductByName?name="+window.encodeURI(d.value));
//send
xmlhttp.send();
}
//放上去變色 為了展示效果好看 添加顏色
function changeColor1(d){
d.style.backgroundColor="#fff";
}
//離開之后恢復原色
function changeColor2(d){
d.style.backgroundColor="#999";
}
//將選中的值賦給文本框
function setName(d){
document.getElementById("name").value=d.innerHTML;
//設置完值之后將div隱藏
document.getElementById("content").style.display="none";
}
后臺代碼
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
//獲取參數
String name=request.getParameter("name");
name=new String(name.getBytes("iso8859-1"),"utf-8");
if(name==null || name.trim().length()==0){
return;
}
//調用service
ProductService service=new ProductService();
List<Object> names=null;
try {
names=service.findProductByName(name);
} catch (SQLException e) {
e.printStackTrace();
}
if(names!=null && names.size()>0){
String names_=names.toString();
response.getWriter().write(names_.substring(1,names_.length()-1));
}
}
6. json介紹與入門
json介紹
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基于JavaScript(Standard ECMA-262 3rd Edition - December 1999)的一個子集。 JSON采用完全獨立于語言的文本格式,但是也使用了類似于C語言家族的習慣(包括C, C++, C#, Java, JavaScript, Perl, Python等)。這些特性使JSON成為理想的數據交換語言。 易于人閱讀和編寫,同時也易于機器解析和生成(網絡傳輸速度)。
json格式
JSON結構有兩種結構
json簡單說就是javascript中的對象和數組,所以這兩種結構就是對象和數組兩種結構,通過這兩種結構可以表示各種復雜的結構
u 對象:對象在js中表示為“{}”括起來的內容,數據結構為 {key:value,key:value,...}的鍵值對的結構,在面向對象的語言中,key為對象的屬性,value為對應的屬性值,所以很容易理解,取值方法為 對象.key 獲取屬性值,這個屬性值的類型可以是 數字、字符串、數組、對象幾種。
u 數組:數組在js中是中括號“[]”括起來的內容,數據結構為 ["java","javascript","vb",...],取值方式和所有語言中一樣,使用索引獲取,字段值的類型可以是 數字、字符串、數組、對象幾種。
經過對象、數組2種結構就可以組合成復雜的數據結構了。
7. jsonlib插件介紹
jsonlib介紹
Json-lib 是一個 Java 類庫(官網:http://json-lib.sourceforge.net/)可以實現如下功能:
?轉換 javabeans, maps, collections, java arrays 和 XML 成為 json 格式數據
?轉換 json 格式數據成為 javabeans 對象
Json-lib 需要的 jar 包
?commons-beanutils-1.8.3.jar
?commons-collections-3.2.1.jar
?commons-lang-2.6.jar
?commons-logging-1.1.1.jar
?ezmorph-1.0.6.jar
?json-lib-2.4-jdk15.jar
jsonlib常用api
數組,Collection集合轉換成json數據使用 JsonArray.fromObject(對象);
Map,javaBean轉換成json數據使用 JsonObject.fromObject(對象);
如果不想讓javaBean中的數據出現在json中.
JsonConfig jsonConfig=new JsonConfig();
jsonConfig.setExcludes(new String[]{"price"});
JSONObject jsonObject=JSONObject.fromObject(p1, jsonConfig);
System.out.println(jsonObject);
注意:
如果服務器端返回的數據格式是json格式,那么我們在瀏覽器端得到數據時
需要使用eval函數將字符串轉換成json對象.
var msg=xmlhttp.responseText;
var obj=eval(msg);
有的時候通過eval轉換時,得不到一個json對象,這時做以下操作
var obj=eval("("+msg+")");
8. 案例-使用json來完成商品信息模糊查詢操作實現
精彩資源與分享,歡迎關注【Java幫幫】微信公眾號與【Java幫幫】QQ空間
一節我們來說一下如何用ajax提交請求?
我們先不講ajax的原理,還是先以實戰為主,看一下這個東西到底怎么用的?
form表單:
<!-- 采用post表單提交 --> <form style="margin-left:200px;" id="myform" name="myform" method="post" onsubmit="return sumbitTest();" action="login.do"> <table> <tr> <td>用戶名:</td> <td> <input type="text" name="username" id="username"/> </td> </tr> <tr> <td>密碼:</td> <td> <input type="password" name="password" id="password"/> </td> </tr> <tr> <td colspan="2"> <input style="display:none" id="login_btn" type="submit" value="提交"> </td> </tr> <div id="errMsg" style="color:red">${errMsg}</div> <input id="loginType" type="text" name="loginType" hidden='true'/> </td> </table> </form>
修改提交方法:
function doLogin(type){ if(type=='QQ'){ alert('您選擇的是QQ登錄'); } if(type=='weixin'){ alert('您選擇的是微信登錄'); } $("#loginType").val(type); //$("#login_btn").click(); //如果驗證通過,就開始進行提交 if(sumbitTest()){ $.ajax({ type: "GET", url: "login.do", data: {username:$("#username").val(), password:$("#password").val()}, dataType: "json", //預期服務器返回的數據 success: function(data){ if(data.errCode < 0){ $("#errMsg").show().html(data.errMsg).stop(true,true).fadeOut(3000); }else{ //登錄成功,做其他處理 alert("恭喜你,登錄成功!") } } }); } } //驗證登錄信息 function sumbitTest(){ return true; //在這個方法中可以對登錄信息進行校驗 (作業,用戶名和密碼都不能為空) if(!$("#username").val()){ alert("用戶名不能為空!"); return false; } if(!$("#password").val()){ alert("密碼不能為空!"); return false; } }
ajax是異步操作,和同步操作的form表單提交不同。
例子一:同步就是打電話,對方不接就一直等。異步就是發微信,對方回不回我都可以去做別的事情。
例子二:同步就像玩RPG回合制游戲,比如口袋妖怪,你打我一下,我打你一下。異步就像玩紅色警戒,我可以先派20輛天啟坦克去轟炸對面的兵工廠,下完指令后還可以立刻回到主基地造一座雷達。
OK,剛才我們看到ajax提交有一個屬性是text,這就表示返回的數據格式是文本。實際上,我們一般用的數據格式并非text,而是JSON。我們需要在Servlet中手動給我們的JSP頁面返回一個json數據。
WebUtil.writeObject(resp, JSONObject.fromObject(resultData) );
其中,resultData是一個包含錯誤碼和錯誤信息的專用類:
public class ResultData { private int errCode=0; private String errMsg; public int getErrCode() { return errCode; } public void setErrCode(int errCode) { this.errCode=errCode; } public String getErrMsg() { return errMsg; } public void setErrMsg(String errMsg) { this.errMsg=errMsg; } }
因為最終轉換的時候肯定默認調用resultData對象的toString方法,所以我們不妨直接重寫ResultData類的toString方法,返回JSON格式。
TML+AJAX實現上傳大文件方案,h5批量下載文件,HTTP+斷點續傳,前端處理大文件/視頻分片上傳,斷點續傳,VUE—實現文件上傳(多文件),圖片上傳,VUE 項目大文件上傳下載解決方案,VUE將前端的JSON文件上傳到后臺對應目錄,
JAVASCRIPT之分片上傳,斷點續傳的實際項目實現詳解,大文件上傳如何做斷點續傳?全端+后端結合開發,VUE實現文件上傳(單文件、多文件、分片上傳),JS中實現文件上傳下載的三種解決方案(推薦),JS實現大文件上傳——分片上傳方法,完美解決WEB無法上傳大文件方法,HTML大文件上傳源碼,
WEBUPLOAD組件實現文件上傳功能和下載功能,js大文件上傳下載解決方案,vue大文件上傳下載解決方案
asp.net大文件上傳下載解決方案,.net大文件上傳下載解決方案,webform大文件上傳下載解決方案,jsp大文件上傳下載解決方案,java大文件上傳下載解決方案,JAVASCRIPT 大文件上傳下載切片解決方案,JAVASCRIPT 大文件上傳下載切割解決方案,JAVASCRIPT 大文件上傳下載分割解決方案,JAVASCRIPT 大文件上傳下載分塊解決方案,JAVASCRIPT 大文件上傳下載分片解決方案,web大文件上傳下載解決方案,
網頁大文件上傳下載解決方案,前端大文件上傳下載解決方案,html5大文件上傳下載解決方案,JAVASCRIPT 大文件上傳下載解決方案,支持
之前在網上也找過相關的資料,論壇上也有網友交流過,但是基本上都不太令人滿意,與公司這邊的項目需求相差太遠。
HTML5,VUE2,VUE3,React,javascript等常用前端UI框架,JS框架,網上找的方案大多數都只是一些代碼片段,沒有提供完整的前后端代碼。
原理到是不復雜。上傳位置不能傳錯。用戶主要強調穩定性和兼容性。
之前在網上也搜過相關的資料。論壇里面也有一些網絡交流,但是都不太令人滿意。公司這邊實際上需要的是一成熟的商業解決方案,需要能夠提供成功案例,公司客戶都是國企。
跟項目經理溝通過,這塊網上搜到的文章能用的幾乎沒有。實際上客戶那邊比較在乎兩點。
之前項目上面用Flash比較多一點,現在基本上都是HTML5,斷點續傳除了頁面級以外最好還能夠提供離線支持。
支持IE,Chrome和信創國產化環境,比如銀河麒麟,統信UOS,龍芯,
支持分片,分塊,分段,切片,分割上傳。能夠突破chrome每域名的5個TCP連接限制,能夠突破chrome重啟,關閉瀏覽器續傳的限制。
支持10G,20G,50G,100G文件上傳和續傳,支持秒傳,支持文件夾上傳,重復文件檢測,重復文件校驗
支持文件下載,批量下載,下載斷點續傳,加密下載,端到端加密,加密算法支持國密SM4,多線程下載
支持在服務端保存文件夾層級結構,支持將文件夾層級結構信息保存到數據庫中,支持下載時能夠將文件夾層級結構下載下來,支持下載文件夾,下載文件夾支持斷點續傳,
支持加密傳輸,包括加密上傳,加密下載,加密算法支持國密SM4,
支持云對象存儲,比如華為云,阿里云,騰訊云,七牛云,AWS,MinIO,FastDFS,
提供手機,QQ,微信,郵箱等聯系方式,提供7*24小時技術支持,提供長期技術支持和維護服務,提供遠程1對1技術指導,提供二次開發指導,提供文檔教程,提供視頻教程。1.下載示例
https://gitee.com/xproer/up6-vue-cli
將up6組件復制到項目中
示例中已經包含此目錄
1.引入up6組件
2.配置接口地址
接口地址分別對應:文件初始化,文件數據上傳,文件進度,文件上傳完畢,文件刪除,文件夾初始化,文件夾刪除,文件列表
參考:http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de
3.處理事件
啟動測試
啟動成功
效果
數據庫
源碼工程文檔:https://drive.weixin.qq.com/s?k=ACoAYgezAAw1dWofra
源碼報價單:https://drive.weixin.qq.com/s?k=ACoAYgezAAwoiul8gl
OEM版報價單:https://drive.weixin.qq.com/s?k=ACoAYgezAAwuzp4W0a
控件源碼下載:https://drive.weixin.qq.com/s?k=ACoAYgezAAwbdKCskc
*請認真填寫需求信息,我們會在24小時內與您取得聯系。