本文目录一览：
- 1、如何给后端程序设计前端页面
- 2、怎么样理解Jsp页面里面写的Ext代码，或者是怎么把界面显示出来的
- 3、jsp登陆界面源代码
- 4、JSP编写一个登陆界面
- 5、求大神指导一下jsp登陆界面处理代码的问题
如何给后端程序设计前端页面
后端服务器一般是指servlet容器，用于执行java源程序
常见的网页有html，htm,shtml，asp，aspx，php，jsp等格式
前两个常用于静态网页，后面几个常用于动态网页。
这里前端网页以比较常见的 xx.html 和 xx.jsp 网页作为介绍，其它类似
一、静态页面xx.html如何跟后台交互：
先来看一个最简单的登陆界面源代码
user: password: input type="submit" value="Submit"/
/form12
这是一个表单，我们看到里面都是纯html内容，这是一个静态页面，当我们点击submit按钮时候，浏览器会提交表单内的数据到服务器的loginServlet这个相对地址，我们看看浏览器的地址变成啥了：
这不就是我们的后台servlet的地址嘛，然后这个地址指向的是loginServlet这个servlet，然后在web.xml文件中找到这个servlet关联的java类，从而执行了服务器端的程序（第一次执行，那么会实例化，然后执行里面init()函数，然后执行service（）函数，如果是第二次调用，那么不用实例化了，直接执行service（）函数），我们来看看服务器端的源程序：
package com.atguigu.javaweb;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.Servlet;
import javax.servlet.ServletConfig;
import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
public class loginServlet extends MyGeneriServlet {
public void init(javax.servlet.ServletConfig config) throws ServletException{
super.init(config);
}
public void service(ServletRequest request, ServletResponse response)
throws ServletException, IOException {
//获取请求方式是GET,POST方式？
HttpServletRequest httpServletRequest=(HttpServletRequest) request;
String method=httpServletRequest.getMethod();
System.out.println(method);
//1.获取请求参数：username，password
String username=request.getParameter(“username”);
String password=request.getParameter(“password”);
//获取请求参数
String initUser=getServletContext().getInitParameter(“user”);
String initpassword=getServletContext().getInitParameter(“password”);
PrintWriter out=response.getWriter();
//3.对比
if(initUser.equals(username)initpassword.equals(password)){
out.print("Hello"+username); // 生成html内容
}else{
out.print("Sorry"+username); // 生成html内容
}
}12345678
}
上面没有判断此时对servlet的请求是post还是get方法，不过没关系，request这个传进来的参数以及包含了这些信息，自己判断一下执行相应的操作即可
由于页面路径已经跳转到servlet了，但是servlet不是一个.html文件啊，那岂不是没有内容供浏览器显示了，不是的，我们看到返回的参数response中的对象PrintWriter out用于动态生成html内容的字符串"Hello"，所以这时候相当于servlet这个路径也有了html内容了，浏览器的页面就会显示上述字符串了
二、jsp页面如何跟后端服务器交互：
jsp网页文件就是html内容里面插入java代码，当我们访问.jsp网页文件时候，服务器提前已经知道这个页面内含有java代码，那么服务器这边就得先执行一下这些代码（就跟执行servlet的java源代码一样），同时把执行的结果嵌入在当前这个.jsp页面内，我们看看源代码：
%@page import=“java.util.Date”% // 如果这个.jsp页面中用到了一些java函数，就得导入库，这就跟java源文件一样的
% out.println("Hello World！"); // 这里实际上是服务器执行了结果，然后以文本返回给浏览器进行显示 %
上面红色代码就是java代码，刚刚说过对象PrintWriter out用于动态生成html内容的字符串，所以服务器执行完嵌入在里面的java代码后，就是动态生成了一串html代码，然后一起传给客户端浏览器进行显示
当然这种情况.jsp里面没有按钮，表单这样的控件，现在再来看看有表单这种.jsp如何跟后端交互：
view.jsp
%@page import=“day03_student.Student”% // 还是得带入java用到的库文件
学生个人基本信息
% Student s=(Student)request.getAttribute("students"); // %
编号 学号 姓名 性别 年龄
%=s.getId()% %=s.getStuno()% %=s.getName()% %=s.getGender()% %=s.getAge() %
参考的原文：
这时候如果我们直接访问这儿view.jsp文件，应该是没有数据的，因为对象s无法从request对象获取，必须得先给这个request对象赋值才行，即应该从如下servlet路径跳转来view.jsp文件路径才行
public class viewservlet extends HttpServlet {
private StudentDao dao=new StudentDao();
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String idstr = request.getParameter("id");
int id = Integer.parseInt(idstr);
//将数据放入request中，传递到页面
Student student=dao.queryById(id);
request.setAttribute("students", student);
request.getRequestDispatcher("view.jsp").forward(request, response); // 这里是从当前页面跳转去哪个页面，同时传递了request, response这两个参数，这时候的request就是有内容的，接下来的view.jsp页面就能获取到内容而且动态生成html内容
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}123456789101112131415
}
总结：每个xx.html文件,xx.jsp文件，servlet响应程序…都是需要在客户端浏览器通过URL来访问的。
xx.jsp文件，servlet响应程序因为含有java源代码，需要服务器电脑先执行一下，.jsp文件中的java代码一般会动态生成一些html内容嵌入在当前.jsp文件里面一起给浏览器显示出来；而servlet中的java代码一般是数据处理功能的，可能会通过request.getRequestDispatcher(“view.jsp”).forward(request, response);
这样的方式跳转到其它有html内容的页面的URL（同时传递处理好的数据过去） 来显示结果
怎么样理解Jsp页面里面写的Ext代码，或者是怎么把界面显示出来的
jsp页面中是一部分页面布局是通过extjs代码来展示的。
比如：
var htmlPanel = new Ext.Panel( {
width : '100%',
height : '100%',
autoScroll : false,
frame : true,
html : 'div id="sna_html"/div',//div页面在这里显示
listeners : {
'beforerender' : function() {
Ext.Ajax( {
url : request.do',//请求
params : {
id:id//整个是参数，没有的不用写
},
success : function(ret) {
document.getElementById("sna_html").innerHTML = ret;//动态的将页面加载
},
waitmsg : "请求中......."
});
}
}
});
以上代码：只是动态的将jsp页面加载到了div中。
jsp登陆界面源代码
1、login.jsp文件
%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%
%@ page import="java.util.*" %
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
title登录页面/title
/head
body
form name="loginForm" method="post" action="judgeUser.jsp"
table
tr
td用户名:input type="text" name="userName" id="userName"/td
/tr
tr
td密码:input type="password" name="password" id="password"/td
/tr
tr
tdinput type="submit" value="登录" style="background-color:pink" input
type="reset" value="重置" style="background-color:red"/td
/tr
/table
/form
/body
/html
2、judge.jsp文件
%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%
%@ page import="java.util.*" %
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
title身份验证/title
/head
body
%
request.setCharacterEncoding("GB18030");
String name = request.getParameter("userName");
String password = request.getParameter("password");
if(name.equals("abc") password.equals("123")) {
3、afterLogin.jsp文件
%
jsp:forward page="afterLogin.jsp"
jsp:param name="userName" value="%=name%"/
/jsp:forward
%
}
else {
%
jsp:forward page="login.jsp"/
%
}
%
/body
/html
%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
title登录成功/title
/head
body
%
request.setCharacterEncoding("GB18030");
String name = request.getParameter("userName");
out.println("欢迎你:" + name);
%
/body
/html
扩展资料：
java web登录界面源代码：
1、Data_uil.java文件
import java.sql.*;
public class Data_uil
{
public Connection getConnection()
{
try{
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
}catch(ClassNotFoundException e)
{
e.printStackTrace();
}
String user="***";
String password="***";
String url="jdbc:sqlserver://127.0.0.1:1433;DatabaseName=***";
Connection con=null;
try{
con=DriverManager.getConnection(url,user,password);
}catch(SQLException e)
{
e.printStackTrace();
}
return con;
}
public String selectPassword(String username)
{
Connection connection=getConnection();
String sql="select *from login where username=?";
PreparedStatement preparedStatement=null;
ResultSet result=null;
String password=null;
try{
preparedStatement=connection.prepareStatement(sql);
preparedStatement.setString(1,username);
result=preparedStatement.executeQuery();//可执行的 查询
if(result.next())
password=result.getString("password");
}catch(SQLException e){
e.printStackTrace();
}finally
{
close(preparedStatement);
close(result);
close(connection);
}
System.out.println("找到的数据库密码为："+password);
return password;
}
public void close (Connection con)
{
try{
if(con!=null)
{
con.close();
}
}catch(SQLException e)
{
e.printStackTrace();
}
}
public void close (PreparedStatement preparedStatement)
{
try{
if(preparedStatement!=null)
{
preparedStatement.close();
}
}catch(SQLException e)
{
e.printStackTrace();
}
}
public void close(ResultSet resultSet)
{
try{
if(resultSet!=null)
{
resultSet.close();
}
}catch(SQLException e)
{
e.printStackTrace();
}
}
}
2、login_check.jsp:文件
%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"
title验证用户密码/title
/head
body
jsp:useBean id="util" class="util.Data_uil" scope="page" /
%
String username=(String)request.getParameter("username");
String password=(String)request.getParameter("password");
if(username==null||"".equals(username))
{
out.print("script language='javaScript' alert('用户名不能为空');/script");
response.setHeader("refresh", "0;url=user_login.jsp");
}
else
{
System.out.println("输入的用户名:"+username);
String passwordInDataBase=util.selectPassword(username);
System.out.println("密码："+passwordInDataBase);
if(passwordInDataBase==null||"".equals(passwordInDataBase))
{
out.print("script language='javaScript' alert('用户名不存在');/script");
response.setHeader("refresh", "0;url=user_login.jsp");
}
else if(passwordInDataBase.equals(password))
{
out.print("script language='javaScript' alert('登录成功');/script");
response.setHeader("refresh", "0;url=loginSucces.jsp");
}
else
{
out.print("script language='javaScript' alert('密码错误');/script");
response.setHeader("refresh", "0;url=user_login.jsp");
}
}
%
/body
/html
3、loginSucces.jsp文件
%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
titleInsert title here/title
/head
body
hr size="10" width="26%" align="left" color="green"
font size="6" color="red" 登录成功 /font
hr size="10" width="26%" align="left" color="green"
/body
/html
4、user_login.jsp文件
%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"
title登录界面/title
/head
body background="C:Userswin8workspaceLoginimage9dcbdc339e72a5663b5c289fb5573c13_10.jpg"
center
brbrbrbrbrbr
h1 style="color:yellow"Login/h1
br
form name="loginForm" action="login_check.jsp" method="post"
table Border="0"
tr
td账号/td
tdinput type="text" name="username"/td
/tr
tr
td密码/td
tdinput type="password" name="password"
/td
/tr
/table
br
input type="submit" value="登录" style="color:#BC8F8F"
/form
/center
/body
/html
JSP编写一个登陆界面
1、首先准备Dreamweaver8软件，解压安装。如下图所示:这件点击安装程序，然后输入序列号就可以了。
2、在安装软件时候，我们可以看到是否关联【jsp文件】。
3、安装好了软件以后，我们打开Dreamweaver8软件。点击菜单上的【文件】——【新建】。
4、弹出【新建文档】——【动态页】——【jsp】——【创建】。
5、点击【拆分】，在【body】标签下面输入：% out.println("Hello World！"); %。
6、然后按快捷键【ctrl+s】保存jsp文件。保存类型jps;。
求大神指导一下jsp登陆界面处理代码的问题
1. String name=request.getParameter("name");
类似这一类的 需要 做一下转换
String name=(String)request.getParameter("name");
2.String url="jdbc:mysql://localhost/stuinfo"; 这个地址不对,没用写端口号，mysql默认端口是3306
String url="jdbc:mysql://localhost:3306/stuinfo";
完整代码是
%@page contentType="text/html;charset=GBK"%
%@page import="java.sql.*"%
html
body
%
String name = (String) request.getParameter("name");
if (name != null) {
name = new String(name.getBytes("ISO-8859-1"));
}
String password = (String) request.getParameter("password");
if (password != null)
password = new String(password.getBytes("ISO-8859-1"));
try {
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/stuinfo";
Connection con = DriverManager.getConnection(url, "root",
"root");
Statement sql = con.createStatement();
ResultSet rs = sql
.executeQuery("select * from user_info where username='"
+ name + "'and password='" + password + "'");
if (rs.next()) {
session.setAttribute("login_name", name);
response.sendRedirect("index.jsp");
} else {
out.print("密码有误，请重新注册");
response.sendRedirect("denglu.jsp");
}
con.close();
} catch (SQLException e) {
}
%
/body
/html