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

最新推荐文章于 2024-08-05 22:43:05 发布

我爱李星璇

最新推荐文章于 2024-08-05 22:43:05 发布

阅读量107

点赞数 1

文章标签：前端 vue.js 数据库

本文链接：https://blog.csdn.net/daibadetianshi/article/details/140935780

版权

在本次实例中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；这里我只列举一个属性的显示

结果：