zoukankan      html  css  js  c++  java
  • 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文件,保存之后,会直接自动打包,刷新后可以直接渲染更新到到页面上!

  • 相关阅读:
    HDOJ/HDU 2560 Buildings(嗯~水题)
    HDOJ/HDU 2555 人人都能参加第30届校田径运动会了(判断加排序~)
    POJ1703Find them, Catch them
    BZOJ2303: [Apio2011]方格染色
    BZOJ2809: [Apio2012]dispatching
    POJ1611The Suspects
    BZOJ2006: [NOI2010]超级钢琴
    BZOJ2288: 【POJ Challenge】生日礼物
    BZOJ1150: [CTSC2007]数据备份Backup
    洛谷P1316 P1824
  • 原文地址:https://www.cnblogs.com/QH-Jimmy/p/6508945.html
Copyright © 2011-2022 走看看