前端 (HTML) 未从 Microsoft Azure 中的 mysql 数据库获取 Spring Boot 应用程序中的数据

Posted

技术标签:

【中文标题】前端 (HTML) 未从 Microsoft Azure 中的 mysql 数据库获取 Spring Boot 应用程序中的数据【英文标题】：Front-end (HTML) is not fetching data in spring boot app from mysql database in Microsoft Azure 【发布时间】：2018-02-27 13:15:54 【问题描述】：

我正在尝试从托管在 Microsoft Azure 中的 mysql 数据库中获取数据，并且我的 spring boot maven 应用程序也部署在 Azure 中。

当我点击我的数据托管链接时，它会在网络浏览器上以 JSON 格式显示数据。例如 - https://xyz.azurewebsites.net/checklist 以 JSON 格式显示数据。

在另一端，当我点击前端链接时，它会显示我的设计。例如 - https://xyz.azurewebsites.net/search.html 显示 HTML 视图。

注意 - 这个完整的应用程序在本地服务器上运行良好 //localhost/3306。但是当我在 Microsoft Azure 上部署它时，它运行不正常。有点不匹配的问题。

我在哪里做错了？

层次结构

 |-Project
   |-src/main/java
     |-Controller
     |-DAO
     |-Entity
     |-Main
     |-Repository
     |-Service
     |-src/main/resources
     |-Static
        |- Search.html
        |- Index.html
     |-application.properties

Pom.xml

project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>CheckListMavenWebThree</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>

<!-- <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> 
    <version>1.4.7.RELEASE</version> </parent> -->
<dependencies>

    <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-
boot-starter-web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
        <version>1.4.7.RELEASE</version>
    </dependency>


    <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-data-jpa -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-data-jpa</artifactId>
        <version>1.4.7.RELEASE</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>6.0.6</version>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-tomcat</artifactId>
        <version>1.5.6.RELEASE</version>
        <scope>provided</scope>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter</artifactId>
        <version>1.5.6.RELEASE</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.springframework.data/spring-data-envers -->
    <dependency>
        <groupId>org.springframework.data</groupId>
        <artifactId>spring-data-envers</artifactId>
        <version>1.1.6.RELEASE</version>
    </dependency>
    <!-- https://mvnrepository.com/artifact/org.hibernate/hibernate-envers -->
    <dependency>
        <groupId>org.hibernate</groupId>
        <artifactId>hibernate-envers</artifactId>
        <version>5.2.10.Final</version>
    </dependency>


</dependencies>

<properties>
    <java.version>1.8</java.version>
</properties>
<build>
    <testSourceDirectory>src/main/test</testSourceDirectory>
    <resources>
        <resource>
            <directory>src/main/resources</directory>
            <excludes>
                <exclude>**/*.java</exclude>
            </excludes>
        </resource>
        <!-- <resource> <directory>src/main/webapp</directory> <excludes> <exclude>**/*.java</exclude> 
            </excludes> </resource> -->
    </resources>
    <plugins>
        <plugin>
            <artifactId>maven-compiler-plugin</artifactId>
            <version>3.6.1</version>

            <configuration>
                <source>1.8</source>
                <target>1.8</target>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.apache.tomcat.maven</groupId>
            <artifactId>tomcat7-maven-plugin</artifactId>
            <version>7</version>
        </plugin>
        <plugin>
            <artifactId>maven-war-plugin</artifactId>
            <version>3.0.0</version>
        </plugin>
    </plugins>
</build>

Controller.java（能够在主机（Azure）上获取数据）

package com.example.Controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.http.MediaType;

import com.example.Entity.Checklist;
import com.example.Service.CheckListService;

@Controller
public class CheckListController 
@Autowired
private CheckListService checkListService;

@RequestMapping(value = "/checklist" , method = RequestMethod.GET)
@ResponseBody
public Object index() 
    return checkListService.findAll();

App.js

var app = angular.module('myApp', [ 'ngResource' ]);
app.controller('CheckListController', [
    '$scope',
    '$resource',
    function($scope, $resource) 
        function fetchAllCheckList() 
            $scope.CheckList = 
$resource('http://localhost:8080/CheckListMavenWebThree/checklist')
                    .query(function(data) 
                        console.log(data);
                        $scope.Message = data;
                        return data;
                    );
        ;

        fetchAllCheckList();
        $scope.refresh = function() 
            fetchAllCheckList();
            console.log(fetchAllCheckList());
        ;

Search.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>CheckList</title>
<link rel="stylesheet" type="text/css" href="./css/right-panel.css">
</head>

<body ng-app="myApp" onload="javascript:closeNav()">
<div ng-controller="CheckListController" id="main">

<div >

        <span style="font-size: 23px; cursor: pointer"     onclick="openNav()">&#9776;
            Search</span>
    </div>


    <form name="checkListForm" id="main">

        <table border="2" >


            <tr>
                <th>Site_Name</th>
                <th>WSC_Serial_Number</th>
                <th>CheckList_01</th>
                <th>CheckList_02</th>
                <th>CheckList_03</th>
                <th>CheckList_04</th>
                <th>CheckList_05</th>
                <th>CheckList_06</th>
                <th>CheckList_07</th>
                <th>CheckList_08</th>
                <th>CheckList_09</th>
                <th>CheckList_10</th>
                <th>CheckList_11</th>
                <th>CheckList_12</th>
                <th>CheckList_13</th>
                <th>CheckList_14</th>
                <th>Notes</th>
                <th>Completed_By</th>
                <th>Setup_Tech</th>
                <th>Date</th>
            </tr>
            <div><label style="font-size:18px; font-family: "Lato", sans-serif;">Search: <input ng-model="search.$"></label><br><br>
            <tr ng-repeat="row in CheckList  | filter:search:strict">
                <td><span ng-bind="row.site_Name"></span></td>
                <td><span ng-bind="row.wsc_Serial_Number"></span></td>
                <td><span ng-bind="row.checkList_01"></span></td>
                <td><span ng-bind="row.checkList_02"></span></td>
                <td><span ng-bind="row.checkList_03"></span></td>
                <td><span ng-bind="row.checkList_04"></span></td>
                <td><span ng-bind="row.checkList_05"></span></td>
                <td><span ng-bind="row.checkList_06"></span></td>
                <td><span ng-bind="row.checkList_07"></span></td>
                <td><span ng-bind="row.checkList_08"></span></td>
                <td><span ng-bind="row.checkList_09"></span></td>
                <td><span ng-bind="row.checkList_10"></span></td>
                <td><span ng-bind="row.checkList_11"></span></td>
                <td><span ng-bind="row.checkList_12"></span></td>
                <td><span ng-bind="row.checkList_13"></span></td>
                <td><span ng-bind="row.checkList_14"></span></td>
                <td><span ng-bind="row.notes"></span></td>
                <td><span ng-bind="row.completed_By"></span></td>
                <td><span ng-bind="row.setup_Tech"></span></td>
                <td><span ng-bind="row.date"></span></td>
                <td>
            </tr>
        </div>
        </table>

        <div id="mySidenav" class="sidenav" onmouseover="openNav()"
            onmouseleave="closeNav()">
            <!--  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->

            <a href="search.html">&nbsp;&#9906;&nbsp;&nbsp;Search</a> <a
                href="createnew.html">&#169;&nbsp;&nbsp;Create</a> <a href="update.html">&#9851;&nbsp;&nbsp;Update</a>
            <a href="delete.html">&#9762;&nbsp;&nbsp;Delete</a>
            <a href="earth.html">&#9762;&nbsp;&nbsp;Earth</a>
        </div>

        <span><button type="button" data-ng-click="refresh()" id="refresh">Refresh</button></span>
</div>
</form>
<script type='text/javascript'  src="./js/rightpanel.js"></script>
<script type='text/javascript'  src="./js/angular.min.js"></script>
<script type='text/javascript'  src="./js/angular-resource.min.js"></script>
<script type='text/javascript' src="js/app.js"></script>
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet" href="./css/theme-default.css">
<link rel="stylesheet" href="./css/theme-blue.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">

Web.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<handlers>
  <add name="httpPlatformHandler" path="*" verb="*" 
modules="httpPlatformHandler" resourceType="Unspecified" />
</handlers>
<httpPlatform processPath="%JAVA_HOME%\bin\java.exe"
    arguments="-Djava.net.preferIPv4Stack=true -
Dserver.port=%HTTP_PLATFORM_PORT% -jar &quot;%HOME%\site\wwwroot\gs-spring-
boot-0.1.0.jar&quot;">
</httpPlatform>
</system.webServer>
</configuration>

Application.properties（我很天真，所以我刚刚学习并尝试实现。application.properties 是否正确？它也允许我从本地主机连接 mysql 和 azure）

spring.mvc.view.prefix=/static/js/
spring.mvc.view.suffix=.jsp
spring.datasource.url=jdbc:mysql://*****.mysql.database.azure.com:3306/*****?    verifyServerCertificate=true&useSSL=true&requireSSL=false&serverTimezone=UTC
spring.datasource.username:*******@*******server
spring.datasource.password:*******
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver


# Keep the connection alive if idle for a long time (needed in production)
spring.datasource.testWhileIdle = true
spring.datasource.validationQuery = SELECT 1

# Show or not log for each sql query
spring.jpa.show-sql = true

# Hibernate ddl auto (create, create-drop, update)
spring.jpa.hibernate.ddl-auto = update

# Naming strategy
spring.jpa.hibernate.naming-strategy =     org.hibernate.cfg.ImprovedNamingStrategy

# Use spring.jpa.properties.* for Hibernate native properties (the prefix is
# stripped before adding them to the entity manager)

# The SQL dialect makes Hibernate generate better SQL for the chosen     database
spring.jpa.properties.hibernate.dialect =     org.hibernate.dialect.MySQL5Dialect
logging.level.org.hibernate.SQL:debug

#naming convention according to me
spring.jpa.hibernate.naming.physical-    strategy=org.hibernate.boot.model.naming.PhysicalNamingStrategyStandardImpl

我做错了什么？是托管链接问题吗？

【问题讨论】：

能否将您应用的 web.config 文件发布到 KUDU 中？顺便说一句，找不到您提供的页面。 我已更改该页面名称。但这里是链接smartrain.azurewebsites.net/search.htmlsmartrain.azurewebsites.net/checklist。我也在用 web.xml 编辑我的帖子。感谢您的帮助，如果您需要知道任何事情，请告诉我。请帮我解决这个问题。 您是否使用可运行的 jar 包和 web.config 文件在 azure 上运行您的应用程序？ web.config文件中jar包的名称是否与你部署到azure的jar包一致？ @JayGong 我通过右键单击项目并将其发布为 azure 应用程序，直接从 spring 工具套件将其上传到 azure 上。 web.config 文件是否与 web.xml 相同？我的项目中没有任何 web.config 文件。我想我使用了可运行的 jar 包我不确定这到底是什么意思。 如果您使用该工具直接部署它，请确保您在门户应用设置中选择了与JDK和Tomcat容器版本匹配的项目。尝试改变部署方式，使用FTP将war包部署到D:\home\site\wwwroot\webapps\目录下。 【参考方案1】：

根据您的描述，您的项目在本地运行良好，请考虑部署问题。

您可以按照official tutorials 将spring-boot 项目部署到azure。

结合official tutorials中的步骤和你的实际情况，我提供以下检查点：

第1点：请使用mvn package在pom.xml文件所在目录下构建JAR包。

]

第二点：请确保web.config中配置的jar包名与上传的jar包名一致。

第3点：请使用FTP将jar files和web.config发布到KUDU上的D:\home\site\wwwroot\目录。

第 4 点：请确保 ApplicationSettings 与您的项目匹配，例如 jdk version,tomcat version。

如果要部署war文件，需要在Azure门户配置应用服务的ApplicationSettings，然后将war文件上传到D:\home\site\wwwroot\webapps路径。

作为参考，请参阅下面的文档和线程。

1.Configure web apps in Azure App Service

2.Create a Java web app in Azure App Service

3.Deploying Springboot to Azure App Service.

希望对你有帮助。

【讨论】：

以上是关于前端 (HTML) 未从 Microsoft Azure 中的 mysql 数据库获取 Spring Boot 应用程序中的数据的主要内容，如果未能解决你的问题，请参考以下文章

未从实时 ETW 消费者接收 Microsoft-Windows-Kernel-Process 事件

Microsoft Azure AZ-102 Exam Questions And Answers

Azure自动化| Runbook | Powershell | Get-AzRoleAssignment | Microsoft.Rest.Azure.CloudException

az104认证有用吗

以编程方式构建 - 未从程序集中加载“TransformTemplates”任务

EventLogPropertySelector 未从 PowerShell 中的事件对象返回扩展数据