手动创建express服务器框架(不用express脚手架)

概述

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

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

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

设置路由、写页面

一、安装express,开始

1、自行创建一个项目文件夹(pro文件夹),在文件夹中打开终端

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

npm init -y

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

     npm i express -g

安装依赖    

npm i express -D

手动创建express服务器框架(不用express脚手架)_第1张图片
安装示例

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    即可访问自己搭好的服务器

手动创建express服务器框架(不用express脚手架)_第2张图片
app文件
命令行运行
手动创建express服务器框架(不用express脚手架)_第3张图片
浏览器访问

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

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

手动创建express服务器框架(不用express脚手架)_第4张图片
安装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


手动创建express服务器框架(不用express脚手架)_第5张图片
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中写入

该页面是:<%=  cont %>

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

res.render('/products', {

      cont:"商品列表页" ,

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

})

在列表页products.html中写入

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

        

    <%  } %>

<%=  item.name  %> <%=  item.price %>

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

nodemon app.js

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

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

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

你可能感兴趣的:(手动创建express服务器框架(不用express脚手架))