1. Course objectives
1. There is no menu bar on the left, to display the menu bar
2. Books appear when you click on the left menu bar
3. Last picture upload
2. Specific ideas, code and effect display
1. Show menu bar:
1. Write a way to query book categories
2. Define a jsonarr to receive data using ajax technology in index.js
Define an html to stitch data
4, Last Display
2. Code:
1.Category Entity Class: (Category)
package com.csf.entity;
public class Category {
private long id;
private String name;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return "Category [id=" + id + ", name=" + name + "]";
}
public Category(long id, String name) {
super();
this.id = id;
this.name = name;
}
public Category() {
super();
// TODO Auto-generated constructor stub
}
}2.CategoryDao:
package com.csf.dao;
import java.util.List;
import com.zking.entity.Category;
import com.zking.util.BaseDao;
import com.zking.util.PageBean;
public class CategoryDao extends BaseDao<Category> {
// Query book categories
public List<Category> list(Category category,PageBean pageBean) throws Exception {
String sql = "select * from t_easyui_category where 1=1";
long id=category.getId();
if(id!=0) {
sql+=" and id = "+id;
}
return super.executeQuery(sql,Category.class, pageBean);
}
}
3.CategoryAction
package com.csf.web;
import com.csf.dao.CategoryDao;
import com.csf.entity.Category;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.List;
public class CategoryAction extends ActionSupport implements ModelDriver<Category> {
private Category category = new Category();
private CategoryDao categoryDao = new CategoryDao();
/**
* Load book category drop-down box
* @param req
* @param resp
* @return
*/
public String combobox(HttpServletRequest req, HttpServletResponse resp){
try {
List<Category> list = categoryDao.list(category, null);
ResponseUtil.writeJson(resp,list);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
public String load(HttpServletRequest req, HttpServletResponse resp){
try {
//Pass id to background, only one category will be found
Category c= categoryDao.list(category, null).get(0);
ResponseUtil.writeJson(resp,c);
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
@Override
public Category getModel() {
return category;
}
}
4. Configure mvc.xml
<action type="com.csf.web.CategoryAction" path="/Category"> </action>
5.js stitching
//Portal Home Page Category
$(function(){
$.ajax({
url:$("#ctx").val()+"/Category.action?methodName=combobox",
success:function(data){
//Var jsonstr='[{id": 1,"name":"literary"}, {id":2,"name": "novel"}, {id":3,"name":"life"}'
alert(data);
var jsonArr=eval("("+data+")");
var html='';
for(var i in jsonArr){
html+='<li class="list-group-item" onclick="searchByType('+jsonArr[i].id+')">'+jsonArr[i].name+'</li>';
}
$(".list-group").append(html);
}
});
}) Front End Effect (Left Menu)
2. Click on the left menu bar and the corresponding books appear
1. Ideas:
1. Add a click event to the corresponding method in index.js and pass the id to the index.jsp interface
2. When clicking on the left menu bar, the method of transferring the id of the category change to the search book
3. Final query for all the books that have been reclassified, first in bookdao with cid condition, then in bookAction.
Code: index.js
$(function() {
$.ajax({
url:$("#ctx").val()+"/category.action?methodName=combobox",
success: function (data) {
var jsonArr=eval("("+data+")");
var html='';
for(var i in jsonArr){
html+='<li class="list-group-item" onclick="searchByType('+jsonArr[i].id+')">'+jsonArr[i].name+'</li>';
}
$(".list-group").append(html);
}
});
})index interface code
<div class="col-md-3 float-left c-left"> <ul class="list-group"> <li class="list-group-item">Book Classification</li> </ul> </div>
Just have this
You also need to have a relevant background structure, because it's simple and many, you won't do a presentation. (dao,web, configuration)
Design sketch
Literature and Art:
Novels:
Wait.
3. Picture upload:
1. Thoughts:
1. Import jar packages needed for picture upload
2. Write a way to modify the image path in BookDao
3. The method of uploading pictures in BookAction is named upload.
4. Configure the picture map in the eclipse internal server
2. Code:
1. Import jar packages needed for picture upload
2. Write a way to modify the image path in BookDao
public void editImgUrl(Book t) throws Exception {
super.executeUpdate("update t_easyui_book set image=? where id=?", t,
new String[] {"image","id"});
}3. The method of uploading pictures in BookAction is named upload. Picture mapping code:
<Context path="/uploadImages" docBase="E:/temp/2021/mvc/upload/"/> <Context path="/" docBase="/mvc"/>
Tool class:
package com.zking.util;
import java.text.SimpleDateFormat;
import java.util.Date;
/**
* Date Processing Toolkit
* @author Administrator
*
*/
public class DateUtil {
*/
/**
* Get the current time string
* @return
* @throws Exception
*/
public static String getCurrentDateStr()throws Exception{
Date date=new Date();
SimpleDateFormat sdf=new SimpleDateFormat("yyyyMMddHHmmss");
return sdf.format(date);
}
}
File Parsing Class
package com.zking.util;
import java.io.IOException;
import java.io.InputStream;
import java.util.Properties;
public class PropertiesUtil {
public static String getValue(String key) throws IOException{
Properties p=new Properties();
InputStream in=PropertiesUtil.class.getResourceAsStream("/resources.properties");
p.load(in);
return p.getProperty(key);
}
}4. Picture mapping code:
<Context path="/uploadImages" docBase="E:/temp/2021/mvc/upload/"/> <Context path="/" docBase="/mvc"/>
5. Picture upload in web layer
public String upload(HttpServletRequest request, HttpServletResponse response) {
try {
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> items = upload.parseRequest(request);
Iterator<FileItem> itr = items.iterator();
// HttpSession session = request.getSession();
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next();
if (item.isFormField()) {
System.out.println("Common Field Processing");
book.setId(Integer.valueOf(request.getParameter("id")));
} else if (!"".equals(item.getName())) {
String imageName = DateUtil.getCurrentDateStr();
// Data stored in data and mapped address of browser to access pictures
String serverDir = PropertiesUtil.getValue("serverDir");
// True location to store pictures
String diskDir = PropertiesUtil.getValue("diskDir");
// The suffix name of the picture
String subfix = item.getName().split("\\.")[1];
book.setImage(serverDir + imageName + "." + subfix);
item.write(new File(diskDir + imageName + "." + subfix));
this.bookDao.editImgUrl(book);
ResponseUtil.writeJson(response, 1);
}
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}Note: try not to place tomcat in the Chinese directory, otherwise the mapped address will not be available