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

最新推荐文章于 2024-05-30 09:22:44 发布

KrityCat

最新推荐文章于 2024-05-30 09:22:44 发布

阅读量523

点赞数 1

分类专栏：笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45807466/article/details/124908044

版权

笔记专栏收录该内容

19 篇文章 1 订阅

订阅专栏

这篇内容将给大家讲述如何基本使用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>