vue 连接数据库

//页面<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>VUE登录</title><scrip

寒枫叶

21152人浏览 · 2018-09-20 17:09:21

寒枫叶 · 2018-09-20 17:09:21 发布

//页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VUE登录</title>
    <script src="vue/vue.js"></script>
    <script src="vue/axios.min.js"></script>
</head>
<body>
<div id="aa" class="a">
    <fieldset>
        <legend>员工信息录入</legend>
        用户名：<input type="text" v-model="name"><br>
        密&nbsp&nbsp&nbsp码:<input type="password" v-model="pass"><br>
        <button @click="conn(name,pass)">(axios)get登录</button>
        <button @click="login(name,pass)">(axios)post登录</button><br>
        登录信息：{{msg}}
    </fieldset>
</div>
<script>
    var  b=new Vue({
        el:"#aa",
        data:{
            getURL:"http://localhost:8080/servlet/servlet",
            name:"",
            pass:"",
            msg:""
        },
        methods:{
            conn(name,pass){
                axios.get(this.getURL,{params:{name:this.name,pass:this.pass}}).then(
                    res=>{
                        this.msg=res.data;
                    }
                ).catch(
                    err=>{
                        this.msg=err.status
                    }
                )
            },
            login(name,pass){
                var params=new URLSearchParams();
                params.append("name",this.name);
                params.append("pass",this.pass);
                axios.post(this.getURL,params,
                    {header:{"content-type":"application/x-www-form-urlencoded"}}).then(
                        res=>{
                            this.msg=res.data;
                        }
                ).catch(
                    err=>{
                        this.msg=err.status;
                    }
                )
            }
        }
    })
</script>
</body>
</html>

//servlet

package com.ln.servlet;

import com.ln.dao.UsersMapper;
import com.ln.entity.Users;
import com.ln.service.UsersService;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

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 java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet(name = "Servlet")
public class Servlet extends HttpServlet {

    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out=response.getWriter();
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        ApplicationContext applicationContext=
                new ClassPathXmlApplicationContext("applicationContext.xml");
        UsersMapper usersMapper =(UsersMapper) applicationContext.getBean("getUsersDAO");
        String name=request.getParameter("name");
        System.out.println(name);
        String pass=request.getParameter("pass");
        List<Users>list=usersMapper.findAllNameAndPass(name,pass);
        if (list.size()>0){
            out.print("success");
//            response.sendRedirect("../success.jsp");
        }else {
            out.print("请重新登录");
//            response.sendRedirect("../index14.html");
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request,response);
    }
}

//有乱码的话再加个filter

package com.ln.filter;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import java.io.IOException;

@WebFilter(filterName = "Filter")
public class Filter implements javax.servlet.Filter {
    public void destroy() {
    }

    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
        System.out.println("guolvqi");
        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");
        chain.doFilter(req, resp);
    }

    public void init(FilterConfig config) throws ServletException {

    }

}

//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>s</servlet-name>
        <servlet-class>com.ln.servlet.Servlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>s</servlet-name>
        <url-pattern>/servlet/servlet</url-pattern>
    </servlet-mapping>
    <filter>
        <filter-name>filter1</filter-name>
        <filter-class>com.ln.filter.Filter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>filter1</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^