spring-boot-vuejs

内容

vuejs 增删改查的demo,自动建表
数据连接池库采用了HikariCP
值得注意的地方时, 在component模块拥有的方法类似于

	var vm =new Vue({
 	el: '#app',
 	router:new VueRouter({
	 	routes:[
	 		{ path: '/', redirect: 'userIndex' },
	 		{ path: '/userIndex', name:'userIndex', component: UserIndex},
	 		{ path: '/userInput/:userId',name:'userInput', component: UserInput },
	 	]
 	})
	});
	
	
	在组件里面获取router(路由): this.$router
	在组件里面获取参数:this.$route.params.xxxx this.$route.query.xxxxx xxxx 是你要获取的参数
	这两个变量是不同的
	
	
	加入分页的功能
	
	jqgrid 数据展示
	
	jqgrid 增删改查:
	{
		jqgrid 标准的修改流程(更加优雅):http://localhost/user/jqgridDemo.html
		jqgrid 自定义按钮修改(自定义):http://localhost/user/orders.html
	}
	
	
	jqgrid [合并单元格:](http://www.cnblogs.com/puke/archive/2012/10/17/2728435.html)
	请查看效果:http://localhost/user/merge.html
	
	gons json转对象
	
	typeahead:输入框文本自动提示功能, 返回值为json , jsonp都可以
	依赖的js为:http://www.guriddo.net/demo/js/bootstrap3-typeahead.js
	核心代码如下:

 	$(".typeahead").typeahead({ 
					source: function(query, proxy) {
						$.ajax({
							url: '/autoJson?callback=?',
							dataType: "jsonp",
							data: {term: query},
							
							/***完整的写法, 指定json中的某个字段(属性)***/
							//方法一:
							success : function (data){
				 var arr = [];
				 for (i in data)
				 {
				 arr.push(data[i]['name']);
				 }
				 proxy(arr);
					 },
							//方法二:
							success : proxy //简写
						});
					}
			 });

	Excel导出 demo 
	
	
	今天从Excel4J源代码发现可以通过注解的方式在JavaBean中来标记想要导出Excel的字段,具体代码如下:
	在注解类加入了表头标题, 日期格式化,数字格式化, 以及文字居中的设置,开启用户自定义的选择

	public static List<ExcelFieldBean> analyseExcelField(Class<?> clazz) {
		List<ExcelFieldBean> excleFieldBeanList = new ArrayList<>();
		for(Class<?> c = clazz; c != Object.class; c = c.getSuperclass()){
			Field[] declaredFields = c.getDeclaredFields();
			for (Field field : declaredFields) {
				if(field.isAnnotationPresent(ExcelField.class)){
					ExcelField excelField = field.getAnnotation(ExcelField.class);
					ExcelFieldBean excelFieldBean = new ExcelFieldBean(excelField.title(), excelField.order(), field.getName(), field.getType());
					excleFieldBeanList.add(excelFieldBean);
				}
				
			}
	}
	//排序
	Collections.sort(excleFieldBeanList);
	return excleFieldBeanList;
}

	还有一个核心的方法,那就是构造多行不规则的表头的问题,比较复杂, 需要实现接口ExcelHeaderData , 需要实现方法buildHeaderDataList()

	public static void buildTableHeader(HSSFWorkbook wb, HSSFSheet sheet, ExcelHeaderData excelHeaderData, int rownum) {
		List<ExcelRow> headerRows = excelHeaderData.buildHeaderDataList();
		int totalCols = getTotalCols(headerRows);
		logger.trace("totalColspan :" + totalCols);
		HSSFCellStyle titleStyle = ExcelUtil.titleStyle(wb);
		for (int r = 0; r < headerRows.size(); r++) {
			Row row = null;
			Cell cell = null;
			row = sheet.createRow(rownum + r);
			increaseRow();//增加行
			ExcelRow excelRow = headerRows.get(r);
			LinkedList<ExcelCell> rows = excelRow.getRows();
			for (int c = 0; c < totalCols; c++) {
				ExcelCell excelCell = rows.get(c);
				int colspan = excelCell.getColspan();
				int rowspan = excelCell.getRowspan();
				String title = excelCell.getTitle();
				int colIndex = excelCell.getColIndex();
				cell = row.createCell(c);
				cell.setCellStyle(titleStyle);
				if (colIndex == c) {
					if(null != title){
						cell.setCellValue(title);
					}
					if (rowspan > 1 || colspan > 1) {
						CellRangeAddress region = new CellRangeAddress(rownum + r, rownum + r + rowspan - 1, c, c + colspan - 1);
						sheet.addMergedRegion(region);
					}
				}
			}
		}
	}

dataInit : function (element)
{
 $(element).attr("autocomplete", "off").typeahead(
 {
 appendTo : "body",
 source : function (query, proxy)
 {
 $.ajax(
 {
 url : '/autoJson?callback=?',
 dataType : "jsonp",
 data :
 {
 term : query
 },
 success : proxy
 }
 );
 }
 }
 );
}

	@ResponseBody
	@RequestMapping(value = "/autoJson", method = RequestMethod.GET)
	public JSONPObject autoScriptUpdate(@RequestParam("term") String query,
							@RequestParam(value ="callback", required=true) String callback,
							@RequestParam(value ="_", required=true) String line){
		
		List<Order> orders = orderRepository.findAll();
		logger.info("autoJson run....");
		logger.info(callback);
		
		List<Entry> list = new ArrayList<>();
		for (Order order : orders) {
			if(order.getProduceName().contains(query)){
				String str = order.getProduceName();
				list.add(new Entry(str,str));
			}
		}
		System.out.println(list);
		
		return new JSONPObject(callback, list); 
	}

Excel 一些常用的API

一、设置背景色:

二、设置边框:

三、设置居中:

四、设置字体:

五、设置列宽:

六、设置自动换行:

七、合并单元格:

反射:

效果图片

JQgrid

JQgrid 增删改查的demo

项目启动后的链接地址:http://localhost/user/orders.html<br/>
效果:

JQgrid 单元格合并

需要注意的地方

<script type="text/javascript" src='/user/userIndex.js'></script>
<script type="text/javascript" src='/user/userInput.js'></script>
在/user/userIndex.html 页面其实引入的可以是js 文件而不是vue文件
vue.js 不可以引入关键字import 这就是与vue-cli或者vue+webpack的区别之处