1、使用CDN的方式导入axios
点击查看代码
<script
src="https://unpkg.com/axios/dist/axios.min.js">
</script>
2，跨域问题的解决
后端增加全局的过滤器
三， 前端elementUI
点击查看代码
<!-- 引入样式 --><link rel="stylesheet"
href="https://unpkg.com/element-ui/lib/themechalk/index.css"><!-- 引入组件库 --><scriptsrc="https://unpkg.com/element-ui/lib/index.js">
</script>
---------代码实例---------------
前端vue代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <button @click="doSearch">search</button> -->
<!-- <table border="1" cellspacing="0" cellpadding="0">
<tr v-for="emp in items">
<td>{{emp.empno}}</td>
<td>{{emp.ename}}</td>
<td>{{emp.job}}</td>
</tr>
</table> -->
<el-button type="primary" @click="doSearch">主要按钮</el-button>
<el-table
:data="items"
style="width: 100%">
<el-table-column
prop="empno"
label="员工号"
width="180">
</el-table-column>
<el-table-column
prop="ename"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="job"
label="工作">
</el-table-column>
</el-table>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 使用CDN的方式导入axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello vue",
items:[],
},
methods:{
doSearch:function(){
axios.get(
//url
"http://localhost:8080/ssm01/emp/findall.do"
).then(
res => {
console.log(res)
if(res.status == 200){
this.items = res.data.data.items;
}
}
);
}
}
});
</script>
</html>
controller层
package com.bh.controller;
import com.bh.po.R;
import com.bh.service.impl.EmpServiceImpl;
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;
@Controller
@RequestMapping("/emp")
public class EmpController {
@Autowired
private EmpServiceImpl empService;
@RequestMapping("/findall.do")
public @ResponseBody R findAll(){
R r = empService.findAll();
return r;
}
}
service层接口
package com.bh.service;
import com.bh.po.R;
import java.util.List;
public interface IService {
/*public List findAll();*/
public R findAll();
}
service实现类
package com.bh.service.impl;
import com.bh.dao.EmpDAO;
import com.bh.po.Emp;
import com.bh.po.R;
import com.bh.service.IService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.HashMap;
import java.util.List;
@Service
public class EmpServiceImpl implements IService {
@Autowired
private EmpDAO empDAO;
@Override
public R findAll() {
R r = new R();
HashMap<String, Object> rsMap = new HashMap<>();
List<Emp> all = empDAO.findAll();
if (all == null || all.size()==0){
r.setStatus(2001);
r.setMessage("没有数据");
rsMap.put("items","empty");
r.setData(rsMap);
}else {
r.setStatus(2000);
r.setMessage("检索成功");
rsMap.put("items",all);
r.setData(rsMap);
}
return r;
}
}
dao层
package com.bh.dao;
import com.bh.po.Emp;
import java.util.List;
public interface EmpDAO {
public List<Emp> findAll();
}
mapper
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.bh.dao.EmpDAO">
<select id="findAll" resultType="com.bh.po.Emp">
select * from emp
</select>
</mapper>
po
package com.bh.po;
public class Emp {
private int empno;
private String ename;
private String job;
private String salary;
private int deptno;
public int getEmpno() {
return empno;
}
public void setEmpno(int empno) {
this.empno = empno;
}
public String getEname() {
return ename;
}
public void setEname(String ename) {
this.ename = ename;
}
public String getJob() {
return job;
}
public void setJob(String job) {
this.job = job;
}
public String getSalary() {
return salary;
}
public void setSalary(String salary) {
this.salary = salary;
}
public int getDeptno() {
return deptno;
}
public void setDeptno(int deptno) {
this.deptno = deptno;
}
}
R类
package com.bh.po;
import java.util.Map;
public class R {
//处理结果code（2000,2001,5000）
private int status;
//处理结果的message
private String message;
//处理结果
private Map<String,Object> data;
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public Map<String, Object> getData() {
return data;
}
public void setData(Map<String, Object> data) {
this.data = data;
}
}
解决跨域问题增加的全局过滤器
package com.bh.filter;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
public class CORSFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException {
}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest res = (HttpServletRequest) servletRequest;
HttpServletResponse resp = (HttpServletResponse) servletResponse;
//所有的处理的responsne中，都增加[Access-Control-Allow-Origin]
//允许跨域
resp.setHeader("Access-Control-Allow-Origin","*");
filterChain.doFilter(res,resp);
}
@Override
public void destroy() {
Filter.super.destroy();
}
}
web.xml配置文件增加跨域的配置信息
<!--跨域处理-->
<filter>
<filter-name>Cors</filter-name>
<filter-class>com.bh.filter.CORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>Cors</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
--------运行结果-------
1、后端运行出来的结果信息就是单纯的json字符串数据
2、vue使用axios请求后端运行出来的数据（这里只取了三个字段用作演示）,用了elementUi组件
