element Upload 上传

     <el-upload
          class="upload-demo"
          ref="upload"
          action="/manager/publicproject/addPictureUrl"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :auto-upload="false"
          :on-success="updateSuccess"
          :limit="1"
        >
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button
            style="margin-left: 10px;"
            size="small"
            type="success"
            @click="submitUpload"
          >上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>


updateSuccess(response, file, fileList) {
  console.log(response);
  console.log(response.body);
  this.pictureItem.url = response.body;
  console.log(file);
  console.log(fileList);
},
submitUpload() {
  this.$refs.upload.submit();
},
handleRemove(file, fileList) {
  console.log(file, fileList);
  fileList = [];
},
handlePreview(file) {
  console.log(file);
},

场景:后台首页数据统计面板中使用地图统计在线机器与故障机器

安装

npm i v-charts echarts -S

开始使用

// main.js
import Vue from 'vue'
import VCharts from 'v-charts'
import App from './App.vue'

Vue.use(VCharts)

页面中使用

import VeBmap from "v-charts/lib/bmap.common";

script中引进ve-bmap标签,template中使用

  <ve-bmap
  :settings="chartSettings"
  :after-set-option-once="afterSet"
  :series="chartSeries"
  :tooltip="chartTooltip"
></ve-bmap>

PostSale 表

用户Id,订单Id,机器Id,订单,用户备注,机器备注,图片,售后状态

@OneToOne
@JoinColumn(name = "orderId"
,updatable = false
,insertable = false)
private StoreOrder order;

通过注解关联订单Id和订单

private Status  status = Status.CREATED;
public enum Status{
    CREATED, //等待商家处理 - 商家处理中
    CANCELED, //用户取消  - 已取消
    FINISHED, //商家同意售后  - 已完成
    REJECTED  //商家驳回售后  -  已完成
}

枚举类型 enum Status

继承一个通用的BaseEntity,包含自动生成的表Id,
Timestamp类型的时间,通过注解实现正反的序列化

@Id
@GeneratedValue(
    strategy = GenerationType.AUTO
)
protected Integer id;
@CreationTimestamp
@JsonSerialize(
    using = TimestampSerializer.class
)
@JsonDeserialize(
    using = TimestampDeserializer.class
)
@Column(
    updatable = false
)
protected Timestamp createTime;
@UpdateTimestamp
@JsonSerialize(
    using = TimestampSerializer.class
)
@JsonDeserialize(
    using = TimestampDeserializer.class
)
protected Timestamp updateTime;

Controller

@RequestBody 接受传递过来的json实体对象

@PostMapping("/post_sale/refund_order")
public API<PostSale> refundOrder(@RequestBody @Valid PostSale postSale){
    return API.ok(mOrderManageService.refundOrder(postSale));
}

PostSaleService

   public PostSale refundOrder(PostSale postSale) {
    StoreOrder order = orderRepository.findItemById(postSale.getOrderId());
    mPayService.refundOrder(order.getNo(),order.getPrice(),order.getPayMethod());
    postSale.setStatus(PostSale.Status.FINISHED);
    return postSaleRepository.save(postSale);
}

通过postSale实体类中的订单Id查找出订单数据,进行退款操作,退款成功后更改售后状态

PayService

传递订单中的编号,价格,订单支付日志中的支付方式

public void refundOrder(String no, BigDecimal refundPrice, PayLog.PayMethod payMethod) {
  getPayService(payMethod).refundOrder(no,refundPrice);
}

抽出getPayService方法.获得支付类型

public PayService  getPayService(PayLog.PayMethod payMethod){

    if (PayLog.PayMethod.WECHAT.equals(payMethod)){
        return mWechatPayService;
    }
    if (PayLog.PayMethod.ROYAL_PAY.equals(payMethod)){
        return mRoyalPayService;
    }
    APIError.CUSTOM.set(400,"暂不支持该支付方式").expose();
    return null;
}

WechatPayService

申请退款

public void refundOrder(String orderNo,BigDecimal refundPrice) {
        PayLog log = checkIfCanRefund(orderNo);
        WxPayRefundRequest refundQueryRequest = new WxPayRefundRequest();
        refundQueryRequest.setTransactionId(log.getTransactionId());
        refundQueryRequest.setOutRefundNo(generateRefundId());
        refundQueryRequest.setRefundFee(transformPrice(refundPrice));
        refundQueryRequest.setTotalFee(transformPrice(log.getPrice()));
        refundQueryRequest.setNotifyUrl(String.format("http://%s/pay/wechat/%srefund",mBasicConfigService.getConfig().getDomain(),callbackPrefix));
        try {
            WxPayRefundResult data = mWxPayService.refund(refundQueryRequest);
            log.setRefundId(data.getRefundId());
            log.setRefundPrice(refundPrice);
            log.setStatus(PayLog.PayStatus.REFUNDING);
            log.setRefundTransactionId(data.getRefundId());
            log.setRefundApplyTime(new Timestamp(System.currentTimeMillis()));
            mPayLogRepository.save(log);
        } catch (WxPayException e) {
            mLogger.warning("refund apply error:"+e.getMessage());
            APIError.CUSTOM.set(500,"退款失败:"+e.getMessage()).expose();
        }
}

PayLog log = checkIfCanRefund(orderNo); 检查是否可以退款

protected PayLog checkIfCanRefund(String orderNo){
    PayLog log = getPayLog(orderNo);
    if (log == null){
        APIError.CUSTOM.set(404,"订单不存在").expose();
    }
    if (!PayLog.PayStatus.SUCCESS.equals(log.getStatus())){
        APIError.CUSTOM.set(404,"当前订单不可退款").expose();
    }
    return log;

}

WxPayRefundRequest refundQueryRequest = new WxPayRefundRequest();

创建一个微信退款xml实体,满足微信商户申请退款接口中要求的数据

<xml>
<appid>wx2421b1c4370ec43b</appid>
<mch_id>10000100</mch_id>
    <nonce_str>6cefdb308e1e2e8aabd48cf79e546a02</nonce_str> 
   <out_refund_no>1415701182</out_refund_no>
   <out_trade_no>1415757673</out_trade_no>
   <refund_fee>1</refund_fee>
   <total_fee>1</total_fee>
   <transaction_id></transaction_id>
   <sign>FE56DD4AA85C0EECA82C35595A69E153</sign>
</xml>

WxPayRefundRequest 导入jar包
package com.github.binarywang.wxpay.bean.request;

refundQueryRequest.setTransactionId(log.getTransactionId());

通过支付日志获取交易号

设置商户自己内部的退款单号

refundQueryRequest.setOutRefundNo(generateRefundId());

@Override
public String generateRefundId() {
    return UUID.randomUUID().toString().replaceAll("-","");
}

设置退款结果通知url.
refundQueryRequest.setNotifyUrl(String.format(“http://%s/pay/wechat/%srefund",mBasicConfigService.getConfig().getDomain(),callbackPrefix));

表设计

@Entity
@Getter
@Setter
public class StoreLog  extends BaseEntity {

//机器id
private Integer storeId;

//机器状态
private LogType type;

public enum LogType {
    RUN,
    OPERATION
}

private String code;

private String content;

}

1.与安卓端交互时,根据返回的type,code来判断,硬件机器是在什么情况发生的错误

表设计

@Entity
@Getter
@Setter
public class StoreLog  extends BaseEntity {

//机器id
private Integer storeId;

//机器状态
private LogType type;

public enum LogType {
    RUN,
    OPERATION
}

private String code;

private String content;

}

1.与安卓端交互时,根据返回的type,code来判断,硬件机器是在什么情况发生的错误

前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。

一、为什么要处理异常？

异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。

1.增强用户体验；
2.远程定位问题；
3.未雨绸缪，及早发现问题；
4.无法复线问题，尤其是移动端，机型，系统都是问题；
5.完善的前端方案，前端监控系统；

序

在写这篇文章之前，我有写一篇 Vue 预渲染的教程 以及 在线示例，有需要的可以看一下~

---

【下面开始 Vue 服务端渲染】

Travis CI 提供的是持续集成服务（Continuous Integration，简称 CI）。我们在软件开发过程中，有构建、测试、部署这些必不可少的步骤，而这些会花掉我们很多的时间。为了提高软件开发的效率，现在涌现了很多自动化工具。Travis CI 是目前市场份额最大的一个，而且有很详细的文档以及可以和 Github 很好的对接。

在 hexo 中，我们如何使用自己自定义的 html 页面呢？

我们知道，在 hexo 中，我们使用的是 markdown 格式的文件，渲染出来的页面是有主题样式的。如果我们不希望我们的页面使用主题样式。那么需要在文件头部加一个 layout: false 的配置。

使用 md 文件写文章时增加配置不使用 layout

背景

在 Node 生态系统中，依赖通常安装在项目的 node_modules 文件夹中。然而，这个文件的结构和实际依赖树可能有所区别，因为重复的依赖可以合并到一起。npm 客户端把依赖安装到 node_modules 目录的过程具有不确定性。这意味着当依赖的安装顺序不同时，node_modules 目录的结构可能会发生变化。这种差异可能会导致类似“我的电脑上可以运行，别的电脑上不行”的情况，并且通常需要花费大量时间定为与解决。

有时候就会遇到这种情况，完整可运行的项目上传到 git 上，别人 pull 下来以后，npm install 会报错。

Yarn 一开始的主要目标是解决由于语义版本控制而导致的 npm 安装的不确定性问题。虽然可以用 npm shrinkwrap 来实现可预测的依赖关系树，但它并不是默认选项，而是取决于所有的开发人员指导并启用这个选项。