,爪哇语言在多数时,会作为一个后端语言,为前端的php, node . js等提供API接口。前端通过ajax请求去调用java API的服务。今天以node . js为例,。
<强> pom.xml:
& lt; & # 63; xml version=" 1.0 " encoding=" utf - 8 " & # 63;比;
& lt;项目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”比;
& lt; modelVersion> 4.0.0
& lt; groupId> com.example
& lt; artifactId> spring-boot-15
& lt; version> 0.0.1-SNAPSHOT
& lt; packaging> jar
& lt; name> spring-boot-15
春天Boot< & lt; description>演示项目;/description>
& lt; parent>
& lt; groupId> org.springframework.boot
& lt; artifactId> spring-boot-starter-parent
& lt; version> 1.5.3.RELEASE
& lt; relativePath/比;& lt; !——从库中查找父——比;
& lt;/parent>
& lt; properties>
& lt; project.build.sourceEncoding> UTF-8
& lt; project.reporting.outputEncoding> UTF-8
& lt; java.version> 1.8 & lt;/java.version>
& lt;/properties>
& lt; dependencies>
& lt; dependency>
& lt; groupId> org.springframework.boot
& lt; artifactId> spring-boot-starter-web
& lt;/dependency>
& lt; dependency>
& lt; groupId> org.springframework.boot
& lt; artifactId> spring-boot-devtools
& lt; scope> runtime
& lt;/dependency>
& lt; dependency>
& lt; groupId> org.springframework.boot
& lt; artifactId> spring-boot-starter-test
& lt; scope> test
& lt;/dependency>
& lt;/dependencies>
& lt; build>
& lt; plugins>
& lt; plugin>
& lt; groupId> org.springframework.boot
& lt; artifactId> spring-boot-maven-plugin
& lt;/plugin>
& lt;/plugins>
& lt;/build>
& lt;/project>
<强> pom.xml
App.java
com . example,包
进口org.springframework.boot.SpringApplication;
进口org.springframework.boot.autoconfigure.SpringBootApplication
@SpringBootApplication
公共类应用{
公共静态void main (String [] args) {
SpringApplication.run (App.class, args);
}
}
User.java
com . example,包
公开课用户{
公共int id;
公共字符串名称;
公共int年龄;
}
MainController.java:
com . example,包
进口java.util.ArrayList;
进口并不知道;
进口org.springframework.web.bind.annotation.GetMapping;
进口org.springframework.web.bind.annotation.RestController;/* *
* *
*/@RestController
公开课MainController {
@GetMapping (“findAllUser”)
公共ListfindAllUser () {
List,列表=new ArrayList<的在();
for (int i=0;我& lt;20;我+ +){
用户用户=新用户();
list.add(用户);
用户。id=我;
user.name=皀ame_”+我;
用户。年龄=20 + i;
}
返回列表;
}
}
项目结构如下图所示:
访问http://localhost: 8080/findAllUser
使用HBuilder创建节点。js表达项目:
选择ejs模板引擎:
index.ejs文件代码如下:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt; title>
& lt; %=标题%比;
& lt;/title>
rel=& lt;链接样式表的href=" https://www.yisu.com/stylesheets/style.css "/比;
& lt;脚本src=" https://www.yisu.com//cdn.bootcss.com/angular.js/1.5.6/angular.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
应用var=角。模块(“应用程序”,[]);
app.controller (MainController,函数(rootScope美元,美元的范围,http) {
http({美元
方法:“得到”,
url: http://localhost: 8080/findAllUser '
})。然后(函数successCallback (r) {
美元的范围。行=r.data;
});
});
& lt;/script>
& lt;/head>
& lt;身体ng-app="应用" ng-controller=癕ainController”比;
& lt; h2> & lt; %=标题%祝辞& lt;/h2>
& lt; p>欢迎
& lt; %=标题%比;
& lt;/p>
& lt; br/比;
& lt; table>
& lt; tr ng-repeat=靶行小北?
& lt; td> {{row.id}} & lt;/td>
& lt; td> {{row.name}} & lt;/td>
& lt; td> {{row.age}} & lt;/td>
& lt;/tr>
& lt;/table>
& lt;/body>
& lt;/html>
