servlet 和vue 以及异步方式的一个沙雕demo

最新推荐文章于 2024-03-12 09:56:08 发布

上厕所写代码的码虫

最新推荐文章于 2024-03-12 09:56:08 发布

阅读量596

点赞数

分类专栏：测试文章标签： servlet jsp vue.js

本文链接：https://blog.csdn.net/qq_42840001/article/details/105590602

版权

测试专栏收录该内容

2 篇文章 0 订阅

订阅专栏

#闲的慌，突然冒出个智障想法
servlet 和vue的交互需要借助Json,vue接受数据本来就是json格式，只需要格式一下servlet就可以了
##记录一下一个简单的登录案例
###逻辑：
从index.jsp页面登录到 userinfo.html…userInfo.html 异步方式(axios)向后台获取数据并简单的显示出来.在web.xml中配置异步类的时候需要添加使用true标签
###index.jsp 页面

<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%--
  Created by IntelliJ IDEA.
  User:
  Date: 2020/4/14
  Time: 14:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <style type="text/css">
    input{
      border-color: aqua;
      background-color: ghostwhite;
    }
    form{
      position: center;
    }
    .reLogin{
      font-min-size: 18px;
      font-style: italic;
      font-weight: bolder;
    }
  </style>
  <body>

  
  <form action="/loginControl" method="post">

    <input class="" type="text" name="username">

    <br> <br> <br>
    <input type="password" name="password">
    <br>
    <span>
    <input type="submit" value="提交">
      &nbsp;
    </span>

  </form>

  </body>
</html>

##servlet: loginControl 类：

package control;

import dao.UserLogin;
import pojo.Student;
import state.MyStatement;

import javax.servlet.ServletException;
import javax.servlet.http.*;
import java.io.IOException;

public class LoginControl extends HttpServlet {

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.sendRedirect("index.jsp");
    }


    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String name=req.getParameter("username");
        String password=req.getParameter("password");
        if (name!=null &&password!=null){
            Student student=new Student();
            student.setName(name);
            System.out.println("name"+name);
            System.out.println("password"+password);
            student.setPassword(password);
            if (new MyStatement().login(student)){
                HttpSession session=null;
                session=req.getSession();
                session.setAttribute("name",name);
                Cookie cookie=new Cookie("name",name);
                Cookie cookie1=new Cookie("password",password);
                cookie.setMaxAge(3600);
                cookie1.setMaxAge(3600);
                req.getRequestDispatcher("/pages/userInfo.html").forward(req,resp);
            }else {
                req.getSession().setAttribute("loginError", "密码或用户名错误");
                resp.sendRedirect("/index.jsp");
            }
        }else{
            req.getSession().setAttribute("loginError","用户名和密码不能为空");
            resp.sendRedirect("/index.jsp");
        }
    }
}

忽略没用的session和cookie
##Student 类
private String name;
private String password;
private Integer id;
private Integer age;

###sql 语句在MyStatement 类当中
login 方法:
public boolean login(Student student){
try {
con=JdbcUtil.getConnecion();
String name=student.getName();
String password=student.getPassword();
String sql=“select * from student where name=? and password=? limit 1”;
preparedStatement=con.prepareStatement(sql);
preparedStatement.setString(1,name);
preparedStatement.setString(2,password);
resultSet=preparedStatement.executeQuery();
if (resultSet.next()){
System.out.println(resultSet.getRow()+“resultSet.getRow()”);
return true;
}
} catch (SQLException e) {
e.printStackTrace();
}finally {
JdbcUtil.close(con);
}
return true;
}

##userInfo.html :

<!DOCTYPE html>
<html lang="en"/>
<head>
    <meta charset="utf8">
    <title>first servlet</title>
</head>

<body>


<div id="app">
    <ul>
        <li v-for="(user,key) in userInfo" :key="key">
            {{key}} : {{user.id}}
            {{key}} : {{user.name}}
            {{key}} : {{user.password}}
            {{key}} : {{user.age}}
            <hr>
        </li>
    </ul>
</div>

<script type="text/javascript" src="/js/vue.js"></script>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/axios.js"></script>
<script type="text/javascript" src="/js/vue-router.js"></script>


<script type="text/javascript">
    new Vue({
        el:'#app',

        data(){
            return{
               userInfo:[]
            }
        },
        methods:{
            getInfo(){

               axios.get('/UserInfo').then(response=>{
                   console.log(response)
                    this.userInfo= eval( response.data)
               })
            }

        },
        mounted(){
            // thigetInfo()
            this.getInfo()
        },
        computed:{

        }
    })


</script>
</body>

servlet的异步交互：
UserInfo 类：

package control;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import pojo.Student;
import state.MyStatement;

import javax.servlet.AsyncContext;
import javax.servlet.ServletException;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;


public class UserInfo extends HttpServlet {

    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/plain;charset=UTF-8");
        resp.setHeader("Cache-Control", "private");
        resp.setHeader("Pragma", "no-cache");
        System.out.println("async  doGet");
        //开启异步处理
        AsyncContext startAsync = req.startAsync();

        //业务逻辑异步处理
        startAsync.start(new Runnable() {

            public void run() {
                MyStatement info=new MyStatement();
                List<Student> studentList = info.getstu();
//               //使用Json格式化一下
                String jsonArray = JSON.toJSONString(studentList);
                System.out.println(jsonArray);
                //请求完成

                //获取到异步上下文
                AsyncContext asyncContext=req.getAsyncContext();
//                获取响应
                ServletResponse response=asyncContext.getResponse();
                try {
                    PrintWriter writer=resp.getWriter();
                    writer.write(jsonArray);
                    writer.flush();

                } catch (IOException e) {
                    e.printStackTrace();
                }finally {
                    startAsync.complete();
                }
            }
        });

    }


    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    }
}

##配置过滤器全局统一使用utf8
##CharEncoding类

package filter;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

public class CharEncoding implements Filter {

    //排除不过滤的路径
    private String excludePage;
    private  String [] excludePages;


    public void init(FilterConfig filterConfig) throws ServletException {
        /**
         * ignores :在web.xml 中定义
         */
        excludePage=filterConfig.getInitParameter("ignores");

        /*if (excludePage!=null && excludePage.length()>0){
            excludePages=excludePage.split(",");
            System.out.println(excludePages);
        }*/
    }


    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletRequest request=(HttpServletRequest)servletRequest;
        HttpServletResponse response=(HttpServletResponse)servletResponse;

       /* boolean flag=false;
           *//* for (String page:excludePages){
            if (request.getRequestURI().equals(page)){
                flag=true;
            }
        }*//*
        if (request.getRequestURI().equals(excludePages)){
            flag=true;
        }
        if (flag) {
            filterChain.doFilter(request, response);
        }else {*/

		//就这两句重要
            request.setCharacterEncoding("utf8");
            response.setCharacterEncoding("utf8");
            filterChain.doFilter(request, response);
//        }
    }

    @Override
    public void destroy() {

    }
}

##web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>MyServlet</servlet-name>
        <servlet-class>control.MyServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>MyServlet</servlet-name>
        <url-pattern>/MyServlet</url-pattern>
    </servlet-mapping>


    <servlet>
        <servlet-name>Quite</servlet-name>
        <servlet-class>control.Quite</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Quite</servlet-name>
        <url-pattern>/quite</url-pattern>
    </servlet-mapping>


    <servlet>
        <servlet-name>UserInfo</servlet-name>
        <servlet-class>control.UserInfo</servlet-class>
        <async-supported>true</async-supported>
    </servlet>
    <servlet-mapping>
        <servlet-name>UserInfo</servlet-name>
        <url-pattern>/UserInfo</url-pattern>
    </servlet-mapping>


    <servlet>
        <servlet-name>LoginControl</servlet-name>
        <servlet-class>control.LoginControl</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>LoginControl</servlet-name>
        <url-pattern>/loginControl</url-pattern>
    </servlet-mapping>






    <filter>
        <filter-name>CharEncoding</filter-name>
        <filter-class>filter.CharEncoding</filter-class>
        <async-supported>true</async-supported>
        <init-param>
                <param-name>ignores</param-name>
                <param-value>/UserInfo</param-value>
        </init-param>

    </filter>
    <filter-mapping>
        <filter-name>CharEncoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>




    <session-config>
        <!--session 存活40分钟-->
        <session-timeout>40</session-timeout>
    </session-config>

   <!-- <listener>
        <listener-class>listener.CounterListener</listener-class>
    </listener>-->

        <welcome-file-list>
            <welcome-file>/index.jsp</welcome-file>
        </welcome-file-list>
</web-app>

上厕所写代码的码虫

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
servlet 和vue 以及异步方式的一个沙雕demo

#闲的慌，突然冒出个智障想法servlet 和vue的交互需要借助Json,vue接受数据本来就是json格式，只需要格式一下servlet就可以了##记录一下一个简单的登录案例###逻辑：从index.jsp页面登录到 userinfo.html…userInfo.html 异步方式(axios)向后台获取数据并简单的显示出来.在web.xml中配置异步类的时候需要添加使用true标...
复制链接

扫一扫