第三章:JavaWeb项目+疫情防控健康码--搭建web服务器

今天主要学习了如何搭建web服务器,并对网站进行测试-----以下学习来自 "东软教育-Neusoft"
仅作为学习记录,供今后复习参考

搭建前端服务器

1. 新建web包:com.wangliang.web

在这里插入图片描述

2. 从maven添加pom.xml依赖包

  • 去maven中央仓库下载:

Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的项目管理工具软件。
Maven 除了以程序构建能力为特色之外,还提供高级项目管理工具。由于 Maven 的缺省构建规则有较高的可重用性,所以常常用两三行 Maven 构建脚本就可以构建简单的项目。由于 Maven 的面向项目的方法,许多 Apache Jakarta 项目发文时使用 Maven,而且公司项目采用 Maven 的比例在持续增长

  • javax.servlet 服务器支持包:选择4.0.1版本
    在这里插入图片描述
  • 进行导入,将maven内的内容复制到pom.xml文件中

在这里插入图片描述

  • 将复制内容粘贴到 dependencies 下,切记不要粘错位置

在这里插入图片描述

  • commons-fileupload 文件上传包:选择1.4版本
    在这里插入图片描述
  • 与上一个 javax.servlet 服务器支持包导入操作一样,同样放到dependencies 下,后续导包操作一样

在这里插入图片描述

  • org.apache.commons 工具支持包:选择3.10版本
    在这里插入图片描述
  • commons-beanutils 对象操作工具:选择1.9.4版本

在这里插入图片描述

  • com.google.code.gson 返回结果为json格式的工具包:选择2.8.6版本
    在这里插入图片描述
    在这里插入图片描述

3. 下载web服务器工具。

3.1下载对应系统的包

3.2 配置Tomcat

  • 点击右上角,选择Edit configurations

在这里插入图片描述

  • 点击+号,选择新建Tomcat Server Local
    在这里插入图片描述
  • 点击configuration进行导包
  • 将端口配置成8808

在这里插入图片描述

  • 点完configuration后在弹出的页面导入包

在这里插入图片描述

-点击deployment --> + 部署服务器启动项

在这里插入图片描述

  • 成功之后 ,左下角有个services,先点击运行,然后后面我们要用到 --重新部署–来进行测试

在这里插入图片描述

4.配置servlet

  • 在web包下 ,新建两个servlet
  • 第一个为:LoginServlet
  • 第二个为:RegistServlet

在这里插入图片描述
在这里插入图片描述

4.1配置登陆servlet:LoginServlet.class

  • 用于测试连接
package com.wanglianng.web;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "LoginServlet",urlPatterns = "/login")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request,response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String cpath = request.getContextPath();
        System.out.println("测试连接servlet"+cpath);
    }
}

4.2 配置注册servlet:RegistServlet.class

此处代码内容并非最终代码,仅作为初步功能测试

package com.wanglianng.web;

import com.wanglianng.pojos.HealthCode;
import com.wanglianng.service.HealthCodeService;
import org.apache.commons.beanutils.BeanUtils;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet(name = "RegistServlet",urlPatterns = "/regist")
public class RegistServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {

            //第一步:处理中文乱码问题
            request.setCharacterEncoding("utf-8");
            //第二步:创建实体类
            HealthCode healthCode = new HealthCode();
            //第三步:准备一个map集合,用于存储页面提交数据
            Map<String,Object>map = new HashMap<>();
            //第四步:准备文件上传处理
            DiskFileItemFactory factory = new DiskFileItemFactory();
            ServletFileUpload fileUpload = new ServletFileUpload(factory);
            //第五步:解析请求,获取用户提交的数据多种解析方法,需要第四步
            List<FileItem> fileItems = fileUpload.parseRequest(request);
            //第六步:
            for(FileItem fileItem:fileItems){
                //在循环的时候有两种可能性。第一种:<input>;第二种:表单上传
                if(fileItem.isFormField()){//true表示<input>
                    //System.out.println("key="+fileItem.getFieldName());
                    //System.out.println("value="+fileItem.getString("utf-8"));
                    //System.out.println("-------");
                    map.put(fileItem.getFieldName(),fileItem.getString("utf-8"));
                }else{//如果是else,说明文件上传控件,需要把个人近期照片上传到阿里云的oss服务商。上传完之后,云上的照片地址要传回来,存在map集合当中
                    String url = "http://www.aliyun.com/healthcode/demo/z3.jpg";
                    map.put("imgUrl",url);

                }
            }//for
            //手动添加imgUrl
            String url = "http://www.aliyun.com/healthcode/demo/z3.jpg";
            map.put("imgUrl",url);
            BeanUtils.populate(healthCode,map);
            /*
            *populate(实体类对象,map<key,value>)
            * 这个方法首先循环map中的所有key,把每个key全部都取出来。与参数1中的属性比较相等不相等
            * 如果相等,参2map中的key在参1healthcode属性中是存在的。那么把参2map中的value值
            * 赋值给参1的属性
             */
            //第七步:在web层去调用servlet
            HealthCodeService hcs = new HealthCodeService();
            hcs.registHealthCode(healthCode);

            //第八步:进行页面跳转。注册成功之后就显示的login.html,登录页面
            response.sendRedirect( request.getContextPath() + "/login.html");
        } catch (Exception e) {
            e.printStackTrace();
        }

    }//doPost

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

5. 配置HTML

  • 在webapp中新建两个HTML5文件
  • 第一个为:login
  • 第二个为:register

在这里插入图片描述

5.1 配置login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"type="text/javascript"charset="UTF-8"></script>
</head>
<body>
<h1>欢迎使用个人健康码</h1>
<form method="post">
手机号码:
<input type="text" name="telephone" id="telephone"><br>
身份证号:
<input type="text" name="idCard" id="idCard"><br>

<button type="button"onclick="getCard()">获取健康码</button>&nbsp;&nbsp;&nbsp;
<a href="register.html">注册健康码</a><br>

</form>
</body>
<script type="text/javascript">
    function getCard() {
        //alert("getCard");
        /*post方法有三个参数
        参1:字符串-提交的servlet地址/服务器根目录
        参2:字符串-地之后的参数
        参3:函数-返回后的结果处理
        * */
    $.post("/HealthCode_war/login","telephone=323&idCard=3232",function (resp) {
        alert(resp);//响应的结果

        })
    }
</script>
</html>

5.2 配置register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>注册健康码</h1>
<form action="regist" method="post" enctype="multipart/form-data" onsubmit="">
    姓名:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text"name="name"><br>
    个人近期照片:
    <input type="file"name="file"><br>
    手机号:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="text"name="telephone"><br>
    身份证号:
    <input type="text"name="idCard"><br>
    居住信息:
    <input type="text"name="location"><br>
    车牌号码:
    <input type="text"name="carNo"><br>
    性别:
    <input type="radio"name="sex"value="男">&nbsp;&nbsp;
    <input type="radio"name="sex"value="女"><br>
    是否临时居住:
    <input type="radio"name="tmpLocation"value="是">&nbsp;&nbsp;
    <input type="radio"name="tmpLocation"value="否"><br>
    是否14天内从省外返回:
    <input type="radio"name="outToIn"value="是">&nbsp;&nbsp;
    <input type="radio"name="outToIn"value="否"><br>


    身体是否异常:
    <input type="radio" name="health" value="是">&nbsp;&nbsp;
    <input type="radio" name="health" value="否"><br>
    <button type="submit">注册健康码</button>
</form>
</body>
</html>

6. 测试结果展示

  • 如果能够成功连接并且出现hello world字样 ,即成功连接服务器

在这里插入图片描述

  • 4
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值