梦幻西游手游炼药信息采集系统（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