传统开发模式做项目
使用模板引擎,在静态页面中书写js逻辑,所以项目中需要使用模板引擎
步骤:
-
将做的项目src放到project中
在project中 进行项目初始化
npm init -y
-
下载依赖的模块:
需要用到的
npm i express art-template express-art-template cookie-parser body-parser bcryptjs mysql svg-captcha
-
就在src所在文件夹中新建app.js用来创建服务器
// 创建服务器 const express = require('express') const app = express() app.get('/',(req,res)=>{ res.send('服务器搭建成功') }) app.listen(3000)
-
在package.json文件中配置启动项目的命令:
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"nodemon app.js" },
-
启动服务器
npm start
再打开浏览器测试:http://localhost:3000
服务器就搭建成功了…
-
静态资源托管:
app.use('/src', express.static('src'))
打开浏览器:就可以访问项目的index.html
-
设置模板引擎,处理 / 路由请求的时候,将首页的html模板渲染到浏览器中
配置模板引擎:
因为需要用到path ,先导入
const path = require('path')
然后配置模板引擎
// 配置模板引擎 app.engine('html',require('express-art-template')) app.set('views',path.join(__dirname,"template")) app.set('view engine','html')
处理 / 路由渲染index模板:
需要将 res.end改为 res.render
// 处理首页 app.get('/',(req,res)=>{ res.render("index") })
但是,现在在template模板文件夹下没有index这个模板,所以,从src中将index.html剪切到了template文件夹下了
测试访问 :http://localhost:3000
home.html中的标签能显示,但是js和css以及img都没有。
查看这些静态资源的路径:
-
normalize.css的路径:/node_modules/normalize.css/normalize.css
-
bootstrap的路径:/node_modules/bootstrap/dist/css/bootstrap.min.css
-
jquery的路径:/node_modules/jquery/dist/jquery.min.js
-
layer的路径:/node_modules/layui-layer/dist/layer.js
上面的路径都是由/node_modules开头的,一次性处理掉
定义中间件:
// 处理 /node_modules开头的路由 app.use('/node_modules',nodeModuleRotuer)
处理这个请求的路由模块nodeModuleRotuer不存在,导入他
const nodeModuleRotuer = require('./router/nodeModule.js')
对应的文件还不存在,在src所在文件夹中新建了router文件夹,在这个router文件夹下,新建了nodeModule.js文件:
const express = require('express') const router = express.Router() // 只要是经过前面的中间件 /node_modules来到这里的,只要是使用 /node_modules开头的路径,我们在这里处理 router.use('/',(req,res)=>{ // 具体处理应该是读取对应的文件并响应出去 // 并没有这些文件 - jquery、normalize.css、layer这些文件,我们还没有下载 }) module.exports = router
先下载项目中依赖的模块:
npm i jquery bootstrap@3 layui-layer normalize.css
下载好以后,就可以读取了
然后再对这些路由进行响应处理
nodeModule.js
const express = require('express') const router =
-