動態從數據庫獲取數據(Vue.js)【數據可變】


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 onclick="isWin(${ss.id})">訪問</td>
    </tr>
</c:forEach>
</table>

</body>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM