夢幻西遊手遊煉藥信息採集系統（Node.js+Express+Bower+Bootstrap+Mongodb+Mongoose）

時間 2019-12-06

標籤夢幻遊手信息採集系統 node.js+express+bower+bootstrap+mongodb+mongoose node express bower bootstrap mongodb mongoose 欄目網絡爬蟲简体版

原文原文鏈接

夢幻西遊手遊煉藥信息採集系統

1、初衷

本文不是軟文！！！本文不是軟文！！！本文不是軟文！！！文章開始重要的事情說三遍！！！
初中時玩一款網易的遊戲叫《夢幻西遊》，前兩天看朋友在玩《夢幻西遊手遊》，因而下下來緬懷一下，衆所周知，玩夢幻是須要人民幣的，像我等窮屌一分錢不花的在遊戲裏是步履維艱的，因而在裏面找尋商機，囤貨賺差價這種高級的玩不來，就學了箇中醫藥理，俗稱煉藥。

煉藥是什麼機理呢，我有八種原材料，其中初級的四種，高級的四種，挑選其中四個做爲煉藥的配方，能夠重複添加，而後進行煉製，煉製的結果有兩種，成功和失敗，失敗就是煉製出金創藥，成功就會煉製出另外四種三級藥，煉製出來的三級藥也根據種類和品質的不一樣而賣出去的價錢不一樣。可是隻要煉製成功就有錢賺，因而問題就簡化爲了求哪四個二藥組合起來的配方使獲得三級藥的成功率最高！
固然網上的攻略都不靠譜，也沒有大量的實踐佐證，因而身爲程序猿就在想能不能收集大量的數據而後經過數據挖掘的算法或者BP神經網絡來分析一下最優配方，哪怕算法行不通，最後用統計學的方式來看機率也行。
因而開始慢慢的記錄每次煉藥的數據，開始是這樣的，放在印象筆記中：

直到昨天和小夥伴商量算法的事兒，以爲這樣錄入數據效率過低了，也不直觀，後期也不方便用，因而就想到先寫個網站進行數據採集，等着能夠放到公網上讓你們一起來增長數據。因而問題就成了寫個網站錄入數據，又不想寫傳統的LAMP，因而就想用最近學到的NodeJS+Express+Bower+Bootstrap+MongoDB+Mongoose,好，開擼。javascript

2、環境搭建

先裝MongoDB，有了XCodeGhost的教訓，你們記得要去官網哦，https://www.mongodb.org/
再裝數據庫的可視化工具，我可不是用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/
裝完啦，先開始訪問一下數據庫能不能行。css

3、數據庫

1.開啓服務

首先建立數據庫文件存放的目錄，不然服務不能啓動，我是放在了E:\mongodb\data\db
而後進入mongodb的bin目錄下，按住shift右鍵，在此處打開命令行，呼出cmd
mongod --dbpath "E:\mongodb\data\db" --logpath "E:\mongodb\data\log\MongoDB.log" --install --serviceName "MongoDB"
log的目錄應該能自動建立，不能建立的話建立一下，這種是把mongodb做爲win服務的形式，我的比較喜歡，設爲手動服務後省的之後每次敲命令。html

2.鏈接數據庫

啓動robomongo，給鏈接起個名字，其餘的默認就能鏈接上，連上以後是這個樣子的，下面那個是我後來創建的：

好了，數據庫的內容先告一段落。前端

4、Express

開始寫先後端啦，先下載Express，進到git shell裏
npm install express -g -g是將express安裝到全局
而後坑就來啦，以前建立express項目都是express app可是如今會報錯，找不到命令，那是由於XXXX，解決方式就是再下載個插件
npm install express-generator -g
而後就能夠快樂的 express medicine 啦，medicine是個人項目名稱
而後就呼啦生成了一堆目錄，最後會有提示，讓你

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

順道把個人文件目錄附上吧
java

5、Bower+Bootstrap

直接改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文件changenode

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中寫界面啦，剛開始確定很是醜啦，一切從簡，之後再改jquery

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 請選擇三藥及品質：
    p
    select.form-control#three
      option 金瘡藥
      option 定神香
      option 五龍丹
      option 金香玉
      option 九轉還魂丹
    p
    .form-group
      input.form-control#quality(type='text',placeholder='輸入品質')
    hr
    button.btn.btn-default#sub 提交

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

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

6、JavaScript部分

想法是，定義一個四個元素的數組，點擊上面8中原料的時候執行數組的尾插入，頭拋掉，也就是隻能放四個，而後在頁面中顯示出來，煉藥完以後選擇生成的三藥，而後輸入品質，而後點擊提交經過ajax發送到後臺
這是change.js的內容github

$(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的思路上面說了，如今就來講說這個坑，注意我用的是$.ajax不是$.post，由於必須得進行一些參數控制，向後臺發送的必須是標準JSON格式的，不然後端的解析會有問題
主要是
data: JSON.stringify({"materias":materias,"three":$('#three').val(),"quality":$('#quality').val()}),
contentType: "application/json",
這兩句，必定要注意，在這裏踩了大坑了，大坑！
具體緣由請戳這個 https://cnodejs.org/topic/54929c5561491ead0cc7bff2
而後數據就發向後臺了，開始寫路由和接受的函數ajax

7、路由及邏輯

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這裏是存數據的方法，後面說，他們說我這個req.body這樣寫很差，我暫時還不會其餘的，先用着

8、DAO

建立一個文件夾models，新建鏈接數據庫的文件mongodb.js

var mongoose = require('mongoose');

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

exports.mongoose = mongoose;

medicine這個數據不存在的話會自動建立，因此數據庫那邊不用管

新增記錄到數據庫的方法在這裏，網上找代碼湊得，能用，後邊再慢慢理解慢慢優化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();

而後就大功告成嘍~
插入條數據試試，robo裏能看到

收工！

9、總結

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

若是文中有對「廣州網易計算機系統有限公司」侵權的行爲，請聯繫我，立馬刪文。ifibercc@gmail.com