login.js ------> 登录页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="author" content="TTX-AFU">
<meta name="Copyright" content="Babelstar">
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta http-equiv="Content-Security-Policy" content="block-all-mixed-content">
<title>登录页面</title>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script src="pro/protobuf.min.js"></script>
<script src="pro/common.js"></script>
<script src="js/md5.js"></script>
<!-- 我添加的表格的样式 -->
<style>
#listData button{
width: 120px;
height: 30px;
background-color: rgb(114, 165, 73);
color: white;
font-size: 14px;
border: 1px solid rgb(114, 165, 73);
border-radius: 5px;
}
#sortTime button{
width: 200px;
height: 30px;
background-color: rgb(114, 165, 73);
color: white;
font-size: 14px;
border: 1px solid rgb(114, 165, 73);
border-radius: 5px;
}
#sortTime span {
font-size: 18px;
}
#sortTime input{
width: 250px;
height: 30px;
border-radius: 20px;
border: 1px solid #c7c4c4;
}
#page button{
width: 70px;
height: 30px;
background-color: rgb(114, 165, 73);
color: white;
font-size: 14px;
border: 1px solid rgb(114, 165, 73);
border-radius: 5px;
}
#page input{
width: 100px;
height: 30px;
border-radius: 20px;
border: 1px solid #c7c4c4;
text-align: center;
}
#page span{
font-size: 16px;
}
#page span button{
margin: 0 2px;
}
#showTable table tr th {
background-color:rgb(114, 165, 73);
color: white;
font-weight: bold;
}
#showTable table tr td{
text-align: center;
}
</style>
<!-- 登录的样式 -->
<style>
#modLoginWrap {
position: absolute;
margin: 0 auto;
}
#loginAccount,
#loginPassword,
#phraseLogin{
width: 250px;
height: 30px;
border-radius: 10px;
border: 1px solid #c7c4c4;
}
.login-wrap {
width: 100%;
left:0;
top: 0;
}
.login-wrap .username,
.login-wrap #phraseLoginwarp{
margin-bottom:15px;
}
#loginSubmit {
width: 70px;
height: 30px;
background-color: rgb(114, 165, 73);
color: white;
font-size: 14px;
border: 1px solid rgb(114, 165, 73);
border-radius: 5px;
margin-left: 150px;
}
</style>
</head>
<body>
<div style="display:inline;" id="loginPanel" class="login-panel">
<div id="login">
<div id="modLoginWrap" class="mod-qiuser-pop">
<div style="display: none;" class="login-error login-error-msg">
<span id="spanLoginErrorTip"></span>
</div>
<dl class="login-wrap">
<dt><span id="loginTitle"></span></dt>
<dd class="username">
<div class="quc-clearfix login-item">
<label for="loginAccount">账号:</label>
<span class="input-bg">
<input type="text" value="pqy" placeholder="用户名" tabindex="1" id="loginAccount" name="loginAccount"
autocomplete="off" maxlength="32" class="ipt tipinput1">
</span>
</div>
</dd>
<dd class="password">
<div class="quc-clearfix login-item">
<label for="loginPassword">密码:</label>
<span class="input-bg">
<input type="text" value="pqy123456" placeholder="请输入您的密码" tabindex="2" id="loginPassword"
name="loginPassword" maxlength="20" autocomplete="off" class="ipt tipinput2">
</span>
<img class="clickPassword"/>
</div>
</dd>
<dd class="rem" id="phraseLoginwarp">
<label for="phraseLogin">
<span id="spanYzm">验证码</span>
</label>
<span class="verify-code">
<input type="text" tabindex="3" placeholder="验证码" maxlength="5" id="phraseLogin"
name="phrase" class="ipt1 tipinput1" autocomplete="off">
</span>
<span class="yz">
<img width="99" height="35" title="" id="lwm" onclick="codeLoad()">
</span>
</dd>
<dd class="submit">
<span>
<input type="button" onfocus="this.blur()" id="loginSubmit" value="用户登录"
class="btn-login quc-psp-gstat"/>
</span>
</dd>
</dl>
<div id="listData">
<button>获取列表数据</button>
</div>
<br/>
<div id="sortTime"></div>
<br/>
<div id="showTable"></div>
<br/>
<div id="page">
<button onclick="startPage()">首页</button>
<button onclick="prevPage()">上一页</button>
<input id="input" value="1"/>
<button onclick="nextPage()">下一页</button>
<button onclick="lasterPage()">末页</button>
<span>共<span id="totalNumber"></span>页/共<span id="totalPage"></span>条数据</span>
<span id="btns"></span>
</div>
</div>
</div>
</div>
</body>
<script>
$(document).ready(function () {
$("#loginSubmit").click(function () {
var userName = $("#loginAccount").val();
var passWord = $("#loginPassword").val();
var code = $("#phraseLogin").val();
if (userName == '' || passWord == '' || code == '') {
alert("不能为空");
} else {
isLogin(userName, passWord, code);
}
});
$('#listData').click(function () {
var userName = $("#loginAccount").val();
if (userName) {
getListData(userName);
}
});
$('#input').bind('keyup', function(event) {
if (event.keyCode == "13") {
//回车执行查询
searchNum();
}
});
});
var objCode; // 存放验证码信息
var ip = "http://tlcc.tl-tek.com:7080";
function codeLoad() {
var url = ip + "/GenerateVerificationCode";
proPostLogin(url, "", "productMaintain.VerifyCodeMessage", null, function (code, obj) {
if (code == 200) {
objCode = obj;
$("#lwm").attr("src", objCode.base64Blob);
} else {
alert(obj.errDes);
}
});
}
codeLoad(); // 运行验证码接口
var objLogin; // 存放登录的信息
// 登录
function isLogin(name, pass, code) {
var url = ip + "/UserLogin";
var md5Str = md5(pass);
objCode.verifyValue = code;
var obj = {
userName: name,
userPwd: md5Str,
platformType: 1,
verifyMessage: objCode
};
proPostLogin(url, "productMaintain.UserLogInRequest", "productMaintain.UserLogInResponse", obj, function (code, obj) {
objLogin = obj;
if (code == 200) {
var local = window.localStorage;
if (!local) {
alert("浏览器不支持,localstorage");
return;
} else {
alert("登录成功");
}
} else {
codeLoad();
alert("登录失败");
}
});
}
let showListData; // 存放表格数据
let pageNum = 1; // 默认展示第一页
let pageSize = 10; // 每页展示的条数
let totalPageNumber; // 总页数
// 展示表格列表数据并分页
function getListData (name) {
var url = ip + "/SearchUserOrder";
var objName = {
userName: name,
userGuid: objLogin.sessionId
}
let objArr = {
httpUserInfo: objName
}
proPostLogin(url, "productMaintain.SearchCustomOrderRequest", "productMaintain.SearchCustomOrderResponse", objArr, function (code, obj) {
if (code === 200) {
showListData = obj.orderInfo;
html(showListData, 1);
// 分页栏
totalPageNumber = Math.ceil(showListData.length / pageSize);
document.getElementById("totalNumber").innerHTML = totalPageNumber;
document.getElementById("totalPage").innerHTML = showListData.length;
getPageNumber(totalPageNumber);
let sort = `<button onclick="reverseOrder()">orderStartTime时间倒序排序</button>
<button onclick="positiveSequence()">orderStartTime时间正序排序</button>
<span>搜索<span>
<input id="searchInp" placeholder="搜索productDesc关键字"/>
<button onclick="search()">search</button>`;
$('#sortTime').html(sort);
} else {
alert('登录有误,导致数据有问题');
}
});
}
// 展示在html上的表格
function html (showListData, k) {
let html = ``;
html += `<table border="1" height="500px" width="100%" cellspacing="0" cellpadding="0" style="border:1px solid #f6f6f6">
<tr>
<th>id</th>
<th>customId</th>
<th>expectedOutTime</th>
<th>license</th>
<th>materialId</th>
<th>modelType</th>
<th>number</th>
<th>orderId</th>
<th>orderStartTime</th>
<th>productDesc</th>
</tr>`;
for (let i = 0; i < 10; i++) {
html += `<tr><td>${k}</td>`;
html += `<td>${showListData[i].customId}</td>`;
html += `<td>${showListData[i].expectedOutTime}</td>`;
html += `<td>${showListData[i].license}</td>`;
html += `<td>${showListData[i].materialId}</td>`;
html += `<td>${showListData[i].modelType}</td>`;
html += `<td>${showListData[i].number}</td>`;
html += `<td>${showListData[i].orderId}</td>`;
html += `<td>${showListData[i].orderStartTime}</td>`;
html += `<td>${showListData[i].productDesc}</td></tr>`;
k++;
}
html += `</table>`;
$('#showTable').html(html);
}
// 上一页
function prevPage () {
if (pageNum > 1) {
pageNum--;
let from = (pageNum - 1) * pageSize;
let to = pageNum * pageSize;
let arr = showListData.slice(from, to);
html(arr, from + 1);
$('#input').val(pageNum);
getPageNumber(totalPageNumber);
} else {
alert('已经是第一页了');
}
}
// 下一页
function nextPage () {
if (totalPageNumber > pageNum) {
pageNum++;
let from = (pageNum - 1) * pageSize;
let to = pageNum * pageSize;
let arr = showListData.slice(from, to);
html(arr, from + 1);
$('#input').val(pageNum);
getPageNumber(totalPageNumber);
} else {
alert('到底啦!!!');
}
}
// 搜索框
function searchNum () {
let value = parseInt($('#input').val());
let from = (value - 1) * pageSize;
let to = value * pageSize;
let arr = showListData.slice(from, to);
html(arr, from + 1);
pageNum = value;
getPageNumber(totalPageNumber);
}
// 获取页码
function getPageNumber (totalP) {
// 点击页数
let btns = ``;
if (totalP <= 5) {
for (let i = 1; i <= totalP; i++) {
btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
}
} else {
let value = parseInt($('#input').val());
if (value <= 5) {
for (let i = 1; i <= 5; i++) {
btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
}
if (value <= totalP - 2) {
//最后一页追加“...”代表省略的页
btns += "<span>...</span>";
}
for (let i = totalP - 2; i <= totalP; i++) {
btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
}
} else {
// 前两页始终显示
for (let i = 1; i <= 2; i++) {
btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
}
btns += "<span>...</span>";// 2页码后面用...代替部分未显示的页码
if (value + 1 == totalP) {
//当前页+1等于总页码
for(i = value - 1; i <= totalP; i++){
//“...”后面跟三个页码当前页居中显示
btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
}
}else if (value == totalP) {
//当前页数等于总页数则是最后一页页码显示在最后
for(i = value - 2; i <= totalP; i++){
//...后面跟三个页码当前页居中显示
btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
}
}else{
//当前页小于总页数,则最后一页后面跟...
var large = value + 1, small = value - 1;
for(i = small; i <= large; i++){
//value + 1页后面...
btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
}
btns += "<span>...</span>";
for (let i = totalP - 2; i <= totalP; i++) {
btns += `<button onclick="getBtnNumber(${i})">${i}</button>`;
}
}
}
}
$('#btns').html(btns);
}
// 首页数据
function startPage () {
pageNum = 1;
let from = (pageNum - 1) * pageSize;
let to = pageNum * pageSize;
let arr = showListData.slice(from, to);
html(arr, from + 1);
$('#input').val(pageNum);
getPageNumber(totalPageNumber);
}
// 末页数据
function lasterPage () {
pageNum = totalPageNumber;
let from = (pageNum - 1) * pageSize;
let to = pageNum * pageSize;
let arr = showListData.slice(from, to);
html(arr, from + 1);
$('#input').val(pageNum);
getPageNumber(totalPageNumber);
}
// 点击页数
function getBtnNumber (i) {
pageNum = i;
let from = (pageNum - 1) * pageSize;
let to = pageNum * pageSize;
let arr = showListData.slice(from, to);
html(arr, from + 1);
$('#input').val(i);
}
// orderStartTime时间正序排列
function positiveSequence () {
// 姓名按字符串编码降序排序
// pcompare函数 第一个参数为需要排序的字段 第二个参数 false 为降序 true为升序
showListData = showListData.sort(pcompare("orderStartTime",true));
html(showListData, 1);
pageNum = 1;
$('#input').val(1);
}
// orderStartTime时间倒序排列
function reverseOrder () {
showListData = showListData.sort(pcompare("orderStartTime",false));
html(showListData, 1);
pageNum = 1;
$('#input').val(1);
}
// 时间排序方法
function pcompare(prop,rev) {
// 第二个参数没有传递,默认升序排序
if(rev === undefined) {
rev = 1;
}else {
rev = rev ? 1: -1;
}
return function(obj1,obj2) {
// 方括号也是访问对象属性的一种方式,优点是可以通过变量访问。
// 常规写法是 var val1 = obj1.prop;var val2 = obj2.prop;,但是这种不支持变量写法,所有这里不适用
var val1 = obj1[prop], val2 = obj2[prop];
// 若是升序排序,此时rev=1,rev*-1=-1,等价于return val1 < val2 ? -1 : 1,,即val1<val2时,val1放在val2前面,否则放后面
// 若是降序排序,下面句子等价于return val1 < val2 ? 1 : -1,即val1<val2时,val1放在val2后面,否则放在val2前面
return val1 < val2 ? rev*(-1) : rev*1;
}
}
// 搜索文本框关键字
function search () {
let value = $('#searchInp').val();
let arr = showListData.filter(item => {
if (item.productDesc.indexOf(value) !== -1) {
return item;
}
});
html(arr, 1);
let totalP = Math.ceil(arr.length / pageSize);
getPageNumber(totalP);
document.getElementById("totalNumber").innerHTML = totalP;
document.getElementById("totalPage").innerHTML = arr.length;
}
</script>
</html>
引入的功能类,写接口 -----> common.js
function Logger(module) {
this.module = module;
}
Logger.prototype.log = function (line) {
console.log("[" + this.currentTimeStr() + "][" + this.module + "]" + line);
}
Logger.prototype.logError = function (line) {
console.log("[" + this.currentTimeStr() + "][" + this.module + "][ER] " + line);
}
Logger.prototype.logInfo = function (line) {
console.log("[" + this.currentTimeStr() + "][" + this.module + "][IF] " + line);
}
Logger.prototype.logDebug = function (line) {
console.log("[" + this.currentTimeStr() + "][" + this.module + "][DT] " + line);
}
Logger.prototype.currentTimeStr = function () {
var now = new Date(Date.now());
var year = now.getFullYear();
var month = now.getMonth() + 1;
var day = now.getDate();
var hour = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var ms = now.getMilliseconds();
return year + "-" + month + "-" + day + " " + hour + ":" + min + ":" + sec + ":" + ms;
}
function Logs(obj){
console.error(obj);
}
function LogsError(obj){
console.error(obj);
}
//编码
function b64Encode (str) {
return btoa(encodeURIComponent(encodeURI(str)));
}
//解码
function b64Decode (str) {
return decodeURI(decodeURIComponent(atob(str)));
}
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if(name=='pass'){
// console.error("query-y->"+r[2])
var uri=decodeURI(r[2]);
// console.error("query-de->"+uri)
var pass=b64Decode(r[2]);
if (r != null) return pass; return null;
}else{
if (r != null) return decodeURI(r[2]); return null;
}
}
function getQueryStringOld(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURI(r[2]); return null;
}
function getUser() {
var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));
if(userItem!=null){
return userItem;
}else{
return null;
}
}
function getUserInfo() {
var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));
if(userItem!=null){
return {UserName:userItem.name,UserGuid:userItem.guid};
}else{
return null;
}
}
function getUserInfo_User() {
var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));
if(userItem!=null){
return {userName:userItem.name,userGuid:userItem.guid};
}else{
return null;
}
}
function getServerIp() {
var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));
if(userItem!=null){
return "http://"+userItem.ip+":"+userItem.port;
}
return null;
}
function getServerIp1() {
var userItem=JSON.parse(localStorage.getItem("tl_login_sc"));
if(userItem!=null){
return "http://"+userItem.ip1+":"+userItem.port1;
}
return null;
}
function getApplicationList(key){
var tl_la=localStorage.getItem(key);
var las=[];
if(tl_la!=null && tl_la.length>0){
var itemlas= JSON.parse(tl_la);
for(var i=0;i<itemlas.length;i++){
las.push(itemlas[i].value)
}
}
return las;
}
//0 预览 1历史回放 2轨迹
function getIpPort(index) {
var user=JSON.parse(sessionStorage.getItem("tl_login"));
var server="";
if(user.serverInfoResp!=null && user.serverInfoResp.length>0){
for(var i=0;i<user.serverInfoResp.length;i++){
if(index==i){
server=user.serverInfoResp[i].serverIp+":"+user.serverInfoResp[i].serverPort;
}
}
}
return server;
}
var rootProDevice=null;
function sendPro(root,xhr,sendKey,obj){
if(obj!=null){
console.error(obj); //js
//sendKey UserLogInRequest
var WSMessage = root.lookupType(sendKey);
var wsmessage = WSMessage.create(obj);
var buffer = WSMessage.encode(wsmessage).finish();
console.error(buffer);
xhr.send(buffer);
}else{
xhr.send();
}
}
function proPostLogin(url,sendKey,resultKey,body,CallResult){
var xhr = new XMLHttpRequest();
if(window.location.href.indexOf("https://")==0){
url=url.replace("http://","https://");
}
xhr.open('POST', url, true); // 也可以使用POST方式,根据接口
// 设置POST请求的请求头
//xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.setRequestHeader("Content-Type", "application/x-protobuf")
xhr.responseType = "blob"; // 返回类型blob
// 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
xhr.onload = function () {
// 请求完成
var blob = this.response;
if (this.status == 200) {
if(resultKey==null){
CallResult(200,null);
}else{
//resultKey 表示使用 proto 里面的 mes方法 VerifyCodeMessage
var WSMessage = rootProDevice.lookupType(resultKey);
var reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function (e) {
var buf = new Uint8Array(reader.result);
var responseUser = WSMessage.decode(buf);
console.log("url->"+url)
console.log(responseUser);
CallResult(200,responseUser);
}
}
}else{
if(blob!=null){
var WSMessage = rootProDevice.lookupType("productMaintain.OrderGeneralResponse");
var reader = new FileReader();
reader.readAsArrayBuffer(blob);
reader.onload = function (e) {
var buf = new Uint8Array(reader.result);
var responseUser = WSMessage.decode(buf);
console.error("loading--->"+sendKey+"")
console.error(responseUser)
console.error("loading--->"+resultKey+"")
CallResult(500,responseUser);
}
}else{
CallResult(500,"");
}
}
};
if(rootProDevice==null){
protobuf.load("pro/order.proto?r=2.3.1&r="+Math.random(),function (err, root) {
if (err) throw err;
rootProDevice=root;
sendPro(rootProDevice,xhr,sendKey,body);
});
}else{
sendPro(rootProDevice,xhr,sendKey,body);
}
}
引入的数据类,转义的 ----> order.proto
syntax = "proto3";
package productMaintain;
message SearchCustomOrderRequest{
HttpUserInfo httpUserInfo = 1;
string customId = 2; //Custom ID
string orderId = 3; //Order ID
string materialId = 4;// Material Category
string expectStartTime = 5;//Expect Start Time:2020-10-20 08:00:00
string expectEndTime = 6;//Expect End Time:2020-10-20 23:59:59
}
message OneOrderInfo{
string orderId = 1;
string materialId = 2;
string customId = 3;
string modelType = 4;
string productDesc = 5;
string license = 6;
uint32 number = 7;
string orderStartTime = 8;
string expectedOutTime = 9;
uint32 alreadyOutNumber = 10;
string remark = 11;
}
message SearchCustomOrderResponse{
repeated OneOrderInfo orderInfo = 1;
}
enum OrderPlatformType{
PlatformUnknown = 0;
WebBrowser = 1; //Web Browser
Android = 2; //Android
IOS = 3; //Ios
}
//通用回复
message OrderGeneralResponse{
uint32 requestCmdId = 1;
uint32 Result = 2;
string appType = 3;
string errDes = 4;
}
//错误回复
message OrderErrorRequest{
uint32 errType = 1;
uint32 requestCmdId = 2;
string errTime = 3;
string appType = 4;
string errDes = 5;
}
//用户登录
message OrderUserLogInRequest{ //发送命令UserLogin
string userName = 1;
string userPwd = 2;//Use Md5 Encryption
OrderPlatformType platformType = 3;//Platform Type
}
message HttpUserInfo{
string userName = 1;
string userGuid = 2;
}
message VerifyCodeMessage{
string verifyId = 1;//
string base64Blob = 2;//When for Verify the result, no need Write base64Blob
string verifyValue = 3;//When Request,represent user write code,When response,success or fail
}
message UserLogInRequest{
string userName = 1;
string userPwd = 2;//Use Md5 Encryption
PlatformType platformType = 3;//Platform Type
VerifyCodeMessage verifyMessage = 4;//Verify Code
string wechatid = 5;//wechatid
}
enum PlatformType{
PlatformUnknown = 0;
WebBrowser = 1; //Web Browser
Android = 2; //Android
IOS = 3; //Ios
}
message UserLogInResponse{
string sessionId = 1; //Session
string userPrivilege = 2;
uint64 servTimestamp = 3; //timestamp:1577444840
string formatTimestamp = 4; //2017-03-05 00:00:00
uint32 userRole = 5; //User Role Type
string userName = 6;
}
最后的模样:
有的功能:
- 可以分页,每页10条数据
- 可以某一字段进行搜索
- 可以对时间进行排序
对文章有帮助的:js实现前端分页页码管理 - W.Y - 博客园