axios结合springmvc

vue-cli创建项目框架见：

https://www.jianshu.com/p/05c8f3f0123d

1 创建springmvc包括（ajax）

1.1 创建maven项目

pom.xml内容：

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

  <modelVersion>4.0.0</modelVersion>

  <groupId>com.demo</groupId>

  <artifactId>ajaxssm12_5</artifactId>

  <version>0.0.1-SNAPSHOT</version>

  <packaging>war</packaging>

  <properties>

<spring.version>4.3.18.RELEASE</spring.version>

<jackson.version>2.8.7</jackson.version>

</properties>

<dependencies>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-core</artifactId>

<version>${spring.version}</version>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-context</artifactId>

<version>${spring.version}</version>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-beans</artifactId>

<version>${spring.version}</version>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-web</artifactId>

<version>${spring.version}</version>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-webmvc</artifactId>

<version>${spring.version}</version>

</dependency>

<dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-aop</artifactId>

<version>${spring.version}</version>

</dependency>

<dependency>

<groupId>com.fasterxml.jackson.core</groupId>

<artifactId>jackson-databind</artifactId>

<version>${jackson.version}</version>

</dependency>

<dependency>

<groupId>com.fasterxml.jackson.core</groupId>

<artifactId>jackson-core</artifactId>

<version>${jackson.version}</version>

</dependency>

<dependency>

<groupId>com.fasterxml.jackson.core</groupId>

<artifactId>jackson-annotations</artifactId>

<version>${jackson.version}</version>

</dependency>

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>jstl</artifactId>

<version>1.2</version>

</dependency>

<dependency>

<groupId>javax.servlet.jsp</groupId>

<artifactId>jsp-api</artifactId>

<version>2.2</version>

<scope>provided</scope>

</dependency>

<dependency>

<groupId>javax.servlet</groupId>

<artifactId>servlet-api</artifactId>

<version>2.5</version>

<scope>provided</scope>

</dependency>

</dependencies>

<build>

<plugins>

<plugin>

<groupId>org.apache.maven.plugins</groupId>

<artifactId>maven-compiler-plugin</artifactId>

<configuration>

<source>1.8</source>

<target>1.8</target>

</configuration>

</plugin>

<plugin>

<groupId>org.apache.tomcat.maven</groupId>

<!-- tomcat7的插件， 不同tomcat版本这个也不一样 -->

<artifactId>tomcat7-maven-plugin</artifactId>

<version>2.1</version>

<configuration>

<!-- 通过maven tomcat7:run运行项目时，访问项目的端口号 -->

<port>9090</port>

<!-- 项目访问路径 本例：localhost:9090, 如果配置的aa， 则访问路径为localhost:9090/aa -->

<path>/</path>

<uriEncoding>UTF-8</uriEncoding>

</configuration>

</plugin>

</plugins>

</build>

</project>

1.2 在当前的项目中/WEB-INF/web.xml文件中加入spring相关配置

<context-param>

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

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

</context-param>

<listener>

<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

</listener>

<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:springmvc-servlet.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>

<filter>

<filter-name>x</filter-name>

<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>

<init-param>

<param-name>encoding</param-name>

<param-value>utf-8</param-value>

</init-param>

</filter>

<filter-mapping>

<filter-name>x</filter-name>

<servlet-name>springmvc</servlet-name>

</filter-mapping>

1.3 编写spring-web配置文件springmvc-servlet.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:mvc="http://www.springframework.org/schema/mvc"

xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd

        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd

        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">

<!-- scan the package and the sub package -->

<context:component-scan

base-package="com.demo.controll" />

<!-- don't handle the static resource -->

<mvc:default-servlet-handler />

<!-- if you use annotation you must configure following setting -->

<mvc:annotation-driven />

<!-- configure the InternalResourceViewResolver -->

<bean

class="org.springframework.web.servlet.view.InternalResourceViewResolver"

id="internalResourceViewResolver">

<!-- 前缀 -->

<property name="prefix" value="/WEB-INF/jsp/" />

<!-- 后缀 -->

<property name="suffix" value=".jsp" />

</bean>

</beans>

1.4 编写spring配置文件mvc.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:mvc="http://www.springframework.org/schema/mvc"

xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd

        http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.1.xsd

        http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.1.xsd">

  <context:component-scan base-package="com.demo.service"></context:component-scan>

</beans>

1.5 编写实体类

package com.demo.po;

public class Product {

private int pid;

private String pname;

private String pdesc;

private double price;

getter,setter略

}

1.6 编写业务代码

package com.demo.service;

import java.util.ArrayList;

import java.util.List;

import org.springframework.stereotype.Service;

import com.demo.po.Product;

@Service

public class ProductService {

  public List<Product> findall(String xname){

  List<Product> list=new ArrayList<Product>();

  Product p=new Product();

  p.setPid(15);

  p.setPname("华为荣耀A8");

  p.setPdesc("国产高端机");

  p.setPrice(4000.5);

  list.add(p);

  p=new Product();

  p.setPid(16);

  p.setPname("荣耀9i");

  p.setPdesc("4GB+64GB 幻夜黑 移动联通电信4G全面屏手机 双卡双待");

  p.setPrice(1199);

  list.add(p);

  p=new Product();

  p.setPid(17);

  p.setPname("小米6X");

  p.setPdesc("全网通 4GB+64GB 曜石黑 移动联通电信4G手机 双卡双待 智能手机 拍照手机");

  p.setPrice(1299.6);

  list.add(p);

  p=new Product();

  p.setPid(18);

  p.setPname("小米 红米6 Pro AI");

  p.setPdesc("美颜双摄 4GB+32GB 流沙金 全网通4G手机 双卡双待");

  p.setPrice(899);

  list.add(p);

  p=new Product();

  p.setPid(19);

  p.setPname("小米Max3");

  p.setPdesc("大屏游戏智能手机 6GB+128GB 黑色 全网通4G手机 双卡双待");

  p.setPrice(1899);

  list.add(p);

  List<Product> plist=new ArrayList<Product>();

  if(xname!=null&&!xname.equals("")) {

  for(Product pro:list) {

  if(pro.getPname().indexOf(xname)!=-1||pro.getPdesc().indexOf(xname)!=-1) {

  plist.add(pro);

  }

  }

  }else {

  plist=list;

  }

  return plist;

  }

}

1.7 编写控制器代码

package com.demo.controll;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.ResponseBody;

import com.demo.po.Product;

import com.demo.service.ProductService;

@Controller

public class ProductCtl {

  //注入业务bean

@Autowired

private ProductService pser;

@RequestMapping("/findproc")

@ResponseBody

public List<Product> findproc(String pname){

System.out.println("接收到的参数："+pname);

return pser.findall(pname);

}

}

2 使用vue-cli创建项目

2.1 修改config/index.js文件加入映射代理

dev: {

// Paths

  assetsSubDirectory:'static',

assetsPublicPath:'/',

proxyTable: {

'/api': {//虚拟目录

      target:'http://10.25.57.131:9090',//地址

      changeOrigin:true,

pathRewrite: {

'^/api':''//由于上面的虚拟目录实际上是不存在的，不去掉的话访问的时候显示的url会变成'http://127.0.0.1:3000/api'，所以得去掉

      }

}

}

2.2 修改src/main.js引入axios

首先，安装axios，命令：

npm install axios --save

main.js代码：

import Vuefrom 'vue'

import Appfrom './App.vue'

import axios from 'axios'

import qsfrom 'qs'

Vue.prototype.$axios=axios

Vue.prototype.$qs = qs

new Vue({

el:'#app',

render:h=>h(App)

})

2.3 创建App.vue使用ajax

<template>

<div>

<input type="text" v-model="xname" @keyup.enter="yy" class="inp">

<table border="1" width="98%">

<tr>

<td>编号</td>

<td>名称</td>

<td>描述</td>

<td>价格</td>

</tr>

<tr  v-for="itinxdata">

<td>{{it['pid']}}</td>

<td>{{it['pname']}}</td>

<td>{{it['pdesc']}}</td>

<td>{{it['price']}}</td>

</tr>

</table>

</div>

</template>

<script>

export default {

name:'App',

//初始化数据

    data(){

return {xname:'',xdata:[]}

},

//使用钩子函数加载远程web服务器的数据过来

    mounted(){

this.initdata()

},

methods:{

yy(){

this.initdata()

},

initdata(){

const x=this

        console.log("参数："+x.xname)

//通过全局的qs对象封装发送的数据

        let xparam=this.$qs.stringify({

pname:x.xname

        })

/*

通过全局的axios对象发送ajax请求

参数：

method:指定发送ajax请求的方式；

url: 发送的指定url地址；注意，与config/index.js中proxyTable对应

data: 如果发送请求时，向远程发送参数可以使用json形式的字符串发送

函数：

then()表示当前请求成功发送并成功接收到web服务器发送的返回数据时

then中的函数回调；

*/

        this.$axios({

method:'post',

url:'/api/findproc',

data:xparam

        }).then(function(res){

x.xdata.splice(0,x.xdata.length)

//将服务器返回数据为当前的model中数据进行设置

          for(let i=0;i

x.xdata.push(res.data[i])

}

})

}

}

}

</script>

<style scoped>

.inp{

border:1px solid deeppink;

margin:1.5em 2em;

width:10em;

}

</style>

over~~~~~