SpringBoot + VUE实现订单案例

Vue是一个前端的双向绑定类的框架，使用它完成前端页面逻辑非常方便，按照其约定可以高效完成前端复杂业务逻辑，用户不必再关心数据正确回显问题，只要数据格式是正确的，配置双向绑定规则是正确的，系统就能正确显示页面。尤其在单网页应用中，用法最为方便。如下介绍如何快速使用ＶＵＥ设计案例。

什么是双向绑定

Vue框架很核心的功能就是双向的数据绑定。 双向是指：HTML标签数据 绑定到 Vue对象，另外反方向数据也是绑定的。通俗点说就是，Vue对象的改变会直接影响到HTML的标签的变化，而且标签的变化也会反过来影响Vue对象的属性的变化。

开发步骤：

下载VUE

从官网下载

或从CDN下载

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

下载AXIOS

AXIOS是基于promise用于浏览器和node.js的http客户端

1、 利用npm安装npm install axios --save
2、 利用bower安装bower install axios --save
3、 直接利用cdn引入 https://unpkg.com/axios/dist/axios.min.js

SQL

create table t_order(order_id int auto_increment primary key,
	user_id varchar(100),payment int,payment_type int,
	order_status int,create_time datetime,payment_time datetime);
	
alter table t_order add province varchar(10);
alter table t_order add city varchar(10);
alter table t_order add county varchar(10);
	
create table t_orderitem(id int auto_increment primary key,
	item_id varchar(100),order_id int,item_num int,item_price int,
	total_fee int);
	
create table t_store(id int auto_increment primary key,
	item_id varchar(100),item_info varchar(200),item_price int,
	inventor_num int);


CREATE TABLE `t_address` (
  `code` varchar(255) NOT NULL,
  `name` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`code`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `t_address` VALUES ('130000','河北省'),('130100','石家庄市'),('130102','长安区'),('130104','桥东区'),('130105','新华区'),('320000','江苏省'),('320100','南京市'),('320102','玄武区'),('320103','白下区'),('320104','秦淮区');
	
1 耐克男运动鞋 789
2 女风衣  1688
3 《thinking in java》 78

insert into t_store(item_id,item_info,item_price,inventor_num)
	values(1,'耐克男运动鞋',789,10000);
insert into t_store(item_id,item_info,item_price,inventor_num)
	values(2,'女风衣 ',1688,10000);
insert into t_store(item_id,item_info,item_price,inventor_num)
	values(3,'《thinking in java》',78,10000);	

设计网页

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>    














	

		
		

			

				
用户
				
订单时间
				
支付时间
			
			
			

				
				
{{ o.user_id }}
				
				
{{ dateFormat(o.create_time) }}
				
{{ dateFormat(o.payment_time) }}
			
		
		
		

		
		

			
添加订单明细
			

			
			
			
			
			

				

					
订单用户
					

					
					
					
				
				

					
省份
					

					
					
						
							{{c.name}}
					
					
				
				

					
地区
					

					
					    {{c.name}}
					
					
				
				

					
县市
					

					
						{{c.name}}
					
					
				
			
			

			

			
所选商品
				

					

						
商品名称
						
数量
						
数量
						
价格
						
总计
						
删除
					
					
					

						

						
								{{c.name}}
						
						
						
{{ oi.item_num }}
						

						
{{ oi.item_price }}
						
{{ oi.item_price * oi.item_num}}
						

					
		      
			
	
			
		
	
	

设计后台Controller

package com.test.ctrl;

import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import java.sql.Timestamp;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.UUID;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

import org.aspectj.util.FileUtil;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.alibaba.dubbo.config.annotation.Reference;
import com.alibaba.fastjson.JSONObject;
import com.test.model.AddressInfo;
import com.test.model.OrderInfo;
import com.test.model.OrderItemInfo;
import com.test.service.IService;
import com.test.util.PageUtil;

@Controller
public class OrderCtrl {
	@Reference(timeout=3000)
	private IService serv;
	
	/**
	 * 跳转页面
	 * @param req
	 * @param page
	 * @param rows
	 * @return
	 */
	@RequestMapping("/list")
	public String list(HttpServletRequest req,Integer page,Integer rows)
	{
		return "order";
	}
	
	/**
	 * Ajax异步加载分页数据
	 * @param page
	 * @param rows
	 * @return
	 */
	@RequestMapping("/findpage")
	@ResponseBody
	public Map findpage(Integer page,Integer rows)
	{
		System.out.println("page="+page+",rows="+rows);
		if(page == null)
			page = 1;
		if(rows == null)
			rows = 4;
		System.out.println("page="+page+",rows="+rows);
		Map map = serv.getOrder(page,rows);
		List orders = (List)map.get("orders");
		System.out.println("orders="+orders);
		Long total = (Long)map.get("total");
		Map m = new HashMap();
		m.put("total", total);
		m.put("list", orders);
		
		String url = "/list";
		PageUtil pu = new PageUtil(url,page,rows,total);
		String htmlPage = pu.toHtml();
		m.put("pagediv", htmlPage);
		
		return m;
	}
	
	@RequestMapping("/address")
	public String address(HttpServletRequest req)
	{
		return "address";
	}
	
	@RequestMapping("/saveorder")
	@ResponseBody
	public Boolean saveorder(HttpServletRequest req)
	{
		try
		{
			ByteArrayOutputStream baos = new ByteArrayOutputStream();
			FileUtil.copyStream(req.getInputStream(), baos);
			JSONObject jsonObj = JSONObject.parseObject(new String(baos.toByteArray()));
			OrderInfo oi = (OrderInfo)JSONObject.toJavaObject(jsonObj,OrderInfo.class);
			oi.setPayment_time(new Timestamp(System.currentTimeMillis()));
			oi.setCreate_time(new Timestamp(System.currentTimeMillis()));
			if(oi.getOrder_id() == null)
				serv.saveOrder(oi);
			else
				serv.updateOrder(oi);
		}
		catch(Exception e)
		{
			e.printStackTrace();
		}
		return true;
	}
	
	@RequestMapping("/findorder")
	@ResponseBody
	public OrderInfo findorder(String id)
	{
		Integer id2 = null;
		try
		{
			id2 = Integer.parseInt(id);
		}
		catch(Exception e)
		{}
		OrderInfo oi = null;
		if(id2 != null)
			oi = serv.getOrderById(id2);
		List plist = this.findprovince();
		if(oi != null)
		{
			List items = serv.getItemByOrderId(id2);
			oi.setItems(items);
			oi.setProvinceList(plist);
			oi.setCityList(this.findcity(oi.getProvince()));
			oi.setCountyList(this.findcounty(oi.getCity()));
		}
		else
		{
			oi = new OrderInfo();
			oi.setProvince(plist.get(0).getCode());
			oi.setProvinceList(plist);
			List clist = this.findcity(oi.getProvince());
			oi.setCityList(clist);
			oi.setCity(clist.get(0).getCode());
			List ctlist = this.findcounty(oi.getCity());
			oi.setCountyList(ctlist);
			oi.setCounty(ctlist.get(0).getCode());
		}
		return oi;
	}
	
	@RequestMapping("/findprovince")
	@ResponseBody
	public List findprovince()
	{
		return serv.findProvince();
	}
	
	@RequestMapping("/findcity")
	@ResponseBody
	public List findcity(String code)
	{
		List lst = new ArrayList();
		List rtns = serv.findCityByPrvnc(code);
		for(AddressInfo ai:rtns)
		{
			if(!ai.getCode().equals(code))
				lst.add(ai);
		}
		return lst;
	}
	
	@RequestMapping("/findcounty")
	@ResponseBody
	public List findcounty(String code)
	{
		List lst = new ArrayList();
		List rtns = serv.findCountyByCity(code);
		for(AddressInfo ai:rtns)
		{
			if(!ai.getCode().equals(code))
				lst.add(ai);
		}
		return lst;
	}
}

工具JS前台分页方法

/**
 * 使用VUE前台分页公共方法
 * @param js 点击页面调用JS方法
 * @param page 查询页码
 * @param rows 每页显示记录数
 * @param total 总记录数
 * @returns {String}
 */
function pagedivjs(js,page,rows,total)
{
	var pages = 0;
	if(total%rows==0)
		pages = parseInt(total/rows);
	else
		pages = parseInt(total/rows) + 1;
	var pageDiv = "
";
	page=1;
	pageDiv = pageDiv + "首页";
    page = (page==1)?1:(page-1);
    pageDiv = pageDiv + "上一页";
    for(var i=1;i<=pages;i++)
    {
        if(i == page)
        	pageDiv = pageDiv + ""+i+" ";
        else
        	pageDiv = pageDiv + ""+i+" ";
    }
    page = (page==pages)?pages:(page+1);
    pageDiv = pageDiv + "下一页";
    //定义尾页连接
    page = pages;
    pageDiv = pageDiv + "尾页";
    pageDiv = pageDiv + "    第"+page+"/"+pages+"页";
    pageDiv = pageDiv + "    共"+total+"条记录";
    pageDiv = pageDiv + "
";
    return pageDiv;
}

测试效果

源代码下载
https://pan.baidu.com/s/1Imf_-_5rgnL9LjSc3Ot6Ug