vue项目查询后台数据循环遍历显示在页面上

我会带着你远行 2022-02-02 13:21 494阅读 0赞

### ***效果如下*** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

### ***代码如下*** ###

<template>
    <div class="auser">
        
      <adn/>
        <div class="datas">
     <template>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="用户名"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{
       { scope.row.username }}</span>
          </template>
        </el-table-column>
         <el-table-column
          label="密码"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{
       { scope.row.password }}</span>
          </template>
        </el-table-column>
         <el-table-column
          label="头像"
          width="180">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">
               {
       { scope.row.logo }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
      </div>
          </div>
    </template>
    
    <script>
    import adn from "./admin";
      export default {
          //页面刚加载的时候就开始查询数据
      components: {
        adn
      },
       mounted:function(){
          this.queryuser();//需要触发的函数
        },
     data() {
              return {
            tableData: []
          }
     },
     //method
        methods: {
          handleEdit(index, row) {
            console.log(index, row);
          },
          handleDelete(index, row) {
            console.log(index, row);
          },
           queryuser(){
               /*在这里进行跨域请求*/
              this.axios({
                method: "post",
                url: "/api/PsychoSys/auser.action"
              })
                .then(res => { 
                    console.log(res);
                      console.log(res.data);
                    this.tableData=res.data;
                    }).catch(function(err) {
                  console.log(err);
                });
            /*在这里进行跨域请求*/
        },
        }
        //methid
      }
    //页面刚加载的时候就开始查询数据
    </script>
    <style>
    .datas{
    width: 60%;
    margin-left: 35%;
    margin-top: -8%;  
    }
    </style>

***我后台用的是java语言，采用的是ssh框架***

package cn.com.service;
    import java.io.IOException;
    import java.util.List;
    import javax.servlet.http.HttpServletResponse;
    import net.sf.json.JSONArray;
    import org.apache.struts2.ServletActionContext;
    import org.hibernate.Query;
    import org.hibernate.Session;
    import org.hibernate.SessionFactory;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.context.annotation.Scope;
    import org.springframework.stereotype.Repository;
    import org.springframework.transaction.annotation.Transactional;
    import cn.com.bean.User;
    @Repository(value = "adminUser")
    @Scope("prototype")
    public class AdminUser {
    	@Autowired
    	private SessionFactory sf;
    	@Transactional
    	public String queryuser() {
    		// 普通用户注册 ,用户名不能重复
    		Session session = sf.getCurrentSession();
    		// 查询是否重复
    		String sql = "from User";
    		Query query = session.createQuery(sql);
    		List<User> list = query.list();
    		HttpServletResponse response = ServletActionContext.getResponse();
    		response.setCharacterEncoding("utf-8");
    		try {
    			JSONArray json = JSONArray.fromObject(list);
    			response.getWriter().write(json.toString());
    		} catch (IOException e) {
    			e.printStackTrace();
    		}
    		return null;
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220202/89be69a65d6e4fc9b8b0258cfb129267.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220202/9e6285dbd7e64de2bcf95cbefcbb5fc7.png