Nodejs+Vue项目开发之Express使用（二）

这篇内容将给大家讲述如何基本使用Express

Express目录

文件名作用
app.js主文件
routes/index.js首页路由文件
views/index.jade首页展示文件
package.json项目配置文件

配置路由文件

我们打开routes/index.js，看到里面有一段下面代码，这段代码关联的路径在view/index.jade。这里title的值最终赋值给index.jade显示，我们修改‘Express’为‘Test’，在启动的命令窗口ctrl+C，终止此批量操作，再npm start，我们刷新页面就能看到我们修改的数据了。

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
  • 里面的get是请求方式，常用的请求方式有get、post、delete
  • req是发送请求，res是返回请求，next是下一个方法
  • res.render是一个方法

便捷开发

如果我们每次修改代码要重新显得特别繁琐，我们在Win+R，cmd回车，命令窗口输入如下命令

npm install -g nodemon

安装完成后，我们打开package.json文件，把里面的node改成nodemon，如下

  "scripts": {
    "start": "nodemon ./bin/www"
  },

往后修改代码保存node就会重新启动项目，我们只要刷新页面就好

更换模版

jade是默认Express模版，我们这边把他改为大家熟悉的html

我们在项目的目录下cmd，命令窗口输入如下

npm install -S art-template
npm install -S express-art-template
npm audit fix

打开app.js文件，修改内容如下

修改前

app.set('view engine', 'jade');

修改后

app.engine('.html', require('express-art-template'));
app.set('view engine', 'html');

我们在views目录下新建一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wish</title>
</head>
<body>
    <h1>欢迎访问我搭建的第一个Express项目</h1>
</body>
</html>

在命令窗口重新启动项目，打开浏览器就能看到效果啦！

结尾

  • 该篇为中篇，最后一篇将给大家讲解条件渲染

用于个人项目实战记录

posted @ 2022-05-22 11:27  KrityCat  阅读(13)  评论(0)    收藏  举报  来源