Giter Club home page Giter Club logo

pagemaker_production's Introduction

前端页面制作工具

要是觉得这个项目还不错,别忘记star哦

技术分析,详见我的博客

线上地址:点击这里

一、工程目录分析

  • data是用来存放数据文件的。因为数据比较简单,本项目没有采用数据库,直接用文件方式来存储。
  • files是存放上传文件和下载的中间文件。
  • public是最后打包生成文件的目录
  • release目录是用来存放发布的静态页面目录
  • server是服务端代码
  • src是整个前端工程目录。action和reducer存放在各自文件夹内,index.js是入口文件。fonts文件夹存放字体文件的,采用阿里字体库
  • views存放前端pug模板文件的
  • .babelrc文件是用来配置比如支持es6,es7等最新特性的,react, antd按需加载等。

二、项目运行

进入项目目录

cd pagemaker_production

安装依赖

npm install

如果需要启动node热刷新功能,需要全局安装nodemon

npm install -g nodemon

运行以下命令

npm run server //启动服务器,实时监测后台代码并更新(需要手动刷新页面)

npm run dev //动态监测jsx和.scss文件, 并更新内存里(8080端口)的打包文件,自动刷新页面

npm run build //编译文件到build目录下,打包到磁盘里,对应4000端口

打开浏览器输入http://localhost:4000

注意

1、线上项目的server端采用pm2管理,在开发环境推荐nodemon,需要全局安装。不推荐supervisor,代码错误会一直报错,而且不能选择监控目录。本地调试后台,需要修改package.json里的scripts.server属性为nodemon --watch server server/pagemaker

2、我们的html模板采用pug,首页的模板在views文件夹下的genpages.pug文件。/public/main.js为线上的js地址,如果是本地调试pc页面,改成http://127.0.0.1:8080/public/main.js,css文件一样。如果是调试手机页面或者其他电脑上,改成http://your_ip_address:4000/public/main.js。当然,需要先打包修改的代码。

3、genpages.pug里有一些配置可以选,debugJS参数是开启在移动端调试js的工具。debugCSS_IP参数是开启在移动端调试css的工具,需要传入电脑的ip地址,不传不开启。showProgressBar参数是否显示loading进度条。

4、平台密码初始值是:pagemaker。如需更改,在data文件夹下修改password.json文件内容的value值。我们采用的是bcrypt编码。大家可以去BCrypt Calculator网站,方便计算出编码值。后台密码一样,在data文件夹下的server_code.json文件。

pagemaker_production's People

Contributors

tywei90 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.