Vue实操 前后端 手机版

    技术2022-07-10  161

    目录

     

    安装工具

    安装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

     

    Processed: 0.010, SQL: 9