前端（HTML）無法從Microsoft Azure中的mysql數據庫中獲取Spring Boot應用程序中的數據

Question

我正在嘗試從Microsoft Azure中托管的MySQL數據庫中獲取數據，而我的spring boot maven應用程序也已部署在Azure中。

當我點擊數據托管鏈接時，它會在Web瀏覽器上以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

我做錯了什么事？ 那是托管鏈接問題嗎？