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

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

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

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

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

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

啟動(dòng)robomongo，給連接起個(gè)名字，其他的默認(rèn)就能連接上，連上之后是這個(gè)樣子的，下面那個(gè)是我后來建立的：

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

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

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

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

直接改index頁面就好，目前就一個(gè)功能，就是選完一堆材料之后用ajax傳到后臺(tái)
由于要用到Bootstrap，于是就用bower來管理
npm install bower -g
bower install bootstrap
這樣會(huì)順道把jquery下載下來，由于后邊也會(huì)用到，就省的下載了
express的默認(rèn)模板引擎用的是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的縮進(jìn)也是坑，所以我習(xí)慣在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 提交

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

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

想法是，定義一個(gè)四個(gè)元素的數(shù)組，點(diǎn)擊上面8中原料的時(shí)候執(zhí)行數(shù)組的尾插入，頭拋掉，也就是只能放四個(gè)，然后在頁面中顯示出來，煉藥完之后選擇生成的三藥，然后輸入品質(zhì)，然后點(diǎn)擊提交通過ajax發(fā)送到后臺(tái)
這是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)在就來說說這個(gè)坑，注意我用的是$.ajax不是$.post，因?yàn)楸仨毜眠M(jìn)行一些參數(shù)控制，向后臺(tái)發(fā)送的必須是標(biāo)準(zhǔn)JSON格式的，否則后端的解析會(huì)有問題
主要是
data: JSON.stringify({"materias":materias,"three":$("#three").val(),"quality":$("#quality").val()}),
contentType: "application/json",
這兩句，一定要注意，在這里踩了大坑了，大坑！
具體原因請戳這個(gè) https://cnodejs.org/topic/54929c5561491ead0cc7bff2
然后數(shù)據(jù)就發(fā)向后臺(tái)了，開始寫路由和接受的函數(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ù)的方法，后面說，他們說我這個(gè)req.body這樣寫不好，我暫時(shí)還不會(huì)其他的，先用著

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

var mongoose = require("mongoose");

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

exports.mongoose = mongoose;

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

如果文中有對“廣州網(wǎng)易計(jì)算機(jī)系統(tǒng)有限公司”侵權(quán)的行為，請聯(lián)系我，立馬刪文。
[email protected]