后端应用集成

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

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

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>
  12.   <body>
  13.     <div id="ice-container"></div>
  14.     <script type="text/javascript" src="<%= publicPath %>/js/index.js"></script>
  15.   </body>
  16. </html>

渲染视图

新建 app.js：

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

示例兼容单页应用的 HashRouter 和 BrowserRouter，如多页应用可参考 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>
  12.   <body>
  13.     <div id="ice-container"></div>
  14.     <script type="text/javascript" src="$!publicPath/js/index.js"></script>
  15.   </body>
  16. </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 path， domain 等信息，等待上传生效即可，详见 surge 官方说明

其他同类产品