用Vue和Axios将数据库数据显示在前端页面

在本次实例中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 {//初始化msgmsg: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;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected 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；这里我只列举一个属性的显示

结果：