27.黑马旅游网

醉梦依依惜

已于 2023-04-18 20:32:14 修改

阅读量157

点赞数

分类专栏：核心日记-java道路文章标签： ajax 前端 javascript

于 2022-08-30 20:48:26 首次发布

本文链接：https://blog.csdn.net/khmff/article/details/126611814

版权

核心日记-java道路专栏收录该内容

29 篇文章 1 订阅

订阅专栏

编码：rname = new String(rname.getBytes("iso-8859-1"),"utf-8");

一、获取url中参数，和引入头部和尾部的html文件的js代码。

//根据传递过来的参数name获取对应的值
function getParameter(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
    var r = location.search.substr(1).match(reg);
    if (r!=null) return (r[2]); return null;
}

$(function () {
    $.get("header.html",function (data) {
        $("#header").html(data);
    });
    $.get("footer.html",function (data) {
        $("#footer").html(data);
    });
});

二、验证码。

/**
 * 验证码
 */
@WebServlet("/checkCode")
public class CheckCodeServlet extends HttpServlet {
	public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
		
		//服务器通知浏览器不要缓存
		response.setHeader("pragma","no-cache");
		response.setHeader("cache-control","no-cache");
		response.setHeader("expires","0");
		
		//在内存中创建一个长80，宽30的图片，默认黑色背景
		//参数一：长
		//参数二：宽
		//参数三：颜色
		int width = 80;
		int height = 30;
		BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
		
		//获取画笔
		Graphics g = image.getGraphics();
		//设置画笔颜色为灰色
		g.setColor(Color.GRAY);
		//填充图片
		g.fillRect(0,0, width,height);
		
		//产生4个随机验证码，12Ey
		String checkCode = getCheckCode();
		//将验证码放入HttpSession中
		request.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
		
		//设置画笔颜色为黄色
		g.setColor(Color.YELLOW);
		//设置字体的小大
		g.setFont(new Font("黑体",Font.BOLD,24));
		//向图片上写入验证码
		g.drawString(checkCode,15,25);
		
		//将内存中的图片输出到浏览器
		//参数一：图片对象
		//参数二：图片的格式，如PNG,JPG,GIF
		//参数三：图片输出到哪里去
		ImageIO.write(image,"PNG",response.getOutputStream());
	}
	/**
	 * 产生4位随机字符串 
	 */
	private String getCheckCode() {
		String base = "0123456789ABCDEFGabcdefg";
		int size = base.length();
		Random r = new Random();
		StringBuffer sb = new StringBuffer();
		for(int i=1;i<=4;i++){
			//产生0到size-1的随机值
			int index = r.nextInt(size);
			//在base字符串中获取下标为index的字符
			char c = base.charAt(index);
			//将c放入到StringBuffer中去
			sb.append(c);
		}
		return sb.toString();
	}
	public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doGet(request,response);
	}
}

三、发邮件类。

/**
 * 发邮件工具类
 */
public final class MailUtils {
    private static final String USER = "1841833356@qq.com"; // 发件人称号，同邮箱地址
    private static final String PASSWORD = "osabhsnijsjzeibb"; // 如果是qq邮箱可以使户端授权码，或者登录密码

    /**
     *
     * @param to 收件人邮箱
     * @param text 邮件正文
     * @param title 标题
     */
    /* 发送验证信息的邮件 */
    public static boolean sendMail(String to, String text, String title){
        try {
            final Properties props = new Properties();
            props.put("mail.smtp.auth", "true");
            props.put("mail.smtp.host", "smtp.qq.com");

            // 发件人的账号
            props.put("mail.user", USER);
            //发件人的密码
            props.put("mail.password", PASSWORD);

            // 构建授权信息，用于进行SMTP进行身份验证
            Authenticator authenticator = new Authenticator() {
                @Override
                protected PasswordAuthentication getPasswordAuthentication() {
                    // 用户名、密码
                    String userName = props.getProperty("mail.user");
                    String password = props.getProperty("mail.password");
                    return new PasswordAuthentication(userName, password);
                }
            };
            // 使用环境属性和授权信息，创建邮件会话
            Session mailSession = Session.getInstance(props, authenticator);
            // 创建邮件消息
            MimeMessage message = new MimeMessage(mailSession);
            // 设置发件人
            String username = props.getProperty("mail.user");
            InternetAddress form = new InternetAddress(username);
            message.setFrom(form);

            // 设置收件人
            InternetAddress toAddress = new InternetAddress(to);
            message.setRecipient(Message.RecipientType.TO, toAddress);

            // 设置邮件标题
            message.setSubject(title);

            // 设置邮件的内容体
            message.setContent(text, "text/html;charset=UTF-8");
            // 发送邮件
            Transport.send(message);
            return true;
        }catch (Exception e){
            e.printStackTrace();
        }
        return false;
    }
    public static void main(String[] args) throws Exception { // 做测试用
        MailUtils.sendMail("1841833356@qq.com","你好，这是一封测试邮件，无需回复。","测试邮件");
        System.out.println("发送成功");
    }
}

四、BaseServlet类。

//不需要被访问
public class BaseServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //完成方法的分发
        //1.获取方法的请求路径
        String uri = req.getRequestURI();//  /travel/user/add
        System.out.println("uri:"+uri);  //  /travel/user/add
        //2.获取方法的名称
        System.out.println(uri.lastIndexOf('/'));//12
        String methodName = uri.substring(uri.lastIndexOf('/')+1);
        System.out.println("方法名称："+methodName);//add
        //3.获取方法的对象Method
        //this：谁调用我，我就代表谁。
        System.out.println(this);//
        try {
            //忽略访问权限修饰符，获取方法
            //Method method = this.getClass().getDeclaredMethod(methodName,HttpServletRequest.class,HttpServletResponse.class);//有参数，所以需要填参数类型.class
            Method method = this.getClass().getMethod(methodName,HttpServletRequest.class,HttpServletResponse.class);//有参数，所以需要填参数类型.class

            //4.执行方法
            //暴力反射
            //method.setAccessible(true);
            method.invoke(this,req,resp);//有参数，所以需要填参数
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }
    }
    //直接将传入的对象序列化为json，并且写回客户端
    public void writeValue(Object obj,HttpServletResponse response) throws IOException {
        ObjectMapper mapper = new ObjectMapper();
        response.setContentType("application/json;charset=utf-8");
        mapper.writeValue(response.getOutputStream(),obj);
    }

    //将传入的对象序列化为json，返回
    public String writeValueAsString(Object obj) throws JsonProcessingException {
        ObjectMapper mapper = new ObjectMapper();
        return mapper.writeValueAsString(obj);
    }
}

五、login、register、route_list。

（1）login.html。（serialize（）方法）

<script>
		$(function () {
			//1.给登录按钮绑定单击事件
			$("#btn_sub").click(function () {
				//2.发送ajax请求，提交表单数据
				$.post("/travel/user/login",$("#loginForm").serialize(),function (data) {
					//data : {flag:false,errorMsg: '' }
					if (data.flag){
						//登录成功
						location.href = "/travel/index.html";
					}else {
						//登录失败
						$("#errorMsg").html(data.errorMsg);
					}
				});
			});
		});
	</script>

（2）register.html。（注册：关注邮箱校验格式）

<script>
		/**
		 *      表单校验：
		 *          1.用户名：单词字符，长度8到20位。
		 *          2.密码：单词字符，长度8到20位。
		 *          3.email：邮件格式
		 *          4.姓名：非空
		 *          5.手机号：手机号格式
		 *          6.出生格式：非空
		 *          7.验证码：非空
		 */
		//校验用户名
		function checkUsername(){
			//1.获取用户名
			var username = $("#username").val();
			//2.定义正则
			var reg_username = /^\w{3,20}$/;
			//3.判断，给出提示信息
			var flag = reg_username.test(username);
			if (flag){
				//用户名合法
				$("#username").css("border","");
			}else {
				//用户名非法,加一个红色边框
				$("#username").css("border","1px solid red");
			}
			return flag;
		}
		function checkPassword(){
			//1.获取密码
			var password = $("#password").val();
			//2.定义正则
			var reg_password = /^\w{3,20}$/;
			//3.判断，给出提示信息
			var flag = reg_password.test(password);
			if (flag){
				//密码合法
				$("#password").css("border","");
			}else {
				//密码非法,加一个红色边框
				$("#password").css("border","1px solid red");
			}
			return flag;
		}
		function checkEmail(){
			//1.获取邮箱
			var email = $("#email").val();
			//2.定义正则  itcast@163.com
			var reg_email = /^\w+@\w+\.\w+$/;
			var flag = reg_email.test(email);
			if (flag){
				//邮箱合法
				$("#email").css("border","");
			}else {
				//邮箱非法,加一个红色边框
				$("#email").css("border","1px solid red");
			}
			return flag;
		}
		$(function () {
			//当表单提交是，调用所有的校验方法
			$("#registerForm").submit(function () {
				//如果这个方法没有返回值，或者返回true，则表单提交，如果返回为false，则表单不提交（这里不提交，使用ajax异步交互）
				// return checkUsername() && checkPassword() && checkEmail();

				//1.发送数据到服务器
				if(checkUsername() && checkPassword() && checkEmail()){
					//校验通过，发送ajax请求，提交表单的数据 username=zhangsna&paasword=123
					$.post("/travel/user/regist",$(this).serialize(),function (data) {
						//处理服务器响应的数据 data（flag：false，erreorMsg："注册失败",）
						if (data.flag){
							//注册成功，跳转成功页面
							location.href = "/travel/register_ok.html";
						}else {
							//此处个人建议先刷新一下,但个人使用，为了方便就没弄
							//注册失败
							$("#error_msg").html(data.errorMsg);
						}
					});
				}
				return false;
			});
			//当某一个组件失去焦点，调用对应的校验方法
			$("#username").blur(checkUsername);
			$("#password").blur(checkPassword);
			$("#email").blur(checkEmail);
		});
	</script>
<!--引入头部-->
	<div id="header"></div>

（3）route_list.html。（分页）

<script>
        $(function () {
            //当页面加载完成后，调用load方法：发送ajax请求加载数据
            //获取cid的参数值
            var cid = getParameter("cid");
            /*if (cid != null ){
               cid = window.decodeURI(cid);
            }*/
            //获取rname的参数值
            var rname = getParameter("rname");
            if (rname != null){
                //url解码
                rname = window.decodeURI(rname);
            }
            load(cid,1,getPageSize(),rname);
        });
        /*function getCid(){
            //html文档通过js获取访问路径中参数
            var search = location.search;
            // alert(search);//  ?cid=5
            //切割字符串，获取第二个值
            var cid = search.split("=")[1];
            cid = parseInt(cid);
            return cid;
        }*/
        function getPageSize(){
            return 5;
        }
        function load(cid,currentPage,pageSize,rname){
            //发送ajax请求，请求travel/route/pageQuery，传递cid
            $.get("/travel/route/pageQuery",{"cid":cid,"currentPage":currentPage,"pageSize":pageSize,"rname":rname},function (data) {
                //解析pagebean数据，展示到页面上
                //1.分页工具条数据展示
                //1.1展示总页码和总记录数
                $("#totalPage").html(data.totalPage);
                $("#totalCount").html(data.totalCount);
                //1.2展示分页页码
                //若指定同步请求，会导致出现新建一个页面显示返回的数据（如果没有数据，就是空白页面）：<li><a href="/travel/route/pageQuery">1</a></li>'
                var lis = "";
                var firstPage = '<li onclick="javascript:load('+cid+','+1+','+getPageSize()+',\''+rname+'\');"><a href="javascript:void(0);">首页</a></li>';
                if (data.currentPage > 1){
                    var beforePage = '<li class="threeword" onclick="javascript:load('+cid+','+(data.currentPage-1)+','+getPageSize()+',\''+rname+'\');"><a href="javascript:void(0);">上一页</a></li>';
                }else {
                    var beforePage = '<li class="threeword"><a href="javascript:void(0);">上一页</a></li>';
                }
                lis += firstPage;
                lis += beforePage;
                //展示页码方式1：固定10页的格式，并且就算是最后一页也不修改前面的页码
                /*var a = Math.ceil(data.currentPage / 10);
                for (let i = (a - 1) * 10 + 1; i <= a * 10; i++) {
                    //判断当前页码是否等于i
                    if (data.currentPage == i){
                        //当前页码,加样式(background-color: #ffc900;)
                        let li = '<li class="curPage" onclick="javascript:load('+cid+','+i+','+getPageSize()+');"><a href="javascript:void(0);">' + i + '</a></li>'
                        lis += li;//拼接字符串
                    }else {
                        if (i > data.totalPage){
                            break;
                        }
                        //创建页码的li,onclick是为了在整个框框内点击都有效，而不是只有点击数字才能用
                        let li = '<li onclick="javascript:load('+cid+','+i+','+getPageSize()+');"><a href="javascript:void(0);">' + i + '</a></li>'
                        lis += li;//拼接字符串
                    }
                }*/

                //展示页码方式2：固定10页的格式，并且页码在后面的时候会修改前面的页码
                /*
                        1.一共展示10个页码，能工达到前5后4的效果
                        2.如果前面不够5个，后边补齐10个
                        3.如果后边补足4个，前边补足10个
                 */
                //定义开始位置begin，结束位置 end
                var begin;//开始位置
                var end;//结束位置
                if (data.totalPage < 10){
                    //总页码不够10页
                    begin = 1;
                    end = data.totalPage;
                }else {
                    //总页码超过10页
                    begin = data.currentPage -5;
                    end = data.currentPage + 4;
                    //2.如果前面不够5个，后边补齐10个
                    if (begin < 1){
                        begin = 1;
                        end = 10;
                    }
                    //3.如果后边补足4个，前边补足10个
                    if (end > data.totalPage){
                        begin = data.totalPage -9;
                        end = data.totalPage;
                    }
                }
                for (let i = begin; i <= end; i++) {
                    //判断当前页码是否等于i
                    if (data.currentPage == i){
                        //当前页码,加样式(background-color: #ffc900;)
                        var li = '<li class="curPage" onclick="javascript:load('+cid+','+i+','+getPageSize()+',\''+rname+'\');"><a href="javascript:void(0);">' + i + '</a></li>'
                    }else {
                        //创建页码的li,onclick是为了在整个框框内点击都有效，而不是只有点击数字才能用
                        var li = '<li onclick="javascript:load(' + cid + ',' + i + ',' + getPageSize() + ',\''+rname+'\');"><a href="javascript:void(0);">' + i + '</a></li>'
                    }
                    lis += li;//拼接字符串
                }

                //下一页，尾页设置
                if (data.currentPage < data.totalPage){
                    var nextPage = '<li class="threeword" onclick="javascript:load('+cid+','+(data.currentPage+1)+','+getPageSize()+',\''+rname+'\');"><a href="javascript:void(0);">下一页</a></li>';
                }else {
                    var nextPage = '<li class="threeword"><a href="javascript:void(0);">下一页</a></li>';
                }
                var lastPage = '<li class="threeword" onclick="javascript:load('+cid+','+data.totalPage+','+getPageSize()+',\''+rname+'\');"><a href="javascript:void(0);">末页</a></li>';
                lis += nextPage;
                lis += lastPage;
                //将lis内容设置到ul
                $("#pageNum").html(lis);
                //列表数据展示
                var route_lis = "";
                $(data.list).each(function () {
                    var li = '<li>\n' +
                        '                            <div class="img"><img src="' + this.rimage + '" alt="" style="width: 299px"></div>\n' +
                        '                            <div class="text1">\n' +
                        '                                <p>' + this.rname + '</p>\n' +
                        '                                <br/>\n' +
                        '                                <p>' + this.routeIntroduce + '</p>\n' +
                        '                            </div>\n' +
                        '                            <div class="price">\n' +
                        '                                <p class="price_num">\n' +
                        '                                    <span>&yen;</span>\n' +
                        '                                    <span>' + this.price + '</span>\n' +
                        '                                    <span>起</span>\n' +
                        '                                </p>\n' +
                        '                                <p><a href="route_detail.html?rid='+this.rid+'">查看详情</a></p>\n' +
                        '                            </div>\n' +
                        '                        </li>';
                    route_lis += li;
                    $("#route").html(route_lis);
                    //定位到页面
                    window.scrollTo(0,0);
                });
            });
        }
    </script>

醉梦依依惜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
27.黑马旅游网

一、获取url中参数，和引入头部和尾部的html文件的js代码。一、获取url中参数，和引入头部和尾部的html文件的js代码。（注册：关注邮箱校验格式）（1）login.html。（serialize（）方法）五、login、register、route_list。四、BaseServlet类。...
复制链接

扫一扫