项目运行准备工作

常用命令

• nodejs项目编译运行
  假设项目存放在目录： D:\project\gouwu 中。
  1、打开 cmd，输入：

//代码清单 1.1.1
$ d: //回车，切换到项目所在盘
$ cd D:\project\gouwu  //回车，进入项目目录
$ npm start //回车，启动项目

若成功启动，则会看到以下类似信息：

 [email protected] start D:\project\gouwu
 forever start ./bin/www
warn:    --minUptime not set. Defaulting to: 1000ms
warn:    --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms
info:    Forever processing file: ./bin/www

至此，打开浏览器访问 localhost:8096(端口号8096在项目下 app.js中设定，可自行修改)即可浏览网页

如果对js文件进行了修改，则在运行了以上代码清单1.1.1 之后，再输入：

$ forever restartall  //回车，重启nodejs服务

刷新网页即可看到更改生效。以下介绍2个 forever常用命令：

$ forever list //查看 forever服务清单
$ forever cleanlogs  //Deletes all historical forever log files 清除所有forver 日志文件

更多 forever相关说明，打开官网 https://www.npmjs.com/package/forever 查看

• fis3进行压缩
  把 FIS3 配置文件（默认fis-conf.js）放在项目根目录（已配置好压缩css，js），打开cmd进行一下操作：

//代码清单 1.1.2
$ d: //回车，切换到项目所在盘
$ cd D:\project\gouwu  //回车，进入项目目录
$ fis3 release -d ../output  //回车，即对项目gouwu进行压缩，将在 D:\project\ 目录生成 一个output文件夹，该文件夹即为发布项目

---

拉取项目源代码：

• 安装 git
  打开 https://git-for-windows.github.io/ ， 点击Download下载安装git
• 安装git可视化工具（可选）
  打开 https://tortoisegit.org/download/， 选择相应版本安装

安装 node.js

打开 https://nodejs.org/en/ ，下载V6.10.0LTS版本，安装

检测node是否安装成功：win+R 运行cmd, 输入 node -v 回车，显示版本号即表示成功
检测npm 是否安装成功：win+R 运行cmd, 输入 npm -v 回车，显示版本号即表示成功

安装构建工具 fis3

安装教程 http://fis.baidu.com/fis3/docs/beginning/install.html，

安装好Node和NPM后， 在cmd下输入 npm install -g fis3 回车

安装完成后执行fis3 -v 判断是否安装成功，如果安装成功，则显示类似如下信息：

$ fis3 -v
 [INFO] Currently running fis3 (/Users/Your/Dev/fis3/dev/fis3)

  v3.0.0

   /\\\\\\\\\\\\\\\  /\\\\\\\\\\\     /\\\\\\\\\\\
   \/\\\///////////  \/////\\\///    /\\\/////////\\\
    \/\\\                 \/\\\      \//\\\      \///
     \/\\\\\\\\\\\         \/\\\       \////\\\
      \/\\\///////          \/\\\          \////\\\
       \/\\\                 \/\\\             \////\\\
        \/\\\                 \/\\\      /\\\      \//\\\
         \/\\\              /\\\\\\\\\\\ \///\\\\\\\\\\\/
          \///              \///////////    \///////////

使用教程 http://fis.baidu.com/fis3/docs/beginning/intro.html

现有项目中的使用方法：

1、把 FIS3 配置文件（默认fis-conf.js）放在项目根目录（已配置好压缩css，js）。
2、cmd 进入到项目文件夹 例如 E:\git-project\Web.Mobile
3、在cmd 输入 fis3 release -d ../output回车，即进行发布，发布成功会在上一级目录生成一个output文件夹

---

H5项目说明

• 活动页

页面在 activity文件夹下创建，对应的css在Content文件夹下的activity文件夹中创建和页面同名的样式文件，js则在 scripts文件夹下的 activity文件夹中创建和页面同名的脚本文件。相应地，图片则在 images文件夹下的 activity文件夹中创建和页面同名的文件夹用来存放该活动的图片。

活动页面中，位于页头的js代码需要修改以下分享活动的相关参数

  var domain = "http://m.biyabi.com/";
  var title = "3月约惠时尚女王，惊喜限时满减";   //标题
  var content = "口碑热单品抢先知，最高满2000优惠100元，马上看>>";  //内容
  var openUrl = "https://m.xxxxxx.com/activity/fashionqueen.html";    //分享的页面地址
  var image = "https://m.xxxxxx.com/images/activity/fashionqueen/fashionqueen_icon.png"; //分享的小图标

title：分享的标题，需要小编提供相关文案
content：分享的内容，需要小编提供文案
openUrl：更换为本次活动的线上Url
image：路径替换为本次活动使用的转发图(widht:200px,height:200px，由运营部提供该图)

分享活动成功调用以下方法，如有相关接口，则修改相关ajax，如无则注释该函数体相关内部代码，只留下方法声明和操作关闭弹窗等的代码

function shareSuccess() {
    if (typeof (userInfo) == 'undefined' || userInfo == undefined) {
        userInfo = getUserInfo();
        //需登录权限验证，未登录则跳转到登录页面，不用公用方法，以减少请求接口次数
        if (typeof (userInfo) == 'undefined' || userInfo == undefined) {
            localStorage.returnUrl = window.location.href;
            window.location.href = '/userlogin';
            return false;
        }
    }

    var activityUrl = "http://192.168.1.86:8082/";
    var postData = {
        userId: userInfo.iUserID
    };
    $.ajax({
        type: 'post',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(postData),
        url: activityUrl + 'activity/panicBuyShare',
        success: function (data) {
            if (data.code == 200) {
                alert("分享成功！");
            } else {
                //alert(data.message);
            }
        },
        error: function () {
            //alert("网络错误，请重试");
        }
    });

    $(".popup-mask,.popup,.popup-success,.popup-cash-gift,.popup-logister-gift,.popup-weixin").fadeOut(500);
    $("body").css("overflow-y", "auto");
}

方法声明如下

function shareSuccess() {
    $(".popup-mask,.popup,.popup-success,.popup-cash-gift,.popup-logister-gift,.popup-weixin").fadeOut(500);
    $("body").css("overflow-y", "auto");
}

####### 活动页在页尾添加统计相关代码

以上只是示例代码，实际代码请在已有页面中拷贝，或直接引用publicBaidu.js文件，该文件为统计相关模块

---

关于公用文件

• js公用文件

public.js，该文件包含统计代码模块，接口地址配置模块，还定义了一些全局方法

//接口地址全局变量
var ajaxUrl = "https://openapi.xxxxxx.com/webservice.asmx/";
var apiUrl = "https://openapi.xxxxxx.com/api/Page/App/";
var payUrl = "https://openapi.xxxxxx.com/webservice.asmx/";

常用方法：

• getUserInfo()，若用户已登录，返回用户信息，否则返回 undefined，可据此进行验证用户是否登录
• GetQueryString(name)，//获取url参数：参数为参数名称，例如url为 /product.html?id=30888，调用 GetQueryString("id")则返回 30888

gouwu项目说明

项目使用Nodejs作为中间层开发，从数据接口获取数据进行页面渲染后响应到浏览器。
express 框架为基础，使用hbs模板进行数据组装，下面讲解搭建过程：
1、安装 express

$ mkdir express  //新建一个文件夹，
$ cd express  //进入目录
$ npm install -g express-generator@4  //安装express
$ express gouwu //express创建 gouwu项目
$ cd gouwu  //进入项目
$ npm install  //安装依赖
$ npm start   //开启服务

在浏览器访问 http://localhost:3000/ ，可看到默认express项目的helloWorld

参考链接：NodeJs本地搭建服务器
参考链接：nodejs的express使用介绍