山东大学Web课设——课程学习网站的搭建

最新推荐文章于 2021-06-22 21:17:16 发布

joey小天使

最新推荐文章于 2021-06-22 21:17:16 发布

阅读量2.7k

点赞数 6

分类专栏：山东大学文章标签： java javascript jquery

本文链接：https://blog.csdn.net/joey_ro/article/details/104123618

版权

山东大学专栏收录该内容

8 篇文章 10 订阅

订阅专栏

关于web的一些感悟，web这门课程真的收获很多（虽然最后成绩不太理想），从一开始单纯的应付课设到自己看网课学习，可以说这门课如果认真学习的话还是能收获很多的，所以如果正在浏览这篇博文的是SDU的话，要认真学习web这门课啊，很有用的一门课程！不多说了上干货。

1.前导介绍：B/S C/S 的优缺点

1）c/s

c/s是Client/Server指客户机和服务器，在客户机端必须装客户端软件及相应环境后，才能访问服务器（胖客户端）。
第二学期的Java课设就是明显的基于c/s设计的：
在这里插入图片描述
像qq，微信，王者荣耀，GTA5……这样的软件都是基于c/s设计的。优点就是能充分发挥客户端PC的处理能力，很多工作可以在客户端处理后再提交给服务器。客户端响应速度快。尤其是大型游戏等流畅度要求很高的软件一般都使用c/s模式。
对应的缺点：
由于每个用户都要下载客户端，客户端需要安装专用的客户端软件及运行环境。首先涉及到安装的工作量，其次任何一台电脑出问题，如病毒、硬件损坏，都需要进行安装或维护。还有，系统软件升级时，每一台客户机需要重新安装，其维护和升级成本非常高。

2）b/s

B/S 是Browser/Server指浏览器和服务器端，在客户机端不用装专门的软件，只要一个浏览器即可（瘦客户端）
这次的web课设就是b/s模式，b/s最大的优点是客户端不用维护，适用于用户群庞大，或客户需求经常发生变化的情况。像淘宝网，京东网，4399游戏……都属于b/s模式。
对应的缺点当服务端越来越“胖”时，客户端的反应速度会变慢，用户体验会很不好。

2.课程设计要求：

在这里插入图片描述
就是设计一个简单的课程介绍网站。不过第一个是只利用前端开发技术，而第二个是要加入后端内容（连接数据库）。这里只介绍一个包含后端的网站开发。

3.前期准备（“装备”）

1）Tomcat

Tomcat是由Apache软件基金会属下Jakarta项目开发的Servlet容器，按照Sun Microsystems提供的技术规范，实现了对Servlet和JavaServer Page（JSP）的支持，并提供了作为Web服务器的一些特有功能，如Tomcat管理和控制平台、安全局管理和Tomcat阀等。由于Tomcat本身也内含了HTTP服务器，因此也可以视作单独的Web服务器。
简单来说Tomcat就是一个开源的，免费的小型web服务器，用于开发者调试网站十分有用。

下载：

（1）所有软件最直接最安全的下载途径就是直接上官网：tomcat的官网：点这里
在这里插入图片描述
这里我们选择最新的tomcat9.

根据自己的Windows版本选择要下载的32位还是64位。
（2）通过百度网盘，这是我的分享：点这里密码i4qh
下载完成后直接解压即可！

tomcat结构

解压后的tomcat目录，主要掌握bin文件夹和webapps文件夹
在这里插入图片描述
（1）bin中含有两个bat文件，start.bat用于启动tomcat，shutup.bat用于关闭tomcat

（2）webapps文件夹用于部署自己的web文件，通常是war包，tomcat能够自动解压war包

tomcat的环境配置：

一个超详细的b站视频，建议看完后在配环境。

2）web开发工具

如果只是前端的话，可以使用JetBrains WebStorm和dreamweaver（都很好用）。但是由于我们涉及到后端开发所以推荐使用eclipse或者是IntelliJ IDEA。
我这里使用的是intelliJ IDEA，十分好用。
官网下载

3）数据库

使用现在还是免费和开源的MySQL。
（1）下载：官网下载
（2）可视化软件：navicat
Navicat 是香港卓软数字科技有限公司生产的一系列 MySQL、MariaDB、MongoDB、Oracle、SQLite、PostgreSQL 及 Microsoft SQL Server 的图形化数据库管理及发展软件。它有一个类似浏览器的图形用户界面，支持多重连线到本地和远程数据库。它的设计合乎各种用户的需求，从数据库管理员和程序员，到各种为客户服务并与合作伙伴共享信息的不同企业或公司。
反正是一款连接数据库的神器Navicat官网

4.学习：

首先要学习html，css，js和jQuery……一系列的前端知识

学习的是储久良的web前端开发，不过没有jQuery的学习，jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。全球前10,000个访问最高的网站中，有65%使用了jQuery，是当前最受欢迎的JavaScript库。
下载地址：jQuery。

学习jsp和servlet

servlet是用Java编写的服务器端程序。其主要功能在于交互式地浏览和修改数据，生成动态Web内容。狭义的Servlet是指Java语言实现的一个接口，广义的Servlet是指任何实现了这个Servlet接口的类，一般情况下，人们将Servlet理解为后者。Servlet运行于支持Java的应用服务器中。从实现上讲，Servlet可以响应任何类型的请求，但绝大多数情况下Servlet只用来扩展基于HTTP协议的Web服务器。
jsp是由Sun Microsystems公司主导创建的一种动态网页技术标准。JSP部署于网络服务器上，可以响应客户端发送的请求，并根据请求内容动态地生成HTML、XML或其他格式文档的Web网页，然后返回给请求者。JSP技术以Java语言作为脚本语言，为用户的HTTP请求提供服务，并能与服务器上的其它Java程序共同处理复杂的业务需求。
通俗的讲jsp就是servle不过是由服务器将jsp文件中的Java代码解释成servlet。
学习视频：韩顺平的servlet视频
 动力节点的jsp的视频
 使用IDEA从前端到后端

5.代码编写

0）（照顾第一次使用IDEA的同学）IDEA创建web项目

IDEA没有配好环境的一定要先配好环境
在这里插入图片描述
在JavaEE中创建WebApplication

创建自己的项目之后

其中src是用来放后端代码（servlet），web中是存放前端代码（但是包含jsp），初始化了一个index.jsp这就是初始的界面。

由于项目比较大不可能将所有代码全部展示，只能挑选一些我觉得重要的，常见的功能的实现代码。

1）大图轮播

一开始打算使用Swiper，很好用的插件，几行代码就可以实现大图轮播
在这里插入图片描述
可以前进可以后退，代码很少，不到100行。如下：

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="swiper/package/css/swiper.min.css">

    <!-- Demo styles -->
    <style>
        html, body {
            position: relative;
            height: 100%;
        }
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
    </style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="Photos/java.png"></div>
        <div class="swiper-slide"><img src="Photos/jiazaineirong.jpg"></div>
        <div class="swiper-slide">Slide 3</div>
        <div class="swiper-slide">Slide 4</div>
        <div class="swiper-slide">Slide 5</div>
        <div class="swiper-slide">Slide 6</div>
        <div class="swiper-slide">Slide 7</div>
        <div class="swiper-slide">Slide 8</div>
        <div class="swiper-slide">Slide 9</div>
        <div class="swiper-slide">Slide 10</div>
    </div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
</div>

<!-- Swiper JS -->
<script src="swiper/package/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
    var swiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
</script>
</body>
</html>

但是我发现我是用这个插件无法将定时轮播和手动前进很好的结合导致有buff，于是我打算使用jQuery。
一开始使用的是js代码：

<!--实现图片的轮播的js逻辑-->
    <script type="text/javascript">
        var len = document.getElementsByName("i");
        var pos = 0;
        function changeImage() {
            len[pos].style.display = "none";//隐藏元素
            pos++;
            if (pos == len.length){
                pos=0;//再次从头开始播放
            }

            len[pos].style.display = "block";//显示元素

        }
        setInterval('changeImage()',2000);//每个两秒执行一次函数
    </script>

后来改为jQuery代码：
最后样式：
有前进有后退，还有小点代表达到第几张图，在给图片加上超链接就可以实现和淘宝等很多购物网站相同的效果。
在这里插入图片描述
html骨架：

<!--实现图片的轮播-->
    <div id="Header" class="pic">
        <div id="front" class="content">
            <a class="class_i" href="#"><img src="CSS文件/frontEnd/why.jpg" style="width: 1290px" height="458px"></a>
            <a class="class_i" href="#"><img src="CSS文件/frontEnd/html5.jpg" style="width: 1290px" height="458"></a>
            <a class="class_i" href="#"><img src="CSS文件/frontEnd/css.jpeg" style="width: 1290px" height="458"></a>
            <a class="class_i" href="#"><img src="CSS文件/frontEnd/js.png" style="width: 1290px" height="458"></a>
            <a class="class_i" href="#"><img src="CSS文件/frontEnd/jQuery.jpg" style="width: 1290px" height="458"></a>
            <a class="class_i" href="#"><img src="CSS文件/afterEnd/jsp.jpg" style="width: 1290px" height="458px"></a>
            <a class="class_i" href="#"><img src="CSS文件/afterEnd/jsf.jpg" style="width: 1290px" height="458px"></a>
            <a class="class_i" href="#"><img src="CSS文件/afterEnd/mysql.png" style="width: 1290px" height="458px"></a>
            <a class="class_i" href="#"><img src="CSS文件/afterEnd/node.png" style="width: 1290px" height="458px"></a>
        </div>
        <!--    图片下面的小点    -->
        <ul class="index" style="align-self: center" >
            <li class="class_li" style=" background-color: red;"></li><!-- 起始点是红色的 -->
            <li class="class_li"></li>
            <li class="class_li"></li>
            <li class="class_li"></li>
            <li class="class_li"></li>
            <li class="class_li"></li>
            <li class="class_li"></li>
            <li class="class_li"></li>
        </ul>
        <div class="right">></div>
        <div class="left"><</div>
    </div>

css样式：

<!--实现图片的轮播的css逻辑-->
    <style>
        .left{
            width: 30px;
            height:50px;
            background-color:rgba(100,100,100,0.5);
            position: absolute;
            left: 0px;
            top: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            display: none;
        }
        .right{
            width: 30px;
            height:50px;
            background-color:rgba(100,100,100,0.5);
            position: absolute;
            right: 0px;
            top: 150px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            color: #fff;
            display: none;
        }
    </style>

jquery逻辑代码：

<!--实现图片的轮播的js逻辑-->
    <script type="text/javascript">
        $(function(){
            //每个固定的时间移动图片
            var timer = setInterval(picLoop,2000);
            var index = 0;

            //定时移动图片
            function picLoop(){
                index++;
                if (index==8) {index=0;}
                $(".content").animate({"left":-1290*index},300);
                $(".class_li").eq(index).css("background-color","red")
                    .siblings().css("background-color","rgba(100,100,100,0.3)");
            }

            //定时器的控制
            $(".pic").hover(function(){
                clearInterval(timer);
                $(".left").show();
                $(".right").show();
            },function(){
                timer = setInterval(picLoop,2000);
                $(".left").hide();
                $(".right").hide();
            });


            //小点控制显示那张图片
            $(".class_li").mouseover(function(){
                $(this).css("background-color","red")
                    .siblings().css("background-color","rgba(100,100,100,0.3)");
                index = $(this).index();
                $(".content").animate({"left":-1290*index},300);

            })

            //左右移动图片
            $(".left").click(function(){
                index--;
                if (index==-1) {index=7;}
                $(".content").animate({"left":-1290*index},300);
                $("li").eq(index).css("background-color","red")
                    .siblings().css("background-color","rgba(100,100,100,0.3)");
            })
            $(".right").click(function(){
                index++;
                if (index==8) {index=0}
                $(".content").animate({"left":-1290*index},300);
                $("li").eq(index).css("background-color","red")
                    .siblings().css("background-color","rgba(100,100,100,0.3)");
            })


        })
    </script>

解析分析

在jQuery中设置一个容器content储存所有要显示的图片

 .content{
            /*<!--能存好多张图 -->*/
            width: 99999px;

然后定时调用一个不断改变偏移量的函数：

//定时移动图片
            function picLoop(){
                index++;
                if (index==8) {index=0;}
                //偏移量 显示的内容与容器初始内容的偏移量
                $(".content").animate({"left":-1290*index},500);
                $(".class_li").eq(index).css("background-color","red")
                    .siblings().css("background-color","rgba(100,100,100,0.3)");
            }

关闭与启动定时器：

//定时器的控制
            $(".pic").hover(function(){
                clearInterval(timer);//clearInterval(timer)的作用只是将定时器停止，但是timer变量本身还是存在的
                $(".left").show();
                $(".right").show();
            },function(){
                timer = setInterval(picLoop,2000);//离开时启动定时器
                $(".left").hide();
                $(".right").hide();
            });

2）登录功能

1.要实现登陆功能必须要连接数据库。

1)在MySQL中建表:
在这里插入图片描述
包含报名该课程学生的id,name,username和password
2)连接数据库
连接数据库：具体见该篇博文
3)检验是否连接成功
当你写一个项目,尤其是比较大的项目时最好能够写一个功能检验一个功能,否则积到一起很难检验出到底是那不好使.
最好能建一个包写一个功能检验一个功能
在这里插入图片描述

2.完善逻辑

逻辑：现在一个jsp页面中填写登录信息，再将登陆信息送到servlet中，servlet调用dao中的方法进行验证，如果成功进入主界面（index.jsp），失败则返回登陆界面(login.jsp)。

a登陆界面
重定向和转发的区别点这里
b成功之后
回到主页面，但是出现乱码问题。
在这里插入图片描述
但是我查了好多资料，大约两个小时，也没有解决中文乱码问题。网上的方法分明很简单但是我试了所有方法却总是不对，于是我只有取巧，将同学的名字命名为拼音。希望有会的大佬能给我在下面评论一下

3.效果

登陆界面
在这里插入图片描述
登陆主界面：

3）基本功能实现

1.教学大纲、课程介绍等教学内容的浏览

学习mooc的设计方法，图文并茂的方式
在这里插入图片描述

难点：css样式的调试，这个要自己动手，多调试几遍就可以了。

2.教学课件浏览和下载

由于ppt的网上展示我没有找到方法，于是我采用了将ppt转成pdf的形式。
在这里插入图片描述
pdf展示所用的代码：其实很简单

<div id="di1">
             <!--以PDF的形式展示-->
             <iframe id="iFrame" src="PDF/HTML-1.pdf" width="100%" height="100%">

                 This browser does not support PDFs. Please download the PDF to view it: <a href="PDF/HTML-1.pdf">Download PDF</a>

             </iframe>
         </div>

由于我的下载是可以多选的，所以有复杂的js逻辑，简单的说一下：
在这里插入图片描述
html是一组复选框

<input type="checkbox" id="1" name="ppt" value="01" class="gcs-checkbox">

js是三个函数
1.确定要下载那个ppt

function selectOne() {
    var names = document.getElementsByName("ppt");//获得所有的checkbox

    // alert(names.length);

    var flag = false;

    for (var i=0;i<names.length;i++){
        if (names[i].checked){//确定复选框是否选中
            flag = true;
            names[i].checked = false;//下载的同时将选中清空
            download(i);

        }
    }

    if (!flag){
        alert("请至少选择一项！");
        return false;
    }

}

2.函数确定要下载的ppt

function download(i){
    switch (i+1) {
        case 1:
            downloadFile("PPT/Web技术01-HTML-1.pptx");
            break;

        case 2:
            downloadFile("PPT/Web技术02-HTML-2.pptx");
            break;

        case 3:
            downloadFile("PPT/Web技术03-CSS-1.pptx");
            break;

        case 4:
            downloadFile("PPT/Web技术04-CSS-2.pptx");
            break;

        case 5:
            downloadFile("PPT/Web技术05-CSS-3.pptx");
            break;

        case 6:
            downloadFile("PPT/Web技术06-JS-1.pptx");
            break;

        case 7:
            downloadFile("PPT/Web技术07-JS-2.pptx");
            break;

        case 8:
            downloadFile("PPT/Web技术08-Servlet.ppt");
            break;

        case 9:
            downloadFile("PPT/Web技术09-JSP.ppt");
            break;

         case 10:
            downloadFile("PPT/Web技术10-会话JDBC.ppt");
            break;

        case 11:
            downloadFile("PPT/Web技术11-EL、JSTL.ppt");
            break;

        case 12:
            downloadFile("PPT/Web技术12-其他专题.ppt");
            break;

        case 13:
            downloadFile("PPT/Web技术13-SSH-1.ppt");
            downloadFile("PPT/Web技术14-SSH-2.ppt");
            break;

        case 14:
            downloadFile("PPT/Web技术15-Vue.ppt");
            break;

        case 15:
            downloadFile("PPT/Web技术16-开发案例.ppt");
            break;

    }
}

3.根据url确定要下载的文件

function downloadFile(url)
{
    try{
        var elemIF = document.createElement("iframe");
        elemIF.src = url;
        elemIF.style.display = "none";
        document.body.appendChild(elemIF);
    }catch(e){

    }
}

3.视频的浏览和下载

在这里插入图片描述
难点就是我利用js逻辑实现了切换节目单的功能（虽然说很丑，我的UI一直不好）但是只要学会逻辑在美化一点应该是很不错的功能。
代码实现：
html

<div id="di2">

           <!--更改节目单-->
           <span class="font40" style="margin-top: 5px"> &nbsp;&nbsp;请选择视频类型：</span>
           <label>
               <select id="getVideo">
                   <option selected = selected value="html">HTML</option>
                   <option value="css">CSS</option>
                   <option value="js">JS</option>
               </select>
               <input type="button" class="new_button" id="ok" value="确定" onclick="changeVideo()">
           </label><br>





           <!--节目单：-->
           <!--html的有关视频-->
           <br>
           <br>
           <br>
           <br>
           <br>
           <div id="html" >
               <a onclick="getVideo1(1)" target="_self" title="观看视频1"><p align="center" class="font41">观看PHP</p></a><!-- p段落自动换行 -->
               <a onclick="getVideo2(1)" title="观看视频2"><p class="font41">观看钱德勒尬舞</p></a>
               <a onclick="getVideo3(1)" title="观看视频3"><p class="font41">观看莫妮卡尬舞</p></a>
               <a onclick="getVideo4(1)" title="观看视频4"><p class="font41">观看灵狐前传</p></a>
               <a onclick="getVideo5(1)" title="观看视频5"><p class="font41">观看GTA5</p></a>
           </div>

           <!--css的有关视频-->
           <div id="css" >
               <a onclick="getVideo1(2)" target="_self" title="观看视频1"><p align="center" class="font41">css1</p></a><!-- p段落自动换行 -->
               <a onclick="getVideo2(2)" title="观看视频2"><p class="font41">css2</p></a>
               <a onclick="getVideo3(2)" title="观看视频3"><p class="font41">css3</p></a>
               <a onclick="getVideo4(2)" title="观看视频4"><p class="font41">css4</p></a>
               <a onclick="getVideo5(2)" title="观看视频5"><p class="font41">css5</p></a>
           </div>

           <!--js的有关视频-->
           <div id="js">
               <a onclick="getVideo1(3)" target="_self" title="观看视频1"><p align="center" class="font41">js1</p></a><!-- p段落自动换行 -->
               <a onclick="getVideo2(3)" title="观看视频2"><p class="font41">js2</p></a>
               <a onclick="getVideo3(3)" title="观看视频3"><p class="font41">js3</p></a>
               <a onclick="getVideo4(3)" title="观看视频4"><p class="font41">js4</p></a>
               <a onclick="getVideo5(3)" title="观看视频5"><p class="font41">js5</p></a>
           </div>

       </div>

js代码：

//改变视频播放单和视频下载序列
function changeVideo() {

    var myValue = $('#getVideo option:selected').val();//获得下拉框中的值

    var html = $('#html');
    var css = $('#css');
    var js = $('#js');

    var html_d = $('#download_html');
    var css_d = $('#download_css');
    var js_d = $('#download_js');

    // alert(myValue);

    switch (myValue) {
        case "html":

            document.querySelector('#play').src = "Video/HTML1.mp4";

            html.show();
            css.hide();
            js.hide();

            html_d.show();
            css_d.hide();
            js_d.hide();
            break;

        case "css":

            document.querySelector('#play').src = "Video/css1.mp4";

            html.hide();
            css.show();
            js.hide();

            html_d.hide();
            css_d.show();
            js_d.hide();
            break;

        case "js":

            document.querySelector('#play').src = "Video/js1.mp4";

            html.hide();
            css.hide();
            js.show();

            html_d.hide();
            css_d.hide();
            js_d.show();
            break;

    }

}

4）最重要的功能留言和回复

前端实现：

在这里插入图片描述

数据库设计：

三个表：分别记录用户，留言和对留言的回复（暂时没有对留言回复的回复）
在这里插入图片描述
users表，记录每个学生

answering表记录每个人的留言
name就是留言人，review是留言内容，time和id都是自动产生的，time是留言时间，id是每个留言不同的编号，用于记录留言的回复是那些！

reply记录对不同留言的回复
reply_id就是对应留言的id，reply_name是回复人的姓名，reply_review是回复的内容。
在这里插入图片描述

流程

1.在留言板中留言：
在这里插入图片描述

2.回复别人的留言

逻辑及源码

在这里插入图片描述
1.在answering.jsp中留言，交给write_review.jsp处理加入到数据库中。
2.在answering.jsp中回复，交给write_sql.jsp处理添加到数据库中。
3.不过是留言还是回复成功后都返回到index.jsp中。

1.answering.jsp的源码：

<%@ page import="java.util.List" %>
<%@ page import="com.education.User.Reply_content" %>
<%@ page import="com.education.dao.ReviewDao" %>
<%@ page import="com.education.dao.ReplyDao" %>
<%@ page import="com.education.User.ReviewInformation" pageEncoding="UTF-8" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String name = (String) session.getAttribute("username_msg");

    System.out.println("留言的是"+name);

    if (name==null){
        %>
<script>
    alert("请您先登陆！")
</script>

<%
    }else {

//        System.out.println("fuck!");


        %>

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>留言板</title>
    <link type="text/css" href="CSS文件/Liuyan.css" rel="stylesheet">
    <style type="text/css">
        #Di0{
            width: 100%;
            height: 560px;
            background-color: #FF9900;
        }
        #Di1{
            width: 25%;
            height: 560px;
            float: left;
            background-color: #cad9ea;
            background-image: url("imgs/back00.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        #Di2{
            width: 75%;
            height: 560px;
            background-color: #cad9ea;
            float: right;
            background-image: url("CSS文件/Photos/liuyan.jpg");
            background-size: 100% 560px;/* 第一个值指定图片的宽度，第二个值指定图片的高度 */


            overflow:auto;/*使div出现下拉框*/
        }

        #result{
            font-weight: bold;
            font-family: 隶书;
            font-size: 20px;

            text-align: center;

            background-color:transparent;/*background-color设置为透明的方法*/
            padding: 0;
            margin: 0;

            /*//不能改变大小*/
            resize:none;

        }

    </style>
    <!--引入jQuery-->
    <script language="JavaScript"  src="Jquery/jquery-3.4.1.js"></script>
    <style>
        .font1 {
            font-size: 12px;
            text-shadow: 5px 5px 5px black, 0px 0px 2px black; /* 没错这里设置了两个 shadow */
            color: white;

            font-weight: bolder;
            font-family: "宋体", "隶书";

        }
    </style>
</head>
<body>

<div id="Di0" >
    <!--左侧提交留言的区域-->
    <div id="Di1">
        <h2 class="hh">温馨提示：</h2>
        <p class="ppp">请勿发布涉及政治、广告、营销、翻墙、违反国家法律法规等内容.请认真对待以上内容，如有违反必遭严处。 </p>

        <h2 class="hh">留言板：</h2>
        <!-- 多行文本输入框 -->
        <form class="forms">
            <textarea class="text_write" name="what" rows="9" cols="22px" id="message" style="margin-top: 0" ></textarea><br>
            <input  id="yes" type="button" onclick="f()" name="button" value="提交留言" class="new_button">
            <input id="yes3" type="reset" value="重新输入" class="new_button"/>
        </form>

        <form style="display: none" method="get" action="write_review.jsp?name=<%=name%>">
            <input id="review_what" name="review_what" type="text" value="">
            <input id="sumbittttt" type="submit">
        </form>

    </div>

    <!--右侧回复留言的区域-->
    <div id="Di2">
        <!---->
        <div id="white">
            <font id="this" style="text-align: left"></font>
            <%
                List<ReviewInformation> reviewInformations = ReviewDao.reviewWhat();
                List<Reply_content> replyInformations = ReplyDao.replyWhat();

                if (reviewInformations != null && reviewInformations.size() > 0) {
                    for (int i = reviewInformations.size() - 1; i >= 0; i--) {
                        ReviewInformation message = reviewInformations.get(i);
            %>

            <p class="font4" style="font-size: 18px">发布人：<%=message.getName()%>时间：<%=message.getTime()%></p>
            <textarea  readonly="readonly" style='text-shadow: 5px 5px 5px black, 0px 0px 2px red, 2px 2px 3px green;font-size: 20px;text-align: center; resize:none;background:transparent'><%=message.getReview()%></textarea>
            <input type='button' onclick='write_reply(<%=message.getID()%>)' value='回复' class='new_button' name='ss' id='<%=message.getID()%>'><br>
            <%
            for (int j =0;j<replyInformations.size();j++){
                Reply_content reply_content = replyInformations.get(j);
                if (reply_content.getId()==message.getID()){
                    %>
                    <p class="font1" style="font-size: 15px"><%=reply_content.getReply_name()%>评论:<%=reply_content.getReply_review()%></p>
            <%
                }
            }
            %>

            <br><br>

            <%
                }}
            %>
        </div>

        <form style="display: none" method="get" action="write_sql.jsp?name=<%=name%>">
            <input id="reply_id" name="reply_id" type="text" value="">
            <input id="reply_what" name="reply_what" type="text" value="">
            <input id="sumbittt" type="submit">
        </form>

    </div>
</div>

<!--    对键盘回车键的监听！   -->
<script type="text/javascript" language=JavaScript>
    document.onkeydown=function(event){
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==13){ // enter 键
            //要做的事情
            f();
        }
    };

    /*
    提交留言
    */
    function f() {

        var yes;

        yes = confirm("你确定要提交留言吗？");

        if (yes){

            var message = document.getElementById('message');//获得留言内容
            var result = message.value.replace(/\s+/g,"");
            message.value = "";

            if (result!=null&&result!==""){

                document.getElementById("review_what").value = result;

                $("#sumbittttt").click();

            }else {

                alert("您的留言是空的，留言失败！");

            }
        }else {
            alert("留言失败！");
        }

    }


    /*
    书写回复
     */
    function write_reply(id){//小心重名

        var message=prompt("请写入您回复的内容","");

        if (message!=null && message!=="") {

            document.getElementById("reply_what").value = message;

            document.getElementById("reply_id").value = id;//js给文本框赋值,不要使用jQuery不好使，使用js的document



            $("#sumbittt").click();

            // alert(message);

        }else {
            alert("请输入正确的内容！");
        }
    }

</script>

</body>
</html>


<%
    }

%>

2.write_review.jsp的源码：

<%@ page import="com.education.dao.ReviewDao" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String name = (String) session.getAttribute("username_msg");
    String review = request.getParameter("review_what");

    if (ReviewDao.writeView(name,review)){
        response.sendRedirect("http://localhost:8080/EducationSite/index.jsp?pinglun=yes&name="+name);
    }else {

    }

%>

3.write_sql.jsp的源码：

<%@ page import="com.education.dao.ReplyDao" %>
<%@ page import="com.education.User.Reply_content" pageEncoding="UTF-8" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<%
    String name = (String) session.getAttribute("username_msg");
    String review = request.getParameter("reply_what");
    String id0 = request.getParameter("reply_id");

    System.out.println("传来的是："+name);
    System.out.println("传来的是："+review);
    System.out.println("传来的是："+id0);

    int id = Integer.parseInt(id0);

    Reply_content reply = new Reply_content(id,name,review);
    if (ReplyDao.addReply(reply)){

        response.sendRedirect("http://localhost:8080/EducationSite/index.jsp?pinglun=yes&name="+name);

    }else {

    }

%>
</head>