第十四周开发记录：利用本地端作为server，实现网页端联机功能

一、本周工作总述

1.编写了网页端，并实现了网页联机功能
2.玩家可以查看历史记录

二、运行截图

server端具有本地游玩模式和网页联机模式服务端的双重功能，游戏开始前需在其上填写玩家人数和轮数。

从网页运行端填写游玩数字


刷新后，服务端显示每轮结果

若玩家还未填写新一轮，则提示还未准备好

轮数结束后，显示最终结果

三、代码

1.服务端代码

1.1 连接数据库

void Widget::connectDB()
{
    m_db = QSqlDatabase::addDatabase("QMYSQL");
      m_db.setHostName("localhost");
      m_db.setDatabaseName("test");
      m_db.setUserName("root");
      m_db.setPassword("123456");
      m_db.open();

}

1.2服务端数据处理

bool Widget::on_databasemode2_clicked()
{

    QSqlQuery query(m_db);
    query.exec("select * from gold_point ORDER BY user_id asc;");
    QList<int> strinput[2];
    QStringList nameinput[2];
    int temp=ui->timesLable->text().toInt()+1;
    ui->timesLable->setText(QString::number(temp,10));//设置游戏轮数
    qDebug()<<"temp is "<<temp;
    ui->inputEdit->clear();

    ui->numgameLable_2->setText(QString(temp));
    int mark1=0;
    while(query.next())
    {

        // qDebug()<<query.value(1);
         //qDebug()<<query.value(2);
        // qDebug()<<query.value(3);
        strinput[0]<< query.value(2).toInt();
        strinput[1]<< query.value(3).toInt();
        if(strinput[1][mark1]==1){
        nameinput[1]<< query.value(1).toStringList();}
        mark1++;
    }
    qDebug()<<"nameinput is "<<nameinput[1];
     qDebug()<<"valueinput is "<<strinput[0];
      qDebug()<<"roundinput is "<<strinput[1];
     int a = strinput[0][0];
   /* for(int j=0,k=0;j<playerNum||(k<(times*playerNum));k++)
    {
        if(strinput[1][k]==temp-1){
            nameinput[0][j]=QString(playerNum);
            j++;
            qDebug()<<"namenumber is "<<nameinput[0][j];
        }

    }*/
   // ui->stackedWidget->setCurrentIndex(4);

    int i=0,m,mark=0;
    double t,goldenpoint=0;
    qDebug()<<"playnum is "<<playerNum;
    while (i<playerNum&&(mark<playerNum*times))
    {
        qDebug()<<"strinput is"<<strinput[1]<<"temp is "<<temp;
        if(strinput[1][mark]==temp){
           a=strinput[0][mark];
           num[i]=double(a);
           goldenpoint=goldenpoint+num[i];
           qDebug()<<"num1 is "<<num[i];
           i=i+1;
          }
        mark++;
    }
    qDebug()<<"num is "<<num[0]<<" "<<num[1];
    goldenpoint=goldenpoint*0.618/playerNum;//计算黄金点
    qDebug()<<goldenpoint;
    ui->goldenpointLabel_2->setText(QString::number(goldenpoint,'g',5));//显示黄金点值
    for(int j=1;j<=playerNum;j++)
    {
        num[j-1]=qAbs(num[j-1]-goldenpoint);
        defaultPlayer[j-1]=j;
        qDebug()<<num[j-1];
        qDebug()<<defaultPlayer[j-1];
    }
    for(int j=1;j<=playerNum;j++)
    {

        qDebug()<<num[j-1];

    }

   // std::sort(num[0], num[playerNum-2]);
    for(int j=0;j<playerNum-1;j++)
     {
      for(int k=0;k<playerNum-j-1;k++)
       {
        if(num[k]>num[k+1])         //小到大排序。
        {
         t=num[k];
         num[k]=num[k+1];
         num[k+1]=t;
         m=defaultPlayer[k];
         defaultPlayer[k]=defaultPlayer[k+1];
         defaultPlayer[k+1]=m;
        }
       }
     }

    //赋分
    qDebug()<<"------------";
    for(int j=1;j<=playerNum;j++)
    {
        qDebug()<<num[j-1];
        qDebug()<<defaultPlayer[j-1];
    }
    qDebug()<<defaultPlayer[0]-1;
    qDebug()<<defaultPlayer[playerNum-1]-1;
     score[defaultPlayer[0]-1]=score[defaultPlayer[0]-1]+playerNum;
     score[defaultPlayer[playerNum-1]-1]=score[defaultPlayer[playerNum-1]-1]-2;
     ui->textBrowser_3->clear();
    //显示排行榜
     //defaultPlayer[j]-1;
     strRank="";
     for(int j=0;j<playerNum;j++)
     {
         strRank=strRank+"第"+QString::number(j+1,10)+"位玩家"+nameinput[1][j]+"得分："+QString::number(score[j],10);
         strRank=strRank+"\n";
     }
     ui->textBrowser_3->setText(strRank);//显示排行榜
     qDebug()<<"now temp and times is"<<temp<<" "<<times;
     if(temp==times)//游戏所有轮数完成，跳入结果页面
     {
         ui->timesLable->clear();
         ui->inputEdit->clear();
         ui->textBrowser->clear();
         ui->goldenpointLabel->clear();
         ui->stackedWidget->setCurrentIndex(2);
         ui->textBrowser_2->setText(strRank);
}
     /*else{
     int mark3=0,tmp4=0;
     while(1){
         tmp4=temp+1;
         QString tmp2=QString::number(tmp4);
         qDebug()<<tmp2;
         QString sql="select count(*) from gold_point where round="+tmp2+";";
         qDebug()<<sql;
         query.exec(sql);

         if(query.first()){
             mark3=query.value(0).toInt();
         }
         qDebug()<<"temp and mark3 is"<<temp+1<<" "<<mark3;
         if(mark3==playerNum){
             on_databasemode2_clicked();
             break;
         }
          Sleep(1000);
     }
    }*/
}

2.网页端代码

2.1 上传页面

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@page import="java.sql.*,java.io.*"%>
<html>
	<head>
		<title>黄金点</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
	<body>
	<%int i=1;%>
		<form id="add_form" name="add_form" action="upload.jsp">
			<br>
			您的名称：
			<input type="text" id="user_id" name="user_id" value="">
			<br>
			您的数值：
			<input type="text" id="user_value" name="user_value" value="">
          	<br>
          	轮数:
			<%out.print("<input type=textfield  id=\"round\" name=\"round\" value=");
             out.print("");
              out.print(">");%>
          	<br>
			<input type="submit" name="submit_btn" value="提交">
		</form>
		<input type="button" value="当前数据列表" onclick="javascrtpt:window.location.href='record_list.jsp'"/>
		</body>
</html>

2.2 游戏记录页面

<%--  --%><%@page contentType="text/html; charset=UTF-8"%>
<html>
	<head>
		<meta charset="utf-8" />
		<title>游戏记录</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta content="width=device-width, initial-scale=1" name="viewport" />
		<meta content="" name="description" />
		<meta content="" name="author" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<div style="margin:50px;border:2px solid pink;">
			<table class="table table-striped table-bordered table-hover datatable" id="record_list">
				<thead>
					<tr>
						<th class="table-checkbox"><input type="checkbox" class="group-checkable" data-set="#record_list .checkboxes" /></th>
						<th>序号</th>
						<th>玩家名称</th>
						<th>玩家的值</th>
						<th>上传时间</th>
					</tr>
				</thead>
			</table>
		</div>
	</body>
	<!-- END BODY -->
</html>
<link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="jquery.uniform.min.js"></script>
<script type="text/javascript" src="jquery.dataTables.min.js"></script>

<script src="record_list.js" type="text/javascript"></script>

四、总结

本周利用网页实现了联机功能，并在原来的游戏客户端版本的基础上添加了新功能，迭代为服务端，基本上实现了游戏的联机游玩功能。