<el-form>表单中的action
时间: 2025-01-29 08:27:30 浏览: 39
### element UI `el-form` 表单中 Action 属性的使用
在 Element UI 的 `el-form` 组件中,并不存在直接用于提交表单的目标 URL 设置的 `action` 属性。通常情况下,表单的数据提交逻辑是由 JavaScript 或 Vue.js 方法控制的,而不是通过 HTML 的原生 `action` 和 `method` 属性实现。
对于需要发送请求的情况,在 `el-form` 中一般会结合 `axios` 或者其他 HTTP 客户端库来进行网络请求操作。下面是一个简单的例子展示如何创建一个带有提交按钮的表单并处理其提交事件:
#### 创建带提交功能的表单
```html
<template>
<div>
<!-- form -->
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
<el-form-item label="描述" prop="description">
<el-input type="textarea" v-model="ruleForm.description"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
description: ''
},
rules: {
description: [
{ required: true, message: '请输入描述', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
// 这里可以放置向服务器发送POST请求的代码
// axios.post('/api/endpoint', this.ruleForm).then(response => {...});
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>
```
在这个例子中,当用户点击“提交”按钮时,将会触发 `submitForm()` 函数,该函数会对整个表单进行校验;如果所有字段都有效,则可以通过 AJAX 请求将数据发送到服务端[^2]。
为了模拟传统HTML表单的行为——即自动跳转页面或上传文件等功能,可以在上述基础上进一步扩展,比如利用前端框架提供的路由机制来改变视图,或是集成第三方插件完成更复杂的任务如批量导出Excel等[^4]。
阅读全文
相关推荐





(一)项目构建
使用 Maven 构建项目,在pom.xml中引入 Spring MVC 相关依赖,如spring - webmvc,配置 Servlet、JSP 等相关依赖,确保项目具备 Spring MVC 运行环境 。示例关键依赖配置:
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring - webmvc</artifactId>
<version>5.3.18</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet - api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp - api</artifactId>
<version>2.3.3</version>
<scope>provided</scope>
</dependency>
</dependencies>
(二)Spring MVC 配置
DispatcherServlet 配置:在 Web.xml(或 Servlet 3.0 + 环境下用 Java 配置)中配置 DispatcherServlet,指定 Spring MVC 配置文件位置,使其能拦截处理请求 。示例 Web.xml 配置:
<servlet>
<servlet - name>springmvc</servlet - name>
<servlet - class>org.springframework.web.servlet.DispatcherServlet</servlet - class>
<init - param>
contextConfigLocation
classpath:springmvc - servlet.xml
</init - param>
<load - on - startup>1</load - on - startup>
</servlet>
<servlet - mapping>
<servlet - name>springmvc</servlet - name>
<url - pattern>/</url - pattern>
</servlet - mapping>
Spring MVC 配置文件(springmvc - servlet.xml):开启组件扫描(扫描控制器等组件)、视图解析器(配置前缀后缀,解析 JSP 视图)、开启注解驱动等 。示例:
<context:component - scan base - package="com.example.controller"/>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
</bean>
<mvc:annotation - driven/>
三)功能模块实现
1. 用户登录验证
o 控制器(Controller):创建LoginController,编写方法处理/login请求(对应login.jsp表单提交),接收用户名、密码参数(可通过@RequestParam注解),进行简单验证(如硬编码用户名 “admin”、密码 “123” 模拟,实际可连数据库查询),验证成功用return "redirect:/main";重定向到主页控制器方法,失败则带错误信息(通过model.addAttribute)返回login视图(即login.jsp )。示例代码:
package com.example.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class LoginController {
@RequestMapping("/login")
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
Model model) {
if ("admin".equals(username) && "123".equals(password)) {
return "redirect:/main";
} else {
model.addAttribute("error", "用户名或密码错误");
return "login";
}
}
2. 登录页面(login.jsp):使用 Spring 表单标签库(需引入相关标签库)或普通 HTML 表单,提交到/login,显示错误信息(通过 EL 表达式${error} )。示例关键代码:
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<body>
<form:form action="/https/wenku.csdn.net/login" method="post">
用户名:<form:input path="username"/>
密码:<form:password path="password"/>
<input type="submit" value="登录">
</form:form>
<c:if test="${not empty error}">
${error}
</c:if>
</body>
</html>
3. 访问控制(拦截器实现)
o 创建拦截器类:实现HandlerInterceptor接口,在preHandle方法中检查会话是否有用户登录标识(如session.getAttribute("user") ,假设登录成功时在会话存user对象),无则redirect到/login并返回false拦截,有则返回true放行 。示例:
package com.example.interceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.servlet.HandlerInterceptor;
public class LoginInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request,
HttpServletResponse response,
Object handler) throws Exception {
Object user = request.getSession().getAttribute("user");
if (user == null) {
response.sendRedirect(request.getContextPath() + "/login");
return false;
}
return true;
}
}
4. 配置拦截器:在 Spring MVC 配置文件(springmvc - servlet.xml)中注册拦截器,指定拦截路径(如/main )。示例:
<mvc:interceptors>
<mvc:interceptor>
<mvc:mapping path="/main"/>
<bean class="com.example.interceptor.LoginInterceptor"/>
</mvc:interceptor>
</mvc:interceptors>
5. 会话管理(登出功能)
o 控制器方法:在MainController中编写处理登出的方法,调用session.invalidate()销毁会话,然后redirect到登录页 。示例:
package com.example.controller;
import javax.servlet.http.HttpSession;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class MainController {
@RequestMapping("/main")
public String main() {
return "main";
}
@RequestMapping("/logout")
public String logout(HttpSession session) {
session.invalidate();
return "redirect:/login";
}
}
6. 主页(main.jsp):添加 “退出” 链接, href 指向/logout 。示例:
<html>
<body>
欢迎访问主页
退出
</body>
</html>









