最近我发现了一个英文的文字游戏，在玩的过程中发现有很多生词，虽然说不会阻碍我理解游戏剧情，但是不抓住玩游戏的机会多记几个生词就太可惜了（虽然有了这个应用之后也不一定会背233），所以我就用php和mysql数据库写了一个背词宝应用。最初的版本只是实现了最基本的功能，那就是记词，然后可以把生词显示出来，背完的生词可以删除，之后会根据自己的实际需要对应用进行完善。
最初的版本一共有四个页面，分别是主页面index.html，插入操作页面insert.php，生词复习页面review.php，删除页面delete.php.
index.html
<!--这个页面是 背词宝 的主界面，也就是输入词的界面-->
<!DOCTYPE html>
<html>
<head>
<title>
欢迎使用背词宝
</title>
<mate charset="UTF-8">
<style type="text/css">
body{
padding:0px;
margin:0px;
}
.div1{
width:40%;
height:500px;
}
.div2{
width:100px;
height:200px;
margin-left:5px;
}
.title{
margin:0 auto;
width:300px;
}
.char{
color:rgb(98,94,91);
font-family:微软雅黑;
font-size:25px;
width:100px;
}
.form{
margin: 35px auto;
padding:30px;
box-shadow: 1px 1px 2px 1px #aaaaaa;
border-radius: 3px;
width:380px;
}
.word{
background-color: rgb(250, 255, 189);
border-radius: 3px;
box-shadow: none;
color: rgb(0, 0, 0);
line-height: 26px;
width:240px;
margin:5px;
}
.add{
width:330px;
height:36px;
background-color:#00bee7;
color:#fff;
border-radius: 5px;
margin-left:5px;
}
.link{
color:rgb(98,94,91);
font-family:微软雅黑;
font-size:25px;
}
a{text-decoration: none;font-size:25px;font-family:微软雅黑;color:rgb(98,94,91);}
a:link{color:blue;}
a:hover{color:grey;}
a:visited{color:grey;}
a:active{color:grey;}
</style>
</head>
<body>
<div class="div1">
<span class="ttile" align="center"><font class="char">  欢迎使用 背词宝 Version 1.0</font></span>
<br>
<span class="title" align="center"><font class="char">   请在下面表单中添加生词</font></span>
<div class="div2">
<form action="insert.php" method="post" class="form">
单词：  <input type="text" name="word" class="word" placeholder="请输入单词"><br>
词性：  <input type="text" name="characteristic" class="word" placeholder="请输入词性"><br>
中文解释：<input typpe="text" name="translate" class="word" placeholder="请输入中文解释"><br>
   <input type="submit" value="添加" class="add" />
</form>
<p class="title" align="center"><font class="char">     <a href="review.php">点我复习单词</a></font></p>
</div>
</div>
</body>
</html>insert.php
<html>
<head>
<title>php后台服务程序</title>
<meta charset="utf-8">
</head>
<body>
<?php
//接收数据
function get_str($str){
$val = ($_POST[$str])?$_POST[$str]:null;
return $val;
}
$word = get_str("word");
$char = get_str("characteristic");
$tran = get_str("translate");
echo $word.$char.$tran;
if($word == null or $char == null or $tran == null){
?>
<script type="text/javascript">
alert("输入不能为空");
//window.location.href="index.html";
</script>
<?php
}
//连接数据库
$con = mysql_connect("localhost","root","root") or die("数据库连接失败");
$sql = "insert into vocabulary (word,characteristic,translate) values ('$word','$char','$tran')";
mysql_select_db("rectitation",$con) or die ("数据库选择失败");
$info = mysql_query($sql,$con) or die("数据写入失败");
if($info){
?>
<script type="text/javascript">
alert("写入成功");
window.location.href="index.html";
</script>
<?php
}
?>
</body>
</html>review.php
<html>
<head>
<title>单词复习页面</title>
<meta charset="utf-8">
<style type="text/css">
body{
padding:0px;
margin:0px;
}
.main{
margin-top:2px;
width:40%;
}
.char{
color:rgb(98,94,91);
font-family:微软雅黑;
font-size:25px;
}
.word{
background-color: rgb(250, 255, 189);
border-radius: 3px;
box-shadow: none;
color: rgb(0, 0, 0);
line-height: 26px;
width:160px;
margin:5px;
}
.delete{
width:60px;
height:36px;
background-color:#00bee7;
color:#fff;
border-radius: 5px;
margin-left:5px;
margin-left:50px;
}
.table_title{
width:660px;
border:1px solid;
border-color:black;
}
.td{
font-size:20px;
font-family:微软雅黑;
color:rgb(98,94,91);
width:80px;
}
.td1{
font-size:20px;
font-family:微软雅黑;
color:rgb(98,94,91);
width:120px;
}
.char1{
color:rgb(98,94,91);
font-family:微软雅黑;
font-size:25px;
width:200px;
}
a{text-decoration: none;font-size:25px;font-family:微软雅黑;color:rgb(98,94,91);}
a:link{color:blue;}
a:hover{color:grey;}
a:visited{color:grey;}
a:active{color:grey;}
</style>
</head>
<body>
<div class="main">
<div class="char" >
<form action="delete.php" method="post">
背会了，删除单词：<input type="text" name="delete_word" class="word" placeholder="请输入已经背会的单词">
<input type="submit" value="删除" class="delete">
</form></div>
<div class="main">
<table class="table_title" align="left">
<tr>
<td class="td">单词</td>
<td class="td">词性</td>
<td class="td">中文解释</td>
</tr>
<?php
$con = mysql_connect("localhost","root","root") or die("数据库连接失败");
mysql_select_db("rectitation") or die("数据库选择失败");
$sql = "select * from vocabulary";
$info = mysql_query($sql,$con) or die("数据查询失败");
$num = mysql_num_rows($info);//有几行数据
if($num){
while($row = mysql_fetch_row($info)){
echo "<tr><td class='td'>".$row[1].
"</td><td class='td'>".$row[2]."</td>
<td class='td1'>".$row[3]."</td></tr>";
}
}
?>
</div>
<div class="main">
<p class="char1">
<a href="index.html">点我返回首页</a>
</p>
</div>
</div>
</body>
</html>delete.php
<html>
<head>
<title>生词删除页面</title>
</head>
<style type="text/css">
a{text-decoration: none;font-size:25px;font-family:微软雅黑;color:rgb(98,94,91);}
a:link{color:blue;}
a:hover{color:grey;}
a:visited{color:grey;}
a:active{color:grey;}
.char{
color:rgb(98,94,91);
font-family:微软雅黑;
font-size:25px;
width:200px;
}
</style>
<body>
<?php
function get_str($str){
$val = ($_POST[$str])?$_POST[$str]:null;
return $val;
}
$word = get_str("delete_word");
echo $word;
if(!$word){
?>
<script type="text/javascript">
alert("删除的单词不能为空");
window.location.href="review.php";
</script>
<?php
}
$con = mysql_connect("localhost","root","root")or die ("数据库连接失败");
mysql_select_db("rectitation")or die ("数据库选择失败");
$sql = "delete from vocabulary where word = '$word'";
?>
<a class="char" href="review.php"><br>点我返回单词复习页面<br></a>
<?php
$info = mysql_query($sql,$con)or die ("数据删除失败,请检查该单词是否在生词表中");
if(!$info){
?>
<script type="text/javascript">
alert("删除失败，请检查要删的单词是否在生词表中");
window.location.href="review.php";
</script>
<?php
}else{
?>
<script type="text/javascript">
alert("删除成功，再接再厉！");
window.location.href="review.php";
</script>
<?php
}
?>最后的效果是这样的：
这样游戏窗口就可以放在右边啦，边玩边记生词。欢迎大家提出对背词宝完善的建议。