后端应用集成

如果是阿里内部同学,请参考 文档

本文讲解如何在后端应用集成前端资源。

Node.js 应用

初始化 Koa 应用

新建项目名 ice-node-koa,可自由指定

  1. $ mkdir ice-node-koa && cd ice-node-koa
  2. $ npm init
  3. $ npm i ejs koa koa-logger koa-views --save

定义视图

新建 views/index.ejs

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
  6. <meta name="viewport" content="width=device-width" />
  7. <title>ICE Design Lite</title>
  8. <link rel="shortcut icon" href="<%= publicPath %>/favicon.png" />
  9. <link href="<%= publicPath %>/css/index.css" rel="stylesheet" />
  10. </head>
  11. <body>
  12. <div id="ice-container"></div>
  13. <script type="text/javascript" src="<%= publicPath %>/js/index.js"></script>
  14. </body>
  15. </html>

渲染视图

新建 app.js

  1. const views = require('koa-views');
  2. const path = require('path');
  3. const Koa = require('koa');
  4. const app = (module.exports = new Koa());
  5. app.use(views(path.join(__dirname, '/views'), { extension: 'ejs' }));
  6. app.use(async function(ctx) {
  7. await ctx.render('index', { publicPath: 'http://localhost:4444/' });
  8. });
  9. app.listen(3000);

示例兼容单页应用的 HashRouterBrowserRouter,如多页应用可参考 https://github.com/koajs/examples 中 blog 示例配置路由

运行示例

  1. $ node app.js

浏览器中打开 http://localhost:3000

注意事项

  • 示例应用只部署了 html,兼容 BrowserRouter 做了 fallback 处理 (默认所有请求路径返回同一份html)
  • Node.js 前后端一体应用,需要进行路由配置

Java 应用

以 Spring Boot 为例。

resources

新建 /velocity/layout/index.vm

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" />
  6. <meta name="viewport" content="width=device-width" />
  7. <title>ICE Design Lite</title>
  8. <link rel="shortcut icon" href="$!publicPath/favicon.png" />
  9. <link href="$!publicPath/css/index.css" rel="stylesheet" />
  10. </head>
  11. <body>
  12. <div id="ice-container"></div>
  13. <script type="text/javascript" src="$!publicPath/js/index.js"></script>
  14. </body>
  15. </html>

Controller

  1. @GetMapping("/")
  2. @VelocityLayout("/velocity/layout/index.vm")
  3. public String index(Model model) {
  4. model.addAttribute(publicPath, jsConfig.get(publicPath));
  5. return "index";
  6. }

示例展示的是 HashRouter 路由,如果为 BrowserRouter,建议改为 @GetMapping(value = { "/**" }) 实现前端 fallback

HTML 托管服务

本章节讲解如何在 HTML 托管服务中集成前端资源,我们以 surge 为例。

全局安装 surge

  1. npm install --global surge

运行 surge

ice-demo 项目名,ice 项目默认构建目录 build 为例:

  1. cd ice-demo/build
  2. surge

依次确认账户, project pathdomain 等信息,等待上传生效即可,详见 surge 官方说明

其他同类产品