前端登录页面设计（如何给后端程序设计前端页面）

本文目录

• 如何给后端程序设计前端页面
• html登录页面怎么做
• 前端短信验证码登录可以自动登录吗
• java web实现简单的用户登录需要哪些技术

如何给后端程序设计前端页面

后端服务器一般是指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;
***隐藏网址***
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方式？
***隐藏网址***
***隐藏网址***
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（同时传递处理好的数据过去） 来显示结果

html登录页面怎么做

这是上课时老师演示的代码，只是前端的代码
《!DOCTYPE html》
《html》
《head》
《title》login.html《/title》
《title》登录《/title》
《link rel="stylesheet" type="text/css" href="./CSS/login.css"》
***隐藏网址***
***隐藏网址***
***隐藏网址***

《!--《link rel="stylesheet" type="text/css" href="./styles.css"》--》
《/head》

《body》
《div id="container"》
《h1 id="title"》小菊花爱心书店《/h1》
《div id="information"》
《form action="first.html"》
《div id="box"》
账号：《input type="text" name="keyName"》
《br》
密码：《input type="password" name="userPass"》
《br》
《input id="B" class="button1" type="submit" name="buyer" value="login"》
《br》
《a href="register.html"》立即注册《/a》
《/div》
《/form》
《/div》
《/div》
《/body》
《/html》
------------------------------------------------
css文件
------------------------------------------------
@CHARSET "GB2312";
body{
background-image:url(../img/login.jpg);
background-size: cover;
margin: 0;
padding: 0;
}
#container{
height:500px;
width:400px;
background-color:#D2B571;
border-radius: 10px;
margin: 100px auto;
position:relative;
box-shadow:2px 2px 10px #888888;
}
h1{
text-align: center;
padding-top:50px;
color: white;
}
#information{
background-color: #F5F4F2;
height: 350px;
width:400px;
position:absolute;
margin-top: 10px;
}
#box{
width:200px;
margin-left: 100px;
margin-top: 60px
}
input{
display: block;
width: 200px;
padding-top:5px;
height:35px;
border: 1.5px solid #eee;
border-radius:10px;
background-color:#F4F8FF;
}
.button1 {
height:35px;
margin-top: 20px;
padding: 5px 15px;
text-align: center;
background-color: #F48951;
color: white;
border: 0px;
border-radius:10px;
box-shadow:2px 2px 10px #888888;
}
.button1:hover {
background-color: white;
color: #F48951;
border: 1.5px solid #F48951;
}
button{
width:90px;
position:absolute;
top:70px;
}
button:hover {
width:90px;
position:absolute;
top:62px;
}

前端短信验证码登录可以自动登录吗

前端短信验证码登录可以自动登录。方法如下：
1、前端登录页面手机号验证码登录页面。按钮样式都是自己写的class，按钮实际上是用的div+a标签来实现的，添加了动态的样式。
2、前端获取验证码的函数。先进行手机号的判空处理，为空则提示用户不能为空，再使用正则表达式对手机号码进行限制。
3、后端获取验证码代码。从平台上获取相关参数，填入。调用它们平台提供的发送短信验证码的接口函数，查看是否发送成功，发送成功则将该phoneNum-verifyCode用键值对的形式存到redis数据库，有效时间为5分钟，5分钟之后自动过期，提示用户需要在5分钟之内填写完毕并登录。
4、注册功能前后端的实现。多几个判空条件（如名字、密码不能为空，用户是否存在，手机号是否已被注册，用户名是否已被注册），实现的流程相似，先通过手机获取验证码，将发送成功的验证码存到redis数据库，有效时间为5分钟，然后用户填写验证码，前端向后端发送请求，后端验证是否正确，正确则返回注册成功。

java web实现简单的用户登录需要哪些技术

简单的话，就是jsp页面有个用户信息表单，点击提交就跑到后台servlet
然后后台就校验用户身份信息，信息可以从数据库拿，用jdbc连接数据库最简单了
完了之后就用response响应请求，或者是发request请求新的登录成功页面jsp