vue clic项目实现把后台数据库的数据循环遍历在页面上

我的qq 2038373094

数据库里面的数据

页面效果

我是一名全栈工程师

后台：java的ssh框架（甲方要求）

前台：vue框架

 

vue文件

<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-s-custom"></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-key"></i>
        <span style="margin-left: 10px">{{ scope.row.password }}</span>
      </template>
    </el-table-column>
     <el-table-column
      label="头像"
      width="180">
      <template>
        <i class="el-icon-picture-outline-roun"></i>
        <span style="margin-left: 10px">
           <img src="http://localhost:8080/PsychoSys/img/4phahqgn96.jpg" class="mylogo"/>
        </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%;  
}
.mylogo{
  width:100px;
  height: 100px;
  border-radius: 50%;
}
</style>

 

后台代码

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;
	}
}