目录
安装工具
安装brew
安装nodejs
更新npm
或者 终端命令进行
安装webpack
安装vue脚手架
检查安装是否成功
前端系统部分
创建vue项目
手动配置
添加插件
idea打开项目 剩余前端技术栈环境搭建 (vue + vue ui + less)
安装vue ui
安装less (css系)
启动check工程
前端的技术栈参考
做到日下效果的静态版
sku系列
地址
订单详情
订单支付
订单支付信息
springboot + springjpa 后端开发
数据结构设计
接口对应的业务
1、首页数据
2、根据类型查询手机
3、查询手机规格
4、查询地址
5、创建地址
6、修改地址(通增加)
7、创建订单
8、订单详情
9、支付订单
前端接口层
前后端对接(按接口整合)
安装工具
系统 mac , 安装Vue。
没brew的安装一下
安装brew
/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"
如果命令执行中卡在下面信息:
Cloning into '/usr/local/Homebrew/Library/Taps/homebrew/homebrew-core'...
Control + C中断脚本执行如下命令:
cd "$(brew --repo)/Library/Taps/"
mkdir homebrew && cd homebrew
git clone git://mirrors.ustc.edu.cn/homebrew-core.git
cask 同样也有安装失败或者卡住的问题,解决方法也是一样:
cd "$(brew --repo)/Library/Taps/"
cd homebrew
git clone https://mirrors.ustc.edu.cn/homebrew-cask.git
继续执行前文的安装命令:
/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"
最后 :
brew update
参考文章:mac镜像安装brew
安装nodejs
nodejs官网 选择符合自己系统的自行下载
node -v
npm -v
更新npm
npm -g install npm
或者 终端命令进行
brew install nodejs
安装webpack
cnpm install webpack -g
安装vue脚手架
sudo npm install -g vue-cli
检查安装是否成功
vue list
Available official templates:
★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
前端系统部分
创建vue项目
vue create test01
vue ui
手动配置
添加插件
idea打开项目 剩余前端技术栈环境搭建 (vue + vue ui + less)
安装vue ui
cnpm i vant -S
安装less (css系)
cnpm install less less-loader --save
启动check工程
npm run serve
前端的技术栈参考
vant 文档 : https://youzan.github.io/vant/#/zh-CN/
做到日下效果的静态版
sku系列
地址
AddressList.vue
data() {
return {
chosenAddressId: 0,
list: [
{
id: '1',
name: '张三',
tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
isDefault: true,
},
{
id: '2',
name: '李四',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号',
},
]
}
}
路由index中增加组件
订单详情
订单支付
订单支付信息
springboot + springjpa 后端开发
数据结构设计
CREATE TABLE `phone_category` (
`category_id` int(11) NOT NULL AUTO_INCREMENT,
`category_name` varchar(64) NOT NULL COMMENT '类目名称',
`category_type` int(11) NOT NULL COMMENT '类目编号',
`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
PRIMARY KEY (`category_id`),
UNIQUE KEY `uqe_category_type` (`category_type`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8mb4 COMMENT='类目表'
CREATE TABLE `phone_info` (
`phone_id` int(11) NOT NULL AUTO_INCREMENT,
`phone_name` varchar(64) NOT NULL COMMENT '商品名称',
`phone_price` decimal(8,2) NOT NULL COMMENT '商品单价',
`phone_description` varchar(64) DEFAULT NULL COMMENT '描述',
`phone_stock` int(11) NOT NULL COMMENT '库存',
`phone_icon` varchar(512) DEFAULT NULL COMMENT '小图',
`category_type` int(11) NOT NULL COMMENT '类目编号',
`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
`phone_tag` varchar(512) DEFAULT NULL COMMENT '标签',
PRIMARY KEY (`phone_id`)
) ENGINE=InnoDB AUTO_INCREMENT=20 DEFAULT CHARSET=utf8mb4 COMMENT='商品表'
CREATE TABLE `phone_specs` (
`specs_id` int(11) NOT NULL AUTO_INCREMENT,
`phone_id` varchar(32) NOT NULL,
`specs_name` varchar(64) NOT NULL COMMENT '规格名称',
`specs_stock` int(11) NOT NULL COMMENT '库存',
`specs_price` decimal(8,2) NOT NULL COMMENT '单价',
`specs_icon` varchar(512) DEFAULT NULL COMMENT '小图',
`specs_preview` varchar(512) DEFAULT NULL COMMENT '预览图',
`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
PRIMARY KEY (`specs_id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COMMENT='商品规格表'
CREATE TABLE `buyer_address` (
`address_id` int(11) NOT NULL AUTO_INCREMENT,
`buyer_name` varchar(32) NOT NULL COMMENT '买家名字',
`buyer_phone` varchar(32) NOT NULL COMMENT '买家电话',
`buyer_address` varchar(128) NOT NULL COMMENT '买家地址',
`area_code` varchar(32) DEFAULT NULL COMMENT '地址编码',
`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
PRIMARY KEY (`address_id`)
) ENGINE=InnoDB AUTO_INCREMENT=40 DEFAULT CHARSET=utf8mb4 COMMENT='收货地址表'
CREATE TABLE `order_master` (
`order_id` varchar(32) NOT NULL,
`buyer_name` varchar(32) NOT NULL COMMENT '买家名字',
`buyer_phone` varchar(32) NOT NULL COMMENT '买家电话',
`buyer_address` varchar(128) NOT NULL COMMENT '买家地址',
`phone_id` int(11) DEFAULT NULL COMMENT '商品编号',
`phone_name` varchar(32) DEFAULT NULL COMMENT '商品名称',
`phone_quantity` int(11) DEFAULT NULL COMMENT '商品数量',
`phone_icon` varchar(512) DEFAULT NULL COMMENT '商品小图',
`specs_id` int(11) DEFAULT NULL COMMENT '规格编号',
`specs_name` varchar(32) DEFAULT NULL COMMENT '规格名称',
`specs_price` decimal(8,2) DEFAULT NULL COMMENT '规格单价',
`order_amount` decimal(8,2) NOT NULL COMMENT '订单总金额',
`pay_status` tinyint(3) NOT NULL DEFAULT '0' COMMENT '支付状态,默认0未支付',
`create_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
`update_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
PRIMARY KEY (`order_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='订单表'
接口对应的业务
1、首页数据
首页Get /phone/index
{
code: 0,
msg: "成功",
data: {
categories: [
{
name: "魅焰红",
type: 1
}
],
phones: [
{
id: 1,
title: "Honor 8A",
price: "2800.00",
desc: "魅焰红",
tag: [
{
name: "720P珍珠屏"
},
{
name: "Micro USB接口"
}
],
thumb: "../static/e84a2e03-7f19-41d2-98a5-a5c16b7e252d.jpg"
}
]
}
}
@Data
@Entity()
public class PhoneCategory {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer categoryId;
private String categoryName;
private Integer categoryType;
private Date createTime;
private Date updateTime;
}
@Data
@Entity
public class PhoneInfo {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer phoneId;
private String phoneName;
private BigDecimal phonePrice;
private String phoneDescription;
private String phoneStock;
private String phoneIcon;
private Integer categoryType;
private Date createTime;
private Date updateTime;
private String phoneTag;
}
@Data
public class PhoneCategoryVo {
@JsonProperty("type")
private Integer categoryType;
@JsonProperty("name")
private String categoryName;
}
@Data
@AllArgsConstructor
public class PhoneInfoVO {
@JsonProperty("id")
private Integer phoneId;
@JsonProperty("title")
private String phoneName;
@JsonProperty("price")
private String phonePrice;
@JsonProperty("desc")
private String phoneDescription;
private List<Map<String,String>> tag;
@JsonProperty("thumb")
private String phoneIcon;
}
public interface PhoneCategoryRepository extends JpaRepository<PhoneCategory, Integer> {
public PhoneCategory findByCategoryType(Integer categoryType);
}
public interface PhoneInfoRepository extends JpaRepository<PhoneInfo, Integer> {
public List<PhoneInfo> findAllByCategoryType(Integer categoryType);
}
@Data
public class DataVo {
private List<PhoneCategoryVo> categories;
private List<PhoneInfoVO> phones;
}
@Override
public DataVo findDataVo() {
DataVo dataVo = new DataVo();
//取数
//类型
List<PhoneCategory> phoneCategoryList = phoneCategoryRepository.findAll();
List<PhoneCategoryVo> phoneCategoryVos = phoneCategoryList.stream()
.map(el -> new PhoneCategoryVo(el.getCategoryName(),el.getCategoryType()))
.collect(Collectors.toList());
dataVo.setCategories(phoneCategoryVos);
//手机信息
List<PhoneInfo> phoneInfos = phoneInfoRepository.findAllByCategoryType(phoneCategoryList.get(0).getCategoryType());
List<PhoneInfoVO> phoneInfoVOS = phoneInfos.stream()
.map(el -> new PhoneInfoVO(
el.getPhoneId(),el.getPhoneName(),el.getPhonePrice(),el.getPhoneDescription(),PhoneUtil.createTag(el.getPhoneTag()),el.getPhoneIcon()
)).collect(Collectors.toList());
dataVo.setPhones(phoneInfoVOS);
return dataVo;
}
2、根据类型查询手机
GET /phone/findByCategoryType
categoryType: 1
{
code: 0,
msg: "成功",
data: [
{
id: 1,
title: "Honor 8A",
price: "2800.00",
desc: "魅焰红",
tag: [
{
name: "720P珍珠屏"
},
{
name: "Micro USB接口"
}
],
thumb: "../static/e84a2e03-7f19-41d2-98a5-a5c16b7e252d.jpg"
}
]
}
@Override
public List<PhoneInfoVO> findByCategoryType(Integer categoryType) {
List<PhoneInfo> phoneInfos = phoneInfoRepository.findAllByCategoryType(categoryType);
List<PhoneInfoVO> phoneInfoVOS = phoneInfos.stream()
.map(el -> new PhoneInfoVO(
el.getPhoneId(),el.getPhoneName(),el.getPhonePrice(),el.getPhoneDescription(),PhoneUtil.createTag(el.getPhoneTag()),el.getPhoneIcon()
)).collect(Collectors.toList());
return phoneInfoVOS;
}
3、查询手机规格
GET /phone/findSpecsByPhoneId
phoneId: 1
{
code: 0,
msg: "成功",
data: {
goods: {
picture: "../static/e84a2e03-7f19-41d2-98a5-a5c16b7e252d.jpg"
},
sku: {
tree: [
{
k: "规格",
v: [
{
id: 1,
name: "32GB",
imgUrl: "../static/e84a2e03-7f19-41d2-98a5-a5c16b7e252d.jpg",
previewImgUrl: "../static/e84a2e03-7f19-41d2-98a5-a5c16b7e252d.jpg"
},
{
id: 2,
name: "64GB",
imgUrl: "../static/e84a2e03-7f19-41d2-98a5-a5c16b7e252d.jpg",
previewImgUrl: "../static/e84a2e03-7f19-41d2-98a5-a5c16b7e252d.jpg"
}
],
k_s: "s1"
}
],
list: [
{
s1: 1,
price: 280000,
stock_num: 1
},
{
s1: 2,
price: 320000,
stock_num: 1
}
],
price: "2800.00",
stock_num: 2,
none_sku: false,
hide_stock: false
}
}
}
@Data
public class SpecsPackageVo {
private Map<String, String> goods;
private SkuVo sku;
public Map<String, String> getGoods() {
return goods;
}
public void setGoods(Map<String, String> goods) {
this.goods = goods;
}
public SkuVo getSku() {
return sku;
}
public void setSku(SkuVo sku) {
this.sku = sku;
}
}
@Data
public class SkuVo {
private List<TreeVo> tree;
private List<PhoneSpecsCaseVo> list;
private String price;
private Integer stockNum;
private boolean noneSku = false;
private boolean hideStock = false;
}
@Data
public class TreeVo {
private String k = "规格";
private List<PhoneSpecsVo> v ;
private String k_s = "s1";
}
@Data
public class PhoneSpecsVo {
@JsonProperty("id")
private Integer specsId;
@JsonProperty("name")
private String specsName;
@JsonProperty("imgUrl")
private String specsIcon;
@JsonProperty("previewImgUrl")
private String specsPreview;
}
@Data
public class PhoneSpecsCaseVo {
@JsonProperty("s1")
private Integer specsId;
@JsonProperty("price")
private String specsPrice;
@JsonProperty("stock_num")
private Integer specsStock;
}
@Override
public SpecsPackageVo findSpecsPackageVoByPhoneId(Integer phoneId) {
List<PhoneSpecs> phoneSpecses = phoneSpecsRepository.findAllByPhoneId(phoneId);
PhoneInfo phoneInfo = phoneInfoRepository.findById(phoneId).get();
//tree
List<PhoneSpecsVo> phoneSpecsVos = new ArrayList<>();
List<PhoneSpecsCaseVo> phoneSpecsCaseVos = new ArrayList<>();
PhoneSpecsVo phoneSpecsVo;
PhoneSpecsCaseVo phoneSpecsCaseVo;
for (PhoneSpecs phoneSpecs : phoneSpecses) {
phoneSpecsVo = new PhoneSpecsVo();
phoneSpecsCaseVo = new PhoneSpecsCaseVo();
BeanUtils.copyProperties(phoneSpecs, phoneSpecsCaseVo);
BeanUtils.copyProperties(phoneSpecs, phoneSpecsVo);
phoneSpecsVos.add(phoneSpecsVo);
phoneSpecsCaseVos.add(phoneSpecsCaseVo);
}
List<TreeVo> treeVos = new ArrayList<>();
//规格
TreeVo treeVo = new TreeVo();
treeVo.setV(phoneSpecsVos);
treeVos.add(treeVo);
SkuVo skuVo = new SkuVo();
skuVo.setList(phoneSpecsCaseVos);
skuVo.setTree(treeVos);
//pirce
Integer price = phoneInfo.getPhonePrice().intValue();
skuVo.setPrice(price + ".00");
skuVo.setStockNum(phoneInfo.getPhoneStock());
SpecsPackageVo specsPackageVo = new SpecsPackageVo();
specsPackageVo.setSku(skuVo);
Map<String,String> mp = new HashMap<>();
mp.put("picture", phoneInfo.getPhoneIcon());
specsPackageVo.setGoods(mp);
return specsPackageVo;
}
扣减库存
@Override
public void subStock(Integer specId, Integer nums) {
PhoneSpecs phoneSpecs = phoneSpecsRepository.findById(specId).get();
PhoneInfo phoneInfo = phoneInfoRepository.findById(phoneSpecs.getPhoneId()).get();
Integer res = phoneSpecs.getSpecsStock() - nums;
if(res < 0) {
System.out.println("库存不足");
throw new PhoneException(ResultEnum.PHONE_STOCK_ERROR);
}
phoneSpecs.setSpecsStock(res);
phoneSpecsRepository.save(phoneSpecs);
res = phoneInfo.getPhoneStock() - nums;
if(res < 0){
System.out.println("库存不足");
throw new PhoneException(ResultEnum.PHONE_STOCK_ERROR);
}
phoneInfo.setPhoneStock(res);
phoneInfoRepository.save(phoneInfo);
}
4、查询地址
GET /address/list
{
code: 0,
msg: "成功",
data: [
{
areaCode: "440303",
id: 21,
name: "张三",
tel: "13678787878",
address: "广东省深圳市罗湖区科技路123号456室"
}
]
}
@Data
public class AddressVo {
private Integer id;
private String areaCode;
private String name;
private String tel;
private String address;
}
@Autowired
private BuyerAddressRepsitory buyerAddressRepsitory;
@Override
public List<AddressVo> findAll() {
List<AddressVo> list = buyerAddressRepsitory.findAll().stream()
.map(e -> new AddressVo(
e.getAddressId(),
e.getAreaCode(),
e.getBuyerName(),
e.getBuyerPhone(),
e.getBuyerAddress()
)).collect(Collectors.toList());
return list;
}
5、创建地址
POST /address/create
{
name: "张三"
tel: "13678900987"
country: ""
province: "北京市"
city: "北京市"
county: "东城区"
areaCode: "110101"
postalCode: ""
addressDetail: "168号306室"
isDefault: false
}
{
code: 0,
msg: "成功",
data: null
}
@Data
public class AddressForm {
private Integer id;
@NotEmpty(message = "姓名不能为空")
private String name;
@NotEmpty(message = "电话不能为空")
private String tel;
@NotEmpty(message = "省不能为空")
private String province;
@NotEmpty(message = "市不能为空")
private String city;
@NotEmpty(message = "区不能为空")
private String county;
@NotEmpty(message = "编码不能为空")
private String areaCode;
@NotEmpty(message = "详细地址不能为空")
private String addressDetail;
}
@Override
public void saveOrUpdate(AddressForm addressForm) {
BuyerAddress buyerAddress;
if(addressForm.getId() == null){
buyerAddress = new BuyerAddress();
} else {
buyerAddress = buyerAddressRepsitory.findById(addressForm.getId()).get();
}
buyerAddress.setBuyerName(addressForm.getName());
buyerAddress.setBuyerPhone(addressForm.getTel());
StringBuffer stringBuffer = new StringBuffer();
stringBuffer.append(addressForm.getProvince())
.append(addressForm.getCity())
.append(addressForm.getCounty())
.append(addressForm.getAddressDetail());
buyerAddress.setBuyerAddress(stringBuffer.toString());
buyerAddress.setAreaCode(addressForm.getAreaCode());
buyerAddressRepsitory.save(buyerAddress);
}
6、修改地址(通增加)
PUT /address/update
{
id: 27
name: "张三"
tel: "13678900987"
addressDetail: "168号306室"
areaCode: "110101"
province: "北京市"
city: "北京市"
county: "东城区"
}
{
code: 0,
msg: "成功",
data: null
}
7、创建订单
POST /order/create
{
name: "张三"
tel: "13678787878"
address: "广东省深圳市罗湖区科技路123号456室"
specsId: 1
quantity: 1
}
{
code: 0,
msg: "成功",
data: {
orderId: "1586254006069813075"
}
}
@Data
public class OrderDTO {
private String orderId;
private String buyerName;
private String buyerPhone;
private String buyerAddress;
private Integer specsId;
private Integer phoneQuantity;
}
@Autowired
private PhoneSpecsRepository phoneSpecsRepository;
@Autowired
private PhoneInfoRepository phoneInfoRepository;
@Autowired
private OrderMasterRepository orderMasterRepository;
@Autowired
private PhoneService phoneService;
@Override
public OrderDTO create(OrderDTO orderDTO) {
OrderMaster orderMaster = new OrderMaster();
BeanUtils.copyProperties(orderDTO,orderMaster);
PhoneSpecs phoneSpecs = phoneSpecsRepository.findById(orderDTO.getSpecsId()).get();
if(phoneSpecs == null){
System.out.println("【创建订单】规格不存在,phoneSpecs="+phoneSpecs);
throw new PhoneException(ResultEnum.SPECS_NOT_EXIST);
}
BeanUtils.copyProperties(phoneSpecs,orderMaster);
PhoneInfo phoneInfo = phoneInfoRepository.findById(phoneSpecs.getPhoneId()).get();
if(phoneInfo == null){
System.out.println("【创建订单】手机不存在,phoneInfo="+phoneInfo);
throw new PhoneException(ResultEnum.PHONE_NOT_EXIST);
}
BeanUtils.copyProperties(phoneInfo,orderMaster);
//计算总价
BigDecimal orderAmount = new BigDecimal(0);
orderAmount = phoneSpecs.getSpecsPrice().divide(new BigDecimal(100))
.multiply(new BigDecimal(orderDTO.getPhoneQuantity()))
.add(orderAmount)
.add(new BigDecimal(10));
orderMaster.setOrderAmount(orderAmount);
//orderId
orderMaster.setOrderId(KeyUtil.createUniqueKey());
orderDTO.setOrderId(orderMaster.getOrderId());
//payStatus
orderMaster.setPayStatus(PayStatusEnum.UNPIAD.getCode());
orderMasterRepository.save(orderMaster);
phoneService.subStock(orderDTO.getSpecsId(),orderDTO.getPhoneQuantity());
return orderDTO;
}
8、订单详情
GET /order/detail
orderId: "1586253884545138376"
{
code: 0,
msg: "成功",
data: {
orderId: "1586253884545138376",
buyerName: "张三",
phoneName: "Honor 8A",
payStatus: 0,
freight: 10,
tel: "13678787878",
address: "广东省深圳市罗湖区科技路123号456室",
num: 1,
specs: "32GB",
price: "2800.00",
icon: "../static/e84a2e03-7f19-41d2-98a5-a5c16b7e252d.jpg",
amount: 2810
}
}
@Override
public OrderDetailVO findOrderDetailByOrderId(String orderId) {
OrderDetailVO orderDetailVO = new OrderDetailVO();
OrderMaster orderMaster = orderMasterRepository.findById(orderId).get();
if(orderMaster == null){
System.out.println("【查询订单】订单不存在,orderMaster="+orderMaster);
throw new PhoneException(ResultEnum.ORDER_NOT_EXIST);
}
BeanUtils.copyProperties(orderMaster,orderDetailVO);
orderDetailVO.setSpecsPrice(orderMaster.getSpecsPrice().divide(new BigDecimal(100))+".00");
return orderDetailVO;
}
9、支付订单
PUT /order/pay
orderId: "1586253884545138376"
{
code: 0
msg: "成功"
data: {
orderId: "1586253884545138376"
}
}
@Override
public String pay(String orderId) {
OrderMaster orderMaster = orderMasterRepository.findById(orderId).get();
if(orderMaster == null){
System.out.println("【支付订单】订单不存在,orderMaster="+orderMaster);
throw new PhoneException(ResultEnum.ORDER_NOT_EXIST);
}
if(orderMaster.getPayStatus().equals(PayStatusEnum.UNPIAD.getCode())){
orderMaster.setPayStatus(PayStatusEnum.PAID.getCode());
orderMasterRepository.save(orderMaster);
} else {
System.out.println("【支付订单】订单已支付,orderMaster="+orderMaster);
}
return orderId;
}
前端接口层
@RestController
@RequestMapping("/phone")
public class PhoneController {
@Autowired
private PhoneService phoneService;
@GetMapping("/index")
public ResultVO index(){
return ResultVOUtil.success(phoneService.findDataVo());
}
@GetMapping("/findByCategoryType/{categoryType}")
public ResultVO findByCategoryType(
@PathVariable("categoryType") Integer categoryType){
return ResultVOUtil.success(phoneService.findByCategoryType(categoryType));
}
@GetMapping("/findSpecsByPhoneId/{phoneId}")
public ResultVO findSpecsByPhoneId(
@PathVariable("phoneId") Integer phoneId){
return ResultVOUtil.success(phoneService.findSpecsPackageVoByPhoneId(phoneId));
}
}
@RestController
@RequestMapping("/address")
public class AddressController {
@Autowired
private AddressService addressService;
@GetMapping("/list")
public ResultVO list(){
return ResultVOUtil.success(addressService.findAll());
}
@PostMapping("/create")
public ResultVO create(@Valid @RequestBody AddressForm addressForm, BindingResult bindingResult){
if(bindingResult.hasErrors()){
System.out.println("【添加地址】参数错误,addressForm="+addressForm);
throw new PhoneException(bindingResult.getFieldError().getDefaultMessage());
}
addressService.saveOrUpdate(addressForm);
return ResultVOUtil.success(null);
}
@PutMapping("/update")
public ResultVO update(@Valid @RequestBody AddressForm addressForm, BindingResult bindingResult){
if(bindingResult.hasErrors()){
System.out.println("【修改地址】参数错误,addressForm="+addressForm);
throw new PhoneException(bindingResult.getFieldError().getDefaultMessage());
}
addressService.saveOrUpdate(addressForm);
return ResultVOUtil.success(null);
}
}
@RestController
@RequestMapping("/order")
public class OrderController {
@Autowired
private OrderService orderService;
@PostMapping("/create")
public ResultVO create(@Valid @RequestBody OrderForm orderForm, BindingResult bindingResult){
if(bindingResult.hasErrors()){
System.out.println("【创建订单】参数错误,orderForm={}"+orderForm);
throw new PhoneException(bindingResult.getFieldError().getDefaultMessage());
}
OrderDTO orderDTO = new OrderDTO();
orderDTO.setBuyerName(orderForm.getName());
orderDTO.setBuyerPhone(orderForm.getTel());
orderDTO.setBuyerAddress(orderForm.getAddress());
orderDTO.setSpecsId(orderForm.getSpecsId());
orderDTO.setPhoneQuantity(orderForm.getQuantity());
OrderDTO result = orderService.create(orderDTO);
Map<String,String> map = new HashMap<>();
map.put("orderId",result.getOrderId());
return ResultVOUtil.success(map);
}
@GetMapping("/detail/{orderId}")
public ResultVO findOrederDetail(
@PathVariable("orderId") String orderId){
return ResultVOUtil.success(orderService.findOrderDetailByOrderId(orderId));
}
@PutMapping("/pay/{orderId}")
public ResultVO pay(
@PathVariable("orderId") String orderId){
Map<String,String> map = new HashMap<>();
map.put("orderId",orderService.pay(orderId));
return ResultVOUtil.success(map);
}
}
前后端对接(按接口整合)
Home.vue
data() {
return {
categories: '',
phones: '',
show: false,
sku: '',
goods: ''
}
},
created(){
const _this = this
axios.get('http://localhost:8181/phone/index').then(function (resp) {
console.log(resp)
_this.phones = resp.data.data.phones
_this.categories = resp.data.data.categories
})
},
methods: {
onClick(index) {
const _this = this
axios.get('http://localhost:8181/phone/findByCategoryType/'+this.categories[index].type).then(function (resp) {
_this.phones = resp.data.data
})
},
buy(index){
this.show = true
const _this = this
axios.get('http://localhost:8181/phone/findSpecsByPhoneId/'+this.phones[index].id).then(function (resp) {
console.log(resp)
_this.goods = resp.data.data.goods
_this.sku = resp.data.data.sku
})
},
onBuyClicked(item){
this.$store.state.specsId = item.selectedSkuComb.s1
this.$store.state.quantity = item.selectedNum
this.$router.push('/addressList')
}
}
}
AddressList.vue
data() {
return {
chosenAddressId: 0,
list:""
}
},
created(){
const _this = this
axios.get('http://localhost:8181/address/list').then(function (resp) {
_this.list = resp.data.data
})
},
methods: {
onAdd() {
this.$router.push('/addressNew')
},
onEdit(item) {
let data = JSON.stringify(item)
this.$router.push({path:'/addressEdit',query:{item:data}})
},
onselect(item){
let orderForm = {
name: item.name,
tel: item.tel,
address: item.address,
specsId: this.$store.state.specsId,
quantity: this.$store.state.quantity
}
const _this = this
axios.post('http://localhost:8181/order/create',orderForm).then(function (resp) {
if(resp.data.code == 0){
let instance = Toast('下单成功');
setTimeout(() => {
instance.close();
_this.$router.push('/detail?orderId='+resp.data.data.orderId)
}, 1000)
}
})
}
}
Detail.vue
data() {
return {
data:''
};
},
created(){
const _this = this
axios.get('http://localhost:8181/order/detail/'+this.$route.query.orderId).then(function (resp) {
_this.data = resp.data.data
})
},
methods: {
onSubmit:function () {
const _this = this
axios.put('http://localhost:8181/order/pay/'+this.$route.query.orderId).then(function (resp) {
if(resp.data.code == 0){
let instance = Toast('订单'+resp.data.data.orderId+'支付成功');
setTimeout(() => {
instance.close();
_this.$router.push('/success?orderId='+_this.data.orderId+"&amount="+(_this.data.amount))
}, 1000)
}
})
}
}
AddressEdit.vue
name: "AddressEdit",
created(){
let data = JSON.parse(this.$route.query.item)
this.addressInfo = data
let index = data.address.indexOf('区')
if(index < 0) index = data.address.indexOf('县')
this.addressInfo.addressDetail = data.address.substring(index+1)
},
data() {
return {
areaList: AreaList,
addressInfo: ''
}
},
methods: {
onSave(item) {
const _this = this
axios.put('http://localhost:8181/address/update',item).then(function (resp) {
if(resp.data.code == 0){
let instance = Toast('修改成功');
setTimeout(() => {
instance.close()
_this.$router.push('/addressList')
}, 1000)
}
})
},
onDelete(item) {
axios.post('http://localhost:8181/address/delete',item).then(function (resp) {
console.log(item)
if(resp.data.code == 0){
let instance = Toast('删除成功');
setTimeout(() => {
instance.close()
_this.$router.push('/addressList')
}, 1000)
}
})
// history.go(-1)
}
}
AddressNew.vue
name: "AddressNew",
data() {
return {
areaList: AreaList
}
},
methods: {
onSave(item) {
const _this = this
axios.post('http://localhost:8181/address/create',item).then(function (resp) {
if(resp.data.code == 0){
let instance = Toast('添加成功');
setTimeout(() => {
instance.close();
_this.$router.push('/addressList')
}, 1000)
}
})
},
onDelete() {
history.go(-1)
}
}
Info.vue
created(){
const _this = this
axios.get('http://localhost:8181/order/detail/'+this.$route.query.orderId).then(function (resp) {
_this.data = resp.data.data
})
},
data() {
return {
data:""
};
},
methods: {
payStatusTrans(status){
if(status == 1) return '已支付'
if(status == 0) return '未支付'
}
}
部署项目
参考 linux系统部署springboot