如何给后端程序设计前端页面
后端服务器一般是指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(同时传递处理好的数据过去) 来显示结果
前端anularjs用post上传文件到后端,怎么写
前段发送数据到后端有两种方式post和get方式:
$.ajax({
type:"post",
url:"api.php",
dataType:"json",
success:function(data){
}
});
$.ajax({
type:"get",
url:"api.php",
dataType:"json",
success:function(data){
}
});
这两种都是页面js操作的,也可以直接写下边这种:
window.location.href="api.php?name=aaasex=1";
web前端怎么写好代码
如何优化前端页面 / 如何优化网页
WEB前端(HTML5)项目开发时的注意事项
前端页面开发怎么实现post请求
网上找来的资料,做下整理
//模拟表单post提交,且打开新页面跳转
function post(URL, PARAMS) {
var temp_form = document.createElement("form");
temp_form .action = URL;
temp_form .target = "_blank";
temp_form .method = "post";
temp_form .style.display = "none";
for (var x in PARAMS) {
var opt = document.createElement("textarea");
opt.name = x;
opt.value = PARAMS[x];
temp_form .appendChild(opt);
}
document.body.appendChild(temp_form);
temp_form .submit();
}
// 使用方法url表示请求地址,后面传参类似ajax
// post('url',{id:id,name:name});
html简单网页代码怎么写?
1、在电脑桌面空白处单击右键,新建一个记事本并打开
2、在新建文件中输入如下代码。 html语言都是以htmlheadtitlebody等标签开始,以/html/head/title/body标签作为结束。
3、接下来要在title/title标签中间输入标题(如个人网页)在body/body中输入“自己做的第一个网页,厉害吧!”完成后点击保存。并将记事本后缀名.txt改为.html格式
4、将记事本重命名为.html格式后,出现如下格式。
5、双击打开此文件就会出现浏览器网页效果了。
扩展资料:
前端和后端的区别:
1、展示方式
前端指的是用户可见的界面,网站前端页面也就是网页的页面开发,比如网页上的特效、布局、图片、视频,音频等内容。前端的工作内容就是将美工设计的效果图的设计成浏览器可以运行的网页,并配合后端做网页的数据显示和交互等可视方面的工作内容。
后端是指用户看不见的东西,通常是与前端工程师进行数据交互及网站数据的保存和读取,相对来说后端涉及到的逻辑代码比前端要多,后端考虑的是底层业务逻辑的实现,平台的稳定性与性能等。
2、所用技术
前端开发用到的技术包括但不限于html5、css3、javascript、jquery、Bootstrap、Node.js 、Webpack、AngularJs、ReactJs、VueJs等技术。
后端开发以java为例,主要用到的包括但不限于Struts、spring、springmvc、Hibernate Http协议、Servlet、Tomcat服务器等技术。
3、工作职责
前端工程师主要的工作职责分为三大部分,分别是传统的Web前端开发,移动端开发和大数据呈现端开发。
后端工程师的主要职责也集中在三大部分,分别是平台设计、接口设计和功能实现。
4、知识结构
在知识结构方面,前端开发涉及到的内容包括Html、CSS、JavaScript、Android开发(采用Java或者kotlin)、iOS开发(采用OC或者Swift)、各种小程序开发技术(类Html),随着前端开发任务的不断拓展,前端开发后端化也是一个较为明显的趋势。
后端开发的重点在于算法设计、数据结构、性能优化等方面,在具体的功能实现部分可以采用Java、Python或者PHP等编程语言来实现。
pos端前端页面怎么写的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于前端poc、pos端前端页面怎么写的信息您可以在本站进行搜索查找阅读喔。
标签: 前端
②文章观点仅代表原作者本人不代表本站立场,并不完全代表本站赞同其观点和对其真实性负责。
③文章版权归原作者所有,部分转载文章仅为传播更多信息、受益服务用户之目的,如信息标记有误,请联系站长修正。
④本站一律禁止以任何方式发布或转载任何违法违规的相关信息,如发现本站上有涉嫌侵权/违规及任何不妥的内容,请第一时间反馈。发送邮件到 88667178@qq.com,经核实立即修正或删除。