Nodejs 新手问问express中jade怎么写个button回调controller里面的方法啊？

Nodejs 新手问问express中jade怎么写个button回调controller里面的方法啊？

我在controller写了个function，然后有在routes里面写了app.get它的routes，最后是在view中写到 button.btn(action=‘route’) Click

为啥这个route没反映的？ 求个例子……

5 回复

针对您的问题，我将为您详细解释如何在Express应用中使用Jade模板引擎来创建一个按钮，并通过该按钮调用控制器中的方法。我们将分步骤进行说明。

步骤1: 创建控制器

首先，我们需要在控制器中定义一个函数。假设我们有一个名为usersController.js的文件，其中包含一个简单的处理用户信息的函数：

// controllers/usersController.js
exports.showUserInfo = function(req, res) {
    // 这里可以添加逻辑，比如从数据库获取用户信息
    res.render('users', { title: '用户信息' });
};

步骤2: 设置路由

接下来，在routes/index.js文件中设置一个路由，将请求映射到上述控制器中的函数：

// routes/index.js
var express = require('express');
var router = express.Router();
var usersController = require('../controllers/usersController');

/* GET 用户信息页面 */
router.get('/userInfo', usersController.showUserInfo);

module.exports = router;

步骤3: 使用Jade模板

现在，让我们转向视图部分。在views/users.jade文件中，我们可以添加一个按钮，当点击时触发特定的服务器端操作（例如提交表单或发送AJAX请求）。

这里，我们将使用表单提交来模拟按钮点击效果：

// views/users.jade
extends layout

block content
    h1= title
    form(action='/userInfo', method='get')
        input(type='submit', value='获取用户信息')

注意，这里的form标签用于提交到/userInfo路径，这与我们在路由中定义的路径相匹配。当用户点击按钮时，浏览器会向服务器发送GET请求到/userInfo，从而触发showUserInfo函数。

注意事项

  • 上述示例仅作为演示用途，实际应用中可能需要更复杂的逻辑。
  • 如果你希望实现异步操作（如AJAX请求），你可以考虑使用JavaScript库（如jQuery）来发送请求，并在客户端处理响应。
  • 确保你的Express应用正确配置了静态文件服务，以便能够访问必要的CSS、JS等资源。

以上就是如何在Express中使用Jade模板创建一个按钮并将其与控制器中的方法关联起来的基本步骤。希望这对您有所帮助！


button为什么要设置action属性？不太理解。

我以为action是指它相应的回调。。。那要怎么搞呢……

view-jade: button.btn.btn-primary(method=“delete”,action="/users/deleteUser/"+user.index) DEL

routes: app.del(’/userAccount/deleteUser/:userId’,userAccount.deleteUser) app.param(‘userId’, userAccount.user)

controller - method: exports.deleteUser = function(req,res){ console.log(‘wanna del user.’) }

exports.user = function(req, res, next, id){ UserAccount .find({index:id}) .exec(function(err,user){ if(err) next(err) if(!user) next(new Error(‘no user of this id.’)) req.profile = user next() }) }

要在Express应用中通过Jade模板中的按钮触发控制器方法，你需要确保正确地设置前端表单提交或按钮点击事件，并且在后端正确处理这些请求。下面是实现这一功能的一个简单示例。

后端（Controller）

首先，定义你的控制器方法。假设你的控制器文件名为controller.js：

// controller.js

exports.handleClick = function(req, res) {
    console.log("Button clicked!");
    // 在这里可以添加你想要执行的任何逻辑
    res.send('Button clicked successfully!');
};

然后，在你的路由文件中（例如routes/index.js），将这个方法映射到一个路由上：

// routes/index.js

const express = require('express');
const router = express.Router();
const controller = require('../controllers/controller');

router.post('/handleClick', controller.handleClick);

module.exports = router;

前端（Jade模板）

在你的Jade模板中，创建一个按钮并使用表单来发送POST请求到上面定义的路由：

// views/index.jade

doctype
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    h1= message
    form(action="/handleClick", method="post")
      button(type="submit") Click Me!

注意：

  • 我们使用了form标签，并设置了action属性为/handleClick，这是我们在路由中定义的路径。
  • method="post"表明这是一个POST请求。
  • button标签用于创建按钮，当用户点击该按钮时，表单会提交到指定的URL。

这样设置之后，当你点击页面上的按钮时，它会向服务器发送一个POST请求到/handleClick，服务器会调用控制器中的handleClick方法来处理这个请求。

如果你只是想触发某种行为而不是通过表单提交，你可能需要使用JavaScript（如jQuery）来监听按钮点击事件并发送AJAX请求。上述示例展示了如何通过表单提交来达到目的，这通常是最直接的方式。

回到顶部