vue爬坑记:利用node搭建express服务

第一步

npm install express-generator -g

安装完之后检测版本

express --version

第二步:在根目录运行

express server

安装完成后显示为
这里写图片描述

安装依赖

文件位置:根目录下package.json

"dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.2",
    "vue-lazyload": "^1.2.6",
    "vue-router": "^3.0.1",
    //添加下面的记得删除改行
    "body-parser": "~1.16.0",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "jade": "~1.11.0",
    "morgan": "~1.9.0"
  },

启动server

这里写图片描述

启动成功的显示

这里写图片描述

使用HTML模板渲染后端

根目录下运行

npm install ejs --save

根目录/server/app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
//添加这一个 -start
var ejs = require('ejs');
//添加这一个 -end
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
//使用html -start
app.engine('.html',ejs.__express);
// app.set('view engine', 'jade');
app.set('view engine', 'html');
//使用html -end

根目录/server/views 下删掉.jade文件.新建index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h2>hello express</h2>
</body>
</html>

验证启动

根目录下

node server/bin/www

启动成功
这里写图片描述

猜你喜欢

转载自blog.csdn.net/webfullstack/article/details/80747616