传统开发模式做项目：手把手教你，直击实战项目。

传统开发模式做项目

使用模板引擎，在静态页面中书写js逻辑，所以项目中需要使用模板引擎

步骤：

1. 将做的项目src放到project中

   在project中 进行项目初始化

   npm init -y
   

2. 下载依赖的模块：需要用到的

   npm i express art-template express-art-template cookie-parser body-parser bcryptjs mysql svg-captcha
   

3. 就在src所在文件夹中新建app.js用来创建服务器

   // 创建服务器
   const express = require('express')
   const app = express()
   app.get('/',(req,res)=>{
        
       res.send('服务器搭建成功')
   })
   app.listen(3000)
   

4. 在package.json文件中配置启动项目的命令：

   "scripts": {
        
       "test": "echo \"Error: no test specified\" && exit 1",
       "start":"nodemon app.js"
   },
   

5. 启动服务器

   npm start
   

   

   再打开浏览器测试：http://localhost:3000

   服务器就搭建成功了…

6. 静态资源托管：

   app.use('/src', express.static('src'))
   

   

   打开浏览器：就可以访问项目的index.html

   

7. 设置模板引擎，处理 / 路由请求的时候，将首页的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 =