jsp前端界面代碼,jsp頁面代碼

本文目錄一覽：

• 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:\Users\win8\workspace\Login\image\9dcbdc339e72a5663b5c289fb5573c13_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