HTML5 Visual Editing System
Switch branches/tags
Nothing to show
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
frontend add files May 21, 2017
log add files May 21, 2017
server determine if the folder exitsts Jun 9, 2017
temp add files May 21, 2017
.gitignore add files May 21, 2017
README.md update Jun 1, 2017
app.js add files May 21, 2017
config.js add files May 21, 2017
package.json add files May 21, 2017

README.md

HTML5 可视化编辑系统

类似易企秀的简易版H5可视化制作工具

视频演示地址(http://www.bilibili.com/video/av10569720/)

预览图

首页

作品管理 作品编辑

预览作品:

预览作品

技术栈

Vue + Node.js + MongoDB

前端

  • Vue
  • Vuex
  • vue-router
  • Swiper

后台:

  • Express
  • Mongoose

项目结构

前端代码: frontend/文件夹

后台代码: server/ 文件夹

启动文件: app.js

安装依赖

# 进入根目录
cd myh5

# 安装后台依赖
npm install

# 进入前端项目
cd frontend

# 安装前端依赖
npm install

数据库

数据库配置文件: server/db/config.js

module.exports = {
    host: 'localhost',
    port: 27017,
    database: 'myh5'
};

database为数据库名,请确保myh5数据库创建成功后再启动后台!

启动

cd myh5

# 启动后台
npm run dev

cd frontend

# 启动前端
npm run dev

浏览器访问http://localhost:8081

跨域代理

项目采用前后端分离,前端开发时开启一个临时服务器,监听8081端口,后台开发时,监听9099端口。

为使前端可以访问后台提供的api接口,利用vue-cli提供的proxyTable进行跨域代理,详见文件frontend/config/index.js

proxyTable: {
      '/apis': {
        target: 'http://localhost:9099/apis',
        changeOrigin: true,
        pathRewrite: {
          '^/apis': ''
        }
      }
}

前端打包

cd frontend
npm run build