移動商城第四篇【Controller配置、添加品牌之文件上傳和數據校驗】
Controller層配置
編寫SpringMVC的配置文件javascript
springmvc.xmlcss
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:context="http://www.springframework.org/schema/context" xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd "> <context:component-scan base-package="com.rl.ecps.controller"/> <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/shop/"></property> <property name="suffix" value=".jsp"></property> </bean> <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <property name="maxUploadSize" value="1024000"></property> </bean> </beans>
添加品牌
在原型界面上，咱們都是一些「死」數據，咱們須要將數據庫的記錄代替這些「死」數據！html
上傳圖片
服務端console對圖片進行上傳到咱們的圖片服務器上，而portal則訪問的時候從圖片服務器拿到圖片…
前端
在前面，咱們已經搭建了圖片服務器了，那咱們怎麼將console要上傳的圖片「丟給」圖片服務器呢？？？java
上傳圖片時使用Jersey 客戶端 API 調用 REST 風格的 Web 服務, Jersey 1 是一個開源的、能夠用於生產環境的 JAX-RS（RESTful Web Services 的 Java API 規範，JSR-311）實現。經過 Jersey 能夠很方便的使用 Java 來建立一個 RESTful Web Services。web
配置文件上傳解析器：ajax
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="1024000"></property>
</bean>
咱們是上傳到圖片服務器上的，所以須要咱們本身配置對應的路徑….而這個配置文件應該是寫在core的，由於它頗有多是會被重用的。spring
值得注意的是：文件服務器要設置成可寫的【默認是隻讀的】數據庫
參考以下博文：
http://blog.csdn.net/hon_3y/article/details/77840532json
編寫工具類來獲取對應的數據
public class ResourcesUtils {
public static String readProp(String key) {
InputStream in = ResourcesUtils.class.getClassLoader().getResourceAsStream("system.properties");
Properties prop = new Properties();
try {
prop.load(in);
} catch (IOException e) {
e.printStackTrace();
}
return prop.getProperty(key);
}
}
編寫處理文件上傳的Controller
若是有多個文件的話或者咱們不知道上傳的input的name，咱們可使用request對象來獲取Map，再來獲取對應的文件
//把request轉換成複雜request
MultipartHttpServletRequest mr = (MultipartHttpServletRequest) request;
//得到文件
Map<String, MultipartFile> map = mr.getFileMap();
Set<String> set = map.keySet();
Iterator<String> it = set.iterator();
String fileInputName = it.next();
MultipartFile mf = map.get(fileInputName);
而咱們如今是知道input的name的，所以，這裏我就直接使用MultipartFile對象來獲取了。
@Controller
@RequestMapping("/upload")
public class UploadEbBrandPicController {
@RequestMapping("/uploadPic.do")
public void uploadPic(@RequestParam MultipartFile imgsFile, Writer writer) throws IOException {
//上傳文件的名字是不能相同的，所以咱們設置一下文件的名稱
String fileName = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(new Date());
Random random = new Random();
for(int i = 0; i < 3; i++){
fileName = fileName + random.nextInt(10);
}
//拿到該文件的原始名稱
String originalFilename = imgsFile.getOriginalFilename();
//獲取該文件的後綴
String suffix = originalFilename.substring(originalFilename.lastIndexOf("."));
/*** * 絕對路徑是留給頁面src屬性作顯示的 * 相對路徑是保存在數據庫中，經過input來進行提交的。 */
//得到上傳文件的絕對路徑
String realPath = ResourcesUtils.readProp("file_path")+"/upload/"+fileName+suffix;
//得到相對路徑
String relativePath = "/upload/"+fileName+suffix;
//建立jersy的客戶端
Client client = Client.create();
//建立web資源對象
WebResource wr = client.resource(realPath);
//拿到文件的二進制數據，使用web資源對象上傳
byte[] bytes = imgsFile.getBytes();
wr.put(bytes);
//使用JSON格式把咱們的絕對路徑和相對路徑返回出去。
JSONObject jo = new JSONObject();
jo.accumulate("realPath", realPath);
jo.accumulate("relativePath", relativePath);
String result = jo.toString();
writer.write(result);
}
}
在前端咱們是使用ajax進行異步上傳文件的，當圖片選項修改時，咱們就觸發事件把圖片上傳到咱們的圖片服務器上了，。
function submitUpload(){
var opt = {
//從新指定form的action的值
url:"${path}/upload/uploadPic.do",
type:"post",
dateType:"json",
success:function(responseText){
//解決多餘的字符串數據致使沒法解析JSON的問題【另外的博文有寫】
var jsonObj = $.parseJSON(responseText.replace(/<.*?>/ig,""));
$("#imgsImgSrc").attr("src",jsonObj.realPath);
$("#imgs").val(jsonObj.relativePath);
},
error:function(){
alert("系統錯誤");
}
};
$("#form111").ajaxSubmit(opt);
}
成功把圖片上傳到圖片服務器中了
數據校驗
添加商品的界面是這樣子的，須要咱們進行校驗
而校驗咱們有兩種方式：
- 前臺使用JS校驗
- 後臺再進行校驗
咱們是這樣作的：在輸入框中自定義了幾個屬性：reg2表示必定要校驗的，reg1表示可校驗可不校驗。若是reg1有數據的話，那麼也要校驗
<div class="edit set">
<p><label><samp>*</samp>品牌名稱：</label><input type="text" id="brandName" name="brandName" class="text state" reg2="^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$" tip="必須是中英文或數字字符，長度1-20"/>
<span></span>
</p>
<p><label class="alg_t"><samp>*</samp>品牌LOGO：</label><img id='imgsImgSrc' src="" height="100" width="100" />
</p>
<p><label></label><input type='file' size='27' id='imgsFile' name='imgsFile' class="file" onchange='submitUpload()' /><span id="submitImgTip" class="pos">請上傳圖片寬爲120px，高爲50px，大小不超過100K。</span>
<input type='hidden' id='imgs' name='imgs' value='' reg2="^.+$" tip="親！您忘記上傳圖片了。" />
</p>
<p><label>品牌網址：</label><input type="text" name="website" class="text state" maxlength="100" tip="請以http://開頭" reg1="http:///*"/>
<span class="pos"> </span>
</p>
<p><label class="alg_t">品牌描述：</label><textarea rows="4" cols="45" name="brandDesc" class="are" reg1="^(.|\n){0,300}$" tip="任意字符，長度0-300"></textarea>
<span class="pos"> </span>
</p>
<p><label>排序：</label><input type="text" id="brandSort" reg1="^[1-9][0-9]{0,2}$" tip="排序只能輸入1-3位數的正整數" name="brandSort" class="text small"/>
<span class="pos"> </span>
</p>
<p><label> </label><input type="submit" name="button1" d class="hand btn83x23" value="完成" /><input type="button" class="hand btn83x23b" id="reset1" value='取消' onclick="backList('${backurl}')"/>
</p>
</div>
首先，咱們先來寫前臺的校驗…
當該表單提交的時候，咱們就對錶單的數據進行校驗
檢測每一個必填的input輸入框數據，若是每一個必填的輸入框數據都符合內容，那麼檢測品牌的名字是否重複！
$(function () {
$("#form111").submit(function () {
/*設置標識量爲true，若是不校驗不經過設置爲false*/
var isSubmit = true;
/*獲得每一個必填的input輸入框數據*/
$("[reg2]").each(function () {
var tip = $(this).attr("tip");
var regStr = $(this).attr("reg2");
/*拿到js校驗的對象*/
var reg = new RegExp(regStr);
var value = $.trim($(this).val());
/*校驗輸入的值與校驗規則是否匹配*/
if (!reg.test(value)) {
/*把錯誤的信息填充到span中*/
$(this).next("span").html("<font color='red'>" + tip + "</font>");
isSubmit = false;
//中斷each使用return false,不能使用return;和break;
return false;
} else {
//必填的數據規則都經過了，那麼判斷品牌名字是否有重複的【後臺校驗】
var inputName = $(this).attr("name");
if (inputName == "brandName") {
$.ajax({
url: "${path}/brand/validateBrandName.do",
type:"post",
async:false,
data:{
brandName:value
},
dataType:"text",
success: function (responseTest) {
if (responseTest == "no") {
$("#brandNameSpan").html("品牌的名稱不能相同！!");
isSubmit = false;
return false;
}else{
$(this).next("span").html("");
}
},
error: function () {
alert("系統錯誤");
}
});
}
}
});
return isSubmit;
});
});
檢測名字是否相同的controller方法
@RequestMapping("/validateBrandName.do")
public void validateBrandName(String brandName, Writer out) throws IOException {
//表示成功
String responseTest = "yes";
//根據名字去查找數據庫
List<EbBrand> brands = ebBrandService.selectBrandByName(brandName);
//若是返回的集合有Brand了，那麼就證實數據庫有相同的品牌了
if (brands != null && brands.size() > 0) {
responseTest = "no";
}
out.write(responseTest);
}
若是品牌名稱相同，那麼不容許提交！
對於非必填的數據項，若是用戶填了數據的話，那麼就必須按照咱們的規則來寫
/*非必填的數據，若是填了就必須按照規則*/
$("[reg1]").each(function () {
var tip = $(this).attr("tip");
var regStr = $(this).attr("reg1");
/*拿到js校驗的對象*/
var reg = new RegExp(regStr);
var value = $.trim($(this).val());
/*若是用戶填了數據，那麼就須要按照規則*/
if(value!=null && value!="") {
if (!reg.test(value)) {
/*把錯誤的信息填充到span中*/
$(this).next("span").html("<font color='red'>" + tip + "</font>");
isSubmit = false;
//中斷each使用return false,不能使用return;和break;
return false;
}else{
//若是改正了，那麼就把對應的錯誤提示清空了。
$(this).next("span").html("");
}
}
});
爲了達到更好的用戶體驗，咱們應該在光標焦點離開的時候就進行一次校驗！
邏輯和上邊是同樣的，只不過咱們使用的是blur方法，而在表單驗證的時候使用的是each遍歷每個輸入框罷了。
//光標失去焦點的校驗
$("#form111").find("[reg2]").blur(function () {
var tip = $(this).attr("tip");
var regStr = $(this).attr("reg2");
/*拿到js校驗的對象*/
var reg = new RegExp(regStr);
var value = $.trim($(this).val());
/*校驗輸入的值與校驗規則是否匹配*/
if (!reg.test(value)) {
/*把錯誤的信息填充到span中*/
$(this).next("span").html("<font color='red'>" + tip + "</font>");
} else {
//必填的數據規則都經過了，那麼判斷品牌名字是否有重複的【後臺校驗】
var inputName = $(this).attr("name");
if (inputName == "brandName") {
$.ajax({
url: "${path}/brand/validateBrandName.do",
type: "post",
async: false,
data: {
brandName: value
},
dataType: "text",
success: function (responseTest) {
if (responseTest == "no") {
$("#brandNameSpan").html("品牌的名稱不能相同！!");
} else {
//若是改正了，那麼就把對應的錯誤提示清空了。
$(this).next("span").html("");
}
},
error: function () {
alert("系統錯誤");
}
});
}
}
});
//失去焦點校驗
$("#form111").find("[reg1]").blur(function () {
var tip = $(this).attr("tip");
var regStr = $(this).attr("reg1");
/*拿到js校驗的對象*/
var reg = new RegExp(regStr);
var value = $.trim($(this).val());
/*若是用戶填了數據，那麼就須要按照規則*/
if (value != null && value != "") {
if (!reg.test(value)) {
/*把錯誤的信息填充到span中*/
$(this).next("span").html("<font color='red'>" + tip + "</font>");
} else {
//若是改正了，那麼就把對應的錯誤提示清空了。
$(this).next("span").html("");
}
}
});
相關文章
- 1. 移動商城第四篇【Controller配置、添加品牌之文件上傳和數據校驗】
- 2. 移動商城第八篇【添加商品之基本屬性和大字段數據（FCK文本編輯器）】
- 3. 移動商城第十篇【商品審覈和上下價】
- 4. 商城開發之商城後臺上傳商品-上傳商品圖片篇
- 5. 移動商城第六篇【分析商品的數據模型】
- 6. 移動商城第五篇【查看、刪除、編輯品牌】
- 7. 數據校驗，單文件上傳
- 8. 移動商城第七篇【查詢商品、分頁查詢、數據回顯】
- 9. 穀粒商城品牌管理校驗(十)
- 10. 穀粒商城品牌管理校驗(十一)
- 更多相關文章...
- • PHP 文件上傳 - PHP教程
- • Maven 構建配置文件 - Maven教程
- • Flink 數據傳輸及反壓詳解
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
