express框架搭建

node

请检查是否安装node环境

node -v

请先安装node环境

nodejs.org/en/download…

傻瓜式安装

node -v
v14.17.0 // 请随意选择

express

• 全局安装express-generator

  npm i -g express-generator
  

  检查是否安装正确

  express --version
  

• 创建项目

  express mock
  

  目录结构

  mock
  ​
  ├─ app.js
  ​
  ├─ bin
  ​
  │  └─ www
  ​
  ├─ express.md
  ​
  ├─ package.json
  ​
  ├─ public
  ​
  │  ├─ images
  ​
  │  ├─ javascripts
  ​
  │  └─ stylesheets
  ​
  │   └─ style.css
  ​
  ├─ routes
  ​
  │  ├─ index.js
  ​
  │  └─ users.js
  ​
  ├─ views
  ​
  │  ├─ error.jade
  ​
  │  ├─ index.jade
  ​
  │  └─ layout.jade
  ​
  └─ yarn.lock
  

• 项目安装完毕

• bin/www

  var port = normalizePort(process.env.PORT || '3002');
  app.set('port', port);
  

• app.js配置

  var createError = require('http-errors');
  var express = require('express');
  var path = require('path');
  var cookieParser = require('cookie-parser');
  var logger = require('morgan');
  const os = require('os');
  ​
  var indexRouter = require('./routes/index');
  var usersRouter = require('./routes/users');
  var uploadRouter = require('./routes/upload');
  ​
  var app = express();
  ​
  const ifaces = os.networkInterfaces();
  global.Url = 'http://'
  Object.keys(ifaces).forEach((key) => {
    if (ifaces[key] && ifaces[key].length) {
      ifaces[key].forEach((item) => {
        if (item.address.startsWith('10.10') || item.address.startsWith('192.168')) {
          global.Url += item.address + ':3002'
        }
      })
    }
  })
  ​
  console.log(global.Url)
  ​
  ​
  ​
  // view engine setup
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'jade');
  ​
  app.use(logger('dev'));
  app.use(express.json());
  app.use(express.urlencoded({ extended: false }));
  app.use(cookieParser());
  app.use(express.static(path.join(__dirname, 'public')));
  ​
  ​
  // 跨域配置
  app.use('*', function (req, res, next) {
  ​
    const { origin, Origin, referer, Referer } = req.headers;
    const allowOrigin = origin || Origin || referer || Referer || '*';
    res.header("Access-Control-Allow-Origin", allowOrigin);
    res.header("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With, Admin-Token, Page-Name");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("Access-Control-Allow-Credentials", true);
    res.header("X-Powered-By", 'Express');
  ​
    req.json = {
      code: 0,
      status: 20000,
      message: 'ok'
    }
  ​
    req.sleep = function (time) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve(null)
        }, time * 1000)
      })
    }
  ​
    if (req.method == 'OPTIONS') {
      res.sendStatus(200);
    } else {
      next();
    }
  });
  ​
  // 这种写法请求时必须加上路径名 ；例如/users/user
  // app.use('/', indexRouter);
  // app.use('/users', usersRouter);
  // app.use('/upload', uploadRouter);
  ​
  app.use('/', indexRouter);
  app.use('/', usersRouter);
  app.use('/', uploadRouter);
  ​
  ​
  // catch 404 and forward to error handler
  app.use(function (req, res, next) {
    next(createError(404));
  });
  ​
  // error handler
  app.use(function (err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
  ​
    // render the error page
    res.status(err.status || 500);
    res.render('error');
  });
  ​
  module.exports = app;
  ​
  

• 在浏览器输入地址

  http://192.168.31.224:3002/

  有响应结果即可

nodemon

nodemon 可以让你再修改代码之后，不用重启项目

yarn add nodemon

package.json

"mock": "nodemon ./mock/bin/www" 
"nodemonConfig": {
    "watch": [
      "mock/"
    ],
    "ext": "js"
  }

{
  "name": "mock",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "mock": "nodemon ./mock/bin/www"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1",
    "multer": "^1.4.5-lts.1",
    "nodemon": "^2.0.21"
  },
   "nodemonConfig": {
    "watch": [
      "mock/"
    ],
    "ext": "js"
  }
}
​

启动项目

npm run mock

concurrently

如果要同时启动多个命令（concurrently）

yarn add concurrently

使用方式

"scripts": {
    ...
    "mock": "nodemon ./mock/bin/www",
    "start": "node xxx  && concurrently "npm run mock"  "npm run xxx"",
    ...
  },

编写接口

var express = require('express');
var router = express.Router();
​
/* GET home page. */
router.get('/', function (req, res, next) {
  res.render('index', { title: '测试数据' });
});
​
router.get('/common/index', function (req, res, next) {
  req.json.data = {
    title: 'hello',
    name: 'world'
  }
  req.json.status = 20000
  res.json(req.json);
});
​
module.exports = router;
​

浏览器输入：http://192.168.31.224:3002/common/index

查看网络或者下载浏览器扩展----插件FeHelper查看

再chrome.zzzmh.cn/index#/inde…搜索插件安装扩展即可

{
    "code": 0,
    "status": 20000,
    "message": "ok",
    "data": {
        "title": "hello",
        "name": "world"
    }
}

multer 文件上传

yarn add multer

在routes文件夹下新建文件upload.js

在app.js中配置

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const os = require('os');
​
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var uploadRouter = require('./routes/upload'); // here
​
​
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('./upload', uploadRouter); // here
​

upload.js

注意： 必须在public文件夹下新建upload文件夹

var express = require('express');
var router = express.Router();
const multer = require('multer')
const path = require('path')
​
let storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, path.join(__dirname, '../public/upload'))
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname)
    }
})
​
​
let upload = multer({ storage: storage })
​
// 'file'必须和前端传递一致
router.post('/common/upload-file', upload.single('file'), function (req, res) {
    req.json.data = {
        file_url: global.Url + '/upload/' + req.file.filename,
        file_name: req.file.filename,
        file_size: ''
    }
    res.json(req.json);
})
​
​
module.exports = router;
​

html

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
​
<body>
    <button>选择文件</button>
    <input type="file" style="display: none;" />
</body>
<script>
    const button = document.getElementsByTagName('button')[0];
    const input = document.getElementsByTagName('input')[0];
    button.addEventListener('click', () => {
        input.click();
    });
    input.onchange = function () {
        const file = this.files[0];
        console.log('object', file);
        const reader = new FileReader();
        reader.onload = function () {
            const result = reader.result;
            // file.url = result
            // 预览图片链接
​
        }
        reader.readAsDataURL(file);
        upload(file)
    }
​
    const upload = (file) => {
        const formData = new FormData();
        let obj = {
            // uri: file.uri,
            type: file.type,
            name: file.name,
            size: file.size,
        }
        // 'file'必须和后端一致
        formData.append('file', file);
​
        const xhr = new XMLHttpRequest();
​
        xhr.onload = function () {
            const resp = JSON.parse(xhr.responseText);
            console.log(resp);
        }
        xhr.open('POST', 'http://192.168.31.224:3002/common/upload-file', true);
​
​
        xhr.send(formData);
​
​
        // 注意：featch 上传文件不需要加header
        //  有问题： 果断时间上传文件网络会消息，图片上传不完整
        //  暂时不知为何
        // fetch('http://192.168.31.224:3002/common/upload-file', {
        //     method: 'post',
        //     body: formData,
        //     headers: {
        //         // 'Content-Type': 'multipart/form-data',
        //     },
        // }).then((res) => {
        //     console.log(res);
        // })
    }
</script>
​
</html>
</script>
​
</html>