编辑页面无法生成网页？

来源：蜘蛛抓取(WebSpider) 时间：2022-11-16 10:31 标签： 生成网页

想必你一定使用过易企秀或百度H5等微场景生成工具制作过炫酷的h5页面，除了感叹其神奇之处有没有想过其实现方式呢？本文从零开始实现一个H5编辑器项目完整设计思路和主要实现步骤，并开源前后端代码。有需要的小伙伴可以按照该教程从零实现自己的H5编辑器。（实现起来并不复杂，该教程只是提供思路，并非最佳实践）

element-ui：不造轮子，有现成的优秀的vue组件库当然要用起来。没有的自己再封装一些就可以了。

koa：后端语言采用nodejs，koa文档和学习资料也比较多，express原班人马打造，这个正合适。
mongodb：一个基于分布式文件存储的数据库，比较灵活。

  • 如何规划好我们项目的目录结构？首先我们需要有一个目录作为前端项目，一个目录作为后端项目。所以我们要对vue-cli 生成的项目结构做一下改造：

// 新增 docs 预留编写项目文档目录

  • 这样的话 我们需要再把我们webpack配置文件稍作一下调整，首先是把原先的编译指向src的目录改成client，其次为了 npm run build 能正常编译 client 我们也需要为 babel-loader 再增加一个编译目录：

按照这个组件开发方式我们可以扩展任意多的组件，来丰富组件库

需要注意的是这里的组件最外层宽高都要求是100%

Quark-h5编辑器左侧选择组件区域可以通过一个配置文件定义可选组件

// 给每个组件配置默认显示样式

公共样式属性编辑比较简单就是对元素JSON对象commonStyles字段进行编辑操作

1.为组件的每一个prop属性开发一个属性编辑组件. 例如：QkText组件需要text属性，新增一个attr-qk-text组件来操作该属性
3.遍历prop对象key, 通过key判断显示哪些属性编辑组件

动画效果引入Animate.css动画库。元素组件动画,可以支持多个动画。数据存在元素JSON对象animations数组里。

选择面板hover预览动画

组件编辑时支持动画预览和单个动画预览。

// 如果是循环播放就将循环次数置为1，这样有效避免编辑时因为预览循环播放组件播放动画无法触发animationend来暂停组件动画

执行动画前先将元素样式style缓存起来，当动画执行完再将原样式赋值给元素

提供事件mixins混入到组件，每个事件方法返回promise，元素被点击时按顺序执行事件方法

参考百度H5，将脚本以script标签形式嵌入。页面加载后执行。
这里也可以考虑mixins方式混入到页面或者组件，可根据业务需求自行扩展，都是可以实现的。

psd设计图导入生成h5页面

将psd每个设计图中的每个图层导出成图片保存到静态资源服务器中，

加入psd.js依赖，并且提供接口来处理数据

// 转换不出来的图层先忽略

最后把获取的数据转义并返回给前端，前端获取到数据后使用系统统一方法，遍历添加统一图片组件

  • psd源文件大小最好不要超过30M，过大会导致浏览器卡顿甚至卡死
  • 尽可能合并图层，并栅格化所有图层
  • 较复杂的图层样式，如滤镜、图层样式等无法读取

这里只需要注意下图片跨域问题，官方提供html2canvas: proxy解决方案。它将图片转化为base64格式，结合使用设置(proxy: theProxyURL), 绘制到跨域图片时，会去访问theProxyURL下转化好格式的图片，由此解决了画布污染问题。

在engine-template目录下新建swiper-h5-engine页面组件，这个组件接收到页面JSON数据就可以把页面渲染出来。跟编辑预览画板实现逻辑差不多。

然后使用vue-cli库打包命令将组件打包成engine.js库文件。ejs模板引入该页面组件配合json数据渲染出页面

提供两种方案解决屏幕适配
2.全屏背景， 页面垂直居中
因为会存在上下或者左右有间隙的情况，这时候我们把背景颜色做全屏处理

页面垂直居中只适用于全屏h5, 以后扩展长页和PC页就不需要垂直居中处理。

工程目录上文已给出，也可以使用 koa-generator 脚手架工具生成

修改路由的注册方式，通过遍历routes文件夹读取文件

添加jwt认证，同时过滤不需要认证的路由，如获取token

中间件实现统一接口返回数据格式，全局错误捕获并响应

当接口发布到线上，前端通过ajax请求时，会报跨域的错误。koa2使用koa2-cors这个库非常方便的实现了跨域配置，使用起来也很简单

我们使用mongodb数据库，在koa2中使用mongoose这个库来管理整个数据库的操作。

服务端具体接口实现就不详细介绍了，就是对页面的增删改查，和用户的登录注册难度不大

如果没有生成过引擎模板js文件的，需要先编辑引擎模板，否则预览页面加载页面引擎.js 404报错

设定为all：文件将被检索，且页面上的链接可以被查询；
设定为none：文件将不被检索，且页面上的链接不可以被查询；
设定为index：文件将被检索；
设定为follow：页面上的链接可以被查询；
设定为noindex：文件将不被检索，但页面上的链接可以被查询；
设定为nofollow：文件将不被检索，页面上的链接可以被查询。

    注：为避免以后可能发生的亚州大字符集的乱码问题，统一使用UTF8编码。


需要一个非管理员帐号来运行PostgreSQL？
当一个骇客通过软件的缺陷获得了侵入一台计算机的入口时，她获得的是这个程序运行所用用户帐号的对应权限。由于我们无法预知PostgreSQL中是否还存在这样的bug，所以我们强制使用一个非管理员的服务帐号来最小化潜在的骇客利用此类漏洞对系统进行破坏的风险。这样的设置已是Unix界的惯例做法，同时在Windows世界中，Microsoft以及其他供应商也开始采用这样的做法来改进他们系统的安全性。补充: 自PostgreSQL 8.2发行后，从管理帐号启动变得可行。PostgreSQL 8.2及后续版本会在启动后不可撤销地放弃管理权限，从而保证了当极端不可能事件，当PostgreSQL受到入侵时，系统的安全性。

//输入你希望根据页面高度自动调整高度的iframe的名称的列表

我们在数据库插入一条数据的时候，经常是需要返回插入这条数据的主键。但是数据库供应商之间生成主键的方式都不一样。

我要回帖

更多关于 生成网页 的文章

 

随机推荐