【实战项目】某考务成绩查询小程序

熊猫开发记录 – QQ：1040375575

一、项目功能

实现通过身份证号、手机号、手机验证码三层进行后台成绩获取，并输出提示。

二、项目涉及

项目涉及前端开发：vue.js+layui
后端开发：springboot+element
调用接口：腾讯云短信api

遇到困难：

1. 项目采用前后端分离，导致出现跨域难题
2. vue或axios发出网络请求是不带cookie属性的，每次都是一个新的请求

三、部分代码

// 判断是否微信打开
function isWechat() {
		var ua = navigator.userAgent.toLowerCase();
		return ua.match(/MicroMessenger/i) == "micromessenger";
	};

...

//设置页面禁止缩放
// 禁止放大
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
	var now = Date.now();
	if (now - lastTouchEnd <= 300) {
		event.preventDefault();
	}
	lastTouchEnd = now;
}, false);
document.documentElement.addEventListener('touchstart', function (event) {
	if (event.touches.length > 1) {
		event.preventDefault();
	}
}, false);

//身份证格式是否正确判断
// 判断身份证正确
function checkid(value) {
	var code = value; //identity 为你输入的身份证  
	var city = {
		11: "北京",
		12: "天津",
		13: "河北",
		14: "山西",
		15: "内蒙古",
		21: "辽宁",
		22: "吉林",
		23: "黑龙江 ",
		31: "上海",
		32: "江苏",
		33: "浙江",
		34: "安徽",
		35: "福建",
		36: "江西",
		37: "山东",
		41: "河南",
		42: "湖北 ",
		43: "湖南",
		44: "广东",
		45: "广西",
		46: "海南",
		50: "重庆",
		51: "四川",
		52: "贵州",
		53: "云南",
		54: "西藏 ",
		61: "陕西",
		62: "甘肃",
		63: "青海",
		64: "宁夏",
		65: "新疆",
		71: "台湾",
		81: "香港",
		82: "澳门",
		91: "国外 "
	};
	var tip = "";
	var pass = true;
	var reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;
	if (!code || !code.match(reg)) {
		tip = "身份证号格式错误";
		pass = false;
	} else if (!city[code.substr(0, 2)]) {
		tip = "地址编码错误";
		pass = false;
	} else {
		//18位身份证需要验证最后一位校验位1 
		if (code.length == 18) {
			code = code.split('');
			//∑(ai×Wi)(mod 11)  
			//加权因子  
			var factor = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
			//校验位  
			var parity = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];
			var sum = 0;
			var ai = 0;
			var wi = 0;
			for (var i = 0; i < 17; i++) {
				ai = code[i];
				wi = factor[i];
				sum += ai * wi;
			}
			var last = parity[sum % 11];
			if (parity[sum % 11] != code[17]) {
				tip = "校验位错误";
				pass = false;
			}
		}
	}
	if (pass) {
		return true;
	}
	if (!pass) console.log("tip" + tip);
	return pass;
};

//成绩请求
$.ajax({
	url: "https://domain/queryScore/queryScoreTable",
	data: JSON.stringify(params),
	contentType: "application/json",
	type: "post",
	xhrFields: {
		withCredentials: true // 设置withCredentials为true，允许发送cookie
	},
	// 设置头部属性
	beforeSend: function (request) {
		request.setRequestHeader("cookie", $.cookie('JSESSIONID')); // 设置请求头中的Cookie值
	},
	success: function (data) {
		if (data['flag'] == true) {
			layer.msg(data['msg']);
			console.log('获取成功');
			var list = data['data'];
			// 渲染成绩表格
			UserTable(list);
		} else {
			layer.msg(data['msg']);
		}
	}

});

后端跨域代码：

四、程序实现