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~~~~~
网友评论