1.idea添加web工程
web工程表示里面既可以写java代码也可以放置页面资源
- 创建一个项目
- 点击项目，右键------>添加框架支持------>web
1.1 web工程部署到本地的tomcat服务器中
- 添加配置------>tomcat server[本地]
- 部署
- 启动服务器
localhost本地服务器的地址
8080:本地服务器的端口号
qy174_web03表示项目部署的上下文名称
main.html:本地项目的资源名称
2. 设置默认页面
html
<welcome-file-list>
<welcome-file>xxx.xxx</welcome-file>
</welcome-file-list>
html
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
<!--设置默认页面-->
<welcome-file-list>
<welcome-file>main.html</welcome-file>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
</web-app>在web------>WEB-INF------>web.xml中设置
3. 动态网页
3.1 what 动态网页
动态网页：跟静态网页相对的一种网页编程技术
网页代码虽然没有变，但是显示的内容却是可以随着时间、环境或者数据库操作的结果而发生改变。
动态网页就是结合java编程和数据库技术。而且动态网页中可以插入java代码。
常用的动态网页：jsp,freemark,thymeleaf等这些都是常用的动态网页技术。
3.2 what jsp
jsp：java server page java服务网页。该网页经过服务器tomcat编译产生java代码，而且里面可以插入java代码
3.3 jsp中如何插入java代码
jsp
<%
java代码
%>- 实例
jsp
<%
int a=10;
int b=8;
int c=a+b;
out.print("c="+c+"<br>");
out.print("a="+a);
%>3.4 java内容输出到网页中
有两种方式
- 第一种 使用out对象输出
jsp
<body>
<%
int a=10;
int b=8;
int c=a+b;
out.print("c="+c+"<br>");
out.print("a="+a);
%>
</body>- 第二种 <%=表达式%>
jsp
<body>
<%
int a=10;
int b=8;
int c=a+b;
%>
c=<%=c%><br>
b=<%=b%>
</body>换行：</br/>
3.5 案例
- 案例1：显示爱好
jsp
<body>
<%
String[] arr=new String[]{"游泳","跑步","爬山"};
%>
<ul>
<%
for(String a:arr){
%>
<li>
<%=a%>
</li>
<%
}
%>
</ul>
</body>数组赋值：String[] arr=new String[] {};
无序列表：<\ul/><\li></li></ul>
有序列表：<\ol><\li></li></ol>
- 案例2：九九乘法表
jsp
<table border="1">
<%
out.print("<tr>");
for(int i=1;i<=9;i++){
for(int j=1;j<=i;j++){
out.print("<td>");
out.print(j+"*"+i+"="+j*i);
out.print("</td>");
}
out.print("</tr>");
}
%>
</table>表格：table、行：tr、列：td
4. 接收参数
表单提交和超链接传递参数时，我们需要接收传递过来的参数内容，并完成相应的业务功能。servlet中封装了HttpServletRequest类，该类可以操作所有的请求内容。而在**jsp中内置了该类的对象request**。内置表示无需自己创建该类对型，就可以使用该类中的方法
4.1 接收表单的参数
action：表单提交的路径------相对路径、绝对路径
method：表单的提交方式------post、get
表单：form
单选框：radio
多选框：checkbox
文本框：text
下拉框：select+option
提交按钮：submit
普通按钮：button
jsp
<body>
<form action="registerDo.jsp" method="post">
账号：<input type="text" name="zh"/><br>
密码：<input type="text" name="pwd"/><br>
国家：<select name="country">
<option value="Chain">中国</option>
<option value="USA">美国</option>
<option value="UK">英国</option>
</select><br>
性别：<input type="radio" name="sex" value="man"/>男
<input type="radio" name="sex" value="woman"/>女<br>
爱好：<input type="checkbox" name="hobby" value="swing"/>游泳
<input type="checkbox" name="hobby" value="dancing"/>跳舞
<input type="checkbox" name="hobby" value="running"/>跑步
<input type="checkbox" name="hobby" value="reading"/>读书<br>
自我介绍：<textarea rows="10" cols="20" name="desc">
</textarea><br>
<input type="submit" value="注册" />
</form>
</body>registerDo.jsp
jsp
<body>
<%
String zh = request.getParameter("zh");
String pwd = request.getParameter("pwd");
String country = request.getParameter("country");
String sex = request.getParameter("sex");
String[] hobby = request.getParameterValues("hobby");
String desc = request.getParameter("desc");
out.print("账号"+zh+"密码"+pwd+"国家"+country+"性别"+sex+"爱好"+ Arrays.toString(hobby)+"自我介绍"+desc);
%>
</body>注意：1. 如果获取的是复选框的值，使用getParamaterValues()方法。输出时：Arrary.toString() 2.单选框必须给定value值，否则拿到的是on 3.getParamater(name)/getParamaterValues(name)
- 如果idea无法在jsp中使用内置对象
处理方法：在WEB-INF下创建一个目录lib，放入jsp和servlet的jar包
4.2 解决中文乱码
当表单输入的内容为中文时，接收时出现乱码
解决方法：调用request中setCharacterEncoding("utf-8")方法
jsp
request.setCharacterEncoding("utf-8");//放在接收数据之前4.3 超链接传递参数
语法：地址?key=value&key=value
jsp
<a href="a.jsp?n=cte&a=19">连接参数</a>a.jsp
jsp
<body>
<%
//设置请求编码
request.setCharacterEncoding("utf-8");
//接受参数
String n= request.getParameter("n");
String a= request.getParameter("a");
out.println("n==========="+n+";a========="+a);
%>
</body>5.页面跳转
login.jsp
jsp
<body>
<%
String error = request.getParameter("error");
if("1".equals(error)){
out.print("<font color='red'>账号或密码错误</font>");
}
%>
<form action="loginDo.jsp" method="post">
账号:<input type="text" name="name"/>
密码:<input type="password" name="password"/>
<input type="submit" value="登录"/>
<input type="button" value="注册"/>
</form>
</body>
</html>loginDo.jsp
jsp
<body>
<%
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String password = request.getParameter("password");
//代码写死了。
out.print("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~");
if("admin".equals(name)&&"123".equals(password)){
//登录成功--response响应对象 sendRedirect("跳转的路径")
response.sendRedirect("main.html");
}else{
response.sendRedirect("login.jsp?error=1");
}
%>
</body>在表单页面的跳转：from中的action，跳转到处理页面loginDo.jsp
在表单处理页面：response.sendRedirect(地址)
6. jsp+dao
login.jsp
jsp
<%
String error = request.getParameter("error");
if("1".equals(error)){
out.print("<font color='red'>账号或密码错误</font>");
}
%>
<form action="loginDo.jsp" method="post">
账号:<input type="text" name="name"/>
密码:<input type="password" name="password"/>
<input type="submit" value="登录"/>
<input type="button" value="注册" onclick="register()"/>
</form>
</body>
<script>
function register() {
location.href='register.jsp';
}
</script>loginDo.jsp
jsp
<%
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
String password = request.getParameter("password");
//创建一个UserDao类对象: test测试主函数中内容一样。
UserDao userDao=new UserDao();
//调用里面的方法
User user = userDao.selectByNameAndPwd(name, password);
if(user!=null){
//登录成功
response.sendRedirect("success.jsp");
}else{
response.sendRedirect("login.jsp");
}
%>
</body>