Maven+SSM项目整合(二)--增删改查及搜索

一、增删改查及搜索后端

直接放controller层的代码，增删改查基础的操作，control层没有太复杂的

package com.cf.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.cf.common.pojo.PageResult;
import com.cf.common.pojo.Result;
import com.cf.pojo.TbProduct;
import com.cf.service.ProductService;

@RestController
@RequestMapping("/product")
public class ProductController {

	@Autowired
	private ProductService productService;
	
	/**
	 * 返回全部列表
	 * @return
	 */
	@RequestMapping("/findAll")
	public List<TbProduct> findAll(){
		return productService.findAll();
	}
	
	/**
	 * 返回分页的全部列表
	 * @param page
	 * @param rows
	 * @return
	 */
	@RequestMapping("/findPage")
	public PageResult findPage(int page, int rows) {
		return productService.findPage(page, rows);
	}
	
	/**
	 * 添加商品
	 * @param product
	 * @return
	 */
	@RequestMapping("/add")
	public Result add(@RequestBody TbProduct product) {
		try {
			productService.add(product);
			return new Result(true, "添加成功!");
		} catch (Exception e) {
			e.printStackTrace();
			return new Result(false, "添加失败！");
		}
	}
	
	/**
	 *根据选中的复选框删除商品，可多选
	 * @param ids
	 * @return
	 */
	@RequestMapping("/delete")
	public Result dele(int[] ids) {
		try {
			productService.del(ids);
			return new Result(true, "删除成功!");
		} catch (Exception e) {
			e.printStackTrace();
			return new Result(false, "删除失败!");
		}
	}
	
	/**
	 * 根据id查找商品
	 * @param pId
	 * @return
	 */
	@RequestMapping("/findOne")
	public TbProduct findOne(Integer pId) {
		return productService.findOne(pId);
	}
	
	/**
	 * 更新商品信息
	 * @param product
	 * @return
	 */
	@RequestMapping("/update")
	public Result update(@RequestBody TbProduct product) {
		try {
			productService.update(product);
			return new Result(true, "更新成功！");
		} catch (Exception e) {
			e.printStackTrace();
			return new Result(false, "更新失败！");
		}
	}
	
	/**
	 * 条件查询
	 * @param product
	 * @param page
	 * @param rows
	 * @return
	 */
	@RequestMapping("/search")
	public PageResult search(@RequestBody TbProduct product, int page, int rows) {
		return productService.search(product, page, rows);
	}
}

Service实现层：

也都很基础，常用这些操作

package com.cf.service.impl;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.cf.common.pojo.PageResult;
import com.cf.mapper.TbProductMapper;
import com.cf.pojo.TbProduct;
import com.cf.pojo.TbProductExample;
import com.cf.pojo.TbProductExample.Criteria;
import com.cf.service.ProductService;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;

@Service
public class ProductServiceImpl implements ProductService {
	
	@Autowired
	private TbProductMapper productMapper;

	//查询所有的商品列表
	@Override
	public List<TbProduct> findAll() {
		return productMapper.selectByExample(null);
	}

	@Override
	public PageResult findPage(int pageNum, int pageSize) {
		PageHelper.startPage(pageNum, pageSize);
		Page<TbProduct> page = (Page<TbProduct>) productMapper.selectByExample(null);
		return new PageResult(page.getTotal(), page.getResult());
	}

	@Override
	public void add(TbProduct product) {
		productMapper.insert(product);
	}

	@Override
	public void del(int[] ids) {
		for (int id : ids) {
			productMapper.deleteByPrimaryKey(id);
		}
	}

	@Override
	public TbProduct findOne(Integer pId) {
		return productMapper.selectByPrimaryKey(pId);
	}

	@Override
	public void update(TbProduct product) {
		productMapper.updateByPrimaryKey(product);
	}

	@Override
	public PageResult search(TbProduct product, int pageNum, int pageSize) {
		PageHelper.startPage(pageNum, pageSize);
		
		TbProductExample example = new TbProductExample();
		Criteria criteria = example.createCriteria();
		
		if(null != product) {
			if(null != product.getpName() && !"".equals(product.getpName())) {
				criteria.andPNameLike("%" + product.getpName() + "%");
			}
		}
		Page<TbProduct> page = (Page<TbProduct>) productMapper.selectByExample(example);
		return new PageResult(page.getTotal(), page.getResult());
	}
}

category的和product是一样的，就不放了。

二、前端

productController.js的，包括图片上传增删改查

//控制层 
app.controller('productController', function($scope, $controller,
		productService, categoryService, uploadService) {

	$controller('baseController', {
		$scope : $scope
	});// 继承

	// 读取列表数据绑定到表单中
	$scope.findAll = function() {
		productService.findAll().success(function(response) {
			$scope.list = response;
		});
	}

	// 分页
	$scope.findPage = function(page, rows) {
		productService.findPage(page, rows).success(function(response) {
			$scope.list = response.rows;
			$scope.paginationConf.totalItems = response.total;// 更新总记录数
		});
	}

	// 查询实体
	$scope.findOne = function(id) {
		productService.findOne(id).success(function(response) {
			$scope.entity = response;
		});
	}

	// 保存
	$scope.save = function() {
		var serviceObject;// 服务层对象
		if ($scope.entity.pId != null) {// 如果有ID
			serviceObject = productService.update($scope.entity); // 修改
		} else {
			serviceObject = productService.add($scope.entity);// 增加
		}
		serviceObject.success(function(response) {
			if (response.success) {
				// 重新查询
				$scope.reloadList();// 重新加载
			} else {
				alert(response.message);
			}
		});
	}

	// 批量删除
	$scope.dele = function() {
		// 获取选中的复选框
		productService.dele($scope.selectIds).success(function(response) {
			if (response.success) {
				$scope.reloadList();// 刷新列表
				$scope.selectIds = [];
			}
		});
	}

	$scope.searchEntity = {};// 定义搜索对象

	// 搜索
	$scope.search = function(page, rows) {
		productService.search(page, rows, $scope.searchEntity).success(
				function(response) {
					$scope.list = response.rows;
					$scope.paginationConf.totalItems = response.total;// 更新总记录数
				});
	}

	$scope.categoryList = []; // 定义商品分类列表
	// 查询商品分类列表
	$scope.findCategoryList = function() {
		categoryService.findAll().success(function(response) {
			$scope.selectCategoryList = response;
			for (var i = 0; i < response.length; i++) {
				$scope.categoryList[response[i].cId] = response[i].cName;
			}
		}
		)
	}

	// 上传图片
	$scope.uploadFile=function(){	  
		uploadService.uploadFile().success(function(response) {        	
        	if(response.success){//如果上传成功，取出url
        		$scope.entity.pPic=response.message;//设置文件地址
        	}else{
        		alert(response.message);
        	}
        }).error(function() {           
        	     alert("上传发生错误");
        });        
    };
    
});

三、上传图片

使用fastDFS上传图片

fastDFS的包，maven中央仓库是没有的，要自己去git上面下载然后安装到自己的仓库里，网上教程很多，可以搜到

需配置一下配置内容,重要的是服务器的配置：

# connect timeout in seconds
# default value is 30s
connect_timeout=30

# network timeout in seconds
# default value is 30s
network_timeout=60

# the base path to store log files
base_path=/home/fastdfs

# tracker_server can ocur more than once, and tracker_server format is
#  "host:port", host can be hostname or ip address
tracker_server=192.168.25.133:22122

#standard log level as syslog, case insensitive, value list:
### emerg for emergency
### alert
### crit for critical
### error
### warn for warning
### notice
### info
### debug
log_level=info

# if use connection pool
# default value is false
# since V4.05
use_connection_pool = false

# connections whose the idle time exceeds this time will be closed
# unit: second
# default value is 3600
# since V4.05
connection_pool_max_idle_time = 3600

# if load FastDFS parameters from tracker server
# since V4.05
# default value is false
load_fdfs_parameters_from_tracker=false

# if use storage ID instead of IP address
# same as tracker.conf
# valid only when load_fdfs_parameters_from_tracker is false
# default value is false
# since V4.05
use_storage_id = false

# specify storage ids filename, can use relative or absolute path
# same as tracker.conf
# valid only when load_fdfs_parameters_from_tracker is false
# since V4.05
storage_ids_filename = storage_ids.conf


#HTTP settings
http.tracker_server_port=80

#use "#include" directive to include HTTP other settiongs
##include http.conf

前端需要指定type=file的文件上传input

<input type="file" id="file" style="width:180px;" ng-click="entity.pPic={}"/>	

js里面将存储图片的路径存到了entity.pPic数组里做为选择完上传图片后的回显，以下是html页面的回显

<img  src="{{entity.pPic}}" width="200px" height="200px">

四、商品分类下拉列表

页面实现了商品分类的文字显示，但是修改时回显数据还没做好，显示的是数字。

html初始化时查询所有的category数据，将json传给页面

<select class="from-control" ng-model="entity.pCategory" ng-options="category.cId as category.cName for category in selectCategoryList"></select>

将json封装到了selectCategoryList里，使用以上语句回显数据。

category.cId as category.cName for

重点是以上语句设置select的值和文本部分。ng-model绑定对应的pojo属性。

五、效果

列表带图片显示

上传图片和商品分类效果：

新加的内容有点多，都不知道怎么写下来，只能自己看的懂了。前端的样式是改网上现有的模板。敲的时候还是要细心点，单词敲错了前端和后端什么错误都不报，找了半天发现敲错单词了取不到数据。。。