springboot-vue-前後端數據交互
阿新 • • 發佈：2018-06-26
data RKE false body ict pan etime HR SQ
前端項目：
pom文件：
<?xml version="1.0" encoding="UTF-8"?> <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.tangzhe</groupId> <artifactId>springboot-vue-client</artifactId> <version>1.0</version> <packaging>jar</packaging> <name>springboot-vue-client</name> <description>thisis my springboot vue client</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.10.RELEASE</version> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
配置文件：
server:
port: 8888
spring:
application:
name: springboot-vue-client
profiles:
active: dev
freemarker:
suffix: .html
controller：
@Controller public class IndexController { @GetMapping("/test") public String test() { return "test"; } @GetMapping("/")public String index() { return "index"; } }
index.html:
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app" class="table table-striped">
<table>
<tr>
<td>ID</td>
<td>用戶名</td>
<td>密碼</td>
<td>操作</td>
</tr>
<tr v-for="user in users">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.password}}</td>
<td><a href="#">刪除</a></td>
</tr>
</table>
</div>
<script type="text/javascript">
var app = new Vue({
el: ‘#app‘,
data: {
users: [
{"id":1, "username":"tangzhe", "password":"123456"},
{"id":2, "username":"張三", "password":"666666"}
]
},
methods: {
// 發送ajax請求，獲取用戶列表
loadData: function() {
var that = this;
axios.get(‘http://localhost:8889/user/list‘)
.then(function (response) {
var data = response.data;
that.users = data;
})
.catch(function (error) {
console.log(error);
});
}
},
mounted: function() {
// 頁面加載執行方法
this.loadData();
}
});
</script>
</body>
</html>
後端項目：
pom.xml:
<?xml version="1.0" encoding="UTF-8"?> <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.tangzhe</groupId> <artifactId>springboot-vue-server</artifactId> <version>1.0</version> <packaging>jar</packaging> <name>springboot-vue-server</name> <description>this is my springboot vue server</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>1.5.10.RELEASE</version> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifactId> <version>1.2.47</version> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.10</version> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId> <version>3.4</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.16.12</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project>
配置文件：
server: port: 8889 spring: application: name: springboot-vue-server profiles: active: dev datasource: type: com.alibaba.druid.pool.DruidDataSource driver-class-name: com.mysql.jdbc.Driver filters: stat maxActive: 20 initialSize: 1 maxWait: 60000 minIdle: 1 timeBetweenEvictionRunsMillis: 60000 minEvictableIdleTimeMillis: 300000 validationQuery: select ‘x‘ testWhileIdle: true testOnBorrow: false testOnReturn: false poolPreparedStatements: true maxOpenPreparedStatements: 20 spring: datasource: name: test url: jdbc:mysql://localhost:3306/test username: root password: 123456 jpa: show-sql: true
controller：
@GetMapping("/list")
public List<User> list() {
return userService.findAll();
}
啟動前端和後端項目：
localhost:8888
localhost:8889
請求頁面：
發現出現了跨域請求問題：
顯示的是頁面的靜態數據，並沒有顯示後端接口返回的數據
在後端項目中添加下面這個類解決跨域請求問題：
package com.tangzhe.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration public class CorsConfig extends WebMvcConfigurerAdapter { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedHeaders("*") .allowCredentials(true) .allowedMethods("*") .maxAge(3600); } }
繼續訪問前端項目，跨域請求成功：
前端
測試添加用戶：
<!-- 添加用戶 -->
<p>姓名：<input v-model="name" /></p>
<p>密碼：<input v-model="pass" /></p>
<p>年齡：<input v-model="age" /></p>
<p>手機：<input v-model="mobile" /></p>
<button @click="save">提交</button>
...
save: function() {
axios.post(‘http://localhost:8889/user/save‘, {
name: this.name,
pass: this.pass,
age: this.age,
mobile: this.mobile
})
.then(function (response) {
alert(response.data);
})
.catch(function (error) {
console.log(error);
});
}
後端
@PostMapping("/save")
public String save(@RequestBody LoginInfo loginInfo) {
System.out.println(loginInfo);
return "success";
}
springboot-vue-前後端數據交互