feat: add simple layout example

hubcarl · hubcarl · commit 4f1d9e2870b3 · 2020-01-09T23:08:14.000+08:00
diff --git a/app/controller/test.js b/app/controller/test.js
@@ -0,0 +1,19 @@
+'usestrict';
+const egg = require('egg');
+module.exports = class TestController extends egg.Controller {
+  
+  async index() {
+    await this.ctx.render('test.js', {
+      meta: {
+        title: 'Egg Vue SSR',
+        keywords: 'egg,vue,vue sse,easyjs',
+        description: '基于 Egg + Vue + Webpack SSR 服务端渲染和 CSR 前端渲染工程骨架项目，包括前台系统(SSR MPA)和后台管理系统(SSR SPA)'
+      },
+      site: {
+        name: 'easyjs',
+        url: 'https://easyjs.cn'
+      }
+    });
+  }
+
+};
diff --git a/app/router.js b/app/router.js
@@ -8,6 +8,7 @@ module.exports = app => {
   router.get('/category', controller.category.category.index);
   router.get('/login', controller.admin.admin.login);
   router.get('/about', controller.admin.admin.login);
+  router.get('/test', controller.test.index);
   router.post('/admin/api/article/list', controller.admin.admin.list);
   router.post('/admin/api/article/add', controller.admin.admin.add);
   router.get('/admin/api/article/del/:id', controller.admin.admin.del);
diff --git a/app/web/component/layout/index/header/header.vue b/app/web/component/layout/index/header/header.vue
@@ -22,6 +22,9 @@
                     <li>
                         <a href="/admin">{{$t('menu.admin')}}</a>
                     </li>
+                    <li>
+                        <a href="/test">{{$t('menu.test')}}</a>
+                    </li>
                 </ul>
             </div>
         </div>
diff --git a/app/web/component/layout/simple/index.vue b/app/web/component/layout/simple/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <html v-if="isNode">
+    <head>
+      <title>{{meta.title}}</title>
+      <meta name="keywords" :content="meta.keywords">
+      <meta name="description" :content="meta.description">
+      <meta http-equiv="content-type" content="text/html;charset=utf-8">
+      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+      <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
+    </head>
+    <body>
+      <div id="app" data-server-rendered="true"><slot></slot></div>    
+    </body>
+  </html>
+  <div v-else-if="!isNode" id="app"><slot></slot></div>
+</template>
+<style>
+</style>
+<script type='babel'>
+  export default {
+    props: ['meta'],
+    data() {
+      return {
+        isNode: EASY_ENV_IS_NODE
+      }
+    }
+  }
+</script>
diff --git a/app/web/framework/i18n/site/cn.js b/app/web/framework/i18n/site/cn.js
@@ -4,7 +4,8 @@ export default {
     home: '首页',
     category: '分类',
     about: '关于',
-    admin: '管理'
+    admin: '管理',
+    test: 'easyjs'
   },
   lang: {
     href: '/?locale=en',
diff --git a/app/web/framework/i18n/site/en.js b/app/web/framework/i18n/site/en.js
@@ -3,7 +3,8 @@ export default {
     home: 'Home',
     category: 'Catetory',
     about: 'About',
-    admin: 'Admin'
+    admin: 'Admin',
+    test: 'easyjs'
   },
   lang: {
     href: '/?locale=cn',
diff --git a/app/web/page/test/test.vue b/app/web/page/test/test.vue
@@ -0,0 +1,33 @@
+<template>
+  <SimpleLayout :meta="meta">
+     <div>
+        <h1 style="text-align:center; display:none">{{site.name}}</h1>
+        <iframe width="100%" height="800px" frameborder="no" :src="site.url"></iframe>
+     </div>
+  </SimpleLayout>
+</template>
+<style>
+</style>
+<script type='babel'>
+  import SimpleLayout from 'component/layout/simple/index.vue';
+  export default {
+    components: {
+      SimpleLayout
+    },
+    data(){
+      return {
+        
+      }
+    },
+    computed: {
+      
+    },
+    methods: {
+     
+    },
+    mounted() {
+    
+    }
+  }
+</script>
+
diff --git a/webpack.config.js b/webpack.config.js
@@ -8,6 +8,7 @@ module.exports = {
     'about/about': 'app/web/page/about/about.vue',
     'admin/home/home': 'app/web/page/admin/home/home.vue',
     'admin/login/login': 'app/web/page/admin/login/login.vue',
+    'test': 'app/web/page/test/test.vue'
   },
   plugins: [
     { imagemini: false }
