一 vue 交互
1》jquery =>$ajax
2》js原生 :es6=>axios
3>》vue的resource
get this.$http.get()
this.$http.get("http://localhost:8080/MyBlogSys/test/run", {
params: {
act: 1,
userName: "zhangsan"
}
})
.then(function(res) {
console.log(res)
}, function(err) {
console.log(err)
}) ;
post this.$http.post()
this.$http.post("http://localhost:8080/MyBlogSys/test/run", {
act: 1,
userName: "zhangsan"
}, {
emulateJSON: true
}
)
.then(function(res) {
console.log(res)
}, function(err) {
console.log(err)
});
jsonp this.$http.jsonp()
this.$http({
url:xxx
}).then(function(){},function(){})
下载vue-resource
bower install vue-resource
例子1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="按钮" @click="run" />
</div>
<script src="../vue.js"></script>
<script src="../vue-resource.js"></script>
<script>
new Vue({
el: "#app",
data: {
},
methods: {
run: function() {
this.$http.get("http://localhost:8080/MyBlogSys/test/run").then(function(res) {
console.log(res)
}, function(err) {
console.log(err)
})
}
}
})
</script>
</body>
</html>
例子2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="button" value="按钮" @click="run" />
</div>
<script src="../vue.js"></script>
<script src="../vue-resource.js"></script>
<script>
new Vue({
el: "#app",
data: {
},
methods: {
run: function() { //给后台传递数据
/*this.$http .get("http://localhost:8080/MyBlogSys/test/run?act=1&userName=zhangsan")
.then(function(res) {
console.log(res)
}, function(err) {
console.log(err)
}); */
/* this.$http.get("http://localhost:8080/MyBlogSys/test/run", {
params: {
act: 1,
userName: "zhangsan"
}
})
.then(function(res) {
console.log(res)
}, function(err) {
console.log(err)
}) ;*/
this.$http.post("http://localhost:8080/MyBlogSys/test/run", {
act: 1,
userName: "zhangsan"
}, {
emulateJSON: true
}
)
.then(function(res) {
console.log(res)
}, function(err) {
console.log(err)
});
}
}
})
</script>
</body>
</html>
例子3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <input type="text" @keyup="run" v-model="str" /> -->
<input type="text" @keyup="list" v-model="str" />
<ul>
<li v-for="(item , index) in lst">{{item}}--{{index}}</li>
</ul>
</div>
<script src="../vue.js"></script>
<script src="../vue-resource.js"></script>
<script>
new Vue({
el: "#app",
data: {
str: "",
lst: []
},
methods: {
/* run: function() {
// https://sp1.baidu.com/5b11fzupBgM18t7jm9iCKT-xh_/sensearch?wd=Abc&cb=bd_cb_dict3_1582953217616
this.$http.jsonp("https://sp1.baidu.com/5b11fzupBgM18t7jm9iCKT-xh_/sensearch", {
params: {
wd: this.str,
},
jsonp: "cb"
})
.then(function(res) {
console.log(res)
}, function(err) {
console.log(err)
});
}, */
list: function() {
this.$http.jsonp("http://localhost:8080/MyBlogSys/test/list", {
params: {
act: 1,
userName: "zhangsan",
},
jsonp: "cb"
}).then(function(res) {
console.log(res);
this.lst = res.data;
}, function(err) {
console.log(err)
})
}
}
})
</script>
</body>
</html>
java后端代码
package com.example.demo.controller;
import com.alibaba.fastjson.JSONObject;
import com.fasterxml.jackson.databind.util.JSONPObject;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@RestController //@Controller+@ResponstBody
@RequestMapping("test")
@CrossOrigin(origins = "*",maxAge = 3600) //跨域安全问题解决方案
public class TestController {
private static final Logger logger = LoggerFactory.getLogger(TestController.class);
@RequestMapping("/run")
public Object test(HttpServletRequest request, HttpServletResponse response){
// response.setHeader("Access-Control-Allow-Origin", "*");
logger.info("打印日志");
String act = request.getParameter("act");
String userName = request.getParameter("userName");
logger.info("act:"+act+",userName:"+userName);
return 1;
}
@RequestMapping("/list")
public String list(HttpServletRequest request, HttpServletResponse response) throws IOException {
// response.setHeader("Access-Control-Allow-Origin", "*");
logger.info("打印日志");
String act = request.getParameter("act");
String userName = request.getParameter("userName");
String cb = request.getParameter("cb");
logger.info("act:"+act+",userName:"+userName+",cb:"+cb);
List list = new ArrayList();
Map map = new HashMap();
map.put("name","halou");
map.put("age",18);
//list.add(map);
list.add("jljlj");
list.add(222);
// response.setHeader("content-type", "text/html;charset=UTF-8");
// PrintWriter out = response.getWriter();
// out.write(cb);
String s = JSONObject.toJSONString(list);
return cb+"("+s+")";
}
}
application.properties
#访问相关配置
server.port=8080
#项目访问名称，如果不配置直接访问bean就可以
server.servlet.context-path=/MyBlogSys
#数据库配置（我自己的，这个大家自己配置）
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/myblog?useUnicode=true&characterEncoding=utf8&autoReconnect=true&failOverReadOnly=false
spring.datasource.username=myblog
spring.datasource.password=myblog
#静态文件访问配置
spring.mvc.static-path-pattern=/static/**
#热部署生效
spring.devtools.restart.enabled: true
#设置重启的目录
#spring.devtools.restart.additional-paths: src/main/java
#classpath目录下的WEB-INF文件夹内容修改不重启
spring.devtools.restart.exclude: WEB-INF/**
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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>demo</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>demo</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.1</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<!-- 引入json处理包 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.35</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<fork>true</fork>
</configuration>
</plugin>
</plugins>
</build>
</project>