Loading...
墨滴

dzz

2021/03/17  阅读:7  主题:默认主题

物业官网

物业官网部署文档

  1. 简介

    整个项目分为 3 个部分: strapi 后台, ant.design.landing 前端(编辑器和预览) 和一个简单的 node 后端

    • strapi: 主要作用是管理前端要展示数据,以及存储一些系统信息。
    • ant.design.landing:主要作用是预览网页和发布网页。
    • node: 将 ant.design.landing 网页发布到远程(阿里 oss 等等)。

    整个项目采用了 yarn 包管理器, npm 也可以

  2. strapi

    • 环境安装

      在项目录(nova-wuye-cms-backend)下执行 yarn install 安装依赖包, 这个过程中可能在安装 sharp 这个包的时候会很慢甚至获取依赖失败,可执行一下步骤:

      • 优先执行本说明文档 的第 4 点, 运行 7115 端口服务
      • 删除当前目录的 node_modules 文件夹
      • 执行 yarn set_sharp
      • 然后 再一次安装依赖, yarn install
      • 继续【运行】 步骤
    • 运行

      依赖安装后执行 yarn build 生成后台的前端页面,最后执行 yarn develop 或者 yarn start(生产模式) 启动端口为 1337 的服务

  3. ant.design.landing

    • 环境安装
      在项目录(nova-wuye-cms-front)下执行 yarn install 安装依赖包
    • 运行
      执行 yarn start 或者 windows 系统下执行 yarn local-start, 现在只支持开发环境运行项目因此这个过程比较慢, 后续修改为 编译生成静态文件
      启动项目后,会启动 7112(编辑器),7113(预览) 2 个端口, 现在每次启动项目后, 需要去 7112 端口编辑器页面配置地址信息, 初版考虑不足, 后续加上配置远程的地址(阿里 oss 地址等等)

    如果不配置的话会以该项目目录中的 ./site/url.js 文件中的信息为默认地址:

    export const strapiUrl = 'http://localhost:1337/';
    export const deferToServerUrl = 'http://localhost:7115/';

    url 需要以/结尾

  1. node
    • 环境安装
      在项目目录(nova-wuye-cms-node-service1)下执行 yarn install
    • 运行
      执行 yarn start, 启动端口为 7115 的服务

使用手册

strapi

项目运行后成功后, 打开 1337 端口页面, 在左侧侧边栏: 可供 组件/页面 的选择和 系统设置 等等

  • Collection Types
    类似数据库的 结构, 每一项对应一张表, 表里有多条数据。

    • Banner, Header, Content, Footer等等项目 表示组件, 每个组件有里多条数据表示同一个组件不同的内容, 比如 页面一 引入了组件 Banner1, 页面二 也引入了组件 Banner1, 但是他们内容不同, 所以需要 2 条数据来维护。
    • pages 项表示页面, 每一条数据对应一个页面。每个页面都有 name, pageDesc, pageTitle, 等基本数据, 同时可以引入要加入的组件
  • Single Types 每一项表示一条表单, 与 Collection Types 不同的是, 它只有一条数据

    • contact-us 表示网页 申请使用框 的一些基本信息设置
  • 插件

    • 内容类型生成器(content-types builder), 在这里可以生成组件, 修改表里面的字段和结构
    • Media Library, 管理使用的到的所有图片, 需要注意的是, 点击编辑一张图片, 其中有一个 Alternative text 属性, 也就是 <img alt> 标签的 alt 属性
    • UI Navigation 这个和 Header 对应, 可修改页面上 Header 中的菜单项
  • 常规(general)

    • 设置 点击设置后, 在右侧会出现其他的选项 主要是 权限相关的操作, 需要注意 的是, 预览内容这个选项 是设置 点击 pages 页面中的 预览 跳转地址, 也就是开启的 7112 或者是 7113 端口的地址, 其它保持不变即可

添加一个页面

  1. 创建组件, 因为 strapi 的设计结构原因, 不能简单的创建一个组件并直接使用. 将在后续补上说明
  2. 创建一条组件数组, 在已经创建好的以 Banner1 为例
    • 打开 CollectionTypes 中的 Banner1, 点击右侧内容中右上角的 增加新的 Banner1s (s 后缀为系统自动添加)
    • 填充内容, 因为 strapi 属于单纯的数据管理, 并且字段都用了简单的英文拼接, 目前 需要参照已存在的组件预览, 才能弄清楚每一个字段对应在组件的位置比如 commonTitle 字段对应了 组件的标题文字: 需要注意 得是: name 字段, 需要唯一并且, 最好是 组件名称(Banner1) + _(下划线) + 数字 ===> Banner1_0, 下划线一定要有。
      在页面添加该组件时, 也会用到 name 字段, 作为名称显示。
    • 保存
  3. 创建页面,
    • 打开 CollectionTypes 中的 pages, 点击 新增, 填充基本信息(pageTitle, pageDesc...)
    • 添加组件, 点击底部 + 其中 Banner1 字段 选择刚刚创建的那一条数据(也就是第二步填入的那个 name 字段)
    • 继续添加其他组件点击底部 + 号, 步骤相同

and.design.landing

打开 7112 端口页面后, 第一步 配置链接 还可以 查看预览, 发布, 和 页面跳转

查看预览也就是打开 7113 端口页面

其中在 url 中加入 forceUpdate=true 可跳过读取 缓存 获取最新的 starpi 数据

类似 http://localhost:7113/index-cn#uid=24&forceUpdate=true

node

简单的后端服务, 主要结构:

├── bin
│   └─ www 项目执行入口(非app.js)
├── node_modules
├── package.json
├── .gitignore
├── public // 静态文件存放目录
├── controller // 程序执行目录
│   ├── ossImage // 老版本图片选择功能, 已移除
│   └── deploy // 执行 阿里oss 相关功能
└── utils 工具文件, 其中包括配置 阿里 oss 相关信息
  • public 里面主要存储了 几个与 sharp 相关的 libvips 文件, 因为有的时候网络不佳, 安装 strapi 依赖会报错, 直接使用本地的文件

  • utils 里面可配置 阿里 OSS 或者其他对象存储, 其他存储配置信息不一定与阿里的相同

dzz

2021/03/17  阅读:7  主题:默认主题

作者介绍

dzz