基於vue和springmvc先後端分離，json類接口調用介紹

時間  2021-01-30
標籤 javascript html vue java ios web spring express apache npm 欄目 Spring 简体版
原文   原文鏈接

基於vue和springmvc先後端分離，json類接口調用介紹

版本要求：spring-3.2.9.RELEASE、vue-2.9.二、axios-0.17.1，其中axios做爲http client供vue訪問springmvc的接口。javascript

1，maven配置

<!-- spring -->
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-aop</artifactId>
    <version>3.2.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-beans</artifactId>
<version>3.2.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-context</artifactId>
    <version>3.2.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-core</artifactId>
    <version>3.2.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-expression</artifactId>
    <version>3.2.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-web</artifactId>
    <version>3.2.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>3.2.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
<artifactId>spring-tx</artifactId>
<version>3.2.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>3.2.9.RELEASE</version>
</dependency>

    <!-- mybatis -->
    <dependency>
        <groupId>javax.servlet</groupId>
        <artifactId>servlet-api</artifactId>
        <version>2.5</version>
    </dependency>

<!-- apache commons -->
<dependency>
    <groupId>commons-lang</groupId>
    <artifactId>commons-lang</artifactId>
    <version>2.5</version>
</dependency>

<dependency>                                                        
    <groupId>log4j</groupId>      
    <artifactId>log4j</artifactId>
    <version>1.2.16</version>     
</dependency>

<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-databind</artifactId>
    <version>2.9.0</version>
</dependency>
<dependency>
    <groupId>com.fasterxml.jackson.core</groupId>
    <artifactId>jackson-core</artifactId>
    <version>2.9.0</version>
</dependency>

2，spring配置，spring-app.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context"
    xmlns:aop="http://www.springframework.org/schema/aop" xmlns:tx="http://www.springframework.org/schema/tx"
xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/beans 
        http://www.springframework.org/schema/beans/spring-beans-3.2.xsd 
        http://www.springframework.org/schema/tx 
        http://www.springframework.org/schema/tx/spring-tx-3.2.xsd 
        http://www.springframework.org/schema/aop 
        http://www.springframework.org/schema/aop/spring-aop-3.2.xsd 
        http://www.springframework.org/schema/context 
        http://www.springframework.org/schema/context/spring-context-3.2.xsd
        http://www.springframework.org/schema/mvc 
        http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">

    <context:component-scan base-package="spring.mvc.controller" />
    <mvc:annotation-driven />   
</beans>

3.編寫控制類

package spring.mvc.controler;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import spring.mvc.model.User;

@Controller
@Scope("prototype")
@RequestMapping(value="/test")
public class HelloWorldController {
    @RequestMapping(value="/users/{userName}", method=RequestMethod.GET)
    public @ResponseBody User findUser(@PathVariable("userName") String userName) {
        User user = new User();
        user.setUserName(userName);
        user.setSex("男");
        return user;
    }

    @RequestMapping(value="/users/add", method=RequestMethod.POST)
    public @ResponseBody Long createUser(@RequestBody User user) {
        user.setId(System.currentTimeMillis());
        userMapper.insert(user);
        return user.getId();
    }
}

4.編寫實體類

package spring.mvc.model;
public class User {
    private Long id;
    private String userName;
    private String sex;

    public User() {
    }

    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public String getSex() {
        return sex;
    }
    public void setSex(String sex) {
        this.sex = sex;
    }   
}

5,編寫跨域filter，若是vue容器和springmvc服務容器分開部署，則在springmvc返回消息中增長Access-Control-Allow-Origin爲*。

package spring.mvc.filter;

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.http.HttpServletResponse;

public class CorsFilter implements Filter{

    @Override
    public void destroy() {
        // TODO Auto-generated method stub

    }

    @Override
    public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain arg2)
            throws IOException, ServletException {
        // TODO Auto-generated method stub
        HttpServletResponse httpServletResponse = (HttpServletResponse) arg1;
        httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
        arg2.doFilter(arg0, httpServletResponse);
    }

    @Override
    public void init(FilterConfig arg0) throws ServletException {
        // TODO Auto-generated method stub

    }

}

6,假設springmvc服務部署在tomcat，應用名稱爲springmvc

web.xml配置以下
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <welcome-file-list>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>

    <servlet>
        <servlet-name>springMVC</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath*:/spring-app.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>
    <servlet-mapping>
        <servlet-name>springMVC</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>default</servlet-name>
        <url-pattern>*.html</url-pattern>
    </servlet-mapping>

    <filter>
        <filter-name>corsFilter</filter-name>
        <filter-class>spring.mvc.filter.CorsFilter</filter-class>
    </filter>
    <filter-mapping>
        <filter-name>corsFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

7,vue_hello.html編寫，注意{host}和{port}按實際狀況設置

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id='app99'>
    <p>{{message}}</p>
    <button v-on:click="findUser">查詢用戶</button>
</div>

<script type="text/javascript">

var app99 = new Vue({
    el: '#app99',
    data: {
        message: 'user'
    },
    methods: {
        findUser: function() {
            axios.get('http://{host}:{port}/springmvc/test1/users/1')
            .then(response => {
                console.log(response.data);
                this.message = response.data;
            })
            .catch(error => {
                console.log(error);
                this.message = error;
            })
        }
    }
})

</script>

8，啓動tomcat，而後用瀏覽器打開vue_hello.html，頁面顯示以下

user
查詢用戶

點擊「查詢用戶」按鈕，頁面顯示以下
{ "id": null, "userName": "1", "sex": "男" }
查詢用戶html

10，至此，基於vue和springmvc，可實現先後端分離，二者之間經過http+json交互數據。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程