概述
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 即可访问自己搭好的服务器
二、引入静态资源、模板引擎配置
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
在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
三、设置路由和页面
现在我们假如要展示一个商品列表页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 即访问到了编辑商品页
于是,基本框架就实现了,同理可以设置用户中心、新闻页面的路由,页面样式布局可以参考网上模板修改一下内容即可