摘要：后天開題答辯了，報告沒整完做，答完再繼續(xù)做。預祝大家游戲玩的開心，代碼寫的順心。先把這第一版放出來，小弟初學此道，還請大家批評指正如果文中有對廣州網(wǎng)易計算機系統(tǒng)有限公司侵權的行為，請聯(lián)系我，立馬刪文。

本文不是軟文！！！本文不是軟文！！！本文不是軟文！！！文章開始重要的事情說三遍！！！
初中時玩一款網(wǎng)易的游戲叫《夢幻西游》，前兩天看朋友在玩《夢幻西游手游》，于是下下來緬懷一下，眾所周知，玩夢幻是需要人民幣的，像我等窮屌一分錢不花的在游戲里是寸步難行的，于是在里面找尋商機，囤貨賺差價這種高級的玩不來，就學了個中醫(yī)藥理，俗稱煉藥。

煉藥是什么機理呢，我有八種原材料，其中初級的四種，高級的四種，挑選其中四個作為煉藥的配方，可以重復添加，然后進行煉制，煉制的結(jié)果有兩種，成功和失敗，失敗就是煉制出金創(chuàng)藥，成功就會煉制出另外四種三級藥，煉制出來的三級藥也根據(jù)種類和品質(zhì)的不同而賣出去的價錢不同。但是只要煉制成功就有錢賺，于是問題就簡化為了求哪四個二藥組合起來的配方使得到三級藥的成功率最高！
當然網(wǎng)上的攻略都不靠譜，也沒有大量的實踐佐證，于是身為程序猿就在想能不能收集大量的數(shù)據(jù)然后通過數(shù)據(jù)挖掘的算法或者BP神經(jīng)網(wǎng)絡來分析一下最優(yōu)配方，哪怕算法行不通，最后用統(tǒng)計學的方式來看概率也行。
于是開始慢慢的記錄每次煉藥的數(shù)據(jù)，開始是這樣的，放在印象筆記中：

直到昨天和小伙伴商量算法的事兒，覺得這樣錄入數(shù)據(jù)效率太低了，也不直觀，后期也不方便用，于是就想到先寫個網(wǎng)站進行數(shù)據(jù)采集，等著可以放到公網(wǎng)上讓大家一塊兒來增加數(shù)據(jù)。于是問題就成了寫個網(wǎng)站錄入數(shù)據(jù)，又不想寫傳統(tǒng)的LAMP，于是就想用最近學到的NodeJS+Express+Bower+Bootstrap+MongoDB+Mongoose,好，開擼。

先裝MongoDB，有了XCodeGhost的教訓，大家記得要去官網(wǎng)哦，https://www.mongodb.org/
再裝數(shù)據(jù)庫的可視化工具，我可不是用cmd的DBA，是弱雞就不要裝逼，挑了款大家說的多的，Robomongo，http://robomongo.org/
再裝Node.js，https://nodejs.org/
由于Node.js需要用命令行，然而win的CMD 不給力，然后就裝個擴展的cmd，正好GitHub的win版本帶著GitHub Shell灰常好用，于是再下個win的GitHub，https://desktop.github.com/
裝完啦，先開始訪問一下數(shù)據(jù)庫能不能行。

首先創(chuàng)建數(shù)據(jù)庫文件存放的目錄，否則服務不能啟動，我是放在了E:mongodbdatadb
然后進入mongodb的bin目錄下，按住shift右鍵，在此處打開命令行，呼出cmd
mongod --dbpath "E:mongodbdatadb" --logpath "E:mongodbdatalogMongoDB.log" --install --serviceName "MongoDB"
log的目錄應該能自動創(chuàng)建，不能創(chuàng)建的話創(chuàng)建一下，這種是把mongodb作為win服務的形式，個人比較喜歡，設為手動服務后省的以后每次敲命令。

啟動robomongo，給連接起個名字，其他的默認就能連接上，連上之后是這個樣子的，下面那個是我后來建立的：

好了，數(shù)據(jù)庫的內(nèi)容先告一段落。

開始寫前后端啦，先下載Express，進到git shell里
npm install express -g -g是將express安裝到全局
然后坑就來啦，之前創(chuàng)建express項目都是express app但是現(xiàn)在會報錯，找不到命令，那是因為XXXX，解決方式就是再下載個插件
npm install express-generator -g
然后就可以快樂的 express medicine 啦，medicine是我的項目名稱
然后就呼啦生成了一堆目錄，最后會有提示，讓你

這個過程就是把項目用到的依賴項下載好，然后把端口和服務打開，于是再瀏覽器輸入localhost:3000，以下就是剛生成的初始頁面

順道把我的文件目錄附上吧

直接改index頁面就好，目前就一個功能，就是選完一堆材料之后用ajax傳到后臺
由于要用到Bootstrap，于是就用bower來管理
npm install bower -g
bower install bootstrap
這樣會順道把jquery下載下來，由于后邊也會用到，就省的下載了
express的默認模板引擎用的是Jade,語法不懂諸位看官自己看去
為了能直接引用bower目錄下的文件，于是在app.js中添加路徑聲明
app.use(express.static(path.join(__dirname, "bower_components")));
在layout.jade模板中引用bootstrap和jquery和我自己的js文件change

doctype html
html
  head
    title= title
    link(rel="stylesheet", href="/stylesheets/style.css")
    link(rel="stylesheet", href="/bootstrap/dist/css/bootstrap.min.css")
  body
    block content
    script(src="jquery/dist/jquery.min.js")
    script(src="/bootstrap/dist/js/bootstrap.min.js")
    script(src="/javascripts/change.js")

jade的縮進也是坑，所以我習慣在sublime中做如下配置
"tab_size": 2,
"translate_tabs_to_spaces": true
然后就可以在index.jade中寫界面啦，剛開始肯定非常丑啦，一切從簡，以后再改

extends layout

block content
  .container
    .h1 煉藥信息采集
    hr
    .h2 請選擇二藥：
    .btn-group
      button.btn.btn-default.two 血色茶花
      button.btn.btn-default.two 仙狐延
      button.btn.btn-default.two 鹿茸
      button.btn.btn-default.two 麝香
    p
    .btn-group
      button.btn.btn-default.two 火鳳之睛
      button.btn.btn-default.two 孔雀紅
      button.btn.btn-default.two 血珊瑚
      button.btn.btn-default.two 鳳凰尾
    hr
    .h2 配方:
    p
    .btn-group
      button.btn.btn-default.mat 五龍丹1
      button.btn.btn-default.mat 五龍丹2
    p
    .btn-group
      button.btn.btn-default.mat 五龍丹3
      button.btn.btn-default.mat 五龍丹4
    hr
    .h2 請選擇三藥及品質(zhì)：
    p
    select.form-control#three
      option 金瘡藥
      option 定神香
      option 五龍丹
      option 金香玉
      option 九轉(zhuǎn)還魂丹
    p
    .form-group
      input.form-control#quality(type="text",placeholder="輸入品質(zhì)")
    hr
    button.btn.btn-default#sub 提交

又是一個坑，之前也沒用過bootstrap，下拉菜單和下拉選擇框傻傻分不清楚，開始竟然寫了個dropdown死活樣式不對。
寫完基本的前端頁面后，預覽一下是這個樣子的：

前端頁面就是 結(jié)構(HTML)+樣式(CSS)+行為(JavaScript)嘛，前兩個搞定了，下面開始行為

想法是，定義一個四個元素的數(shù)組，點擊上面8中原料的時候執(zhí)行數(shù)組的尾插入，頭拋掉，也就是只能放四個，然后在頁面中顯示出來，煉藥完之后選擇生成的三藥，然后輸入品質(zhì)，然后點擊提交通過ajax發(fā)送到后臺
這是change.js的內(nèi)容

$(function(){
  var materias = [0,0,0,0];
  function matInsert(type) {
    for(i = 0;i<3;i++){
      materias[i] = materias[i+1];
    }
    materias[3] = type;
  };
  var two = $(".two");
  var len = two.length;
  for (j = 0; j < len; j++) {
    two[j].index = j;
  }
  two.click(function(){
    matInsert(this.index);
    console.log(materias);
    var mat = $(".mat");
    for(m = 0; m < 3; m++){
      mat.eq(m).html(mat.eq(m+1).html());
    }
    mat.eq(3).html($(this).html());
  });
  $("#sub").click(function(){
    $.ajax({
      type: "POST",
      url: "/change",
      data: JSON.stringify({"materias":materias,"three":$("#three").val(),"quality":$("#quality").val()}),
      success: function(data) { },
      contentType: "application/json",
      dataType: "text"
    });
  });
});

js的思路上面說了，現(xiàn)在就來說說這個坑，注意我用的是$.ajax不是$.post，因為必須得進行一些參數(shù)控制，向后臺發(fā)送的必須是標準JSON格式的，否則后端的解析會有問題
主要是
data: JSON.stringify({"materias":materias,"three":$("#three").val(),"quality":$("#quality").val()}),
contentType: "application/json",
這兩句，一定要注意，在這里踩了大坑了，大坑！
具體原因請戳這個 https://cnodejs.org/topic/54929c5561491ead0cc7bff2
然后數(shù)據(jù)就發(fā)向后臺了，開始寫路由和接受的函數(shù)

app.js中加上
var change = require("./routes/change");
然后routers文件夾下的邏輯change.js

var express = require("express");
var router = express.Router();
var Medicine = require("./../models/Medicine.js");

router.post("/", function(req, res, next) {

  Medicine.save(req.body, function(err){
    if(err) {
      res.send({"success":false,"err":err});
    } else {
      res.send({"success":true});

    }
  });
});

module.exports = router;

Medicine.save這里是存數(shù)據(jù)的方法，后面說，他們說我這個req.body這樣寫不好，我暫時還不會其他的，先用著

創(chuàng)建一個文件夾models，新建連接數(shù)據(jù)庫的文件mongodb.js

var mongoose = require("mongoose");

mongoose.connect("mongodb://localhost/medicine");

exports.mongoose = mongoose;

medicine這個數(shù)據(jù)不存在的話會自動創(chuàng)建，所以數(shù)據(jù)庫那邊不用管

新增記錄到數(shù)據(jù)庫的方法在這里，網(wǎng)上找代碼湊得，能用，后邊再慢慢理解慢慢優(yōu)化Medicine.js

var mongodb = require("./mongodb");

var Schema = mongodb.mongoose.Schema;
var MedicineSchema = new Schema({
    materias : Array,
    three : String,
    quality : Number,
    createDate : {type : Date, default : Date.now}
});
var Medicine = mongodb.mongoose.model("Medicine", MedicineSchema);
var MedicineDAO = function(){};

MedicineDAO.prototype.save = function(obj, callback) {
    var instance = new Medicine(obj);
    instance.save(function(err){
        callback(err);
    });
};

module.exports = new MedicineDAO();

然后就大功告成嘍~
插入條數(shù)據(jù)試試，robo里能看到

收工！

從有想法到做出來差不多歷時一天半吧，由于這些框架全都是第一次用，所以踩坑不少，分享出來只是為了和大家交流以及剛做這個的少踩坑。
目前太簡陋，只是做了一個數(shù)據(jù)記錄功能，接下來還要擴展，增加很多細節(jié)，比如提交的loading效果，把文字全都換成圖片，用個雪碧圖，增加撤銷功能，用grunt或者gulp管理，然后還需要一個數(shù)據(jù)顯示功能，最后還要用Echart把結(jié)果用折線和餅圖展示出來，方便直觀的看到走勢，還有一部分計算將目前成功率最高的進行排行，數(shù)據(jù)挖掘的算法部分還需要跟小伙伴商量。
后天開題答辯了，報告沒整完PPT 做，答完再繼續(xù)做。預祝大家游戲玩的開心，代碼寫的順心。
先把這第一版放出來，小弟初學此道，還請大家批評指正！
https://github.com/ifibercc/mhMedicine

如果文中有對“廣州網(wǎng)易計算機系統(tǒng)有限公司”侵權的行為，請聯(lián)系我，立馬刪文。
ifibercc@gmail.com