restful风格前后端分离

   第一步,编写web.xml

<servlet>

        <servlet-name>dispatcherServlet</servlet-name>

        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

        <init-param>

            <param-name>contextConfigLocation</param-name>

            <param-value>classpath:spring-mvc.xml</param-value>

        </init-param>

    </servlet>

    <servlet-mapping>

        <servlet-name>dispatcherServlet</servlet-name>

        <url-pattern>/</url-pattern>

    </servlet-mapping>

    <error-page>

        <error-code>404</error-code>

        <location>/404.html</location>

    </error-page>

第二步登录页面,这里只做简单的登录操作

$('#loginForm').submit(function () {

            Ajax.postForm({

                url: 'localhost:8081/login',

                data: {

                    'username': $username.val(),

                    'password': $password.val()

                },

                beforeSend: function () {

                    if ($username.val() == '') {

                        alert('请输入用户名！');

                        $username.focus();

                        return false;

                    }

                    if ($password.val() == '') {

                        alert('请输入密码！');

                        $password.focus();

                        return false;

                    }
                }

js代码

postForm: function (options) {

        $.ajax({

            url: options.url,

            type: 'POST',

            contentType : 'application/x-www-form-urlencoded',

            data: options.data,

            beforeSend: options.beforeSend,

            success: options.success,

            error: options.error

        });

    },

接下来就是比较重要的服务端

跨域方面需要注意,jsonp只支持get请求

这里我们使用的是cors

首先在web.xml中加入拦截器.允许localhost:8081

    <filter>

        <filter-name>corsFilter</filter-name>

        <filter-class>cors.CorsFilter</filter-class>

        <init-param>

            <param-name>allowOrigin</param-name>

            <param-value>http://localhost:8081</param-value>

        </init-param>

        <init-param>

            <param-name>allowMethods</param-name>

            <param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>

        </init-param>

        <init-param>

            <param-name>allowCredentials</param-name>

            <param-value>true</param-value>

        </init-param>

        <init-param>

            <param-name>allowHeaders</param-name>

            <param-value>Content-Type,X-Token,X-Username</param-value>

        </init-param>

    </filter>

    <filter-mapping>

        <filter-name>corsFilter</filter-name>

        <url-pattern>/*</url-pattern>

    </filter-mapping>

关于拦截器实体类

  private String allowOrigin;

    private String allowMethods;

    private String allowCredentials;

    private String allowHeaders;

    private String exposeHeaders;

    @Override

    public void init(FilterConfig filterConfig) throws ServletException {

        allowOrigin = filterConfig.getInitParameter("allowOrigin");

        allowMethods = filterConfig.getInitParameter("allowMethods");

  
4000
      allowCredentials = filterConfig.getInitParameter("allowCredentials");

        allowHeaders = filterConfig.getInitParameter("allowHeaders");

        exposeHeaders = filterConfig.getInitParameter("exposeHeaders");

    }

    @Override

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

        HttpServletRequest request = (HttpServletRequest) req;

        HttpServletResponse response = (HttpServletResponse) res;

        if (StringUtil.isNotEmpty(allowOrigin)) {

            List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));

            if (CollectionUtil.isNotEmpty(allowOriginList)) {

                String currentOrigin = request.getHeader("Origin");

                if (allowOriginList.contains(currentOrigin)) {

                    response.setHeader("Access-Control-Allow-Origin", currentOrigin);

                }

            }

        }

        if (StringUtil.isNotEmpty(allowMethods)) {

            response.setHeader("Access-Control-Allow-Methods", allowMethods);

        }

        if (StringUtil.isNotEmpty(allowCredentials)) {

            response.setHeader("Access-Control-Allow-Credentials", allowCredentials);

        }

        if (StringUtil.isNotEmpty(allowHeaders)) {

            response.setHeader("Access-Control-Allow-Headers", allowHeaders);

        }

        if (StringUtil.isNotEmpty(exposeHeaders)) {

            response.setHeader("Access-Control-Expose-Headers", exposeHeaders);

        }

        chain.doFilter(req, res);

    }

    @Override

    public void destroy() {

    }

编写model和controller

下面是controller中接收到的参数,并打印出来

 public Response login(

        @Valid LoginParam param

    ) {

        // 获取登录信息

        String username = param.getUsername();

        String password = param.getPassword();

        System.out.println(username);