當(dāng)前位置:首頁 > IT技術(shù) > Web編程 > 正文

CRM第三天:完成客戶管理的分頁查詢,圖片上傳,條件查詢,修改客戶,刪除客戶的功能
2021-09-10 18:15:27

CRM客戶關(guān)系管理系統(tǒng)三繼續(xù)。CRM第三天:完成客戶管理的分頁查詢,圖片上傳,條件查詢,修改客戶,刪除客戶的功能_基于SSH的客戶關(guān)系管理系

目錄

1.CRM:客戶管理模塊查詢客戶(分頁)

1.1修改left.jsp

1.2編寫Action中findAll的方法

1.3編寫Service

1.4編寫DAO

1.5配置頁面跳轉(zhuǎn)

1.6編寫list.jsp

2.CRM:客戶管理-保存客戶上傳客戶資質(zhì)

2.1文件上傳知識回顧

2.1.1什么是文件上傳

2.1.2文件上傳技術(shù)

2.1.3文件上傳要求

2.2文件上傳代碼實(shí)現(xiàn)

2.2.1第一步:修改添加頁面

2.2.2第二步:修改action中的save方法

2.2.3第三步:把文件的路徑存入數(shù)據(jù)庫

2.2.4第四步:配置文件上傳的攔截器(大小,格式)

3. CRM:客戶管理-刪除客戶

3.1修改查詢頁面

3.2編寫Action

3.3編寫Service

3.4編寫Dao

4. CRM:客戶管理-修改客戶

4.1修改列表頁面

4.2編寫action

4.3編寫service

4.4編寫Dao

4.4配置跳轉(zhuǎn)頁面

5. CRM:客戶管理-按條件查詢客戶

5.1在列表頁面異步加載查詢條件的數(shù)據(jù)

5.2點(diǎn)擊查詢提交到action

5.3編寫action


?

1.CRM:客戶管理模塊查詢客戶(分頁)

1.1修改left.jsp

<li><a

?????????????????? href="${pageContext.request.contextPath }/customer_findAll.action">客戶列表</a></li>

?

1.2編寫Action中findAll的方法

???

//查詢客戶列表方法

??? public String findAll(){

??????? //接收分頁參數(shù)

??????? //最好使用DetachedCriteria對象(帶分頁的條件查詢)

??????? DetachedCriteria detachedCriteria=DetachedCriteria.forClass(Customer.class);

??????? //調(diào)用業(yè)務(wù)層查詢

??????? PageBean<Customer> pageBean=customerService.findByPage(detachedCriteria,page,pageSize);

??????? ActionContext.getContext().getValueStack().push(pageBean);

???????

??????? return "findAll";

??? }

1.3編寫Service

??

? //客戶分頁查詢業(yè)務(wù)層方法

??? @Override

?? public PageBean<Customer> findByPage(DetachedCriteria detachedCriteria, Integer page, Integer pageSize) {

??????? PageBean<Customer> pageBean=new PageBean<Customer>();

??????? //封裝當(dāng)前頁數(shù)

??????? pageBean.setPage(page);

??????? //封裝每頁記錄數(shù)

??????? pageBean.setPageSize(pageSize);

??????? //封裝總記錄數(shù),調(diào)用Dao查詢

??????? Integer totalCount=customerDao.findCount(detachedCriteria);

??????? pageBean.setTotalCount(totalCount);

??????? //封裝總頁數(shù)

??????? Double tc=totalCount.doubleValue();

??????? Double num=Math.ceil(tc/pageSize);

??????? pageBean.setTotalPage(num.intValue());

??????? //封裝每頁顯示數(shù)據(jù)的集合

??????? Integer begin=(page-1)*pageSize;

??????? List<Customer> list=customerDao.findByPage(detachedCriteria,begin,pageSize);

??????? pageBean.setList(list);

??????? return pageBean;



??? }

1.4編寫DAO

???

// 帶條件統(tǒng)計(jì)個(gè)數(shù)

??? @Override

??? public Integer findCount(DetachedCriteria detachedCriteria) {

??????? detachedCriteria.setProjection(Projections.rowCount());

??????? List<Long> count=(List<Long>) this.getHibernateTemplate().findByCriteria(detachedCriteria);

??????? if(count.size()>0){

??????????? return count.get(0).intValue();

??????? }

??????? return null;

??? }



??? // 帶條件分頁查詢客戶

??? @Override

??? public List<Customer> findByPage(DetachedCriteria detachedCriteria, Integer begin, Integer pageSize) {

??????? detachedCriteria.setProjection(null);

???????

??????? return (List<Customer>) this.getHibernateTemplate().findByCriteria(detachedCriteria, begin, pageSize);

??? }

1.5配置頁面跳轉(zhuǎn)

<!-- 客戶管理Action -->

??????? <action name="customer_*" class="customerAction" method="{1}">

??????????? <result name="saveUI" >/customer/add.jsp</result>

??????????? <result name="findAll">/customer/list.jsp</result>

??????? </action>

1.6編寫list.jsp

<div class="main" style="overflow-y:auto">

????

????? <div class="container">

??????? <div class="main_top">

?????? <div id="table" class="mt10">

??????? <div class="box span10 oh">

????????????? <table width="100%" border="0" cellpadding="0" cellspacing="0" class="list_table">

??????????????? <tr>

?????????????????? <th width="100">客戶名稱</th>

?????????????????? <th width="100">客戶級別</th>

?????????????????? <th width="100">客戶來源</th>

?????????????????? <th width="100">客戶所屬行業(yè)</th>

?????????????????? <th width="100">電話</th>

?????????????????? <th width="100">手機(jī)</th>

?????????????????? <th width="130">操作</th>

???????????????? </tr>

???????????????? <s:iterator value="list">

????????????????

??????????????? <tr class="tr">

?????????????????? <td><s:property value="cust_name"/></td>

?????????????????? <td><s:property value="baseDictLevel.dict_item_name"/></td>

?????????????????? <td><s:property value="baseDictSource.dict_item_name"/></td>

?????????????????? <td><s:property value="baseDictIndustry.dict_item_name"/></td>

?????????????????? <td><s:property value="cust_phone"/></td>

?????????????????? <td><s:property value="cust_mobile"/></td>

?????????????????? <td>

????????????????????? <input type="button" name="button" class="btn btn82 btn_add" value="修改">

????????????????????? <input type="button" name="button" class="btn btn82 btn_del" value="刪除">

?????????????????? </td>

???????????????

???????????????? </tr>

???????????????? </s:iterator>

???????????????

????????????? </table>

????????????? <div class="page mt10">

??????????????? <form name="customerForm" action="${pageContext.request.contextPath }/customer_findAll.action" method="post">

??????????????? <div class="pagination">

????????????????? <ul>

????????????????????? <li class="disabled">

????????????????????? <span>

????????? ???????????????????????????????????????????????????????????共<s:property value="totalCount"/>條記錄,

???????????????????????????????????????????????????????????????????? 共 <s:property value="totalPage"/>頁</span>

????????????????????? </li>

??????????????????? ?<li>

??????????????????????? <span>

??????????????????????????????????????????????????????????????? 每頁顯示記錄數(shù):

??????????????????????? <select name="pageSize" onchange="to_page()">

??? ??????????????????????? <option value="3" <s:if test="pageSize==3">selected</s:if>>3條記錄</option>

??? ??????????????????????? <option value="5" <s:if test="pageSize==5">selected</s:if>>5條記錄</option>

??? ??????????????????????? <option value="10" <s:if test="pageSize==10">selected</s:if>>10條記錄</option>

??????????????????????? </select>

????????????????????????

??????????????????????? </span>

???????????????????? </li>

????????????????????

?????????????????????

????????????????????? <s:if test="page!=1">

??? ????????????????????? <li><a href="javascript:to_page(1)">首頁</a></li>

??? ?????? ???????????????<li><a href="javascript:to_page(<s:property value="page-1" />)">上一頁</a></li>

????????????????????? </s:if>

?????????????????????

????????????????????? <s:iterator var="i" begin="1" end="totalPage">

????????????????????????? <s:if test="#i==page">

?????????????????????????? <li class="active"><span><s:property value="#i"/> </span></li>

????????????????????????? </s:if>

????????????????????????? <s:else>

????????????????????????? <li><a href="javascript:to_page(<s:property value="#i" />)"><s:property value="#i"/></a></li>

????????????????????????? </s:else>

????????????????????? </s:iterator>

?????????????????????

????????????????????? <s:if test="page!=totalPage">

??? ????????????????????? <li><a href="javascript:to_page(<s:property value="page+1" />)">下一頁</a></li>

??? ????????????????????? <li><a href="javascript:to_page(<s:property value="totalPage" />)">末頁</a></li>

????????????????????? </s:if>

????????????????????? <li>到第

??? ???????????????????? <input class="input-text lh25" type="text" id="page" name="page" size="2" height="10px"/>頁

??? ???????????????????? <input class="ext_btn" type="button" value="GO" onclick="to_page()" />

??? ????????????????????

???????????????????? </li>

????????????????? </ul>

??????????????? </div>

??????????????? </form>

?? ?????????????

????????????? </div>

??????? </div>

???? </div>

??? </div>

??? </div>

???

??? </div>



2.CRM:客戶管理-保存客戶上傳客戶資質(zhì)

2.1文件上傳知識回顧

2.1.1什么是文件上傳

將本地文件通過流的形式上傳到服務(wù)器。

?

2.1.2文件上傳技術(shù)

jspSmartUpload:(很少用)

?? jspSmartUpload是一個(gè)可免費(fèi)使用的全功能的文件上傳下載組件,適于嵌入執(zhí)行上傳下載操作的JSP文件中。該組件有以下幾個(gè)特點(diǎn):

  1. 使用簡單。在JSP文件中僅僅書寫三五行java代碼就可以搞定文件的上傳或下載,方便。
  2. 能全程控制上傳。利用jspSmartUpload組件提供的對象及其操作方法,可以獲得全部上傳文件的信息(包括文件名,大小,類型,擴(kuò)展名,文件數(shù)據(jù)等),方便存取。
  3. 能對上傳的文件在大小、類型等方面做出限制。如此可以濾掉不符合要求的文件。
  4. 下載靈活。僅寫兩行代碼,就能把Web服務(wù)器變成文件服務(wù)器。不管文件在Web服務(wù)器的目錄下或在其它任何目錄下,都可以利用jspSmartUpload進(jìn)行下載。

Fileupload:

??? FileUpload 是 Apache commons下面的一個(gè)子項(xiàng)目,用來實(shí)現(xiàn)Java環(huán)境下面的文件上傳功能,與常見的SmartUpload齊名。

Servlet3.0

      1. 文件上傳
      2. 注解開發(fā)
      3. 文件上傳

Struts2框架:

? ???底層實(shí)現(xiàn)是fileUpload,對FileUpload進(jìn)行了封裝。

????

????

2.1.3文件上傳要求

1.表單的提交方式必須為post。

2.表單中需要提供<input type=”file” name=”upload”/>,而且這個(gè)文件必須有name屬性。

3.表單中enctype屬性設(shè)置為multipart/form-data。

?

2.2文件上傳代碼實(shí)現(xiàn)

2.2.1第一步:修改添加頁面

提供文件上傳項(xiàng):

<tr>

????????????????? <td class="td_right">文件:</td>

????????????????? <td class=""><input type="file" name="file" class="input-text lh30" size="10"></td>

???????????????? </tr>

?

修改表單屬性:

<form action="${pageContext.request.contextPath }/customer_save.action" method="post" enctype="multipart/form-data" class="jqtransform">

?

2.2.2第二步:修改action中的save方法

Struts2的文件上傳:在action中提供三個(gè)屬性,對這個(gè)三個(gè)屬性提供set方法。

  1. 字符串類型:上傳項(xiàng)名稱+FileName;
  2. 文件類型:上傳項(xiàng)名稱;
  3. 字符串類型:上傳項(xiàng)名稱+ContentType;
??

/**??



* @Title: CustomerAction.java



* @Package com.albertyy.crm.web.action



* @Description: TODO



* @author yangxianyang??



* @date 2018年12月16日 下午4:07:41



* @version V1.0??



*/



package com.albertyy.crm.web.action;



import java.io.File;

import java.io.IOException;



import javax.servlet.ServletContext;



import org.apache.commons.io.FileUtils;

import org.apache.struts2.ServletActionContext;

import org.hibernate.criterion.DetachedCriteria;



import com.albertyy.crm.entity.Customer;

import com.albertyy.crm.service.CustomerService;

import com.albertyy.crm.utils.PageBean;

import com.albertyy.crm.utils.UploadUtils;

import com.opensymphony.xwork2.ActionContext;

import com.opensymphony.xwork2.ActionSupport;

import com.opensymphony.xwork2.ModelDriven;



/**

?* ?? ??? 項(xiàng)目名稱:CRM?? 類名稱:CustomerAction?? 類描述:??客戶管理Action 創(chuàng)建人:yangyangyang??

?* 創(chuàng)建時(shí)間:2018年12月16日 下午4:07:41?? 修改人:yangyangyang?? 修改時(shí)間:2018年12月16日 下午4:07:41??

?* 修改備注:?? @version??? ???

?*/



public class CustomerAction extends ActionSupport implements ModelDriven<Customer> {

???? // 模型驅(qū)動(dòng)使用的對象

???? private Customer customer = new Customer();



???? @Override

???? public Customer getModel() {

???????? // TODO Auto-generated method stub

???????? return customer;

???? }



???? // 接收分頁參數(shù)

???? private Integer page = 1;



???? public void setPage(Integer page) {

???????? if (page == null) {

????????????? page = 1;

???????? }

???????? this.page = page;

???? }



???? private Integer pageSize = 5;



???? public void setPageSize(Integer pageSize) {

???????? if (pageSize == null) {

????????????? pageSize = 5;

???????? }

???????? this.pageSize = pageSize;

???? }



???? // 注入Services

???? private CustomerService customerService;



???? public void setCustomerService(CustomerService customerService) {

???????? this.customerService = customerService;

???? }

??? /*

???? * 文件上傳提供的三個(gè)屬性

???? */

???? private String fileFileName;//文件名稱

???? private File file;//上傳的文件

???? private String fileContentType;//文件類型

???? public void setFileFileName(String fileFileName) {

???????? this.fileFileName = fileFileName;

???? }



???? public void setFile(File file) {

???????? this.file = file;

???? }



???? public void setFileContentType(String fileContentType) {

???????? this.fileContentType = fileContentType;

???? }



???? // 客戶管理跳轉(zhuǎn)到添加頁面

???? public String saveUI() {

???????? return "saveUI";

???? }



???? // 保存客戶的方法

???? public String save() {

???????? //上傳文件

???????? if(file!=null){

????????????? //設(shè)置上傳路徑

????????????? ActionContext actionContext = ActionContext.getContext();

????????????? ServletContext servletContext = (ServletContext)actionContext.get(ServletActionContext.SERVLET_CONTEXT);

????????????? String path = servletContext.getRealPath("/")+"upload";

????????????? System.out.println(file);

????????????? //為了防止一個(gè)目錄下存放相同的文件名:使用隨機(jī)文件名

????????????? String uuidFileName=UploadUtils.getUuidFileName(fileFileName);

????????????? //為了防止一個(gè)目錄下存放的文件過多:目錄分離

????????????? String realPath=UploadUtils.getPath(uuidFileName);

????????????? //創(chuàng)建目錄

????????????? String url=path+realPath;

????????????? File ml=new File(url);

????????????? if(!ml.exists()){

?????????????????? ml.mkdirs();

????????????? }

????????????? //文件上傳

????????????? File dictFile=new File(url+"/"+uuidFileName);

????????????? try {

?????????????????? FileUtils.copyFile(file, dictFile);

????????????? } catch (IOException e) {

?????????????????? // TODO Auto-generated catch block

?????????????????? e.printStackTrace();

????????????? }

???????? }

????????

???????? //保存客戶

???????? customerService.save(customer);

???????? // 跳轉(zhuǎn)到查詢頁面

???????? // 接收分頁參數(shù)

???????? // 最好使用DetachedCriteria對象(帶分頁的條件查詢)

???????? DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Customer.class);

???????? // 調(diào)用業(yè)務(wù)層查詢

???????? PageBean<Customer> pageBean = customerService.findByPage(detachedCriteria, page, pageSize);

???????? ActionContext.getContext().getValueStack().push(pageBean);



???????? return "findAll";

???? }



???? // 查詢客戶列表方法

???? public String findAll() {

???????? // 接收分頁參數(shù)

???????? // 最好使用DetachedCriteria對象(帶分頁的條件查詢)

???????? DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Customer.class);

???????? // 調(diào)用業(yè)務(wù)層查詢

???????? PageBean<Customer> pageBean = customerService.findByPage(detachedCriteria, page, pageSize);

???????? ActionContext.getContext().getValueStack().push(pageBean);



???????? return "findAll";

???? }

}

CRM第三天:完成客戶管理的分頁查詢,圖片上傳,條件查詢,修改客戶,刪除客戶的功能_sed_02

2.2.3第三步:把文件的路徑存入數(shù)據(jù)庫

修改實(shí)體:

private Long cust_id;

???? private String cust_name;

???? /*private String cust_source;

???? private String cust_industry;

???? private String cust_level;*/

???? private String cust_phone;

???? private String cust_mobile;

???? private String cust_image;

???? //客戶和字典的關(guān)系是多對一,所以需要在多的一方,放一的一方的對象

???? private BaseDict baseDictSource;

???? private BaseDict baseDictIndustry;

???? private BaseDict baseDictLevel;

????

修改映射:

<property name="cust_image" column="cust_image"/>

修改保存方法:

//設(shè)置image的值

????????????? customer.setCust_image(url+"/"+uuidFileName);

?

2.2.4第四步:配置文件上傳的攔截器(大小,格式)

?

<!-- 客戶管理Action -->

???????? <action name="customer_*" class="customerAction" method="{1}">

????????????? <result name="saveUI" >/customer/add.jsp</result>

????????????? <result name="findAll">/customer/list.jsp</result>

????????????? <result name="input">/customer/add.jsp</result>

????????????? <!-- 配置文件上傳攔截器 -->

????????????? <interceptor-ref name="defaultStack">

????????????? ??? <param name="fileUpload.maximumSize">2097152</param>

????????????? ??? <param name="fileUpload.allowedExtensions">.jpg,.bmp,.png,.txt,.gif</param>

????????????? </interceptor-ref>

???????? </action>

?

?

3. CRM:客戶管理-刪除客戶

3.1修改查詢頁面

<script>

???? function toDelete(id) {

???????? if (confirm("確定刪除該條數(shù)據(jù)嗎?")) {

????????????? location.href = "${pageContext.request.contextPath}/customer_delete.action?cust_id="

?????????????????????? + id;

???????? }

???? }

</script>

3.2編寫Action

//刪除客戶的方法

???? public String delete(){

???????? customer=customerService.findById(customer.getCust_id());

???????? //刪除圖片

???????? String cust_image=customer.getCust_image();

???????? if(cust_image!=null&&!cust_image.trim().equals("")){

???????? ??? File file=new File(cust_image);

???????? ??? if(file.exists()){

???????? ??? file.delete();

???????? ??? }

???????? }

???????? //刪除客戶

???????? customerService.delete(customer);

???????? return "deleteSuccess";

}

3.3編寫Service

//根據(jù)id查詢客戶

???? @Override

???? public Customer findById(Long cust_id) {

???????? return customerDao.findById(cust_id) ;

???? }

???? //刪除客戶

???? @Override

???? public void delete(Customer customer) {

???????? customerDao.delete(customer);

????????

???? }



3.4編寫Dao

?

 //根據(jù)id查詢
	@Override
	public Customer findById(Long cust_id) {
		return this.getHibernateTemplate().get(Customer.class,cust_id);
	}

??? //刪除客戶

???? @Override

???? public void delete(Customer customer) {

???????? this.getHibernateTemplate().delete(customer);

     }

?

?

?

4. CRM:客戶管理-修改客戶

4.1修改列表頁面

此處使用彈窗作為修改頁面:彈窗使用方法:javascript:void(0)

CRM第三天:完成客戶管理的分頁查詢,圖片上傳,條件查詢,修改客戶,刪除客戶的功能_文件上傳_03

彈窗頁面:

<!-- 修改窗口 -->

???????????????????????????????? <div id="updateBox" class="update" style="display:none;">

??????????????????????????????????

???????

????????????? <form action="${pageContext.request.contextPath }/customer_update.action" method="post" enctype="multipart/form-data" class="jqtransform" >

???????? ????????<input type="hidden" name="cust_id" id="cust_id">

???????????????? <input type="hidden" name="cust_image" id="cust_image">

?????????????? <table class="form_table pt15 pb15" width="100%" border="0" cellpadding="0" cellspacing="0">

???????????????? <tr>

????????????????? <td class="td_right">客戶名稱:</td>

????????????????? <td class="">

??????????????????? <input type="text" name="cust_name" id="cust_name" class="input-text lh30" value="" size="40">

????????????????? </td>

?????????????????

????????? ??????</tr>

???????????????? <tr >

????????????????? <td class="td_right">信息來源:</td>

????????????????? <td class="">



??????????????????? <span class="fl">

????????????????????? <div class="select_border">

??????????????????????? <div class="select_containers ">

??????????????????????? <select name="baseDictSource.dict_id" id="cust_source" class="select">

??????????????????????? <option>-----</option>

????????????

??????????????????????? </select>

??????????????????????? </div>

???????????????????? ?</div>

??????????????????? </span>

????????????????? </td>

???????????????? </tr>

??????????????? <tr >

????????????????? <td class="td_right">所屬行業(yè):</td>

????????????????? <td class="">



??????????????????? <span class="fl">

????????????????????? <div class="select_border">

??????????????????????? <div class="select_containers ">

??????????????????????? <select name="baseDictIndustry.dict_id" id="cust_industry" class="select">

??????????????????????? <option>-----</option>

??????????????????????? </select>

??????????????????????? </div>

????????????????????? </div>

??????????????????? </span>

????????????????? </td>

???????????????? </tr>

???????????????? <tr >

????????????????? <td class="td_right">客戶級別:</td>

????????????????? <td class="">



??????????????????? <span class="fl">

????????????????????? <div class="select_border">

??????????????????????? <div class="select_containers ">

??????????????????????? <select name="baseDictLevel.dict_id" id="cust_level" class="select">

??????????????????????? <option>-----</option>

??????????????????????? </select>

??????????????????????? </div>

????????????????????? </div>

??????????????????? </span>

????????????????? </td>

???????????????? </tr>

????? ????????????<tr>

????????????????? <td class="td_right">固定電話:</td>

????????????????? <td class="">

??????????????????? <input type="text" name="cust_phone" id="cust_phone" class="input-text lh30" size="40">

????????????????? </td>

?????????????????

??????????????? </tr>

????????????????? <tr>

??????????????? ??<td class="td_right">移動(dòng)電話:</td>

????????????????? <td class="">

??????????????????? <input type="text" name="cust_mobile" id="cust_mobile" class="input-text lh30" size="40">

????????????????? </td>

?????????????????

??????????????? </tr>

????????????? ???<tr>

????????????????? <td class="td_right">相關(guān)文件:</td>

????????????????? <td class=""><input type="file" name="file"? class="input-text lh30" size="10"></td>

???????????????? </tr>

???????????????

???????????????? <tr>

?????????????????? <td class="td_right">&nbsp;</td>

?????????????????? <td class="">

??????????????????? <input id="updateForm" type="submit" name="button" class="btn btn82 btn_save2" value="修改"? >

??????????????????? <input type="reset" name="button" class="btn btn82 btn_res" value="重置">

?????????????????? </td>

???????????????? </tr>

?????????????? </table>

?????????????? </form>

?????????????? <s:fielderror></s:fielderror>

??????????? </div>

異步提交JS代碼:


/*

?*客戶查詢頁面js

?*/

//刪除彈窗

function toDelete(id) {



???? var btnFn = function() {

???????? location.href = "${pageContext.request.contextPath}/customer_delete.action?cust_id="

?????????????????? + id;

???????? return false;

???? };



???? easyDialog.open({

???????? container : {

????????????? header : '確認(rèn)刪除',

????????????? content : '您確定要?jiǎng)h除該條數(shù)據(jù)嗎?',

????????????? yesFn : btnFn,

????????????? noFn : true

???????? }

???? });

};



// 修改彈窗

function toUpdate(id) {

???? customerInfo(id);

????

???? var content = $('#updateBox').html();

????

???? var btnFn = function() {

??????? $("input#updateForm").click();;

???????? return false;

???? };



???? easyDialog.open({

???????? container : {

????????????? header : '修改用戶信息',

????????????? content : content,

????????????? yesFn : btnFn,

????????????? noFn : true

???????? }

???? });

???? // $('.easyDialog_wrapper').css('width','400px');

???? $('.easyDialog_text').css('height', '350px');

????

};

//異步請求加載要修改的客戶的信息

function customerInfo(id){

???? // 加載客戶信息

???? $.post("${pageContext.request.contextPath }/customer_edit.action",{"cust_id":id},function(data){

???????? //遍歷JOSN類型的數(shù)據(jù)

???????? $.each(data,function(name,value){

?????????????

????????????? $("select#"+name+" option[value='"+value+"']").prop("selected","selected");

????????????? $("input#"+name).val(value);

?????????????

???????? });

????????

???? },"json");

}



//頁面加載,異步查詢字典數(shù)據(jù)

//頁面加載函數(shù)就會(huì)執(zhí)行:

$(function(){

???? // 加載客戶來源

???? $.post("${pageContext.request.contextPath }/baseDict_findByTypeCode.action",{"dict_type_code":"002"},function(data){

???????? //遍歷JOSN類型的數(shù)據(jù)

???????? $(data).each(function(i,n){

????????????? $("select#cust_source").append("<option value='"+n.dict_id+"'>"+n.dict_item_name+"</option>");

???????? });

???? },"json");

????

???? // 加載客戶所屬行業(yè)

???? $.post("${pageContext.request.contextPath }/baseDict_findByTypeCode.action",{"dict_type_code":"001"},function(data){

???????? //遍歷JOSN類型的數(shù)據(jù)

???????? $(data).each(function(i,n){

????????????? $("select#cust_industry").append("<option value='"+n.dict_id+"'>"+n.dict_item_name+"</option>");

???????? });

???? },"json");

????

???? // 加載客戶級別

???? $.post("${pageContext.request.contextPath }/baseDict_findByTypeCode.action",{"dict_type_code":"006"},function(data){

???????? //遍歷JOSN類型的數(shù)據(jù)

???????? $(data).each(function(i,n){

????????????? $("select#cust_level").append("<option value='"+n.dict_id+"'>"+n.dict_item_name+"</option>");

???????? });

???? },"json");

});

4.2編寫action

// 用戶修改異步查詢信息的方法

???? public String edit() {

???????? customer = customerService.findById(customer.getCust_id());

???????? //把需要傳送的數(shù)據(jù)封裝成map集合

???????? Map map=new TreeMap();

???????? map.put("cust_id", customer.getCust_id());

???????? map.put("cust_name", customer.getCust_name());

???????? map.put("cust_source", customer.getBaseDictSource().getDict_id());

???????? map.put("cust_industry", customer.getBaseDictIndustry().getDict_id());

???????? map.put("cust_level", customer.getBaseDictLevel().getDict_id());

???????? map.put("cust_phone", customer.getCust_phone());

???????? map.put("cust_mobile", customer.getCust_mobile());

???????? map.put("cust_image", customer.getCust_image());



???????? // 轉(zhuǎn)成json

?? ?????JSONObject jsonObject = JSONObject.fromObject(map);

????????

???????? //System.out.println(jsonObject);

???????? // 將JSON數(shù)據(jù)傳到頁面

???????? try {

????????????? ServletActionContext.getResponse().setContentType("text/html;charset=UTF-8");

????????????? ServletActionContext.getResponse().getWriter().println(jsonObject.toString());

???????? } catch (IOException e) {

????????????? e.printStackTrace();

???????? }

???????? return NONE;

???? }

????

???? // 客戶修改的方法

???? public String update() {

???????? // 修改圖片,獲得原來的圖片同時(shí),上傳新圖片

???????? if (file != null) {

????????????? String cust_image = customer.getCust_image();

????????????? if (cust_image != null && !cust_image.trim().equals("")) {

?????????????????? File exitfile = new File(cust_image);

?????????????????? if (exitfile.exists()) {

?????????????????????? exitfile.delete();

?????????????????? }

????????????? }



????????????? // 上傳圖片

????????????? // 設(shè)置上傳路徑

????????????? String directory = "/upload";

????????????? String path = ServletActionContext.getServletContext().getRealPath(directory);



????????????? // System.out.println(file);

????????????? // 為了防止一個(gè)目錄下存放相同的文件名:使用隨機(jī)文件名

????????????? String uuidFileName = UploadUtils.getUuidFileName(fileFileName);

????????????? // 為了防止一個(gè)目錄下存放的文件過多:目錄分離

????????????? String realPath = UploadUtils.getPath(uuidFileName);

????????????? // 創(chuàng)建目錄

????????????? String url = path + realPath;

????????????? File ml = new File(url);

????????????? if (!ml.exists()) {

?????????????????? ml.mkdirs();

????????????? }

????????????? // 文件上傳

????????????? File dictFile = new File(url + "/" + uuidFileName);

????????????? try {

?????????????????? FileUtils.copyFile(file, dictFile);

????????????? } catch (IOException e) {

?????????????????? // TODO Auto-generated catch block

?????????????????? e.printStackTrace();

????????????? }

????????????? //重新設(shè)置image的值

????????????? customer.setCust_image(url + "/" + uuidFileName);

???????? }



???????? customerService.update(customer);

???????? return "updateSuccess";

}

4.3編寫service

//根據(jù)id查詢客戶

???? @Override

???? public Customer findById(Long cust_id) {

???????? return customerDao.findById(cust_id) ;

???? }

????????

???? //修改客戶業(yè)務(wù)層方法

???? @Override

???? public void update(Customer customer) {

???????? customerDao.update(customer);

}

?

4.4編寫Dao

//根據(jù)id查詢

???? @Override

???? public Customer findById(Long cust_id) {

???????? return this.getHibernateTemplate().get(Customer.class,cust_id);

???? }

??? //刪除客戶

???? @Override

???? public void delete(Customer customer) {

???????? this.getHibernateTemplate().delete(customer);

???? }

??? //修改客戶方法

???? @Override

???? public void update(Customer customer) {

???????? this.getHibernateTemplate().update(customer);

}

4.4配置跳轉(zhuǎn)頁面

?

<!-- 客戶管理Action -->

???????? <action name="customer_*" class="customerAction" method="{1}">

????????????? <result name="saveUI" >/customer/add.jsp</result>

????????????? <result name="findAll">/customer/list.jsp</result>

????????????? <result name="deleteSuccess" type="redirect">/customer_findAll.action</result>

????????????? <result name="updateSuccess" type="redirect">/customer_findAll.action</result>

????????????? <result name="input">/customer/add.jsp</result>

????????????? <!-- 配置文件上傳攔截器 -->

????????????? <interceptor-ref name="defaultStack">

????????????? ??? <param name="fileUpload.maximumSize">5242880</param>

????????????? ??? <param name="fileUpload.allowedExtensions">.jpg,.bmp,.png,.txt,.gif</param>

????????????? </interceptor-ref>

???? </action>
5. CRM:客戶管理-按條件查詢客戶

在客戶列表上顯示出相應(yīng)條件,根據(jù)輸入條件查詢客戶。

CRM第三天:完成客戶管理的分頁查詢,圖片上傳,條件查詢,修改客戶,刪除客戶的功能_文件上傳_04

?


<form name="customerForm"

?????????????????? action="${pageContext.request.contextPath }/customer_findAll.action"

?????????????????? method="post">



?????????????????? <div id="search_bar" class="mt10">

?????????????????????? <div class="box">

??????????????????????????? <div class="box_border">

???????????????????????????????? <div class="box_top">

???????????????????????????????????? <b class="pl15">搜索</b>

??????????????????????????? ???? </div>

???????????????????????????????? <div class="box_center pt10 pb10">

???????????????????????????????????? <table class="form_table" cellspacing="0" cellpadding="0"

????????????????????????????????????????? border="0">

????????????????????????????????????????? <tbody>

?????????????????????????????????????????????? <tr>

?????????????????????????????????????????????????? <td>客戶名稱:</td>

?????????????????????????????????????????????????? <td><input type="text" name="cust_name"

?????????????????????????????????????????????? ???????? value="<s:property value="cust_name" />"

??????????????????????????????????????????????????????? class="input-text lh25" size="10"></td>

?????????????????????????????????????????????????? <td>客戶來源:</td>

?????????????????????????????????????????????????? <td><span class="fl">

???????????????????????????????????????????????????????????? <div class="select_border">

???????????????????????????????????????????????????????????????? <div class="select_containers ">

???????????????????????????????????????????????????????????????? ???? <select id="tjcust_source" name="baseDictSource.dict_id"

?????????????????????????????????????????????????????????????????????????? class="select">

?????????????????????????????????????????????????????????????????????????? <option value="">請選擇</option>



????????????????????????????????????????????????????????????????????? </select>

???????????????????????????????????????????????????????????????? </div>

???????????????????????????????????????????????????????????? </div>

?????????????????????????????????????????????????? </span></td>

?????????????????????????????????????????????????? <td>客戶行業(yè):</td>

????????????? ???????????????????????????????????? <td><span class="fl">

???????????????????????????????????????????????????????????? <div class="select_border">

???????????????????????????????????????????????????????????????? <div class="select_containers ">

????????????????????????????????????????????????????????????????????? <select id="tjcust_industry"

?????????????????????????????????????????????????????????????????????????? name="baseDictIndustry.dict_id" class="select">

?????????????????????????????????????????????????????????????????????????? <option value="">請選擇</option>



????????????????????????????????????????????????????????????????????? </select>

???????????????????????????????????????????????????????????????? </div>

???????????????????????????????????????????????????????????? </div>

?????????????????????????????????????????????????? </span></td>

?????????????????????????????????????????????????? <td>客戶級別:</td>

?????????????????????????????????????????????????? <td><span class="fl">

???????????????????????????????????????????????????????????? <div class="select_border">

???????????????????????????????????????????????????????????????? <div class="select_containers ">

???????? ???????????????????????????????????????????????????????????? <select id="tjcust_level" name="baseDictLevel.dict_id"

?????????????????????????????????????????????????????????????????????????? class="select">

?????????????????????????????????????????????????????????????????????????? <option value="">請選擇</option>



????????????????????????????????????????????????????????????????????? </select>

???????????????????????????????????????????????????????????????? </div>

???????????????????????????????????????????????????????????? </div>

?????????????????????????????????????????????????? </span></td>





?????????????????????????????????????????????????? <td><input type="submit" name="button"

??????????????????????????????????????????????????????? class="btn btn82 btn_search" value="查詢"></td>

?????????????????????????????????????????????? </tr>



????????????????????????????????????????? </tbody>

???????????????????????????????????? </table>

???????????????????????????????? </div>



??????????????????????????? </div>

?????????????????????? </div>

?????????????????? </div>



?????????????????? <div id="table" class="mt10">

?????????????????????? <div class="box span10 oh">

??????????????????????????? <table width="100%" border="0" cellpadding="0" cellspacing="0"

???????????????????????????????? class="list_table">

???????????????????????????????? <tr>

???????????????????????????????????? <th width="100">客戶名稱</th>

???????????????????????????????????? <th width="100">客戶級別</th>

???????????????????????????????????? <th width="100">客戶來源</th>

???????????????????????????????????? <th width="100">客戶所屬行業(yè)</th>

?????????????????? ?????????????????? <th width="100">電話</th>

???????????????????????????????????? <th width="100">手機(jī)</th>

???????????????????????????????????? <th width="130">操作</th>

???????????????????????????????? </tr>

???????????????????????????????? <s:iterator value="list">



???????????????????????????????????? <tr class="tr">

????????????????????????????????????????? <td><s:property value="cust_name" /></td>

????????????????????????????????????????? <td><s:property value="baseDictLevel.dict_item_name" /></td>

????????????????????????????????????????? <td><s:property value="baseDictSource.dict_item_name" /></td>

????????????????????????????????????????? <td><s:property value="baseDictIndustry.dict_item_name" /></td>

????????????????????????????????????????? <td><s:property value="cust_phone" /></td>

????????????????????????????????????????? <td><s:property value="cust_mobile" /></td>

????????????????????????????????????????? <td><input type="button" name="button"

?????????????????????????????????????????????? class="btn btn82 btn_add" id="modifyBtn"

?????????????????????????????????????????????? onclick="toUpdate('<s:property value="cust_id"/>')" value="修改">

?????????????????????????????????????????????? <input type="button" name="button" class="btn btn82 btn_del"

?????????????????????????????????????????????? onclick="toDelete('<s:property value="cust_id"/>')" value="刪除"></td>



???????????????????????????????????? </tr>

???????????????????????????????? </s:iterator>



??????????????????????????? </table>

??????????????????????????? <div class="page mt10">



???????????????????????????????? <div class="pagination">

???????????????????????????????????? <ul>

????????????????????????????????????????? <li class="disabled"><span> 共<s:property

??????????????????????????????????????????????????????? value="totalCount" />條記錄, 共 <s:property value="totalPage" />頁

????????????????????????????????????????? </span></li>

????????????????????????????????????????? <li><span> 每頁顯示記錄數(shù): <select name="pageSize"

?????????????????????????????????????????????????? onchange="to_page()">

??????????????????????????????????????????????????????? <option value="5" <s:if test="pageSize==5">selected</s:if>>5條</option>

??????????????????????????????????????????????????????? <option value="10" <s:if test="pageSize==10">selected</s:if>>10條</option>

??????????????????????????????????????????????????????? <option value="20" <s:if test="pageSize==20">selected</s:if>>20條</option>

?????????????????????????????????????????????? </select>



????????????????????????????????????????? </span></li>





????????????????????????????????????????? <s:if test="page!=1">

?????????????????????????????????????????????? <li><a href="javascript:to_page(1)">首頁</a></li>

?????????????????????????????????????????????? <li><a

?????????????????????????????????????????????????? href="javascript:to_page(<s:property value="page-1" />)">上一頁</a></li>

????????????????????????????????????????? </s:if>



????????????????????????????????????????? <s:iterator var="i" begin="1" end="totalPage">

?????????????????????????????????????????????? <s:if test="#i==page">

?????????????????????????????????????????????????? <li class="active"><span><s:property value="#i" />

?????????????????????????????????????????????????? </span></li>

?????????????????????????????????????????????? </s:if>

?????????????????????????????????????????????? <s:else>

?????????????????????????????????????????????????? <li><a

??????????????????????????????????????????????????????? href="javascript:to_page(<s:property value="#i" />)"><s:property

???????????????????????????????????????????????????????????????? value="#i" /></a></li>

?????????????????????????????????????????????? </s:else>

????????????????????????????????????????? </s:iterator>



????????????????????????????????????????? <s:if test="page!=totalPage">

?????????????????????????????????????????????? <li><a

?????????????????????????????????????????????????? href="javascript:to_page(<s:property value="page+1" />)">下一頁</a></li>

?????????????????????????????????????????????? <li><a

?????????????????????????????????????????????????? href="javascript:to_page(<s:property value="totalPage" />)">末頁</a></li>

????????????????????????????????????????? </s:if>

????????????????????????????????????????? <li>到第 <input class="input-text lh25" type="text"

?????????????????????????????????????????????? id="page" name="page" size="2" height="10px" />頁 <input

?????????????????????????????????????????????? class="ext_btn" type="button" value="GO" onclick="to_page()" />



????????????????????????????????????????? </li>

???????????????????????????????????? </ul>

???????????????????????????????? </div>

??????????????????????????? </div>

????????????? </form>

?

5.1在列表頁面異步加載查詢條件的數(shù)據(jù)

//查詢條件異步查詢字典數(shù)據(jù)

???? //頁面加載函數(shù)就會(huì)執(zhí)行:

???? $(function() {

???????? // 加載客戶來源

???????? $

?????????????????? .post(

??????????????????????????? "${pageContext.request.contextPath }/baseDict_findByTypeCode.action",

??????????????????????????? {

???????????????????????????????? "dict_type_code" : "002"

??????????????????????????? },

??????????????????????????? function(data) {

???????????????????????????????? //遍歷JOSN類型的數(shù)據(jù)

???????????????????????????????? $(data).each(

????????????????????????????????????????? function(i, n) {

?????????????????????????????????????????????? $("#tjcust_source").append(

??????????????????????????????????????????????????????? "<option value='"+n.dict_id+"'>"

???????????????????????????????????????????????????????????????? + n.dict_item_name

???????????????????????????????????????????????????????????????? + "</option>");

????????????????????????????????????????? });

????????????????????????????????

???????????????????????????????? //回顯選中的數(shù)據(jù)

???????????????????????????????? $(

????????????????????????????????????????? "#tjcust_source option[value='${model.baseDictSource.dict_id}']")

????????????????????????????????????????? .prop("selected", "selected");

??????????????????????????? }, "json");



???????? // 加載客戶所屬行業(yè)

???????? $

?????????????????? .post(

??????????????????????????? "${pageContext.request.contextPath }/baseDict_findByTypeCode.action",

??????????????????????????? {

???????????????????????????????? "dict_type_code" : "001"

??????????????????????????? },

??????????????????????????? function(data) {

???????????????????????????????? //遍歷JOSN類型的數(shù)據(jù)

???????????????????????????????? $(data).each(

????????????????????????????????????????? function(i, n) {

?????????????????????????????????????????????? $("#tjcust_industry").append(

??????????????????????????????????????????????????????? "<option value='"+n.dict_id+"'>"

???????????????????????????????????????????????????????????????? + n.dict_item_name

???????????????????????????????????????????????????????????????? + "</option>");

????????????????????????????????????????? });

???????????????????????????????? $(

????????????????????????????????????????? "#tjcust_industry option[value='${model.baseDictIndustry.dict_id}']")

????????????????????????????????????????? .prop("selected", "selected");

??????????????????????????? }, "json");



???????? // 加載客戶級別

???????? $

???????? ???????? .post(

??????????????????????????? "${pageContext.request.contextPath }/baseDict_findByTypeCode.action",

??????????????????????????? {

???????????????????????????????? "dict_type_code" : "006"

??????????????????????????? },

??????????????????????????? function(data) {

???????????????????????????????? //遍歷JOSN類型的數(shù)據(jù)

???????????????????????????????? $(data).each(

????????????????????????????????????????? function(i, n) {

?????????????????????????????????????????????? $("#tjcust_level").append(

??????????????????????????????????????????????????????? "<option value='"+n.dict_id+"'>"

???????????????????????????????????????????????????????????????? + n.dict_item_name

???????????????????????????????????????????????????????????????? + "</option>");

????????????????????????????????????????? });

???????????????????????????????? $(

????????????????????????????????????????? "#tjcust_level option[value='${model.baseDictLevel.dict_id}']")

????????????????????????????????????????? .prop("selected", "selected");

??????????????????????????? }, "json");

???? });

5.2點(diǎn)擊查詢提交到action

<form name="customerForm"

?????????????????? action="${pageContext.request.contextPath }/customer_findAll.action"

?????????????????? method="post">

?

5.3編寫action

// 查詢客戶列表方法

???? public String findAll() {

???????? // 接收分頁參數(shù)

???????? // 最好使用DetachedCriteria對象(帶分頁的條件查詢)

???? ???? DetachedCriteria detachedCriteria = DetachedCriteria.forClass(Customer.class);

???????? // 設(shè)置條件

???????? if (customer.getCust_name() != null && !customer.getCust_name().trim().equals("")) {

????????????? detachedCriteria.add(Restrictions.like("cust_name", customer.getCust_name() + "%"));

???????? }

???????? if (customer.getBaseDictSource() != null) {

????????????? if (customer.getBaseDictSource().getDict_id() != null

?????????????????????? && !customer.getBaseDictSource().getDict_id().trim().equals("")) {

?????????????????? detachedCriteria

??????????????????????????? .add(Restrictions.like("baseDictSource.dict_id", customer.getBaseDictSource().getDict_id()));

????????????? }



???????? }

???????? if (customer.getBaseDictIndustry() != null) {

????????????? if (customer.getBaseDictIndustry().getDict_id() != null

?????????????????????? && !customer.getBaseDictIndustry().getDict_id().trim().equals("")) {

?????????????????? detachedCriteria.add(

??????????????????????????? Restrictions.like("baseDictIndustry.dict_id", customer.getBaseDictIndustry().getDict_id()));

????????????? }



???????? }

???????? if (customer.getBaseDictLevel() != null) {

????????????? if (customer.getBaseDictLevel().getDict_id() != null

?????????????????????? && !customer.getBaseDictLevel().getDict_id().trim().equals("")) {

?????????????????? detachedCriteria

??????????????????????????? .add(Restrictions.like("baseDictLevel.dict_id", customer.getBaseDictLevel().getDict_id()));

????????????? }



???????? }



???????? // 調(diào)用業(yè)務(wù)層查詢

???????? PageBean<Customer> pageBean = customerService.findByPage(detachedCriteria, page, pageSize);

???????? ActionContext.getContext().getValueStack().push(pageBean);



???????? return "findAll";

???? }

?

這時(shí)Service和Dao都沒有發(fā)生變化,不需要修改。

?

?

?

在做這些的時(shí)候遇到了一些bug,有時(shí)一個(gè)bug能找一兩個(gè)小時(shí),特別是前端JS交互這方面,許多知識點(diǎn)都忘了,邊在網(wǎng)上查資料邊編寫代碼,導(dǎo)致進(jìn)度有點(diǎn)慢。這應(yīng)該是因?yàn)樽约鹤罱鼪]有做過項(xiàng)目的原因吧,學(xué)而不思則罔,古人誠不欺我,看來自己以后還需要多加強(qiáng)練習(xí)才行,現(xiàn)在后臺的框架和前端頁面都基本搭建好了,后邊進(jìn)度應(yīng)該會(huì)快一些了。

?

本文摘自 :https://blog.51cto.com/u

開通會(huì)員,享受整站包年服務(wù)立即開通 >