在本次实例中Vue只用在了前端部分，Axios用于向后端请求数据，我们这里要用到Ajax技术来访问后端数据。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入vue开发库 -->
<script src="vue.js"></script>
<!-- 引入axios库用于发送HTTP请求-->
<script src="axios.js"></script>
</head>
<body>
<!--Vue实例挂载点-->
<div id="app">
<!-- 定义展示页面-->
<table>
<tr>
<th>名字</th>
</tr>
<!--用Vue的指令遍历msg数组中的每一项，并为每一行生成一个表格-->
<tr v-for="(value,index) in msg">
<!--双大括号是 Vue.js 的插值语法，用于将遍历出来的属性在HTML模板中插入数据-->
<td>{{msg[index].name}}</td>
</tr>
</table>
</div>
<!--引入包含Vue实例定义的JS文件-->
<script src="vuestu.js"></script>
</body>
</html>JS;
new Vue({
// 挂载DOM元素
el: "#app",
//用来返回数据
data() {
return {
//初始化msg
msg:null,
//包含属性的对象
adddata: {
name: ""
},
}
},
// created 是 Vue 的生命周期钩子之一，在 Vue 实例被创建之后立即执行。
// 在这个阶段，DOM 尚未被渲染，但是数据观测和事件配置已经完成。
created(){
axios
// 使用 Axios 库发送 GET请求到后端数据
.get('/ajax_war_exploded/A')
//response 参数包含了服务器返回的数据
//将服务器返回的数据赋值给 Vue 实例的 msg 属性
.then(response=>(this.msg=response.data))
.catch(function (error){
console.log(error)
}
)
},
}
)后端：
import com.alibaba.fastjson.JSON;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.List;
@WebServlet("/A")
public class axio extends HttpServlet {
private InputStream in;
private SqlSessionFactory factory;
private SqlSession session;
UserDao userDao;
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//动态生成表单
resp.setContentType("application/json;charset=utf-8");
req.setCharacterEncoding("utf-8");
in = Resources.getResourceAsStream("mybatis-config.xml");
factory = new SqlSessionFactoryBuilder().build(in);
session = factory.openSession();
userDao = session.getMapper(UserDao.class);
List<stu> findall = userDao.findall();
String stu = JSON.toJSONString(findall);
//传回前端json格式的字符串 key--value
//这一行代码设置了 HTTP 响应的内容类型为 application/json，同时指定了字符集为 utf-8。
PrintWriter writer = resp.getWriter();
writer.write(stu);
//释放缓存和对象
writer.flush();
writer.close();
}
}
最后有JavaBean；这里我只列举一个属性的显示
结果：
