express紧急回顾随笔

四行代码搭建服务器

      var express = require('express');
      var app = express();
      //设定静态路径 所有请求优先在此路径查找
      //不要把服务器配置JS文件和静态页面放在同一个文件夹！！！！
      app.use(express.static(path.join(__dirname, 'static')));
      app.listen(9000);

常用插件

      //需要npm install
      //可以在服务器打印请求信息 超级好用
      var morgan = require('morgan');
      //就这样调用
      app.use(morgan('short'));

路由(妈个鸡，被坑了一上午)

　　首先是主服务器配置的内容，需要引进对应的专业路由js文件。

      //引入对应的JS文件 可以省略js后缀 因为js会被优先查找
      var apiRouter = require("./router/api_router");
      //注意！！！第一个参数代表对应路径请求转接
      app.use("/index", apiRouter);

　　然后是路由js文件对应的内容。

      //话不多说 先引这两
      var express = require("express");
      var path = require('path');
      //实例化一个路由对象
      var api = express.Router();
      //这个路由处理来自index的post请求
      api.post('/', function(req, res) {
            console.log(req.body);
            res.sendFile(path.join(__dirname, '../static/index.html'));
      });

　　举个例子！

api.post('/', function(req, res) {
    //获取post请求传入的账号密码
    var user = req.body.username,
        password = req.body.password;
    //进行判断 老子还不会数据库啊
    if (user === 'admin' && password === 'admin') {
        //通过 给你index页面
        res.sendFile(path.join(__dirname, '../static/index.html'));
    } else {
        //失败 回去你的login吧
        res.redirect('./login.html');
    }
});

　　又找到一个坑！

//为了解析post 这个需要在主配置中引用
app.use(bodyParser.urlencoded({ extended: false }));

//默认根路径会指向index.html
//需要在前面使用get劫持请求然后重定向
app.get('/', function(req, res) {
    console.log(12);
    res.redirect('./login.html');
});

//设定静态路径 所有请求优先在此路径查找
//不要把服务器配置JS文件和静态页面放在同一个文件夹！！！！
app.use(express.static(path.join(__dirname, 'static')));

　　大功告成，假设静态目录下有login.html和index.html，login中有一个表单，输入账号密码然后post请求index页面，服务器这边就可以在路由里面搞事情处理这个跳转了。更多内容，等我再出bug。

　　发现一个中间件，可以将webpack与node的热加载配合在一起，同时完成打包与页面热加载，吊的1B。

　　话不多说，直接上代码。

//直接引用这个中间件
var webpackDevMiddleware = require("webpack-dev-middleware");
//获取webpack
var webpack = require("webpack");
//配置文件
var compiler = webpack({
    //入口文件为刚才的main.js
    entry: './static/js/main.js',
    //随便找个地方输出
    output: {
        path: path.resolve(__dirname, './static'),
        publicPath: '/static/',

    },
    module: {
        rules: [
            //处理vue单文件
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            //处理import等语法
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
        ]
    },
});
//链接webpack与express
app.use(webpackDevMiddleware(compiler, {
    // options
}));

　　这时候，修改vue文件，保存之后，会直接自动打包，刷新后可以直接渲染更新到到页面上！