这里给出一个使用SSM框架和
Layui前端框架搭建的注册页面的示例代码：
1. 在web.xml中配置DispatcherServlet：
```
<servlet>
<servlet-name>dispatcherServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring/applicationContext.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>dispatcherServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
```
2. 在applicationContext.xml中配置Spring和MyBatis：
```
<!-- 配置Spring -->
<context:component-scan base-package="com.example.controller" />
<!-- 配置MyBatis -->
<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
<property name="driverClassName" value="com.mysql.jdbc.Driver" />
<property name="url" value="jdbc:mysql://localhost:3306/test" />
<property name="username" value="root" />
<property name="password" value="123456" />
</bean>
<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
<property name="dataSource" ref="dataSource" />
<property name="configLocation" value="classpath:mybatis/mybatis-config.xml" />
</bean>
<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
<property name="basePackage" value="com.example.mapper" />
</bean>
```
3. 创建UserController类：
```
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
// 跳转到注册页面
@RequestMapping(value = "/register", method = RequestMethod.GET)
public String register() {
return "register";
}
// 注册
@RequestMapping(value = "/register", method = RequestMethod.POST)
@ResponseBody
public Map<String, Object> doRegister(User user) {
Map<String, Object> result = new HashMap<>();
try {
userService.register(user);
result.put("success", true);
} catch (Exception e) {
result.put("success", false);
result.put("message", e.getMessage());
}
return result;
}
}
```
4. 创建UserService接口和实现类：
```
public interface UserService {
void register(User user) throws Exception;
}
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public void register(User user) throws Exception {
User existingUser = userMapper.getUserByUsername(user.getUsername());
if (existingUser != null) {
throw new Exception("该用户名已被注册");
}
userMapper.insertUser(user);
}
}
```
5. 创建UserMapper接口和对应的SQL映射文件：
```
public interface UserMapper {
User getUserByUsername(String username);
void insertUser(User user);
}
```
```
<mapper namespace="com.example.mapper.UserMapper">
<
select id="getUserByUsername" parameterType="String" resultType="com.example.entity.User">
select * from user where username = #{username}
</
select>
<insert id="insertUser" parameterType="com.example.entity.User">
insert into user (username, password) values (#{username}, #{password})
</insert>
</mapper>
```
6. 创建register.html页面：
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/
layui/2.5.6/css/
layui.css">
</head>
<body>
<div class="
layui-container">
<form class="
layui-form" action="/user/register" method="post">
<div class="
layui-form-item">
<label class="
layui-form-label">用户名</label>
<div class="
layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">密码</label>
<div class="
layui-input-block">
<input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<div class="
layui-input-block">
<button class="
layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="
layui-btn
layui-btn-primary">
重置</button>
</div>
</div>
</form>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/
layui/2.5.6/
layui.all.js"></script>
<script>
layui.use(['form', 'layer'], function() {
var form =
layui.form;
var layer =
layui.layer;
// 监听提交
form.on('submit(formDemo)', function(data) {
$.ajax({
url: data.form.action,
type: data.form.method,
data: data.field,
success: function(result) {
if (result.success) {
layer.msg('注册成功', {icon: 1});
// 注册成功后跳转到登录页面
setTimeout(function() {
window.location.href = '/login';
}, 1000);
} else {
layer.msg(result.message, {icon: 2});
}
}
});
return false;
});
});
</script>
</body>
</html>
```
这样就完成了一个简单的SSM框架和
Layui前端框架搭建的注册页面。
2063
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
