今天主要学习了如何搭建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下载对应系统的包
- tomca下载地址.
- 解压到任意盘
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>
<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="">
姓名:
<input type="text"name="name"><br>
个人近期照片:
<input type="file"name="file"><br>
手机号:
<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="男">男
<input type="radio"name="sex"value="女">女<br>
是否临时居住:
<input type="radio"name="tmpLocation"value="是">是
<input type="radio"name="tmpLocation"value="否">否<br>
是否14天内从省外返回:
<input type="radio"name="outToIn"value="是">是
<input type="radio"name="outToIn"value="否">否<br>
身体是否异常:
<input type="radio" name="health" value="是">是
<input type="radio" name="health" value="否">否<br>
<button type="submit">注册健康码</button>
</form>
</body>
</html>
6. 测试结果展示
- 如果能够成功连接并且出现hello world字样 ,即成功连接服务器