[英]Front-end (HTML) is not fetching data in spring boot app from mysql database in Microsoft Azure
I am trying to fetch data from MySQL database which is hosted in Microsoft Azure and my spring boot maven app is also deployed in Azure. 我正在尝试从Microsoft Azure中托管的MySQL数据库中获取数据,而我的spring boot maven应用程序也已部署在Azure中。
When I am hitting my data hosting link, it displays data in JSON format on a web browser. 当我点击数据托管链接时,它会在Web浏览器上以JSON格式显示数据。 For Example - https://xyz.azurewebsites.net/checklist displays data in JSON format. 例如-https: //xyz.azurewebsites.net/checklist以JSON格式显示数据。
On the other end When I am hitting my front-end link, it displays my design. 另一方面,当我点击前端链接时,它会显示我的设计。 For Example - https://xyz.azurewebsites.net/search.html displays HTML view. 例如-https: //xyz.azurewebsites.net/search.html显示HTML视图。
Note - This complete app working fine on local server //localhost/3306. 注意-此完整的应用程序可以在本地服务器// localhost / 3306上正常工作。 But it is not running fine when I am deploying it on Microsoft Azure. 但是,当我在Microsoft Azure上部署它时,它运行不正常。 Kind of mismatch issue. 一种不匹配的问题。
Where am I doing a mistake? 我在哪里做错了?
Hierarchy 等级制度
|-Project
|-src/main/java
|-Controller
|-DAO
|-Entity
|-Main
|-Repository
|-Service
|-src/main/resources
|-Static
|- Search.html
|- Index.html
|-application.properties
Pom.xml 的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 (able to fetch data on host(Azure)) 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 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 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()">☰
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()">×</a> -->
<a href="search.html"> ⚲ Search</a> <a
href="createnew.html">© Create</a> <a href="update.html">♻ Update</a>
<a href="delete.html">☢ Delete</a>
<a href="earth.html">☢ 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 在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 "%HOME%\site\wwwroot\gs-spring-
boot-0.1.0.jar"">
</httpPlatform>
</system.webServer>
</configuration>
Application.properties (I am naive so I just learned and tried to implement. Is application.properties is correct? It allow me to connect mysql with azure from local host also) 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
What stuff Am I doing wrong? 我做错了什么事? Is that hosting link issue? 那是托管链接问题吗?
According to your description, your project works fine locally, so consider the issue of deployment. 根据您的描述,您的项目在本地运行良好,因此请考虑部署问题。
You could followed the official tutorials to deploy spring-boot
project to azure. 您可以按照官方教程将spring-boot
项目部署到Azure。
Combining the steps in the official tutorials and your actual situation, I provide the following check points: 结合官方教程中的步骤和您的实际情况,我提供以下检查点:
Point 1: Please use mvn package
to bulid the JAR package in the directory under which the pom.xml
file is located. 要点1:请使用mvn package
在pom.xml
文件所在的目录中构建JAR软件包。
Point 2: Please make sure that the jar package name configured in web.config is the same as the uploaded jar package name. 第2点:请确保在web.config中配置的jar包名称与上载的jar包名称相同。
Point 3: Please use FTP to publish jar files
and web.config
to D:\\home\\site\\wwwroot\\
directory on KUDU. 第3点:请使用FTP将jar files
和web.config
发布到KUDU上的D:\\home\\site\\wwwroot\\
目录。
Point 4: Please make sure ApplicationSettings
matches your project such as jdk version
, tomcat version
. 第4点:请确保ApplicationSettings
与您的项目匹配,例如jdk version
, tomcat version
。
If you want to deploy a war
file, you need to configure the ApplicationSettings of your app service on Azure portal, then upload the war file into the path D:\\home\\site\\wwwroot\\webapps
. 如果要部署war
文件,则需要在Azure门户上配置应用程序服务的ApplicationSettings,然后将war文件上传到路径D:\\home\\site\\wwwroot\\webapps
。
As references, please refer to the documents and threads below. 作为参考,请参考下面的文档和主题。
1. Configure web apps in Azure App Service 1. 在Azure App Service中配置Web应用程序
2. Create a Java web app in Azure App Service 2. 在Azure App Service中创建一个Java Web应用程序
3. Deploying Springboot to Azure App Service . 3.将Springboot部署到Azure应用服务 。
Hope it helps you. 希望对您有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.