1. Дистальный стратифицированной

1) Создание двух каталогов службы и новый контроллер в каталоге Js под веб-проекта, как показано на рисунке:

2) управление брендом код расслоение плотной извлекаются контроллером службы, как показано на рисунке;

brandService.js

app.service("brandService",function($http){
	// 查询所有品牌列表
	this.findAll = function(){
		return $http.get("../brand/findAll.do");
	}
	
	// 查询品牌分页列表
	this.findPage = function(page,size,entity){
		return $http.post("../brand/findPage.do?page=" + page + "&size=" + size,entity);
	}
	
	// 添加
	this.add = function(entity){
		return $http.post("../brand/add.do",entity);
	}
	
	// 修改
	this.update = function(entity){
		return $http.post("../brand/update.do",entity);
	}
	
	// 查询单个品牌
	this.findOne = function(id){
		return $http.get("../brand/findOne.do?id="+id);
	}
	
	// 删除
	this.dele = function(ids){
		return $http.get("../brand/delete.do?ids="+ids);
	}
	
});

brandController.js

app.controller("brandController",function($scope,$http,brandService){
	// 查询所有品牌列表
	$scope.findAll = function(){
		brandService.findAll().success(function(response){
			$scope.list = response;
		});
	}
	
	//分页控件配置 
	$scope.paginationConf = {
		 currentPage: 1,
		 totalItems: 10,
		 itemsPerPage: 10,
		 perPageOptions: [10, 20, 30, 40, 50],
		 onChange: function(){
			$scope.reloadList();
		 }
	}; 
	
	
	// 刷新列表
	$scope.reloadList = function(){
		$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
	}
	$scope.seachEntity = {};
	// 查询品牌分页列表
	$scope.findPage = function(page,size){
		brandService.findPage(page,size,$scope.seachEntity).success(function(response){
			$scope.list = response.rows;						// 显示当前页数据
			$scope.paginationConf.totalItems = response.total;  // 修改总记录数
		});    			
	}
	
	// 新增/修改
	$scope.save = function(){
		var object = null;
		if($scope.entity.id){
			object = brandService.update($scope.entity);
		} else {
			object = brandService.add($scope.entity);
		}
		object.success(function(response){
			if(response.success){
				$scope.reloadList();
			} else {
				alert(response.message);
			}
		});
		
	}
	
	// 根据id查询
	$scope.findOne = function(id){
		brandService.findOne(id).success(function(response){
			$scope.entity = response;
		});
	}
	
	// 定义一个变量用于记录用户选中的记录id
	$scope.selectIds = [];
	// 定义选中函数
	$scope.updateSelection = function($event,id){
		if($event.target.checked){  // 如果复选框被选中了
			$scope.selectIds.push(id);
		} else {
			$scope.selectIds.splice($scope.selectIds.indexOf(id), 1);
		}
	}
	
	// 删除
	$scope.dele = function(){
		brandService.dele($scope.selectIds).success(function(response){
			if(response.success){
				$scope.reloadList();
				$scope.selectIds = [];
			} else {
				alert(response.message);
			}
		});
	}
});

3), определенные в модуле файлов base.js

base.js

// 定义模块
var app = angular.module("pinyougou",[]);

base_pagination.js

// 定义模块
var app = angular.module("pinyougou",['pagination']);

4) введение JS-файлы brand.html страницы

5) извлечение общего контроллера

baseController.js

app.controller("baseController",function($scope){
	/*
	 * 分页控件
	 * */
	// 1. 分页控件配置 
	$scope.paginationConf = {
		 currentPage: 1,
		 totalItems: 10,
		 itemsPerPage: 10,
		 perPageOptions: [10, 20, 30, 40, 50],
		 onChange: function(){
			$scope.reloadList();
		 }
	}; 
	
	// 2. 刷新列表
	$scope.reloadList = function(){
		$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage);
	}
	
	/* 
	 * 3. 搜索实体bean定义
	 */
	$scope.seachEntity = {};
	
	/*
	 * 复选框勾选
	 * 
	 * */
	// 1. 定义一个变量用于记录用户选中的记录id
	$scope.selectIds = [];
	// 2. 定义选中函数
	$scope.updateSelection = function($event,id){
		if($event.target.checked){  // 如果复选框被选中了
			$scope.selectIds.push(id);
		} else {
			$scope.selectIds.splice($scope.selectIds.indexOf(id), 1);
		}
	}
	
});

2. Управление Спецификация

2.1 Структура таблицы

tb_specification Спецификация Таблица

поле	тип	длина	смысл
Я бы	BigInt		Первичный ключ
Spec_name	Varchar	255	Технические характеристики Наименование

tb_specification_option Технические параметры Таблица

поле	тип	длина	смысл
Я бы	BigInt		Первичный ключ
OPTION_NAME	Varchar	200	Технические параметры Наименование
Spec_id	BigInt	30	Спецификация ID
заказы	Int	11	последовательность

2.2 Технические характеристики Список

2.2.1 введенные JS

    <!-- 引入angularjs -->
    <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
    
    <!-- 分页组件开始 -->
	<script type="text/javascript" src="../plugins/angularjs/pagination.js"></script>
	<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
	<!-- 分页组件结束 -->
   
   <!-- 引入js文件 -->
    <script type="text/javascript" src="../js/base_pagination.js"></script>
    <script type="text/javascript" src="../js/service/specificationService.js"></script>
    <script type="text/javascript" src="../js/controller/baseController.js"></script>
    <script type="text/javascript" src="../js/controller/specificationController.js"></script>

2.2.2 Написать обслуживание с расслоения плотного слоем контроллера

2.2.3 страница преобразования

1) Добавить страницу плагин

2) добавление соответствующей директивы

2.2.4 фоновых код

2.2.5 Тестирование

Новый 2,3 Спецификация

2.3.1 передний конец

Внедрение новой линии A.

1) HTML

<tr ng-repeat = "item in entity.specificationOptionalList">
                           
    <td>
	<input  class="form-control" placeholder="规格选项" ng-model="item.optionName"> 
    </td>
    <td>
	<input  class="form-control" placeholder="排序" ng-model="item.orders"> 
    </td>
	<td>
		<button type="button" class="btn btn-default" title="删除" ng-click="deleTableRow($index)"><i class="fa fa-trash-o"></i> 删除</button>
	</td>
</tr>

2) JS код

$scope.addTableRow = function(){
	$scope.entity.specificationOptionalList.push({});
}

B. реализация удаления строк

Реализация идей: пройти множество значений индекса в каждой строке, удалить коллекцию

$scope.deleTableRow = function(index){
		$scope.entity.specificationOptionalList.splice(index,1);
	}

C. Код бэкенд

1) сочетание класса сущностей

package com.pinyougou.povo;

import java.io.Serializable;
import java.util.List;

import com.pinyougou.pojo.TbSpecification;
import com.pinyougou.pojo.TbSpecificationOption;

/**
 * 规格组合实体bean
 * @author Administrator
 *
 */
public class Specification implements Serializable{
	private TbSpecification specification;
	private List<TbSpecificationOption> specificationOptionalList;
	
	public TbSpecification getSpecification() {
		return specification;
	}
	public void setSpecification(TbSpecification specification) {
		this.specification = specification;
	}
	public List<TbSpecificationOption> getSpecificationOptionalList() {
		return specificationOptionalList;
	}
	public void setSpecificationOptionalList(List<TbSpecificationOption> specificationOptionalList) {
		this.specificationOptionalList = specificationOptionalList;
	}
	
}

2) Mapper добавить ключ возврата основной файл

3) интерфейс и реализация

Интерфейс:

public void add(Specification specification);

Реализовать;

public void add(Specification specification) {
		
		if(null != specification){
			TbSpecification tbSpecification = specification.getSpecification();
			specificationMapper.insert(tbSpecification);
			
			List<TbSpecificationOption> list = specification.getSpecificationOptionalList();
			for(TbSpecificationOption o : list){
				o.setSpecId(tbSpecification.getId());
				specificationOptionMapper.insert(o);
			}
		}
		
	}

4) веб-слои

Добавить в com.pinyougou.manager.controller.SpecificationController

@RequestMapping("/add")
	public Result add(@RequestBody Specification specification){
		try {
			specificationService.add(specification);
			return new Result(true, "增加成功");
		} catch (Exception e) {
			e.printStackTrace();
			return new Result(false, "增加失败");
		}
	}

2.4 изменения в спецификации

По спецификации ID, в спецификации запроса и параметров спецификации списка фоновой, а затем возвращать результаты с помощью комбинации классов сущностей

2.5 Удаление Технические характеристики

Удалять спецификации, мы должны также помнить, чтобы удалить связанные параметры спецификации

3. Управление шаблонами

3.1 Структура таблицы

tb_type_template таблица шаблона

поле	тип	длина	смысл
Я бы	BigInt		Первичный ключ
имя	Varchar	80	Имя шаблона
Spec_ids	Varchar	1000	Связанные спецификации (формат JSON)
brand_ids	Varchar	1000	Бренд ассоциация (формат JSON)
custom_attribute_items	Varchar	2000	扩展属性

3.2 模板列表展示

1）引入js文件

2）修改HTML代码

3）修改js代码

4）测试结果

3.3 品牌下拉列表展示

3.3.1 后端新增查询品牌方法

1）dao

mapper

<!-- 查询品牌数据 -->
  <select id="selectOptions" resultType="map">
  	select id , name text from tb_brand
  </select>

接口：

/**
	 * 查询品牌数据
	 * @return
	 */
	List<Map<Long, String>> selectOptions();

2）服务接口与实现

接口：

	/**
	 * 查询品牌数据
	 * @return
	 */
	List<Map<Long, String>> selectOptions();

实现类；

	@Override
	public List<Map<Long, String>> selectOptions() {
		return brandMapper.selectOptions();
	}

3）web层

	@RequestMapping("/selectOptionList")
	public List<Map<Long, String>> selectOptionList(){
		return brandService.selectOptions();
	}

3.3.2 前端

1）js代码

在brandService.js中添加方法

	// 查询品牌信息
	this.selectOptionList = function(){
		return $http.get("../brand/selectOptionList.do");
	}

在typeTemplateController.js中引入brandService

在typeTemplateController.js中添加方法

// 多选
	$scope.brandList={data:[]};//定义品牌列表数据结构
	$scope.findBrandList = function() {
		brandService.selectOptionList().success(function(response) {
			$scope.brandList = {data:response};
		});
	}

2）前台页面改造

在新建按钮添加点击事件

3.3.3 测试

3.3 规格下拉列表

实现方式同品牌下拉列表

3.4 新增扩展属性

1）新增1行与删除1行js

// 新增扩展属性
	$scope.addtableRow = function() {
		$scope.entity.customAttributeItems.push({});
	}
	
	// 删除扩展属性
	$scope.dele = function(index){
		$scope.entity.customAttributeItems.splice(index,1);
	}

2）页面属性绑定

3）添加点击事件

4）测试

点击保存

3.5 修改模板

1）在修改button上添加点击事件findOne

2）修改findOne方法

	//查询实体 
	$scope.findOne=function(id){				
		typeTemplateService.findOne(id).success(
			function(response){
				$scope.entity= response;	
				
				// 转换字符串为json
				$scope.entity.specIds = JSON.parse($scope.entity.specIds);
				$scope.entity.brandIds = JSON.parse($scope.entity.brandIds);
				$scope.entity.customAttributeItems = JSON.parse($scope.entity.customAttributeItems);
			}
		);				
	}

3）测试：给电视添加重量扩展属性

注意：从数据库中查询出来的是字符串，我们必须将其转换为json对象才能实现信息的回显。

3.6 优化模板列表显示

模板列表品牌，规格和扩展属性，我们数据库中存储的是json格式的字符串，所以我们在页面不能直接使用，需要转换一下。

1）在baseController定义转换函数

	/*
	 * Json字符串获取指定的key的字符串
	 * */
	$scope.jsonToString = function(jsonstr,key) {
		if(jsonstr){
			var json=JSON.parse(jsonstr);//将json字符串转换为json对象
			var value="";
			for(var i=0;i<json.length;i++){		
				if(i>0){
					value+=","
				}
				value+=json[i][key];			
			}
			return value;

		}
	}

2）页面中调用该函数

3）测试

武汉小喽啰

发布了205 篇原创文章 · 获赞 9 · 访问量 7931

私信关注

Характеристики и отличные торговые 03-- шаблоны управления проектами