营造环境
1.安装Express
键:Windows R=输入cmd,打开命令行,输入
Npm install -g [emailprotected]我们需要在全局模式下安装Express,因为只有这样我们才能在命令行上使用它
注意:我这里只选择了Express 3.x版本。如果你熟悉Express3x版本,只需要看一下从3.x迁移到4.x到过渡到Express 4.x的文档就可以了。
2.创建新项目
继续打开命令行并输入
Express -e murenziwei注意:当ejs在Express 3.x中使用时,它不再是-t ejs,而是-e .您可以输入express -h进行查看
继续输入:(路径切换到文件夹murenziwei)
Cd murenziwei继续进入:(安装所需模块)
Npm安装如图所示
成功安装后输入:
节点应用程序
在浏览器上访问ocalhost:3000,如下所示:
3.项目结构
让我们回头看看生成的项目目录中有什么,打开我们的murenziwei文件夹,如图所示
Node_modules:存储package.json中安装的模块,将依赖模块添加到package.json并安装后,模块将存储在此文件夹中。public:存储图片/样式/脚本和其他文件。路线:存储路线文件。视图:存储视图文件或模板文件。app.js:启动文件。或者条目文件package.json:存储项目信息和模块依赖关系。向依赖项添加依赖模块时,请运行npm install。npm会在当前目录下勾选package.json,自动安装所有指定的模块package-lock.json:记录整个node_modules文件夹的树形结构,加快模块的安装速度。让我们来看看。打开app.js,代码组成是什么?
/*模块依赖关系。*/var express=require(' express ');var routes=require('。/routes’);var user=require('。/routes/user’);var http=require(' http ');var path=require(' path ');var app=express();//all environmentsapp.set('port ',process . env . port | | 3000);app . set(' view ',path.join(__dirname,' view '));app.set('view engine ',' ejs ');app . use(express . fav icon());app . use(express . logger(' dev '));app . use(express . JSON());app . use(express . URL encoded());app . use(express . method override());app . use(app . router);app . use(express . static(path . join(_ _ dirname,' public ')));//development only if(' development '==app . get(' env '){ app . use(express . error handler());}app.get('/',routes . index);app.get('/users ',user . list);http.createServer(app)。listen(app.get('port '),function(){ console . log(' Express server侦听端口' app . get(' port ')));});这里我们通过require()加载express、http、path模块,并在routes文件夹下加载index.js和user.js。
1.app.set ('port ',process.env.PORT | | 3000):将端口设置为process.env.PORT或3000;
2.app。集合('视图',路径。join(_ dirname,' view '):将view文件夹设置为存储视图文件的目录,即存储模板文件的目录,将__dirname设置为全局变量存储当前正在执行js的目录;
3.app.set('视图引擎',' ejs '):将视图模块引擎设置为ejs
4.app . use(express . favicon()):Connect的内置中间件使用默认的fav icon图标。如果您想使用自己的图标,您需要将其更改为app . use(express . fav icon(_ dir name '/public/images/fav icon . ico ')。在这里,我们将自定义的favicon.icon放入/。
5.app。使用(快递。logger ('dev '):连接内置中间件,用于开发环境,在终端显示简单日志。比如启动app.js后,访问localhost:3000,终端会输出:
没有这一行代码,无论您如何刷新页面,终端都只有一行express server侦听端口3000
6 . app . use(express . JSON());
app . use(URL encoded());用于解析请求体,支持application/json、application/x-www-form-URL encoded
7.app。使用(快递。方法override ()): Connect内置的中间件可以辅助处理POST请求,假装是PUT、DELETE等HTTP方法
8.app.use(app.router):调用路由解析的规则
9.app。使用(快递。静态(路径。join(_ dir name,' public ')):在connect中创建的中间件将根目录下的公共文件夹设置为存储图像、css、js等静态文件的目录。
if(' development '==app . get(' env '){ app . use(express . error handler());}这段代码可以理解为:在开发环境中配置错误处理并输出错误信息
10.app.get('/',routes.index):路由控制器。如果用户访问/(主页),将按routes.index处理,routes/index.js的内容如下:
exports.index=function(req,res){ res.render('index ',{ title : ' Express ' });};使用exports.index导出索引函数接口,app.get('/',routes.index)相当于:
app.get('/',function(res,rep){res.render('index ',{ title : ' Express ' });})解释上游res.render ('index ',{title :' express'}):使用ejs模板引擎解析view/index . ejs(因为我们通过app.set将模板文件默认设置为存储在view文件夹中(' view ',_ _ dirname '/view ')。并传入一个对象,该对象只有一个新的标题,其值为string Express,即把view/index . ejs中的所有标题变量替换为string Express,也就是我们所说的渲染视图,或者渲染模板。
11.
http.createServer(app)。listen(app.get('port '),function(){ console . log(' Express server侦听端口' app . get(' port ')));});这段代码可以理解为:创建一个http服务器,监听端口3000。创建成功后,终端显示如下
然后我们可以在浏览器中访问localhost:3000
最后总结一下我说过的知识点:如何创建节点项目并启动,了解项目的大致结构。
以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。