2019-07-30 PHP+MySQL开发简单的留言板（3）

留言板最重要的还是留言功能，所以现在需要开发添加留言功能。

MySQL设置

添加留言的本质也是数据库的插入操作，所以新建一个message数据库，并用以下SQL语句建立message表：

CREATE TABLE `message` (

  `id` int(32) NOT NULL AUTO_INCREMENT,

  `user` varchar(30) DEFAULT NULL,

  `title` nvarchar(100) DEFAULT NULL,

  `content` nvarchar(4000) DEFAULT NULL,

  `time` datetime DEFAULT NULL,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=utf8;

添加留言界面的前端设计

先上效果图。添加留言的界面采用了跟注册、登录页面类似的设计：

HTML

add.html

    
    
    


    

        首页
    
    

        

            

                
添加留言
                

                    
                    
                    
                
            
        
    
    

CSS

add.css

* {
    margin: 0;
    padding: 0;
}

html {
    font-family: DengXian, "Microsoft YaHei";
    background-color: #dFdFdF;
}

.topbar {
    display: flex;
    width: 100%;
    height: 40px;
    background-color: #036;
    position: fixed;
}

.indexbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 1.2em;
    color: white;
    text-decoration: none;
}

.bigbox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    /*background-color: #dFdFdF;*/
    /*background: linear-gradient(45deg, #9CBFFD, #C4ECFB);*/
}

.addBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 800px;
    height: 540px;
    box-shadow: 0 5px 10px grey;
    background-color: white;
}

.title {
    font-size: 3em;
    font-weight: 800;
    text-align: center;
    margin-bottom: 50px;
    padding-bottom: 10px;
    color: #036;
    border-bottom: 1px solid #003366;
}

.submitbtn {
    display: block;
    outline: none;
    border: none;
    width: 600px;
    height: 30px;
    color: white;
    font-weight: 700;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    background-color: #036;
}

.submitbtn:hover {
    cursor: pointer;
}

.textbox {
    display: block;
    outline: none;
    border: none;
    /*background-color: cornflowerblue;*/
    width: 600px;
    height: 30px;
    color: #036;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 0 10px darkgrey inset;
}

.content {
    display: block;
    outline: none;
    border: none;
    /*background-color: cornflowerblue;*/
    width: 600px;
    height: 300px;
    color: #036;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 1.1em;
    box-shadow: 0 0 10px darkgrey inset;
}

JavaScript

这个JavaScript脚本的主要作用是防止按下回车键的时候表单提交，以及检查输入内容是否为空。

var addForm = document.getElementById('addForm')
var title = document.getElementById('title')
var content = document.getElementById('content')

addForm.onkeydown = function (ev) {
  if (ev.keyCode === 13) {
    return false
  }
}

addForm.onsubmit = function () {
  if (title.value === '') {
    alert('标题不能为空！')
    return false
  } else if (content.value === '') {
    alert('内容不能为空！')
    return false
  } else {
    return true
  }
}

添加留言功能的实现

前面提到了，添加留言的本质与注册一样是向数据库中插入信息，所以把register.php改了改就拿来用了。

这里多了一个checkBlank()函数，用于检查输入的内容是否为空。

add.php

alert("请先登录！"); document.location.href = "./html/login.html"');
    }

    // 用户的数据：用户名、标题、内容
    $user = $_SESSION['username'];
    $title = $_POST['title'];
    $content = $_POST['content'];

    checkBlank($title);
    checkBlank($content);

    mysqli_select_db($con, 'message');      // 选择数据库
    mysqli_set_charset($con, 'utf-8');   // 选择字符集

    // 当用户点击提交按钮时，向数据库插入留言信息，并返回提示信息、回到首页
    if ($_POST['title'] && $_POST['content']) {
        $sql = "insert into message(user, title, content, time)values('$user','$title','$content',now())";
        $result = mysqli_query($con, $sql);

        if ($result) {
            echo '';
            mysqli_close($con);
        } else {
            die('添加失败！');
        }
    }
?>