當前位置:首頁 » 網頁前端 » 前端網頁界面和後端程序鏈接
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

前端網頁界面和後端程序鏈接

發布時間: 2023-02-16 13:54:46

前端頁面寫好如何和後端是如何連接的

朋友,是後端載入你寫的前端,因為後端控制變化的數據,包括你存入數據,你前段的數據只能是固定的。後端語言多的去了php,java,.net等等。

Ⅱ 前端和後端怎麼鏈接呀

後端提供介面,前端使用jq的ajax、原生js的XMLHttpRequest、request或者axios模塊等調用各自API,請求後端伺服器地址,帶上請求參數即可實現交互

Ⅲ 如何給後端程序設計前端頁面

後端伺服器一般是指servlet容器,用於執行java源程序
常見的網頁有html,htm,shtml,asp,aspx,php,jsp等格式
前兩個常用於靜態網頁,後面幾個常用於動態網頁。
這里前端網頁以比較常見的 xx.html 和 xx.jsp 網頁作為介紹,其它類似
一、靜態頁面xx.html如何跟後台交互:
先來看一個最簡單的登陸界面源代碼
user: password: <input type="submit" value="Submit"/>
</form>12

這是一個表單,我們看到裡面都是純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() %>
參考的原文:https://blog.csdn.net/myclass1312/article/details/80571867
這時候如果我們直接訪問這兒view.jsp文件,應該是沒有數據的,因為對象s無法從request對象獲取,必須得先給這個request對象賦值才行,即應該從如下servlet路徑跳轉來view.jsp文件路徑才行
public class viewservlet extends HttpServlet {
private StudentDao =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=.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(同時傳遞處理好的數據過去) 來顯示結果

Ⅳ web前端怎麼與後端交互

通過html里的<form>標簽提交給伺服器,然後通過php語言得到想要的結果,請採納。

Ⅳ Web 前端開發怎麼和後台進行相銜接

如果是前端做好了,那就是根據後端部分將數據填上了。
一種方式是後端程序員拿著你這個頁面直接改,插入數據。這個適合一些模板類的工具例如PHP,http://ASP.NET,JSP,此外還有形式上相似的比如rhtml、django模板、Velocity等等。PHP中有一個也致力於此的庫叫Smarty處理一些簡單的情形還是非常不錯的。
採用這種方式,前端做好頁面後面就幫不上忙了,只能讓後端去熟悉你前端的設計,讓後你作為前端稍微解釋一下一些細節。
一種方式是ajax取數據,也就是讓後端暴露出數據,讓前端取回來填充頁面。除了XML格式,json格式也比較流行。這種情況下是前端完成剩餘的部分,前端和後端需要約定好數據格式的細節。
這種方式的缺點是很依賴前後端的溝通,而且幾乎沒法實現測試驅動開發。
於是這種方式有各種變種,比如Ember.js,knockout.js,backbone.js這些工具使用的方式。很多時候需要給數據先設計一個schema,未必是前端或者後端寫,可能是在項目前期約定好的,前端和後端就按照預先約定好的做正確的實現就可以了,這些庫會幫你把數據在恰當的位置顯示出來,並實現一些交互功能。

請使用手機"掃一掃"x

Ⅵ 如何將網站的前台與後台連接

如何將網站的前台與後台連接?端和後端之所以需要對接,是因為前端頁面只負責提供視圖沒有內容,而後端只提供內容,兩者所謂的對接,就是把後端的內容放在前端頁面預留出來的位置上。(雖然說是前端後端,但這一對接實際發生在伺服器端)。
所以伺服器端進行的活動如下:
接收用戶請求——》找到負責處理的程序——》處理程序找到要傳輸給用戶的前端頁面——》該前端頁面留出位置——》後端到資料庫取數據——》後端把數據放在前端留出來的位置上——》結合成真正用戶看到的html文件——》傳輸給用戶。

1/要實現用戶輸入,肯定前台要是一個網頁,我們現在就使用jsp,先建一個jsp網頁,頁面展示內容如下所示。

2/要把前端界面上的數據,返回到後台數據,我們就要使用到servlet,所以在jsp文件中,我們就需要一個表單form。就可以把數據轉到servlet中,antion裡面寫servlet的地址,method裡面寫方法「get或者post」,一般刪除數據默認是「get」添加數據是「post」。

3/然後我們在servlet中來獲取頁面上的值,注意獲取的值是String類型的。如果要用到int型,就想要強轉類型。

4/然後我們就需要把數據插入到 對象的屬性中,使用set的方法。

5/最後,調用add的方法,就可以把數據插入到後台。

6/具體的插入到資料庫的代碼如下,要注意資料庫的鏈接。

Ⅶ web後端和前端是怎麼連接的

網站數據處理主要分為三層。

第一,表示層,這部分可以用HTML代碼,CSS/Javascript代碼來實現等。通過前端代碼可以實現網頁的布局和設計。這層又可以稱為顯示層。也就是你用瀏覽器打開能看到的網頁。

第二層,是業務層,這層是負責處理數據的。常用的代碼語言有PHP,JSP,Java等。通過這些後台處理語言的演算法來處理前台傳回的數據。必要的時候進行操作資料庫,然後把結果返回給前端網頁。

第三層,是數據層,這個就是資料庫,用來存儲數據的。通過業務層的操作可以實現增刪改資料庫的操作。

舉個例子就是這樣,比方說你在網頁上填一個表格然後提交會有以下幾種數據傳輸經過:

①你接觸到的是這個網頁是屬於表示層,這個網頁一般由HTML標簽結合CSS/JAVASCRIPT來實現的。 這時候你要先填入數據。

②然後你按提交觸發後台處理機制,這時候數據會傳到後台的代碼進行處理。這部分代碼根據不同網站可以使PHP,JSP,JAVA等。 代碼根據程序員預設的演算法將收到的數據進行處理之後會相應的對資料庫進行操作,存儲數據等。

③成功操作完資料庫之後,業務層的代碼會再向表示層也就是顯示器端傳回一個指令通知你表格填寫成功。

這就是基本的網站數據交換邏輯了

Ⅷ web前端與後台是怎麼樣實現連接在一起實現管理

ajax實現交互,後端也可以輸出前台頁面,不是很明白你問的問題,後台指後段語言還是指看到的後台管理界面

Ⅸ 如何將前端的代碼和後端的代碼連接起來,是不是要用什麼代碼。(就是說我現在已經有了前端的代碼和後端的

你是指的是你已經有了靜態的 HTML文件,你想把他做成動態的是吧?如果是那樣,你可以去選擇一個cms系統把他結合起來。推薦使用織夢(dede).

Ⅹ 前端後端怎麼連接起來

前端調用後端介面無外乎六種方法,如下:
1、打開vs,創建空的asp.net mvc演示項目【WebMVC】
(1)依次點擊【文件】->【新建】->【項目】;
(2)在【新建項目】界面選擇【Web】->【ASP.NET Web 應用程序(.NET Framework)】,輸入名稱,選擇框架至少4.5版本,點擊【確定】按鈕;
(3)選擇【空】->【MVC】->【確定】 ;
(4)創建好了項目。
2、在項目中
(1)在Controllers文件夾上點擊滑鼠右鍵,依次選擇【添加】->【控制器】,即可完成HomeController的創建;
(2)在Controller的Index方法內,點擊滑鼠右鍵,選擇【添加視圖】;
(3)在項目中添加文件夾【Content】並添加jquery源文件;
(4)在Index頁面添加jquery的引用。
3、在Index頁面中添加一個輸入文本框,一個按鈕,以及顯示結果的dom。
4、在HomeController中添加新的方法,用於接收前台傳入的參數,組裝後返回。
5、在Index頁面,添加Jquery的ajax方式,調用後台介面,返回結果的處理代碼。
6、在vs中,按F5調試運行結果,如下:
(1)在文本框中輸入內容;
(2)點擊按鈕,調用介面,並將返回值顯示在界面;
(3)如果要提交大量數據,或者敏感數據,請修改ajax的type方式,這樣參數就不會在url地址欄中顯示了。