- 前端代码 图片自己随便找个扫码的就行了
wxml:
<view class="container">
<view class="font">点击扫码上传</view>
<image class="scan"src="/icons/scan.png" bindtap="scanCode" ></image>
<view>{{show}}</view>
</view>
css:
.container {
display: flex;
flex-direction: column;
}
.scan {
width: 60%;
height:400rpx;
margin-bottom: 200rpx;
vertical-align: middle;
}
.font{
font-size: 64rpx;
color: red;
font-display: top;
}
js(两次请求,第一次是请求的储存数据的接口,第二次是关联,只存数据的话可以删除第二次wx.request
const app = getApp()
Page({
data: {
//在这里面定义一下你二维码里面的字段
show: "",
description:"",
instruction:"",
riskLevel:"",
processMethod:"",
d:''
},
onLoad: function () {
template.tabbar("tabBar", 0, this);
console.log('onLoad')
},
scanCode: function (options) {
var that = this;
var show;
wx.scanCode({
success: (res) => {
// this.show = "结果:" + res.result + "二维码类型:" + res.scanType + "字符集:" + res.charSet + "路径:" + res.path;
that.setData({
result:res.result
})
var userInfo=wx.getStorageSync('user');
var username=userInfo.username;
var txt =that.data.result;
//此处是扫码成功的核心,用一个“?”来分隔请求和数据,该符号后面的使我们需要的参数,也就是d[1]
var d = txt.split('?');
var e =d[1];
console.log(e);
wx.showToast({
title: '扫码成功',
icon: 'success',
duration: 2000
})
wx.request({
url:'http://localhost:8080/scan/productionAdd?'+e,
method: 'GET',
success: function (res) {
var result = res.statusCode;
var toastText = "请求成功";
if (result != 200) {
toastText = "请求失败";
}
wx.showToast({
title: toastText,
icon: '',
duration: 2000
});
},
}),
wx.request({
url: 'http://localhost:8080/scan/connect?username=' + username + '&&' + e,
method: 'GET',
})
},
fail: (res) => {
wx.showToast({
title: '请选择二维码类型的图片',
icon: 'success',
duration: 2000
})
},
complete: (res) => {
}
})
}
})
- 后端接收,可以直接用类的对象进行接收,没必要像我这样写的这么麻烦,我前端进行了两次请求,第一次是扫码入库,第二次是将二维码信息对应的产品和当前用户关联,两次请求接收的代码如下。
@RestController
@RequestMapping("/scan")
public class ScanEntryController extends BaseController {
@GetMapping("/productionAdd")
public int addProduction(Integer id,String description, String instruction, String riskLevel, String processMethod,Integer amount,String username){
//将二维码信息上传到数据库(二维码中包含id且生成的二维码id不重复)
Production production=new Production();
production.setId(id);
production.setDescription(description);
production.setInstruction(instruction);
production.setRisklevel(riskLevel);
production.setProcessmethod(processMethod);
production.setAmount(amount);
System.out.println("添加成功--->" +"产品id:"+id+",产品名:"+description+",注意事项:"+instruction+",危险程度:"+riskLevel+",处理方式:"+processMethod);
return productionMapper.insert(production);
}
//将上面添加的产品和用户进行关联,前台请求扫码成功后请求该方法
@GetMapping("/connect")
public void connect(String username,Integer id){
Integer production_id=id;
System.out.println(production_id);
System.out.println(username);
Producer producer= producerMapper.ByProducerName(username);
Integer producer_id=producer.getId();
Producerandproduction producerandproduction=new Producerandproduction();
producerandproduction.setProducerId(producer_id);
producerandproduction.setProductionId(production_id);
//通过自定义方法
producerandproductionMapper.insert(producerandproduction);
}
}
最最最最最最重要的来了,二维码可以去草料二维码直接生成,格式大概是:
?id=1&&name=sure&&description=*********
写上自己需要的数据,扫出来就像这样:
竣工!!!!!!!!!!!!!!!!!!!!