vue项目 查询后台数据循环遍历显示在页面上
效果如下代码如下<template><div class="auser"><!-- 头部 --><adn/><div class="datas"><template><el-table:data="tableData"style="width: ...
·
效果如下
代码如下
<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;
}
}
更多推荐
已为社区贡献58条内容
所有评论(0)