(一.用户服务.注册功能+登录功能)前端页面
1.注册功能
一.创建一个ovls-ui前端项目
报错,把描述生成下
二.导包
tomcat-embed-jasper(Jasper引擎解析JSP文件jsp支持配置)
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>cn.xdl</groupId>
<artifactId>ovls-ui</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>2.0.5.RELEASE</version>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
<version>8.5.29</version>
</dependency>
</dependencies>
</project>
三.添加配置文件application.properties
server.port=8888
//访问jsp静态页面,找study目录下的.jsp
spring.mvc.view.prefix=/study/
spring.mvc.view.suffix=.jsp
四.添加启动类WebBootApplication
package cn.xdl.ovls;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class WebBootApplication {
public static void main(String[] args) {
SpringApplication.run(WebBootApplication.class, args);
}
}
五.启动
http://localhost:8888/study/index.jsp
六.添加控制器WebController
处理动态设置静态访问
http://localhost:8888/study/index.html
package cn.xdl.ovls.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class WebController {
//设置首页静态访问
@RequestMapping("/study/index.html")
public String index(){
return "index";
}
//设置学科静态访问
@RequestMapping("/study/course.html")
public String course(){
return "course";
}
}
七.通过ajax完成注册功能
流程:
1.index.jsp–>
在body里面
<!-- 头部引用相对路径 -->
<%@include file="head.jsp"%>
2.head.jsp–>
<!-- 顶部右边 -->
<div class="float_r">
<div class="float_l top_input">
<input class="posi_relative" type="text" name="" id="search_id" placeholder="请输入...">
<img class="img_sousuo bianshou" src="img/uiz4.png" onclick="javascript:window.location='search.jsp'">
</div>
<div id="log_reg">
<a href="#" id="example1">注册</a>
<a href="#" id="example2">登录</a>
</div>
</div>
</div>
</div>
<!-- 这里导入弹出层插件 -->
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript">
/*
*注册弹出层事件函数
*/
$(document).on('click', '#example1', function() {
layer.open({
type : 2,
border : [1 , 1 , 'gray', true],
shade : [0.5 , '#000' , true],
shadeClose:true,
title : false,
content:'regist.jsp',
area : ['450px' , '450px'],
offset : ['100px',''],
});
});
</script>
八.修改regist.jsp页面
<script type="text/javascript">
function register(){
//获取注册表单信息
var name = $("#username").val();
var password = $("#password").val();
var password2 = $("#password2").val();
//清空原有提示信息
$("#username_error").html("");
$("#password_error").html("");
$("#password2_error").html("");
//检测表单信息格式
var ok = true;
if(name==""){
$("#username_error").html("用户名不能为空");
ok = false;
}
if(password==""){
$("#password_error").html("密码不能为空");
ok = false;
}
if(password2==""){
$("#password2_error").html("确认密码不能为空");
ok = false;
}else if(password2 != password){
$("#password2_error").html("两次密码不一致");
ok = false;
}
//通过检测调用/user/regist注册服务
if(ok){
$.ajax({
//请求地址完整
url:"http://localhost:7001/user/regist",
//提交方式
type:"post",
//请求参数必须和controller的key一致
data:{"name":name,"password":password},
//返回格式
dataType:"json",
//返回结果根据条件判断
success:function(result){
if(result.status==0){//注册成功
//提示注册成功
alert(result.msg);
//TODO 切换成登录状态
}else if(result.status==1){//用户名被占用
$("#username_error").html(result.msg);
}else{//其他错误
alert(result.msg);
}
}
});
}
}
</script>
先启动这两个服务
效果如图
localhost:8888/study/index.html
UI和注册服务交互
采用ajax模式发送请求调用后台服务处理.
AJAX请求跨域问题的三种解决方案:
1.jsonp方案
该方式只适合get请求的跨域,基本原理是将返回的JSON结果封装成js函数代码.js代码资源和图片是允许跨域访问的.
单独访问
/hello-->
{"msg":"hello json"}
跨域访问
jsonp模式
/hello-->
生成一个函数名,把{"msg":"hello json"}作为函数参数
函数名({"msg":"hello json"});
2.1Cors方案(跨域资源共享)(项目采用方案)
在UserController前面加这个标记,表示这个请求的来源域,星号代表这个请求下的所有来源域
@CrossOrigin(origins={"*"})
输入原来有的账号.提示被占用
输入新的账号密码,注册成功
数据库查询结果
2.2Cors基于底层技术方法
在user项目里创建一个CrosFilter类继承Filter接口
代码
package cn.xdl.ovls.util;
import java.io.IOException;
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
//过滤器拦截指定过滤器将应用于哪些 Servlet。dispatcherServlet(spring分发器)
@WebFilter(servletNames={"dispatcherServlet"})
public class CrosFilter implements Filter {
public void destroy() {
// TODO Auto-generated method stub
}
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
throws IOException, ServletException {
//允许ajax资源跨域访问
System.out.println("允许ajax跨域资源访问");
//转型转成HttpResponse,响应头里加配置方法
HttpServletResponse httpResponse =(HttpServletResponse)response;
//如果设置 Access-Control-Allow-Origin:*，则允许所有域名的脚本访问该资源。
httpResponse.setHeader("Access-Control-Allow-Origin", "*");
//添加请求提交方式
httpResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
//将请求转发给过滤器链上下一个对象。这里的下一个指的是下一个filter，如果没有filter那就是你请求的资源。
chain.doFilter(request, response);
}
public void init(FilterConfig arg0) throws ServletException {
// TODO Auto-generated method stub
}
}
在服务器响应客户端的时候，带上Access-Control-Allow-Origin头信息。
如果设置 Access-Control-Allow-Origin:*，则允许所有域名的脚本访问该资源。
Access-Control-Allow-Origin:http://www.phpddt.com.com,允许特定的域名访问。
注意必须在UserRunBoot方法上加上启动扫描
@ServletComponentScan
代码:
package cn.xdl.ovls;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.web.servlet.ServletComponentScan;
@SpringBootApplication//启动程序
@MapperScan(basePackages={"cn.xdl.ovls.dao"})
@ServletComponentScan//过滤器的扫描器
public class UserRunBoot {
public static void main(String[] args) {
SpringApplication.run(UserRunBoot.class, args);
}
}
实现功能一样
3.代理方案一般用于调用第三方平台
如果调用第三方服务,不能使用前两种情况,可以写代理项目.在代理项目中用Java访问服务,不涉及资源跨域问题.
Ajax–>
代理工程–>
java/设置cors参数–>
微信服务
2.登录功能
一.
herd.jsp
<!-- 顶部右边 -->
<div class="float_r">
<div class="float_l top_input">
<input class="posi_relative" type="text" name="" id="search_id" placeholder="请输入...">
<img class="img_sousuo bianshou" src="img/uiz4.png" onclick="javascript:window.location='search.jsp'">
</div>
<div id="log_reg">
<a href="#" id="example1">注册</a>
<a href="#" id="example2">登录</a>
</div>
</div>
<!-- 这里导入弹出层插件 -->
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript">
/*
*登录弹出层事件函数
*/
$(document).on('click', '#example2', function() {
layer.open({
type : 2,
border : [1 , 1 , 'gray', true],
shade : [0.5 , '#000' , true],
shadeClose:true,
title : false,
content:'login.jsp',
area : ['450px' , '450px'],
offset : ['100px',''],
});
});
</script>
二.login.jsp
添加点击事件
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/login2.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="login" style="margin-top:50px;">
<div class="header">
<div class="switch" id="switch">
<a class="switch_btn_focus" id="switch_qlogin" href="javascript:void(0);" tabindex="7">快速登录</a>
<a class="switch_btn" id="switch_login" href="javascript:void(0);" tabindex="8" >快速注册</a>
<div class="switch_bottom" id="switch_bottom" style="position: absolute; width: 64px; left: 0px;"></div>
</div>
</div>
<div class="web_qr_login" id="web_qr_login" style="display: block; height: 235px;">
<!--登录-->
<div class="web_login" id="web_login">
<div class="login-box">
<div class="login_form">
<input type="hidden" name="did" value="0"/>
<input type="hidden" name="to" value="log"/>
<div class="uinArea" id="uinArea">
<label class="input-tips" for="u">帐号：</label>
<div class="inputOuter" id="uArea">
<input type="text" id="username" name="username" class="inputstyle"/>
<span id="username_error" style="color: red"></span>
</div>
</div>
<div class="pwdArea" id="pwdArea">
<label class="input-tips" for="p">密码：</label>
<div class="inputOuter" id="pArea">
<input type="password" id="password" name="password" class="inputstyle"/>
<span id="password_error" style="color: red"></span>
</div>
</div>
<div style="padding-left:50px;margin-top:20px;">
<!-- 开启jQuery事件绑定-->
<input id="login_form" type="button" value="登 录" style="width:150px;" class="button_blue" /></div>
</div>
</div>
</div>
<!--登录end-->
</div>
</div>
<!-- 引用js -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
/* $("按钮绑定事件ID").click(function(){//获取登录表单}); */
$("#login_form").click(function(){
//获取登录表单信息
var name = $("#username").val();
var password = $("#password").val();
//清空提示
$("#username_error").html("");
$("#password_error").html("");
//效验表单信息
var ok = true;
if(name == ""){
ok = false;
$("#username_error").html("用户名不能为空");
}
if(password == ""){
ok = false;
$("#password_error").html("密码不能为空");
}
//发送AJAX五步走请求调用/user/login服务
//1.使用Get请求时,参数在URL中显示,而使用Post方式,则不会显示出来
//2.使用Get请求发送数据量小,Post请求发送数据量大
//3.get请求需注意缓存问题,post请求不需担心这个问题
//4.Get请求的目的是给予服务器一些参数,以便从服务器获取列表.例如:list.aspx?page=1,表示获取第一页的数据
//5.Post请求的目的是向服务器发送一些参数,例如form中的内容.
if(ok){
$.ajax({
//1发送登录请求地址
url:"http://localhost:7001/user/login",
//2提交请求方法类型
type:"post",
//3提交请求的内容数据、请求主体等
data:{"name":name,"password":password},
//4接收响应回来的内容
dataType:"json",
//4获取返回结果
success:function(result){
if(result.status==0){//成功
window.parent.location.reload();//刷新主页
}else if(result.status==1){//用户名错误
$("#username_error").html(result.msg);
}else if(result.status==2){//密码错误
$("#password_error").html(result.msg);
}else{
alert(result.msg);
}
}
});
}
});
</script>
</body>
</html>
效果
不输入账号密码
用户名不存在
密码不正确
登录成功直接跳转到主页
扫一扫
1444
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
