动态从数据库获取数据（Vue.js）【数据可变】

最新推荐文章于 2023-03-01 17:28:03 发布

weixin_33862188

最新推荐文章于 2023-03-01 17:28:03 发布

阅读量1k

点赞数

文章标签：数据库 javascript java ViewUI

原文链接：http://www.cnblogs.com/Zbaozi/p/7920538.html

版权

package com.nf.entity;

import javax.persistence.*;

@Entity
@Table(name = "book")
public class Book {
    private Integer id;
    private String name;
    private Integer price;

    @Id
    @GeneratedValue(strategy= GenerationType.IDENTITY)
    @Column(name="id")
public Integer getId() {
  return id;
}
public void setId(Integer id) {
  this.id = id;
}

@Column(name = "name",length = 50,nullable = false)
public String getName() {
  return name;
}
public void setName(String name) {
  this.name = name;
}

@Column(name = "price",nullable = false)
public Integer getPrice() {
  return price;
}
public void setPrice(Integer price) {
  this.price = price;
}

}

==================================================

----------------------------------------------------------------------------------------

【包名com.nf.service】

（BookService.java 接口）

package com.nf.service;

import com.nf.entity.Book;

import java.util.List;

public interface BookService {

public List<Book> getAllBook();
}

----------------------------------------------------------------------------------------

【包名com.nf.service】

（BookServiceImpl.java）

package com.nf.service;

import com.nf.dao.BookDao;
import com.nf.entity.Book;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service
@Scope("prototype")
public class BookServiceImpl implements BookService {

@Autowired
private BookDao bookDao;

    @Transactional
    public List<Book> getAllBook() {
        List<Book> bookList = bookDao.getAllBook();
        //编写游戏规则（业务逻辑代码：没有任何数据库操作）
        return bookList;
    }

}

{这个是配置文件【此为mysql的配置】}

（下面的student为库名！user为账号！password为密码！自己改好自己的配置）

#database information
driverClass=com.mysql.cj.jdbc.Driver
jdbcUrl=jdbc:mysql://localhost:3306/lib?serverTimezone=UTC
user=root
password=root

记得在WebContent下面创建一个js目录放jquery-3.2.1.min.js（不知道朋友可以去百度下载！）

（这个是WebContent下面目录的项目）

（ok.jsp）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
<script>
function isWin(userid) {
    //构造一个发送给服务端的参数列表
    var postData = {id:userid};
    $.ajax({
        url:"userAction_isWin.action",
        type:'POST',
        data:postData,
        dataType:'json',//服务端返回类型
        success:function (myresult) {
            if (myresult.data==true){
                alert('恭喜你获奖了');
            }else{
                alert('恭喜你,输了!');
            }
        },
        timeout:3000,
        error:function(){
            alert('访问服务端失败')
        }
    });
}
</script>
</head>
<body>
<table border="1">
    <tr>
        <td>id</td>
        <td>名字</td>
        <td>性别</td>
        <td>年龄</td>
        <td>状态</td>
        <td>是否获奖</td>
    </tr>
<c:forEach items="${userList}" var="ss">
    <tr>
        <td>${ss.id}</td>
        <td>${ss.userName}</td>
        <td>${ss.sex}</td>
        <td>${ss.age}</td>
        <td>${ss.status}</td>
        <td οnclick="isWin(${ss.id})">访问</td>
    </tr>
</c:forEach>
</table>