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

最新推荐文章于 2024-06-02 12:46:45 发布

「已注销」

最新推荐文章于 2024-06-02 12:46:45 发布

阅读量1.4k

点赞数

分类专栏：山东大学 web课设 web前端开发文章标签： javascript jquery java

本文链接：https://blog.csdn.net/qq_43711677/article/details/104074249

版权

本文详细介绍了如何进行Web课程设计，包括B/S与C/S架构对比，课程要求，前期准备（Tomcat、开发工具、数据库），学习HTML、CSS、JavaScript、jQuery、jsp和servlet等内容，以及代码编写过程中的大图轮播、登录功能、基本功能实现和留言回复功能的实现。作者强调Web课程的重要性，提供了部分源码和学习资源。

摘要由CSDN通过智能技术生成

关于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 的图形化数据库管理及发展软件。它有一个类似浏览器的图形用户界面，支持多重连线到本地和远程数据库。它的设计合乎各种用户的需求，从数据库管理员和程序员，到各种为客户服务并与合作伙伴共享信息的不同企业或公司。
反正是一款连接数据库的神器（当然要收费，不过可以上网上搜索破解版。）提取码：s7yb

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=

最低0.47元/天解锁文章

「已注销」

关注

0
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
山东大学Web课设一——课程网站的搭建

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

扫一扫