前言
前幾天因爲要參加一個比賽,一個老師讓我給一個網站寫後臺,由於ssm還沒學完,只能用jsp+servlet寫,但由於種種原因,項目夭折了,但收穫還是有不少,下面就總結下這個半成品所用到的知識點及我在做這個項目中時產生的一些想法。
知識點:
1:項目前端使用bootstrap框架
2:後臺用jsp+servlet
3:數據庫採用mysql(會使用數據庫連接池C3P0)
4:項目結構使用MVC的開發模式,
Model:模型層,負責封裝數據和進行業務操作
View:視圖層,主要指和用戶交互的界面
Controller:控制層,控制整個系統處理的流程
5:實現的技能點
- 將文件上傳到服務器
1) 前臺表單的請求方式設置爲 Post請求
2) 使用file表單域上傳文件
3) 編碼方式設置成以二進制形式傳輸數據
代碼清單
//添加課程
public void addCourseMessage(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//把上傳的文件存放到項目下的upload文件夾裏面,而上面的代碼是獲取upload在項目下的路徑。
String savePath = this.getServletContext().getRealPath("upload");
System.out.println(savePath);
File file = new File(savePath);
List<String> paths = new ArrayList<>();
if (!file.exists() && !file.isDirectory()) {
file.mkdir(); //創建指定路徑名稱對應的目錄
}
//創建FileItem對象的工廠
DiskFileItemFactory factory = new DiskFileItemFactory();
// ServletFileUpload 負責處理上傳的文件數據,並將表單中每個輸入項封裝成一個FileItem 對象中
ServletFileUpload upload = new ServletFileUpload(factory);
upload.setHeaderEncoding("UTF-8");
if (!ServletFileUpload.isMultipartContent(request)) {
return;
}
List<FileItem> list = null;
try {
list = upload.parseRequest(request);
} catch (FileUploadException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
List<String> values = new ArrayList<>();
for (FileItem item : list) {
if (item.isFormField()) {
String name = item.getFieldName();
//解決普通輸入項的數據的中文亂碼問題
String value = item.getString("UTF-8");
values.add(value);
} else {
String filename = item.getName();
System.out.println(filename);
if (filename == null || filename.trim().equals("")) {
continue;
}
filename = filename.substring(filename.lastIndexOf("\\") + 1);
//獲取item中的上傳文件的輸入流
InputStream in = item.getInputStream();
//創建一個文件輸出流
FileOutputStream out = new FileOutputStream(savePath + "\\" + filename);
paths.add(filename);
//創建一個緩衝區
byte buffer[] = new byte[1024];
//判斷輸入流中的數據是否已經讀完的標識
int len = 0;
//循環將輸入流讀入到緩衝區當中,(len=in.read(buffer))>0就表示in裏面還有數據
while ((len = in.read(buffer)) > 0) {
//使用FileOutputStream輸出流將緩衝區的數據寫入到指定的目錄(savePath + "\\" + filename)當中
out.write(buffer, 0, len);
}
}
}
String courseName = values.get(0);
String courseDesc = values.get(1);
String courseImgAddress = paths.get(0);
String courseTeacher = values.get(3);
String courseType = values.get(4);
String secondId = values.get(5);
String message = "";
if (courseName.equals("")) {
message = "課程名稱爲空";
} else if (courseType.equals("")) {
message = "課程所屬爲空";
} else if (secondId.equals("")) {
message = "二級ID爲空";
}
if (message.equals("")) {
Course course = new Course();
course.setCourseName(courseName);
course.setCourseDesc(courseDesc);
course.setCourseTeacher(courseTeacher);
course.setCourseType(courseType);
course.setSecondId(Integer.parseInt(secondId));
course.setCourseImgAddress(courseImgAddress);
courseService.register(course);
request.getRequestDispatcher("products.jsp").forward(request, response);
return;
} else {
request.getRequestDispatcher("creatCourse.jsp").forward(request, response);
return;
}
}
前臺頁面
<form action="<%=request.getContextPath()%>/userServlet?method=addCourseMessage" enctype="multipart/form-data" class="" method="post">
<span class="input-group-addon">封面圖片</span>
<input type="text" size="36" name="upfile" placeholder=" 請上傳圖片" id="upfile" class="" style="height:30px;border:1px solid #ccc;background:#fff">
<input type="button" value="瀏覽" onclick="path.click()" style="height:30px;border:1px solid #ccc;background:#fff">
<input name="file" type="file" id="path" style="display:none" onchange="upfile.value=this.value">
2. ajax實現下拉列表的動態添加
1) 後臺從數據庫中取值,並往前臺發送JSON格式的數據
2) 前臺用ajax接受Json類型的數據,並動態生成到下拉表中
前臺頁面
$(function(){
$.ajax({
type: "post",
url: "userServlet?method=selectFirstCourseMessage",
dataType: 'json',
error:function(request){
alert(111);
},
success:function(Result){
//Result是jsonArray字符串
$.each(eval(Result), function(index, item){
//index爲序號,相對於json格式的Result而言,從0,1,2,3...到Result的長度減1,item就是每條jsonObject
//取值就是:item.屬性名,如item.name, item.id, item.number.....
$("#listproject").append("<li id="+index+">" +"<a href="+ item.href + ">" + item.name + "</a>" +"</li>");
});
}
});
});
<ul id="listproject">
</ul>
後臺頁面
List<FirstCourse> firstCoursesList = new ArrayList<FirstCourse>();
firstCoursesList = firstCoursesService.selectFirstCoursesName();
JSONArray jsonData = JSONArray.fromObject(firstCoursesList);
System.out.println(jsonData.toString());
PrintWriter out = response.getWriter();
out.print(jsonData);
後記:
這次項目沒有完成,我認爲主要的原因一方面是我自己的還缺少實際的項目經驗,有些知識只是紙上談兵,沒有學會如何用,另一方面也是因爲隊友的不給力前端的工作壓根就沒有做好,與前臺的交互沒有做好。以後就業的話肯定不會等你學完技術之後再做東西,只能是邊學邊做,而且這次我發現我看視頻學完之後還是不會做,看了和沒看一樣。我不知道爲啥學長看完視頻之後就能自己實現一個OA系統,我看完視頻連一個基礎的網站後臺都搞不定,其實這次項目不難,算上之前的那個半成品,已經失敗兩次了,下次的話一定要弄出一個完整的東西來。