一般来说建站工具大多提供的功能及需求分析(组图)

随着互联网的飞速发展，越来越多的传统业务转移到了线上。商家迫切需要一个官方网站来介绍他们的产品并增加他们的知名度。因此，“建站”就成了刚需。本文提供了有关如何使用 Vue.js 实现网站应用程序的解决方案。

作为前端工程师，相信大家都写过很多网站和应用。我只是将网站分为“展示性”和“操作性”。绩效型可以是产品介绍网站，运营型的典型代表是管理后台。不久前，我有机会参与了一个网站建设项目的设计和开发。属于运营型网站，但需要更深层次的抽象。它是一个“网站创建网站”。本文尝试基于 Vue.js 框架设计和实现这样一个应用程序。用户可以通过拖放模块来构建网站。希望通过这篇文章的介绍，能给大家带来不一样的视角。

需要

获取需求是启动项目的第一步。一般来说，大多数网站建设者都提供以下功能：

需求分析

在开始之前，我们可以先分析需求。

从需求中可以提取出几个关键词：“模板”、“主题颜色”、“模块”、“页面”、“列”。明确这些关键词的含义，将有助于我们接下来的设计。

网站的数据表示

所以问题是，我们应该如何存储我们的网站？换句话说，数据库中存在什么样的数据结构？它是一个包含 HTML 的超大字符串吗？别着急，根据上面的关键字定义我们可以总结一下：

一个网站包含几个页面，一个页面包含几个块，一个块包含几个模块。可以看出这是一个树形结构，见下图。

在 JSON 格式中，它可以表示为

{  "id": 1,  "name": "xxx公司"  "type": "site",  "children": [{    "type": "page",    "name": "首页",    "children": [{      "type": "section",      "name": "公司简介",      "children": [{        "type": "paragraph"      }, {        "type": "carousel"      }]    }]  }]}

那么模块就是树中的叶子节点。需求要求模块可以配置。我们可以将配置分为两部分： ()和()。例如，轮播模块存储了多张图片的URL，可以是轮播切换的动画效果、是否开启自动播放等设置。与模块一样，站点、页面都是树中的所有节点，并且可以根据需要将总和添加到节点中。只是对于这些类型的节点，只有属性。主题颜色是网站节点的配置项，可以通过在网站中添加属性来表示。如何支持手持设备？如前所述，模板定义了板的水平比例，因此可以在板的属性中配置不同尺寸板的横向比例。如果使用12条网格系统，可以轻松设置达到目的。例如中的=”col-xs-12 col-sm-6 col-md-3″ 表示该横向占据手机下方100%，平板50%，平板25%个人电脑。

总之，一个网站可以完全表示为一棵树 JSON。此树包含所有页面、部分和模块的内容和配置。

从数据到网站

我们已经有了网站的数据表示，那么接下来的问题是如何从数据中渲染网站并呈现给用户？事实上，我们只需要想出一种方法来渲染这个 JSON 树。

两步：

为每个节点编写代码，每个节点接受节点属性并遍历JSON树，在对应位置渲染对应节点（即父子节点的包含关系）

第一步是“体力劳动”。以下是单段落文本模块的示例：

<template>  <div>    <h1 :style="{color: themeColor}">{{node.content.title}}h1>    <small v-if="node.config.showSubTitle">{{node.content.subTitle}}small>    <p>{{node.content.detail}}p>  div>template><script>export default {  name: 'paragraph',  props: ['node', 'themeColor']}script>

写完所有节点代码后，第二步，我们需要写一个类似“”的组件，递归渲染JSON树。基本思想是组件先渲染自己，然后渲染它的后代，每个后代重复这个渲染过程，从而渲染整个树。

这里需要根据节点的type属性获取对应的组件定义，即为一。好在 Vue.js 中已经有了这样一个动态组件，并且这个组件的 is 属性接受了一个。由此我们的组件可以这样写：

<tempplate>  <component :is="node.type" :node="node" :theme="themeColor">    <render v-for="child in node.children" :key="child.id" :node="child" :theme="themeColor" />  component>tempplate><script>// 导入JSON 树中所涉及的所有节点import Page from './Page.vue'import Section from './Section.vue'import Paragraph from './Paragraph.vue'export default {  name: 'render',  props: ['node', 'themeColor'],  components: {    Page,    Section,    Paragraph  }}script>

注意：如果 Vue.js 不提供动态组件，我们也可以使用 Vue.js 中的方法自己实现组件，详情见此要点（/-/）。

至此，我们已经设计好了网站的数据表示，以及从数据到页面的渲染。那么这个 JSON 树是从哪里来的呢？

编辑并保存

用户在创建网站时，需要经过选择模板站、调整色调、拖放模块、编辑模块内容和配置、后台保存等操作。值得注意的是，这里用户选择的模板站点与文章开头的模板定义有些不同。如果模板是网站的骨架，那么板站是填充了初始数据（默认颜色、板中包含的模块以及模块的默认内容）的模板。

从数据的角度来看，这些步骤如何逐步生成这棵树变得更加清晰。

界面操作影响数据选择模板（模板站点）模板定义的初始树，包括默认色调和模块选择色调更新站点。将模块拖放到相应数组的区域中。push 一个组件节点在区域中排序 模块在对应的数组中重置组件节点的编辑模块内容和配置。更新对应模块sum中的属性，并保存网站以将JSON树存储在数据库中以进行持久化

现在选择了Vue.js，我们可以选择官方推荐的Vuex（/en/）来管理状态。

首先创建一个 Vuex 实例，其中包含一个站点对象和节点上的一些操作：

// store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  state: {    site: {}  },  mutations: {    changeThemeColor () {},    addModule () {},    sortModule () {},    removeModule () {},    updateModule () {}  },  actions: {    getSite () {},    saveSite () {}  }})

理论上，通过这些方法，我们可以通过编程的方式更新树，但作为编辑后台，我们还需要提供一些界面入口供用户编辑树。

也就是说，我们需要在编辑后台渲染一个可编辑的网站，在网站上线后渲染一个只读网站，也就是同一个JSON树需要渲染两次。因为对应的组件是根据节点的类型来渲染的，所以对于编辑背景，我们需要为每个节点取另一种类型，比如添加前缀edit-。比如这个组件的编辑组件可以这样写：

<template>  <edit-wrapper>    <paragraph :node="node" :themeColor="themeColor" />  edit-wrapper>template><script>// EditWrapper提供统一的编辑入口，内部仍需要渲染一次 Paragraph 便于实时预览编辑结果import EditWrapper from './EditWrapper.vue'import Paragraph from './Paragraph.vue'import { mapMutations } from 'vuex'export default {  name: 'edit-paragraph',  props: ['node', 'themeColor'],  methods: { ...mapMutations(['updateModule']) }}script>

用户可以通过该组件的界面入口编辑该模块（edit-的实现这里省略，其实可以通过弹窗和表单来实现对组件的编辑，也可以更方便）。

这样，每个模块都有一个对应的编辑模块，并且在渲染两次的时候有一个转换过程。假设数据库中存储了一个只读树，在编辑后台获取树时，需要将其转换为可编辑树，以渲染带有编辑条目的网站，保存时需要转换成只读树保存。转换过程其实很简单，只需要添加或删除每个节点的type属性的前缀即可。

拖放功能

我们使用拖放将模块添加到区域并对模块进行排序。有很多开源库可以帮助我们实现拖放，甚至是 Vue.js 的打包。Vue。这里推荐使用(//Vue.)库，它是基于.js的一层封装。其典型应用场景如下：

<draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false">   <div v-for="element in myArray">{{element.name}}div>draggable>

在我们的场景中，只需要监听组件上的 add 和 sort 事件调用中的相应方法即可。

如本节表格所述，拖放只是界面上的一种操作方法，本质上是对数组中的元素进行添加和调整的操作。

变化检测

为了及时保存用户的编辑，我们可以在用户修改主题颜色、编辑模块、删除模块等时自动保存。本质上是需要检测站点状态的变化。Vuex 中的 () 可以做一些操作，比如日志记录和对变化的持久化。我们可以写一个插件来实现它。

// store.jsconst autoSave = (store) => {  store.watch(    state => state.site,    (newV, oldV) => {      store.dispatch('saveSite')    },    { deep: true }  )}const store = new Vuex.Store({  state: {      site: {}  },  plugins: [autoSave]})

至此，我们已经使用Vue.js及相关技术实现了文章开头列出的网站应用需求。

结语

本文从需求分析、方案设计、编码实现等方面介绍了使用 Vue.js 编写网站应用程序时可能遇到的问题和一般思路。可以看出，这篇文章是专门讲数据的，包括数据格式设计、数据操作、数据变化检测等。这是因为 Vue.js 框架帮助我们完成了从数据到界面的渲染以及数据变化后界面的更新。我们需要做的是管理数据。Vue.js 框架分担了我们的工作，提高了开发效率，让我们可以专注于业务逻辑设计，这也是框架价值的体现。