web前端注册登录功能实现

web前端实现登录，列表等功能
2018-11-15 15:08:04
最近有点闲时间，联系了一下web前端的一些技术，这里实现的一个登录功能和列表功能
收起
js
前端实现登录功能
2017-10-27 10:08:49
适合小白使用的代码 前端实现登录功能前端实现登录功能前端实现登录功能
收起
web实现注册登录功能源代码
2019-04-11 14:51:46
web实现注册登录功能源代码，完整代码教程。适合新开发人员练习使用
收起

Web前端+Java实现人脸识别登录

万次阅读 多人点赞 2019-03-25 19:50:00

使用前端页面+java后台实现人脸登录，人脸的图像对比是调用的百度接口（百度AI开放平台）。一、实现思路 a.前端页面调用设备摄像头获取实时图片数据。 b.通过Ajax将图片数据提交后台处理，并返回处理后的数据。 c....

使用前端页面+java后台实现人脸登录，人脸的图像对比是调用的百度接口（百度AI开放平台）。
 一、实现思路
 a.前端页面调用设备摄像头获取实时图片数据。
 b.通过Ajax将图片数据提交后台处理，并返回处理后的数据。
 c.后台使用java调用接口进行图片的对比。
 d.最后将返回的结果进行分析后返回前端页面。
 二、准备工作
 a.编辑器：Myeclipse写jiava代码、WebStorm写前端页面（编辑器随便什么都可以的）。
 b.jar包
 
 c.百度AI接口
 三、前端页面
 a.需要使用到两个标签，一个是<video>一个是<canvas>，这两个标签，video是将摄像头获取到的数据呈现成视频，canvas是画布，将视频中的画面换成图片。
 b.将获取到的图片数据通过Ajax请求的方式作为数据传到java后台。
 c.前端代码 
<div id="face-box">
						<video id="video"></video>
						<canvas id="canvas" style="display: none;"></canvas>
					</div>
 
d.js代码
 GetFace.js打开摄像头和获取图片 
/*
在用getUserMediaToPhoto之前要写两个回调函数，一个success 一个 error
格式：
 function success(stream){
 }
//失败回调函数
function error(error) {
}
*/
//成功回调函数
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var mediaStreamTrack=null;
function success(stream){
    //兼容webkit核心浏览器
    // var CompatibleURL = window.URL || window.webkitURL;
    //将视频流转化为video的源
    mediaStreamTrack=stream;
    try {
        // video.src = CompatibleURL.createObjectURL(stream);
        video.srcObject=stream;
    }catch (e) {
        console.log("访问用户媒体设备失败：",error.name,error.message);
    }

    video.play();//播放视频

    //将视频绘制到canvas上
}
//错误回调函数
function error(error) {
    console.log('访问用户媒体失败：',error.name,error.message);
}
function getUserMediaToPhoto(constraints,success,error) {
    if(navigator.mediaDevices.getUserMedia){
        //最新标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    }else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success,error);
    }else if(navigator.mozGetUserMedia){
        //firefox浏览器
        navigator.mozGetUserMedia(constraints,success,error);
    }else if(navigator.getUserMedia){
        //旧版API
        navigator.getUserMedia(constraints,success,error);
    }
}

function getFace() {
        context.drawImage(video,0,0,300,150);
        this.img=canvas.toDataURL('image/jpg')
       //获取完整的base64编码
        this.img=img.split(',')[1];
        return this.img;
}
function openUserMedia() {
    if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
        getUserMediaToPhoto({video:{width:480,height:320,facingMode: "user"}},success,error);
    }else{
        alert('你的浏览器不支持访问用户媒体设备');
    }
}
function  offUserMedia() {
    if(mediaStreamTrack!=null)
    mediaStreamTrack.getTracks()[0].stop();
}

 
FaceLoginAjax.js数据提交 
function Facelogin() {
    setTimeout(function () {
        img = getFace();
        $.ajax({
            type:"post",
            url:"http://localhost:8080/DDserver/LoginServlet",
            data:{
                "imgpath":img,
                "imgType":"BASE64"
            },
            success:function (data) {
                var obj= new Function("return"+data)();
                var result=obj.result;
                var error_msg=obj.error_msg;
                if("SUCCESS"===error_msg){
                    sessionStorage.setItem("account",result.user_id);
                    location.href="Main.html";
                }
                else{
                    Facelogin();
                }
            },
            error:function () {
                alert("连接服务器失败")
            },
            async:true
        })
    },500);
}
 
四、后台Java
 a.在Myeclipse中新建一个web项目，并导入上面的jar包，然后在src文件夹下创建一个facelogin的包
 
 这是里面的结构，代码如下
 AiFaceObject.java
 这个类是使用单例模式创建一个AipFace对象，因为我们后面会一直使用这个对象，而这个对象的创建会得到一个SDK，这个SDK的有效期好像是一个月。所以我们没必要一直创建对象来获取这个SDK，就使用单例模式创建最好。 
package cn.ddserver.facelogin;

import com.baidu.aip.face.AipFace;

public class AiFaceObject {
		 //设置APPID/AK/SK
	    public static final String APP_ID = "你的APP_ID";
	    public static final String API_KEY = "你的..";
	    public static final String SECRET_KEY = "你的..";
	    //这上面的东西在你申请百度接口的时候 都会给的
	    
	    //创建一个aipface对象
	    private static AipFace client = new AipFace(APP_ID, API_KEY, SECRET_KEY);
	    //创建单例的原因是避免多次获取sdk
	    public static AipFace getClient(){
	    	client.setConnectionTimeoutInMillis(2000);
	    	client.setSocketTimeoutInMillis(60000);
	    	return client;
	    }
	    
}

 
FaceComparison.java
 这个类是实现两张人脸照片的比较，返回比较后的字符串结果 
package cn.ddserver.facelogin;

import java.util.ArrayList;

import org.json.JSONObject;

import com.baidu.aip.face.AipFace;
import com.baidu.aip.face.MatchRequest;

import cn.ddserver.entity.Image;

public class FaceComparison {
	
	public static String Facecomparison(AipFace client,Image imageU,Image imageC){
		
		MatchRequest req1 = new MatchRequest(imageU.getImage(), imageU.getImageType());
	    MatchRequest req2 = new MatchRequest(imageC.getImage(), imageC.getImageType());
	    ArrayList<MatchRequest> requests = new ArrayList<MatchRequest>();
	    requests.add(req1);
	    requests.add(req2);
	    JSONObject res = client.match(requests);
		return res.toString(2);
		
	}

}

 
FaceDetection.java
 这个类是人脸的检测，因为在获取人脸照片的时候如果没有人脸的照片是不合格的，如果保存了这样的数据，后面进行人脸比较的时候，肯定是比对不成功的 
package cn.ddserver.facelogin;

import java.util.HashMap;

import org.json.JSONObject;

import com.baidu.aip.face.AipFace;

import cn.ddserver.entity.Image;


public class FaceDetection {//人脸检测的类

	public static String Facedetection(AipFace client,Image image){
		HashMap<String, String> options= new HashMap<String, String>();
		options.put("face_field", "age");//返回的人脸信息
		options.put("max_face_num", "1");//最大人脸识别数1
		options.put("face_type", "LIVE");//照骗类型 生活照
		JSONObject res=client.detect(image.getImage(), image.getImageType(), options);
		return res.toString(2);
	}

}

 
FaceRegistration.java
 这个类是进行人脸的注册，就是在百度的人脸库里面注册你的用户人脸库，可以不使用。你可以使用两张图片进行比较。但是这里为了方便，使用这个库和前端上传的图片进行匹配得到匹配成功的图片ID实现登录。 
package cn.ddserver.facelogin;

import java.util.HashMap;

import org.json.JSONObject;

import com.baidu.aip.face.AipFace;

import cn.ddserver.entity.Image;

public class FaceRegistration {
	
	public static String Faceregistrtion(AipFace client,String groupId,String userId,Image image){
		 // 传入可选参数调用接口
	    HashMap<String, String> options = new HashMap<String, String>();
	    options.put("user_info", "user's info");
	    options.put("quality_control", "NORMAL");
	    options.put("liveness_control", "LOW");
	    // 人脸注册
	    JSONObject res = client.addUser(image.getImage(), image.getImageType(), groupId, userId, options);
	    
		return res.toString(2);
	}
	
}

 
FaceUser.java 
package cn.ddserver.facelogin;

import java.util.HashMap;

import org.json.JSONObject;

import com.baidu.aip.face.AipFace;

import cn.ddserver.entity.Image;

public class FaceUser {

	public static String Faceuser(AipFace client,Image imageU){
		// 传入可选参数调用接口
	    HashMap<String, String> options = new HashMap<String, String>();
	    options.put("quality_control", "NORMAL");
	    options.put("liveness_control", "LOW");
	    options.put("max_user_num", "1");
	    
	   
	    String groupIdList = "你的人脸库名称";
	    
	    // 人脸搜索
	    JSONObject res = client.search(imageU.getImage(), imageU.getImageType(), groupIdList, options);
	    return res.toString(2);
	}
}

 
b.上面已经完成了访问百度接口，调用函数将参数传入就可以得到相应的结果字符串。后面要做的就是将这些字符串进行分析。分析数据的类
 
 这里根据个人的需求而定。
 五、登录使用的Servlet
 LoginServlet.java 
package cn.ddserver.servlet;

import java.io.IOException;
import java.sql.Connection;
import java.sql.ResultSet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.simple.JSONObject;

import cn.ddserver.entity.AccountIfo;
import cn.ddserver.entity.Image;
import cn.ddserver.entity.SerquestIfo;
import cn.ddserver.faceuntils.DetectionFace;
import cn.ddserver.faceuntils.UserFace;
import cn.ddserver.untils.Dbutil;
import net.sf.json.JSONArray;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
    @SuppressWarnings("unchecked")
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setCharacterEncoding("utf-8");
		response.setHeader("Access-Control-Allow-Origin", "*");
		response.setHeader("Access-Control-Allow-Methods", "*");
		response.setHeader("Access-Control-Max-Age", "3600");
		response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, X-Custom-Header, HaiYi-Access-Token");
		/*
		 * 验证登录
		 */
		//从数据库查询数据
		JSONObject resjson= new JSONObject();
		AccountIfo user= new AccountIfo();
		SerquestIfo reques=new SerquestIfo();//请求对象
		Image imageU=new Image();
		//将账号密码放入 账户信息 对象
		user.setDd_account(request.getParameter("account"));
		user.setDd_password(request.getParameter("password"));
		imageU.setImage(request.getParameter("imgpath"));
		imageU.setImageType(request.getParameter("imgType"));
		reques.setPage(request.getParameter("page"));
		reques.setUser(user);
		reques.setImageU(imageU);
		 if("2".equals(reques.getPage())){//人脸登录
			JSONObject json=Faclogin(reques.getImageU());
			if("SUCCESS".equals(json.get("error_msg"))){
				resjson.put("error_msg", "SUCCESS");
				resjson.put("result", json);
			}else{
				resjson.put("error_msg", "error");
				resjson.put("result", "null");
			}
			
		}
		else if("3".equals(reques.getPage())){//注册
			
		}
		else{
			JSONObject json=Paslogin(reques.getUser());
			if("SUCCESS".equals(json.get("error_msg"))){
				resjson.put("error_msg", "SUCCESS");
				resjson.put("result", json);
			}
			else{
				resjson.put("error_msg", "error");
				resjson.put("result", "null");
			}
		}
		response.getWriter().print(resjson);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
	 @SuppressWarnings("unchecked")
	public static JSONObject Paslogin(AccountIfo user){//密码登录
		Connection conn=Dbutil.getConnection("com.mysql.jdbc.Driver", "jdbc:mysql://localhost/ddserver", "root", "");
		String sql="select account from UserIfo where account=? and password=?";
		String param[] = new String[2];
		JSONObject json=new JSONObject();
		param[0]=user.getDd_account();
		param[1]=user.getDd_password();
		ResultSet res=Dbutil.executQuery(conn, sql, param);
		json.put("error_msg", "error");
		try {
			while(res.next()){
				json.put("error_msg", "SUCCESS");
				json.put("user_id",user.getDd_account());
				break;
			}
			
		} catch (Exception e) {
			// TODO: handle exception
			json.put("error_msg", "error");
		}
		
		return json;
	}
	 @SuppressWarnings("unchecked")
	public static JSONObject Faclogin(Image imageU){//人脸登录
		 JSONObject json=new JSONObject();
		 json.put("error_msg", "error");
		if(imageU!=null){
			JSONObject dfjson=DetectionFace.Detection(imageU);//合格照片检查
			if("SUCCESS".equals(dfjson.get("error_msg"))){
				JSONObject uf=UserFace.User(imageU);//提交
				if("SUCCESS".equals(uf.get("error_msg").toString())){//查询出结果
					Double score=new Double(uf.get("score").toString());
					if(score>70){
						json.put("error_msg", "SUCCESS");
						json.put("user_id", uf.get("user_id").toString());
					}
					else {
						//
					}
				}else{
					//
				}
			}
			else{
				json.put("face_num", "人脸不合格");
			}
		}
		return json;
	}
	

}

 
这样一个简单的人脸登录就完成啦。自己项目的一个简单效果

收起

展开全文

人脸识别

java web+前端实现人脸登录功能（专注细节）

千次阅读 2020-08-12 23:31:28

java web原生的实现人脸识别登录功能

本次的博客是自己软件工程课设的作业，写博客是为了记录自己的学习过程，然后总结，同时可以给需要的人作参考。 
 
 1、在做这个项目的时候，也是个大三学生，所以懂得并不多，因此在网上看见了一些相关的资源，但是都不是很清醒比较混乱，因此做完这个项目就想发表下自己的意见，以帮助需要的人（这里我们可以用数据库，也可以不用数据库，因为我做的这个项目并不是仅仅一个人脸识别，还有其他的业务，所以我用到了数据库，如果仅仅想弄个人脸注册登录的业务，可以不需要数据库） 
 
让我们进入正题吧： 
一、Web端人脸识别主要有三个技术思路： 
1.前端的人脸识别，例如使用Tensorflow.js，

2.后台人脸识别，有很多开源或者免费的SDK可以使用

3.前后端结合，即结合以上两种方法，虽然系统复杂度提高，但对于系统的安全性，以及减轻服务器负担都有很大提升。
 
（本次的实验是调用百度云的Api以及前后端结合的方式去实现人脸注册以及登录的功能） 
让我们先看下效果图吧： 
1、登录的首页：
 2、注册页面，因为我们想要人脸登录，首先要注册你自己的人脸保存百度云脸库中去
 
 3、人脸识别登录
  
 
 在这个登录页面我们要好好讲一讲，因为在做这个项目的时候，自己花了很多时间。
 1、首先我们要明白，我这个前端页面调用电脑摄像头是自动截取图片的每1秒截取一张，所以不用我们点击确认登录(这里我们也没有这个按钮)，它把我们的图片以base64字节码的形式采用异步Ajax的形式传到后台。
 ·· 
 
4、遇到错误上后台查找原因（遇到最多的就是你的脸不在摄像头的正中间，也就是有效范围）
  
二、因为在百度云上申请自己的账号（免费），注册自己的人脸库 
1、我的百度云人脸库
 
 2、如何创建人脸库（刚开始你们自己肯定没有所以需要创建，创建成功会给你一个API key 及Secret Key，这回头我们在程序中调用人脸库，这个就是地址）
  
3、连接百度云人脸库，无论是人脸检测、人脸搜索、人脸对比，身份验证、都需要首先获取access_token(这个类百度云Api文档里面都有，我知道大家懒，所以直接复制在这里面了) 
package com.baidu.ai.aip.auth;

import org.json.JSONObject;

import java.io.BufferedReader;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.List;
import java.util.Map;

/**
 * 获取token类
 */
public class AuthService {

    /**
     * 获取权限token
     * @return 返回示例：
     * {
     * "access_token": "24.460da4889caad24cccdb1fea17221975.2592000.1491995545.282335-1234567",
     * "expires_in": 2592000
     * }
     */
    public static String getAuth() {
        // 官网获取的 API Key 更新为你注册的
        String clientId = "百度云应用的AK";
        // 官网获取的 Secret Key 更新为你注册的
        String clientSecret = "百度云应用的SK";
        return getAuth(clientId, clientSecret);
    }

    /**
     * 获取API访问token
     * 该token有一定的有效期，需要自行管理，当失效时需重新获取.
     * @param ak - 百度云官网获取的 API Key
     * @param sk - 百度云官网获取的 Securet Key
     * @return assess_token 示例：
     * "24.460da4889caad24cccdb1fea17221975.2592000.1491995545.282335-1234567"
     */
    public static String getAuth(String ak, String sk) {
        // 获取token地址
        String authHost = "https://aip.baidubce.com/oauth/2.0/token?";
        String getAccessTokenUrl = authHost
                // 1. grant_type为固定参数
                + "grant_type=client_credentials"
                // 2. 官网获取的 API Key
                + "&client_id=" + ak
                // 3. 官网获取的 Secret Key
                + "&client_secret=" + sk;
        try {
            URL realUrl = new URL(getAccessTokenUrl);
            // 打开和URL之间的连接
            HttpURLConnection connection = (HttpURLConnection) realUrl.openConnection();
            connection.setRequestMethod("GET");
            connection.connect();
            // 获取所有响应头字段
            Map<String, List<String>> map = connection.getHeaderFields();
            // 遍历所有的响应头字段
            for (String key : map.keySet()) {
                System.err.println(key + "--->" + map.get(key));
            }
            // 定义 BufferedReader输入流来读取URL的响应
            BufferedReader in = new BufferedReader(new InputStreamReader(connection.getInputStream()));
            String result = "";
            String line;
            while ((line = in.readLine()) != null) {
                result += line;
            }
            /**
             * 返回结果示例
             */
            System.err.println("result:" + result);
            JSONObject jsonObject = new JSONObject(result);
            String access_token = jsonObject.getString("access_token");
            return access_token;
        } catch (Exception e) {
            System.err.printf("获取token失败！");
            e.printStackTrace(System.err);
        }
        return null;
    }

}
 
在这里也很容易出错，我就在获取**access_token** 中吃了亏，如果获取不到，则控制台上面不会有 access_token的字符串，如果成功获取access_token的字符串，就会默认在控制台下打印，
 
正常的access_token的样子： 
三、前端如何获取我们的摄像头（在这里我花了很多时间，因为自己做的是后端开发，前端还没能力写出【有能力的同学Pass这句话!！】，只能翻阅大量资料，但是网上都是不足的，我在这里将给大家一个完整的前端Jsp代码） 
3.1、注册的页面（注册页面大家可以自己写其实就是文件上传，我自己这个业务比较复杂） 
<%--
   Document   : index
   Created on : 2020-5-10, 9:49:31
   Author     : Administrator
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
   <title>欢迎使用</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="css/pintuer.css">
   <script src="js/jquery.js"></script>
   <script src="js/pintuer.js"></script>
</head>
<body>
<!--头部开始-->
<%--        <%@include file="WEB-INF/jspf/header.jspf" %>--%>
<!--头部结束-->

<!--内容开始-->
<div class="container padding-big-top padding-big-bottom">
   <div class="line-big">
       <div class="xl12 xs3 xm3 xb7">
           <form method="post" action="/faceinsert" enctype="multipart/form-data">
               <div class="form-group">
                   <div class="label">
                       <label for="yno">
                           用户编号</label>
                   </div>
                   <div class="field">
                       <input type="text" class="input" id="sno" name="yno" size="50" placeholder="用户编号" value="${yonghu.yno}" data-validate="required:必填" />
                   </div>
               </div>
               <div class="form-group">
                   <div class="label">
                       <label for="username">
                           用户名</label>
                   </div>
                   <div class="field">
                       <input type="text" class="input" id="snmae" name="username" size="50" placeholder="用户名" value="${yonghu.username}" data-validate="required:必填"/>
                   </div>
               </div>
               <div class="form-group">
                   <div class="label">
                       <label for="userloginname">
                           用户登录名</label>
                   </div>
                   <div class="field">
                       <input type="text" class="input" id="ssex" name="userloginname" size="50" placeholder="用户登录名"  value="${yonghu.userloginname}"/>
                   </div>
               </div>
               <div class="form-group">
                   <div class="label">
                       <label for="password">
                           密码</label>
                   </div>
                   <div class="field">
                       <input type="text" class="input" id="ssex" name="password" size="50" placeholder="密码"  value="${yonghu.userloginname}"/>
                   </div>
               </div>
               <div class="form-group">
                   <div class="label">
                       <label for="apassword">
                           确认密码</label>
                   </div>
                   <div class="field">
                       <input type="text" class="input" id="ssex" name="apassword" size="50" placeholder="确认密码"  value="${yonghu.userloginname}"/>
                   </div>
               </div>
               <div class="form-group">
                   <div class="label">
                       <label for="name">
                           姓名</label>
                   </div>
                   <div class="field">
                       <input type="text" class="input" id="sage" name="name" size="50" placeholder="姓名"  value="${yonghu.name}" data-validate="required:必填"/>
                   </div>
               </div>
               <div class="form-group">
                   <div class="label">
                       <label for="sex">
                           性别</label>
                   </div>
                   <div class="field">
                       <input type="text" class="input" id="sdept" name="sex" size="50" placeholder="性别" value="${yonghu.sex}" data-validate="required:必填"/>
                   </div>
               </div>


               <div class="form-group">
                   <div class="label">
                       <label for="username">
                           电话</label>
                   </div>
                   <div class="field">
                       <input type="text" class="input" id="phone" name="tel" size="50" placeholder="电话"  value="${yonghu.tel}" data-validate="required:必填"/>
                   </div>
               </div>
               <div class="form-group">
                   <div class="label">
                       <label for="username">
                           邮箱</label>
                   </div>
                   <div class="field">
                       <input type="text" class="input" id="phone" name="email" size="50" placeholder="电话"  value="${yonghu.email}" data-validate="required:必填"/>
                   </div>
               </div>

<%--                <div>  <!--验证码-->--%>
<%--                    <input  type="text" name="checkCode"/>--%>

<%--                    <img alt="验证码" id="imagecode" src="/ImageServlet"/>--%>
<%--                    <a href="javascript:void(0)" οnclick="myReload()">看不清楚</a><br>--%>


<%--                    <script type="text/javascript">--%>
<%--                        function myReload()--%>
<%--                        {--%>

<%--                            document.getElementById("imagecode").src ="/ImageServlet?"+Math.random();--%>
<%--                        }--%>
<%--                    </script>--%>
<%--                </div>--%>

               <p style="color: red">${err}</p>

               <div>
                   <input placeholder="请选择头像" type="file" name="image"/>
               </div>
               <div class="form-button">
                   <button class="button" type="submit">
                       提交</button>

               </div>

           </form>
       </div>
       <div class="xl12 xs9 xm9 xb5 padding-small-top">
           <img src="images/1.jpg" alt="学生信息管理系统" width="500px" height="350px"/>
       </div>
   </div>
</div>
<!--内容结束-->

<!--尾部开始-->
<%--        <%@include file="WEB-INF/jspf/footer.jspf" %>--%>
<!--尾部结束-->
</body>
</html>
 
3.2获取getface.Js的代码 
$(function () {
   let mediaStreamTrack = null;
   openMedia();
   setTimeout("tishi()", "1000");  <!---缓存1000毫秒-->
   setTimeout("tishi2()", "3000");
   setTimeout("takePhoto()", "5000");

})
var number = 0;

function tishi() {
   $("#flag").html("正在打开摄像头")
}

function tishi2() {
   $("#flag").html("请正视摄像头")
}

function tishi3() {
   window.location.href = "login.jsp";
}

function openMedia() {
   let constraints = {
       video: {width: 500, height: 500},
       audio: false
   };
   //获得video摄像头
   let video = document.getElementById('video');
   let promise = navigator.mediaDevices.getUserMedia(constraints);
   promise.then((mediaStream) => {
       mediaStreamTrack = typeof mediaStream.stop === 'function' ? mediaStream : mediaStream.getTracks()[1];
       video.srcObject = mediaStream;
       video.play();
   });
}

// 拍照
function takePhoto() {
   //获得Canvas对象
   number++;
   let video = document.getElementById('video');
   let canvas = document.getElementById('canvas');
   let ctx = canvas.getContext('2d');
   ctx.drawImage(video, 0, 0, 500, 500);
   // toDataURL  ---  可传入'image/png'---默认, 'image/jpeg'
   let img = document.getElementById('canvas').toDataURL();
   // 这里的img就是得到的图片
   console.log('img-----', img);
   document.getElementById('imgTag').src = img;
   $("#flag").html("正在识别");
   $.ajax({
       url: "/faceloginServlet",    //请求的url地址
       dataType: "text",   //返回格式为json
       async: true,//请求是否异步，默认为异步，这也是ajax重要特性
       // contentType:"application/json",
       data: {"imagebast64": img}, //参数值
       type: "POST", //请求方式
       success: function (data) {
           //     if(data=="fail"||data.score.substr(0,2)<80){
           //         $("#flag").html("识别失败，请保持人像处于框内 2秒后重新识别");
           //         if(number<3){
           //             setTimeout("takePhoto()","3000");
           //         }else {
           //             $("#flag").html("识别失败请使用账号密码登录 三秒后回到主页");
           //             setTimeout("tishi3()","3000");
           //         }
           //     }
           //     if(data.score.substr(0,2)>80){
           //         window.location.href="/display"
           //     }
           //
           //
           //
           //
           // }
           alert(data);
           var scoreMatch = data.split(".")[0];
           if (scoreMatch > 72) {
               console.log("cheng---gong");
               window.location.href = "/display";
           } else {

               window.location.href = "login.jsp";
           }

       }
   })

}

// 关闭摄像头
function closeMedia() {
   mediaStreamTrack.stop();
}
 
3.3 facelogin.jsp文件 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<!doctype html>
<html lang="zh">
<head>
    <title>js调用摄像头拍照上传图片</title>
    <meta charset="utf-8">
</head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/Getface.js"></script>
<style>
    .getface{
        position: absolute;
        top: 20%;
        left: 35%;

    }
    .tishi{
        font-size: 20px;

    }
</style>
<body>
<div align="center">
    <p id="flag" class="tishi"></p>
</div>
<div class="getface">
    <video id="video" width="400px" height="400px" autoplay="autoplay"></video>
    <canvas id="canvas" width="400px" height="400px" style="display: none;"></canvas>
    <img id="imgTag" src="" alt="imgTag" style="display: none;">
</div>
</body>
 
ok！！！，按照上面的原封不动你就已经把前端的代码搭建好了 
四、百度云人脸技术有好几项技术，这里我们的项目只用到了人脸搜索和人脸库管理中（人脸注册）这两个技术就够了（如果对人脸对比，和人脸检测有兴趣，可以自己观看文档） 
4.1、在后端的开发中我们首先要在百度云人脸识别的文档中下载几个类，这是给你准备好的直接在地址栏复制就可下载 
 
 
 /**
 * 重要提示代码中所需工具类
 * FileUtil,Base64Util,HttpUtil,GsonUtils请从
 * https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72
 * https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2
 * https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3
 * https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3
 * 下载
 */ 
 
我们来解释下这几个类是干什么用的：
 1、FileUtil:这个类是帮助我们读取前端传来登录头像的数据，作为字符串返回
 2、Base64Util:这个类辅助上面的一个类，帮我们解析传过来的数据（我们知道前端我们使用Base64字节码传的，所以就必须用BaseUtil这个工具类去解析）
 3、HttpUtil:这个类让我们可以在程序中，就可以请求百度云的Ip,感觉很牛皮，至今不知道为什么，知道的欢迎在评论告诉我
 4.这个学过Json数据格式的都知道，这个是处理Json与字符串之间转换的工具类 
4.2、前期的准备工作已经做好，让我们写后端代码吧 
4.2.1、我们知道想要用人脸识别技术就首先注册自己的人脸到百度云人脸库中去 

  
package com.baidu.ai.aip;

import com.baidu.ai.aip.utils.HttpUtil;
import com.baidu.ai.aip.utils.GsonUtils;

import java.util.*;

/**
* 人脸注册
*/
public class FaceAdd {

    /**
    * 重要提示代码中所需工具类
    * FileUtil,Base64Util,HttpUtil,GsonUtils请从
    * https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72
    * https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2
    * https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3
    * https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3
    * 下载
    */
    public static String add() {
        // 请求url
        String url = "https://aip.baidubce.com/rest/2.0/face/v3/faceset/user/add";
        try {
            Map<String, Object> map = new HashMap<>();
            map.put("image", "027d8308a2ec665acb1bdf63e513bcb9");
            map.put("group_id", "group_repeat");
            map.put("user_id", "user1");
            map.put("user_info", "abc");
            map.put("liveness_control", "NORMAL");
            map.put("image_type", "FACE_TOKEN");
            map.put("quality_control", "LOW");

            String param = GsonUtils.toJson(map);

            // 注意这里仅为了简化编码每一次请求都去获取access_token，线上环境access_token有过期时间， 客户端可自行缓存，过期后重新获取。
            String accessToken = "[调用鉴权接口获取的token]";

            String result = HttpUtil.post(url, accessToken, "application/json", param);
            System.out.println(result);
            return result;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    public static void main(String[] args) {
        FaceAdd.add();
    }
}

 
这是官方给的代码，通过上面我自己的代码，我相信照这两个你们会搭建好自己的业务代码（这里可以根据前端实现图片上传功能，再将图片转base64数据上传到人脸库，这里group_id为注册人脸库用户组时自己设置的，以实现注册功能，） 
4.2.2、然后我们就可以人脸登录，然后调用百度云人脸搜索的功能了，如何搜索到你目前登录的和你刚刚注册的一样，就会登录进去，否则失败 

  
package utils;

/**
 * @author Administrator
 *
 */

import java.util.*;


import entity.AuthService;
import utils.GsonUtils;
import utils.HttpUtil;

/**
* 人脸搜索
*/
public class faceSearch {

    /**
    * 重要提示代码中所需工具类
    * FileUtil,Base64Util,HttpUtil,GsonUtils请从
    * https://ai.baidu.com/file/658A35ABAB2D404FBF903F64D47C1F72
    * https://ai.baidu.com/file/C8D81F3301E24D2892968F09AE1AD6E2
    * https://ai.baidu.com/file/544D677F5D4E4F17B4122FBD60DB82B3
    * https://ai.baidu.com/file/470B3ACCA3FE43788B5A963BF0B625F3
    * 下载
    */
    public static String search(String image) {
        // 请求url
        String url = "https://aip.baidubce.com/rest/2.0/face/v3/search";
        try {
            Map<String, Object> map = new HashMap<>();
            String substring = image.substring(image.indexOf(",")+1, image.length());
            map.put("image", substring); //图片base64数据
            map.put("liveness_control", "NONE");  //活体检测控制无
            map.put("group_id_list", "testFaceLogin");  //指定用户组group 人脸库总已经存在的用户组
            map.put("image_type", "BASE64");     //图片类型，这里转化过的base64
            map.put("quality_control", "LOW");   //图片质量控制

            String param = GsonUtils.toJson(map);
            AuthService auth = new AuthService();
            String accessToken = auth.getAuth();
            // 注意这里仅为了简化编码每一次请求都去获取access_token，线上环境access_token有过期时间， 客户端可自行缓存，过期后重新获取。

            String result = HttpUtil.post(url, accessToken, "application/json", param);

            String score = result.split(",")[9].split(":")[1];
            System.out.println(result);
            System.out.println(score);
            return score;
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    
}
 
上面的图片是我自己人脸登录的Servlet,结合下面官方给的，我相信你们就理解了人脸搜索功能的意思，通过人脸搜索类任何去匹配人脸库中最像的一个给出分数，然后把这个分数用输出流传递给前端，在前段设置个阀值（我设置的是75），如何大于75分说明在人脸库中找到了你目前登录人的信息，则给予通过，否则相反 
这是刚刚Getface.js文件中的
  
到这我们所有的人脸识别工作就结束了，根据自己需要自行修改，可能需要某些jar包有啥问题了，如果实在找不到了可以私信我。

收起

展开全文

人脸识别 java

web前端练习1----实现登录功能

万次阅读 2018-11-15 14:45:45

2Ajax请求数据完成登录功能 3把登录成功后的 token和用户名传到下个页面代码：我把所有代码：html css js 都写在了一个文件里 Login.html &lt;!DOCTYPE html&gt; &lt;html&gt...

效果图： 

 思路：
 1html+css 完成基本布局
 2Ajax请求数据完成登录功能
 3把登录成功后的 token和用户名传到下个页面 
代码：我把所有代码：html css js 都写在了一个文件里
 Login.html 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!--手机上运行时，加上这句话-->
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <title></title>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .title {
            font-size: 20px;
            background-color: cornflowerblue;
            color: #fff;
           /*
            * 里面的文字居中
            */
            line-height: 50px;
            text-align: center;
            /*
             *绝对定位
             */
            position: fixed;
            top: 0px;
            left: 0px;
            width: 100%;
        }

        .content {
            margin-top: 110px;
        }

        .mybutton {
            width: 200px;
            line-height: 40px;
            text-align: center;
            background-color: cornflowerblue;
            margin: 0 auto;
            margin-top: 20px;
            font-size: 20px;
            color: #fff;
        }

        .shurukuang {
            /*
             * 自己居中
             * 要设置为块级元素
             */
            display: block;
            margin: 0 auto;

            width: 200px;
            height: 25px;
            margin-top: 1px;
            border: none;
            border-bottom: 1px solid;
            margin-top: 5px;
            text-indent: 4px;
            /*
             * outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
             * 这里是去掉原有的，鼠标点击后的黄色轮廓
             */
            outline: none;
        }
    </style>
</head>
<body>


<div class="title">
    登录界面
</div>

<div class="content">
    <input id="username" class="shurukuang" type="text" placeholder="手机号" value="zhh1">
    <input id="password" class="shurukuang" type="password" placeholder="密码" value="123456">
</div>
<div class="mybutton" onclick="myClick()">登录</div>


<script>

    // 请求路径
    var httpurl = "/api2/ddgl/login";
    // 数据请求
    function myClick() {
        var usernamestr = document.getElementById("username").value;
        var passwordstr = document.getElementById("password").value;
        if(usernamestr==""||usernamestr==null){
            alert("用户名为空");
            return;
        }
        if(passwordstr==""||passwordstr==null){
            alert("密码为空");
            return;
        }

        $.ajax({
            url: httpurl,//请求的url地址
            type: 'post',//设置请求的http方式，method也可以
            dataType: 'json',//将服务器端返回的数据直接认定为是这个格式，然后会做一些自动的处理(如果是json字符串，会自动转化为js对象),服务器返回的默认格式是text/html格式
            data: {//向服务器端发送的数据
                username: usernamestr,
                password: passwordstr,
                uniqueDeviceIdentifier: 2
            },
            success: function (data, textStatus, jqXHR) {//请求成功之后执行的回调函数
                if(data.resultCode!=200){
                    alert("用户名或密码错误")
                    return;
                }
                var token = data.extras.token;
                console.log(token);
                location.href = "Listview1.html?" + "token=" + token + "&&" + usernamestr;

            },
            error: function (jqXHR, textStatus, errorThrown) {//请求失败之后执行的回调函数
                console.log(errorThrown);
            }
        });
    }

</script>

</body>
</html>
 
注意：
 1记着要引入jquery-2.1.4.min.js 包
 2ajax由于跨域问题，不能访问到，需要nginx 反向代理 
nginx 下载安装使用
 https://download.csdn.net/download/zhaihaohao1/10786751
 源码下载
 源码：h5源码----MyListView1
 静态源码：h5源码----Listdemo0
 https://download.csdn.net/download/zhaihaohao1/10786731

收起

展开全文

Springboot WEB项目使用AJAX前端发送数据后台查询数据库并进行判断实现注册并登录功能！

千次阅读 热门讨论 2020-04-09 13:24:46

从标题就能知道，我们需要实现的是前端页面通过ajax发送数据到后台，然后后台进行数据库查询并进行逻辑判断用户是否存在，如果存在则不能进行注册并返回数据，不存在进行注册并返回数据，最后返回验证数据给前端，...

Springboot WEB项目使用AJAX前端发送数据后台查询数据库并进行判断实现注册并登录功能！ 
一，回顾
 1，如何快速搭建一个Springboot Web项目：请点击这里
 2，如何通过ajax发送数据实现后台数据库查询数据，并进行登录功能：请点击这里 
二，功能实现简介 
从标题就能知道，我们需要实现的是前端页面通过ajax发送数据到后台，然后后台进行数据库查询并进行逻辑判断用户是否存在，如果存在则不能进行注册并返回数据，不存在进行注册并返回数据，最后返回验证数据给前端，这时前端收到判断返回的验证数据，做出相应的动作（页面的跳转）。 
三，实现注册展示，先看效果再看具体代码实现 
1，此时我们的数据库User_Info表中数据为这样的，如下图
 
 2，验证表中存在数据不能进行注册，此时输入用户名：gan 密码：123，不能注册
 
 同时控制台打印
 
 3，验证表中不存在数据不能进行注册，这里以 输入用户名：jack 密码：123456 为例，注册成功
 
 控制台打印信息
 
 此时再来刷新我们的数据库中表的数据，看数据已经注册到我们的表中了
 
 四，看我们的实现代码，分前端代码和后端代码
 1，前端代码
 HTML 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/style.css">
		<title>注册</title>
		<script src="js/register.js"></script>
		<script src="http://code.jquery.com/jquery-latest.js"></script><!--支持ajax的文件库-->
	</head>
	<body class="registerbody">
		<div class="box1">
			<h3>注册</h3>
			<from action="submit">
<!--				<div >请输入账号：<input type="text" id="account" /></div>-->
				<div>请输入账号：<input type="text"  id="username" /></div>
				<br>
				<div >请输入密码：<input type="password" id="password" /></div>
				<br>
				<div>请确定密码：<input type="password"  id="pwd" /></div>
				<br>
<!--				<div>请输入姓名：<input type="text"  id="username" /></div>-->
<!--				<br>-->
<!--				<div>请输入手机：<input type="text" id="phone" /></div>-->
<!--				<br>-->
				<input type="button" onclick="register()" value="注册" />
				<!-- <div><input type="button" οnclick="register()"  value="注册"/></div >-->
			
		</div>
	</body>
</html>

 
js代码 
function register() {
	/
	var username =document.getElementById('username').value;
	if(null == username || "" == username) {
		alert("请输入用户名");
		return;
	}
	var password =document.getElementById('password').value;
	if(null == password || "" == password) {
		alert("请输入密码");
		return;
	}
	var pwd =document.getElementById('pwd').value;
	if(null == pwd || "" == pwd) {
		alert("请确定密码");
		return;
	}
	$.ajax({
		url : "/userRegister",
		type : "POST",
		data :{
			"username":username,
			"password": password,
			"pwd":pwd},
		dataType : "json",
		success : function(data) {
			//后台返回数据
			if (data.status == "ok") {
				alert(data.message);   //注册成功
				window.location.href = "login.html";
			}else {
				alert("注册失败");   
			}

		},
		error:function (res) {
			alert("请求错误！",console.res)
		}

	});
}
 
2,后台代码 
pojo实体类和上篇一样的，不展示了，上篇链接在这里：看这篇的pojo实体类 
dao层 
package com.springboot.springboot.dao;

import com.springboot.springboot.pojo.UserInfo;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
import java.util.List;

@Repository
public interface UserDao extends JpaRepository<UserInfo, Integer> {
    //定义通过用户名密码查询数据
    public UserInfo findByUserNameAndPassword(String username,String password);
    //定义通过用户查询
    public List<UserInfo> findByUserName(String username);

}

 
Service层 
package com.springboot.springboot.service;

import com.springboot.springboot.dao.UserDao;
import com.springboot.springboot.pojo.UserInfo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;

@Service
public class UserServiceImpl {
    @Autowired
    UserDao userDao;
    //实现通过用户名密码查询数据
    public UserInfo getUser(String name,String pwd){
        return userDao.findByUserNameAndPassword(name,pwd);
    }
    //实现通过用户名查询
    public List<UserInfo> getUserName(String name){
        return userDao.findByUserName(name);
    }

}

 
最后看我们的controller层 
这里我简单的介绍具体控制层的逻辑
 1，获取用户发送来的数据
 2，通过用户名查询数据库中表是否存在该用户名，这里用户名在表中是唯一的，存在则不能注册，不存在则可以注册。在通过用户名查询用户的时候，我用列表返回，通过返回列表的是否为空，从而判断该用户是否在表中，这里进行数据库交互的返回值非常重要，写数据访问时一定要向好返回值的类型。当然，我这里用的是列表返回可能效率不是那么的好，还有许多返回方法的。
 3，通过列表判断用户是否有注册的行为，并将返回数据以josn格式返回。
 4，前端做出判断，返回信息给用户。
 5，over 
package com.springboot.springboot.controller;

import com.springboot.springboot.dao.UserDao;
import com.springboot.springboot.pojo.UserInfo;
import com.springboot.springboot.service.UserServiceImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.List;
import java.util.Map;
import com.alibaba.fastjson.JSON;
import sun.plugin2.message.JavaReplyMessage;

/**
 * @author ganxiang
 * IDE      IntelliJ IDEA
 * @project_name and filename Springboot UserController
 * @date 2020/04/08 0008 14:15
 */

@Controller
public class UserController {
    @Autowired
    UserDao userDao;
    @RequestMapping("/userRegister")
    @ResponseBody
    public  String userRegister(HttpServletRequest request, Map<String, String> parameter,HttpSession session){
        String name = request.getParameter("username");
        String password = request.getParameter("password");
        String pwd =request.getParameter("pwd");
        System.out.println(name+":"+password+":"+pwd+password.equals(pwd));
        UserInfo user =new UserInfo();
        List<UserInfo> list = userService.getUserName(name);
        System.out.println("查询的用户名为"+user.toString());
        if (list.size()==0){
            user.setUserName(name);
            user.setPassword(password);
            if (password.equals(pwd)) {
                session.setAttribute("userInfo", user);
                userDao.save(user);
                parameter.put("message", "注册成功");
                parameter.put("status", "ok");
                System.out.println("用户不存在，用户注册成功");
                return JSON.toJSONString(parameter);
            } else {
                parameter.put("message", "注册失败，用户输入密码与确定密码不同");
                parameter.put("status", "no");
                System.out.println("用户输入密码与确定密码不同，请重新输入");
                return JSON.toJSONString(parameter);
            }
        }
        else {
            parameter.put("message", "注册失败，用户存在");
            parameter.put("status", "no");
            System.out.println("用户存在");
            return JSON.toJSONString(parameter);
        }
    }

}

 
如果觉得有帮助的，点个赞再走呗🤞🤞🤞

收起

展开全文

数据库 ajax java

web前端实现——登录页面
千次阅读 2020-02-02 22:08:10
https://blog.csdn.net/qq_45714923/article/details/104127720
收起
web注册功能实现
2020-08-17 09:29:52
(根据网上各位前辈的信息，自学实现这个注册基本功能，以后要是学到更好的实现方式，再更新，这里不涉及到样式) 成功注册流程：主页（index.html）提供注册链接，点击”注册”------->跳转到注册页面(register....
收起
Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）
2019-12-31 17:29:19
Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）。Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）。Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）。
收起
2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)
万次阅读 多人点赞 2018-06-15 18:01:14
第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数 14.xml和...
收起
基于PHP实现用户注册登录功能
2020-10-21 08:06:06
本课程通过使用PHP及Web前端技术实现一个网站注册登录入口页面，学习并实践PHP编程等，有兴趣的同学可以参考一下。
收起
Python Flask web 开发中的注册与登录功能实现
千次阅读 2019-08-11 15:05:18
一、首先是实现注册功能 1、我们先创建一个存储表单信息的py文件，叫做form.py。然后写一个注册类的表单，用Flask-WTF这个类来实现，具体代码如下： form.py文件内容 from flask_wtf import FlaskForm from ...
收起
flask-web开发中登录和注册功能的实现
千次阅读 2016-11-04 19:47:53
要实现登录，注册功能，需要实现的具体功能有： 1，数据库（SQLAlchemy）：在app/models中构造User和Role模块，使用时只需要调用，代码如下： #encoding:utf8 from werkzeug.security import generate_...
收起
flask
WEB前端实现在线预览、编辑Office文档
2021-05-28 17:26:09
WEB前端实现在线预览、编辑Office文档这篇文章介绍如何在web前端引入JS插件实现在线预览、编辑Office文档。使用插件：Spire.Cloud在线Office文档编辑器（官网：https://cloud.e-iceblue.cn/）重点：该方案仅需...
收起
javascript
Web前端 | 注册表单验证
万次阅读 2018-05-08 20:17:56
注册格式要求：页面中所有项均为必填项登录账号：只能是数字或字母且以字母开头密码：大于8位且需要有字母和数字之外的字符姓名：格式为2-4个汉字出生年月日：格式为yyyy-mm-dd 【eg：1998-02-17】 ...
收起
JavaScript
Java web简单的注册功能实现
万次阅读 2017-06-26 20:34:25
今天写了一个注册功能，没有用任何框架！发现不会写了，中间查了好几次百度。不过还是顺利的写完并且跑起来了。在这里记录一下。我认为有时候写这些代码还是对我们理解框架很有帮助的，因为框架也是按照这些，对基础...
收起
java 数据库 eclipse tomcat mysql
前端登录注册功能简单总结
千次阅读 2019-02-03 19:01:18
request请求 ...2、前端需要将用户写的登录信息拿到并传给数据库，并会做一些简单的数据校验，登录功能的这部分前端代码和注册类似。 3、后端从数据库中验证用户信息。具体功能还在理解中。
收起
web前端登录页面设计技巧
千次阅读 2019-10-25 23:08:44
首先我们先来了解的用户登录流程，先点击是注册，然后是登录，再有就是忘记密码，然后，每个功能做一个界面，这是最早的流程，现在越来越多的大型网站把登录和首页放在一起设计，原因就在于用户体验度；好的用户体验...
收起
2018最新Web前端经典面试试题及答案
万次阅读 多人点赞 2018-01-16 21:56:43
马上就要过春节了，开年就是崭新的一年，相信很多的前端开发者会有一些跳槽的悸动，通过对本篇知识的整理以及经验的总结，希望能帮到更多的前端面试者。（如有错误或更好的答案，欢迎指正，水平有限，望各位不吝指教...
收起
html css javascript
2021年最新Web前端面试题精选大全及答案
万次阅读 多人点赞 2021-01-07 11:53:44
怎么实现标签的禁用添加disabled属性 20.Flex布局原理就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式 21.Px，rem，em的区别 Px，绝对长度单位，像素px是相对于显示器屏幕分辨率来说的 em 相对长度...
收起
css html html5 javascript
实现Web上的用户登录功能
千次阅读 2018-11-27 13:02:40
Web上的用户登录功能应该是最基本的功能了，可是在我看过一些站点的用户登录功能后，我觉得很有必要写一篇文章教大家怎么来做用户登录功能。下面的文章告诉大家这个功能可能并没有你所想像的那么简单，这是一个关系...
收起
Web前端实现界面间传值的几种方式
千次阅读 2018-12-09 22:45:09
有很多功能是必须要向后台发送请求才能实现的，而界面间传值可以减少不必要的、重复的发送请求操作，从而减轻后台的负担。第一种方式：利用缓存(cookie) 假如有A, B 两个界面，要把A的值传给B 首先两个界面中都得...
收起
url传值使用cookie
JAVA-Web【网站注册功能】-将前端表单数据发送到后端数据库
千次阅读 2019-10-16 15:29:04
JAVA-Web【网站注册功能】-将前端表单数据发送到后端数据库程序流程： 1、在前端填写数据并将数据打包发送到servlet，这里可以通过在网页端按F12抓包，来查看编写的servlet是否发送成功，通过还阔以看到是否收到...
收起
JAVAweb JAVA MYSQL TOMCAT
基于JSP和Servlet技术实现的Java Web的注册和登录的功能
千次阅读 多人点赞 2019-05-09 21:53:12
注册界面：登录界面：二什么是JavaWeb三层架构在写web项目之前你得先弄清MVC三层架构是什么，不然你会学的一头雾水。什么是三层架构？三层架构(3-tier architecture) 通常意义上的三层架构就是将整个业务...
收起
web设计实现登录和注册页面链接
2010-12-16 22:06:02
先创建一数据库，登录有动态ASP页面和HTML页面，注册页面类似，注册成功后把数据提交到数据库，再在登录页面可以登录成功
收起
web前端如何做注册页面
万次阅读 2017-04-07 16:41:47
1.首先，设计整个页面：此界面的代码段落：（前端代码）用户名
收起
web功能实现-登录案例
千次阅读 2018-10-10 16:44:38
1.前端页面_login.html <!DOCTYPE html> 登录请输入用户名" name="username"> 请输入密码"> 登录"> 2.数据库表 _ user CREATE TABLE user( id INT PRIMARY KEY ...
收起
web前端面试题（全）
万次阅读 多人点赞 2019-04-17 11:23:57
近来看到网上格式各样的web前端求职的面试题，接下来我用我的经验总结了一套在面试过程中高频率问到的面试题，希望能帮助各位求职者在求职的过程中顺利通过，废话不多说，直接说题。。。一、HTML5部分 1.说一下对...
收起
java web网站中使用shiro实现前后台登录功能
万次阅读 热门讨论 2016-03-29 01:02:25
在架构设计上废了一些劲,我项目架构大概是这样:Spring作为容器,Mybatis做数据持久层,SpringMVC做控制层,Shiro做为安全框架,页面使用tomdjs引擎,大概是这样,由于是功能型网站,需要有前后台登录,后台需要审核以及数据...
收起
java shiro

web前端实现登录，列表等功能

前端实现登录功能

web实现注册登录功能源代码

Web前端+Java实现人脸识别登录

java web+前端实现 人脸登录功能（专注细节）

本次的博客是自己软件工程课设的作业，写博客是为了记录自己的学习过程，然后总结，同时可以给需要的人作参考。

让我们进入正题吧：

一、Web端人脸识别主要有三个技术思路：

让我们先看下效果图吧：

二、因为在百度云上申请自己的账号（免费），注册自己的人脸库

三、前端如何获取我们的摄像头（在这里我花了很多时间，因为自己做的是后端开发，前端还没能力写出【有能力的同学Pass这句话!！】，只能翻阅大量资料，但是网上都是不足的，我在这里将给大家一个完整的前端Jsp代码）

3.1、注册的页面（注册页面大家可以自己写其实就是文件上传，我自己这个业务比较复杂）

3.2获取getface.Js的代码

3.3 facelogin.jsp文件

四、百度云人脸技术有好几项技术，这里我们的项目只用到了人脸搜索和人脸库管理中（人脸注册）这两个技术就够了（如果对人脸对比，和人脸检测有兴趣，可以自己观看文档）

4.1、在后端的开发中我们首先要在百度云人脸识别的文档中下载几个类，这是给你准备好的直接在地址栏复制就可下载

4.2、前期的准备工作已经做好，让我们写后端代码吧

4.2.1、我们知道想要用人脸识别技术就首先注册自己的人脸到百度云人脸库中去

4.2.2、然后我们就可以人脸登录，然后调用百度云人脸搜索的功能了，如何搜索到你目前登录的和你刚刚注册的一样，就会登录进去，否则失败

到这我们所有的人脸识别工作就结束了，根据自己需要自行修改，可能需要某些jar包有啥问题了，如果实在找不到了可以私信我。

web前端练习1----实现登录功能

Springboot WEB项目使用AJAX前端发送数据后台查询数据库并进行判断实现注册并登录功能！

Springboot WEB项目使用AJAX前端发送数据后台查询数据库并进行判断实现注册并登录功能！

web前端实现——登录页面

web注册功能实现

Java Web实现登陆注册页面前端与后台数据连接（代码+sql文件）

2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

基于PHP实现用户注册登录功能

Python Flask web 开发中的注册与登录功能实现

flask-web开发中登录和注册功能的实现

WEB前端实现在线预览、编辑Office文档

Web前端 | 注册表单验证

Java web简单的注册功能实现

前端登录注册功能简单总结

web前端登录页面设计技巧

2018最新Web前端经典面试试题及答案

2021年最新Web前端面试题精选大全及答案

实现Web上的用户登录功能

Web前端实现界面间传值的几种方式

JAVA-Web【网站注册功能】-将前端表单数据发送到后端数据库

基于JSP和Servlet技术实现的Java Web的注册和登录的功能

web设计实现登录和注册页面链接

web前端如何做注册页面

web功能实现-登录案例

web前端面试题（全）

java web网站中使用shiro实现前后台登录功能

web前端注册登录功能实现

java web+前端实现人脸登录功能（专注细节）