概述

express+nodejs+模板引擎，手动搭建后台管理框架，主要有以下几个大概步骤：

安装express，配置主文件app.js

引入静态资源、配置模板引擎

设置路由、写页面

一、安装express，开始

1、自行创建一个项目文件夹（pro文件夹），在文件夹中打开终端

运行 下面代码初始化 ，会生成package.json

npm init -y

然后全局安装（安装过全局的不用再安装，没有装过的第一次要装，本人已装过，所以没有这句）  

     npm i express -g

安装依赖    

npm i express -D

安装示例

2、在文件夹中创建app.js，在其中做以下配置：

const express = require('express');    //引入express模块

const app = express();

app.get("/",(req,res)=>{ res.send("你正在访问已创建好的服务器")})

app.listen(3001, () => { console.log('the server is running on port 3001'); }) 

//服务器端口号为3001，也可以是其它的，如3000、8000等

以上代码完成保持，然后在命令窗口运行app.js就开启了一个简单服务器！

在浏览器中打开    localhost:3001    即可访问自己搭好的服务器

app文件

命令行运行

浏览器访问

二、引入静态资源、模板引擎配置

1、在pro中创建文件夹public文件夹和static文件夹

在app.js文件中写入

app.use("/",express.static("./static"));

app.use("/",express.static("./public"));

现在在static和public文件夹中的html文件或静态文件可以在根目录下正常访问，如public中有home.html文件，可直接在浏览器中打开localhost:3001/home.html访问

2、安装配置模板引擎ejs

在终端  ctrl+c  结束刚才开启的服务器，然后安装 ejs

npm i ejs

安装ejs

在app.js中配置模板引擎、模板文件路径，并在pro文件夹中创建views文件夹

app.set("view engine","html");

app.set("views","./views");//设置模板文件路径

app.engine("html",ejs.renderFile);

【注】：此处设置模板引擎为html文件，express脚手架中是ejs文件

3、因为每次修改app.js都要再重启服务器，所以可以安装，nodemon实时监听运行app.js文件，当修改app.js内容后就不需要一直在命令行中重新运行app.js了

打开命令窗口，安装nodemon

npm install nodemon -g

app.js

三、设置路由和页面

现在我们假如要展示一个商品列表页products、新闻通知页面note、用户中心页面users

以一个商品列表页为例，后台管理需要有展示商品列表页面、编辑商品页面、商品详情页、新增商品页面

1、设置路由

创建routers文件夹，在里面写路由文件：products.js文件

const express = require('express');

const router = express.Router();

router.get('/', (req, res) =>{     // 通过render方法渲染一个视图文件,此处使用ejs模板引擎     res.render('/products', { cont:"商品列表页"})

}）

router.get('/edit', (req, res) =>{     // 编辑商品页面   

    res.render('/products-edit', { cont:"编辑商品页"})

}）

module.exports = router;

【注】：render是渲染页面，第一个参数是要渲染的页面，第二个参数是需要传到页面的参数，可在模板引擎的方法接收生成结构

在app.js中配置该路由：

app.use('/products', require('./routers/products'));    

配置好后，访问products文件就直接可以localhost:3001/products访问了

2、编写页面

创建products.html页面和products-edit.html页面，分别在body中写入

<div>该页面是：<%=  cont %> </div>

【注】：<%=   %>中接受渲染页面时参来的变量进行展示，<%  %>中可写入js逻辑语句，比如列表页渲染时多传入一个参数，生成商品

res.render('/products', {

      cont:"商品列表页" ,

      list:[ {name:"商品1",price:500} , {name:"商品2",price:300} ] 

})

在列表页products.html中写入

<table>

    <% list.forEach(function(item) { %>

        <tr> <td><%=  item.name  %></td> <td><%=  item.price %></td></tr>

    <%  } %>

</table>

保存后，在命令窗口运行app.js

nodemon app.js

然后在浏览器访问localhost:3001/products即访问到了商品列表页

访问localhost:3001/products/edit 即访问到了编辑商品页

于是，基本框架就实现了，同理可以设置用户中心、新闻页面的路由，页面样式布局可以参考网上模板修改一下内容即可