A simple html page-based activity configuration engine design

A simple html page-based activity configuration engine design
The activity engine can implement relatively fixed functions through simple activity page configuration without writing logic code. It aims to solve the problem of relatively unchanged functions but still occupying development manpower, this solution abstracts self-work projects based on refactoring drafts, that is, html pages, and css styles still require human intervention. However, those components are also changing in general activity pages, this solution is not suitable for users. If someone is constantly engaged in marketing activities and feels boring, try to use workplace for configuration. workplace is a set of customizable configuration interfaces, the following describes the workplace in detail.
Workplace

Workspace is a visual configuration platform that allows you to configure simple pages such as activities. It is a visual working environment built on the activityEngine and configEngine, and outputs the configuration of activityEngine readable. js, and is highly scalable Based on configEngine.

Demo

 

As you can see in the video, I have not written any code and all functions are implemented through configuration.

Here we provide a simple demo address, http: // 115.29.195.88: 86/, for a test page index.html. You can upload the test page down to the demo. You can also directly access http: // 115.29.195.88: 86/workplace.html? Pathpattern %2fbackend%2fhtml%2findex.html to directly experience the configuration environment.

Start

I try to describe how to create a project similar to helloworld in the simplest way.

Upper Limit. Customize your own template. js to customize your own activityEngine. js to configure the first activity

You can complete the configuration of an activity in these five steps. If the function of your activity page is relatively fixed, the previous four steps are all done once and for all. Then, you only need to upload different files each time, generate different configurations.

The following describes each step from setting up the node backend.

Build a node Environment

Here we need a simple node http server. Here I use a node_server that I write myself. It supports get and post requests, and static file access is enough. The directory contains a config. js file, which is configured as follows:

// Configure exports for the virtual path. virtualPath = {... 80 :... path... /workplace ...} // processing program configuration exports. handlers = {... 80: function () {var requestHandlers = require (... path... /workplace/backend/requestHandlers); var handles ={}; handles [/cgi-bin/file_upload] = requestHandlers. services. fileUpload; handles [/cgi-bin/draftList] = requestHandlers. services. draftList; handles [/cgi-bin/saveDraft] = requestHandlers. services. saveDraft; handles [/cgi-bin/draft] = requestHandlers. services. draft; handles [/cgi-bin/exports] = requestHandlers. services. exports; return handles ;}...}

After configuration, go to the node_server directory and execute node index. js. At this time, you can

Http: // localhost/to access the workplace. If you get the following picture, congratulations, we will go to the next failover

Customize your own template. js

We first customize an interface to define our operations. After this implementation, we can select the operations we need on the interface, such as opening a new window, let's add an option named "open a new window" and give it a parameter setting panel. The demo code is still used as an example. For more detailed configuration instructions, see configEngine.

Var template = (function () {return {// operation options // name, which corresponds to the actionsTemplate template and has a custom value. If no parameter exists, write no param activEngine. commonOp. alert: holyshit. template. details. alert, activEngine. commonOp. updateUI: holyshit. template. details. updateUI, activEngine. commonOp. openNewPage: holyshit. template. details. openNewPage, activEngine. commonOp. cgi: holyshit. template. details. cgi, // null option: no params }})();

The above code is template. in js, a tool is used to merge template data into js. For more information about how to use the tool, see https://github.com/skyzhou/merger. here, the tool is also available. The following html code is used after each hash key. For example:

activEngine.commonOp.alert:holyshit.template.details.alert
  
    
  

Corresponding code

activEngine.commonOp.alert:

 

It can also be parsed. The tool mentioned above only helps to complete the replacement work. The following code is the html file corresponding to template. js. It can be found in the workplace/template/template.html directory.

 

 
 
 
  

   
  
 
   
 
 
   
Initialization operation:
 
   
 
 
  
  

   
  
 
   
 
 
   
 
 
   
 
 
  
 
 
 
                 
  NonePromptUpdate the UIOpen New PageRequest data        Detailed settings +-
 
 
 
     
  X save
 ......
 
 
 
  
<Script type = text/javascript src = http: // 115.29.195.88: 85/activityEngine. js> </script> <script type = text/javascript src =. /config. js> </script>
  <Script type = text/javascript src = http: // 115.29.195.88: 85/activityEngine_extend_demo.js> </script> <script type = text/javascript> config. activEngine. init (config); </script>
 
 

 

For more information about template configuration, see configEngine. Here is an example.

Customize your own activityEngine

After the options are customized, we also need to implement the functions in the options. This file will be introduced in the output page to provide a part of the activeityEngine extension. The activityEngine consists of the basic activityEngine and the extended activityEngine.Extend architecture. For more information, see https://github.com/alanguo/activityengine._ Extend

Here, the demo extension is used as an example.

// Tool method var util = {returnCode: function (result) {}, tmpl: function () {}} // rewrite the init method, the init method provides the initialization function for page loading. You can customize the initialization function to complete the config. activEngine. extend (function (config) {var _ self = this; this. _ init (config); // extra initialization if (config. options. init) {_self.exe cOperation (config. options. init) ;}}, {type: init}); // extends commonOp. commonOp is a set of common functions in an activity. You can expand your common functions here, this function can be used in workplace to add a config for the button. activEngine. extend ({// update ui updateUI: function (param, context) {document. getElementById (param. elem ). innerHTML = util. tmpl (param. value, {context: context}, {strIsKey: false}) ;}, openNewPage: function (param, context) {window. open (param. location) ;}, alert: function (param, context) {window. alert (param. content) ;}, cgi: function (param, context) {var _ self = this; var cgi = param. cgi; var successStep = param. steps. success; var failStep = param. steps. fail; var inParam = param. inParam; param. method = param. method | get; if (param. method. toLowerCase () = post) {// post throw new Error (no implemented);} else {// get window. _ callback = function (result) {document. body. removeChild (script); if (result. code = 0) {if (successStep) _self.exe cOperation (successStep, result. data);} else if (failStep) {_self.exe cOperation (failStep, result);} else {_ self. coreOp. busy () ;}} var script = document. createElement (script); script. src = cgi; document. body. appendChild (script) ;}}); // codeOp extension. coreOp is a method required by predefined functions. It can be extended or rewritten without parameters, config is not used in this example. activEngine. extend ({}, {type: core });

Note: This file needs to be introduced on the activity page completed later. It provides the implementation of the method configured on the configuration interface.

Configure Activity

At this point, all preparations have been completed. Now you can access http: // localhost/to start it. After uploading html, you can see the following interface. The panel on the left is the template We Just configured, which contains an option for initialization. After the configuration is complete, we will generate the activity to download index.html and config. js. This file is formatted and can still be edited later. Run the command directly, as shown in figure

Okay, enjoy ~