基于NodeJS的前后端分离的思考与实践（五）多终端适配

“基于NodeJS的前后端分离的思考与实践（五）多终端适配”的完整攻略主要包含以下几个方面的内容：

1. 设计响应式布局

采用响应式设计可以在不同大小的设备上提供最佳的用户体验。在前端开发中，可以使用CSS media queries和flex等技术实现响应式布局。对于移动设备，还可以采用CSS框架如Bootstrap进行响应式布局。

2. 选择适当的UI组件库

在不同终端上展示数据需要针对不同的终端使用不同的UI组件库，以便于提供更好的用户体验。比如在PC端浏览器上，可以使用ElementUI这类组件库来展示数据，而在移动端则可以使用VantUI等组件库来展示数据。

3. 使用动态路由

可以使用Vue Router等库来实现动态路由。在不同的终端上，需要使用不同的路由策略来适配页面，比如在PC端上的路径为'/index'，移动端的路径可以为'/m/index'。使用动态路由，可以方便地实现路由的适配。

4. 支持多语言

在不同的地区和语言下，用户需要看到不同的文字和界面。为了提高用户体验，可以支持多语言功能。可以使用i18n、vue-i18n等库来实现多语言功能。

示例1

在PC端浏览器上展示数据，可以使用ElementUI来进行布局和展示。使用Vue Router实现动态路由，根据不同的路由策略展示不同的页面。

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { Table, TableColumn } from 'element-ui';
import VueRouter from 'vue-router';
import PCIndex from './components/PCIndex.vue';

export default {
  components: {
    Table,
    TableColumn,
  },
  router: new VueRouter({
    routes: [
      { path: '/index', component: PCIndex },
    ],
  }),
  data() {
    return {
      tableData: [
        { date: '2021-01-01', name: '张三', address: '北京市' },
        { date: '2021-01-02', name: '李四', address: '上海市' },
        { date: '2021-01-03', name: '王五', address: '广州市' },
        { date: '2021-01-04', name: '赵六', address: '深圳市' },
      ],
    };
  },
};
</script>

示例2

在移动端上展示数据，可以使用VantUI来进行布局和展示。使用Vue Router实现动态路由，根据不同的路由策略展示不同的页面。

<template>
  <div>
    <van-table :columns="columns" :rows="rows" />
  </div>
</template>

<script>
import { Table as VanTable } from 'vant';
import VueRouter from 'vue-router';
import MIndex from './components/MIndex.vue';

export default {
  components: {
    VanTable,
  },
  router: new VueRouter({
    routes: [
      { path: '/m/index', component: MIndex },
    ],
  }),
  data() {
    return {
      columns: [
        { key: 'date', title: '日期', width: '50%' },
        { key: 'name', title: '姓名', width: '30%' },
        { key: 'address', title: '地址', width: '20%' },
      ],
      rows: [
        { date: '2021-01-01', name: '张三', address: '北京市' },
        { date: '2021-01-02', name: '李四', address: '上海市' },
        { date: '2021-01-03', name: '王五', address: '广州市' },
        { date: '2021-01-04', name: '赵六', address: '深圳市' },
      ],
    };
  },
};
</script>