Vue + axios实现CRM系统的查询

最新推荐文章于 2022-12-19 16:18:43 发布

DDDDHai

最新推荐文章于 2022-12-19 16:18:43 发布

阅读量309

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/DDDDHai/article/details/127770391

版权

本文介绍如何使用Vue.js和axios在前端发送请求到后端Servlet获取用户列表数据，并通过v-for指令将数据展示在表格上。后端通过DAO实现查询全部用户的方法，创建UserListServlet进行处理。

摘要由CSDN通过智能技术生成

一、前端HTML

1.1、通过axios发送请求到Servlet获取用户列表数据

代码如下:

<script>
    new Vue({
       el:"#app",
       data:{
               users:null
       } ,
        created:function () {
           axios.get("user_list").then(response =>{
               this.users = response.data;
           });
        }
    });
</script>

1.2、将Servlet响应的数据通过v-for指令显示到tale上

<tr v-for="u in users">
                            <td>{
  {u.id}}</td>
                            <td>{
  {u.user_name}}</td>
                            <td>{
  {u.nick_name}}</td>
                            <td>{
  {u.sex}}</td>
                            <td>{
  {u.birth}}</td>
                            <td>{
  {u.phone}}</td>
                            <td>