用户登录和用户注册案例

用户登录:

流程说明:

1.用户填写用户密码,提交到LoginServlet

2.在LoginServlet中使用MyBatis查询数据库,验证用户名密码是否正确

3.如果正确,响应“登录成功”,如果错误,响应“登录失败”

 

准备环境:

1.复制资料中的静态页面到项目的webapp目录下

2.创建db1数据库,创建tb_user表,创建User实体类

3.导入MyBatis坐标,MySQL驱动坐标

4.创建mybatis-config.xml核心配置文件,UserMapper.xml映射文件,UserMapper接口

用户注册:

流程说明:

1.用户填写用户名、密码等信息,点击注册按钮,提交到RegisterServlet

2.在RegisterServlet中使用MyBatis保存数据

3.保存前,需要判断用户是否已经存在:根据用户名查询数据库

 

SqlSessionFactory创建一次就行,因为每一个工厂都会绑定一个连接池,每创建一次就会创建一次连接池,会导致资源消耗非常大

sqlSession对象不能抽取成方法,此对象代表每个用户的连接,如果共用一条会导致错乱

下面是一个简单的 Vue 用户登录注册案例: 在 Vue 项目中创建一个名为 Login.vue 的组件: ```html <template> <div> <h2>用户登录</h2> <form> <div> <label>用户名:</label> <input type="text" v-model="username" /> </div> <div> <label>密码:</label> <input type="password" v-model="password" /> </div> <button type="button" @click="login">登录</button> </form> <hr /> <h2>用户注册</h2> <form> <div> <label>用户名:</label> <input type="text" v-model="newUsername" /> </div> <div> <label>密码:</label> <input type="password" v-model="newPassword" /> </div> <button type="button" @click="register">注册</button> </form> </div> </template> <script> export default { data() { return { username: "", password: "", newUsername: "", newPassword: "", }; }, methods: { login() { // 发送登录请求 console.log("用户名:" + this.username); console.log("密码:" + this.password); }, register() { // 发送注册请求 console.log("用户名:" + this.newUsername); console.log("密码:" + this.newPassword); }, }, }; </script> ``` 在 App.vue 中使用 Login 组件: ```html <template> <div id="app"> <login /> </div> </template> <script> import Login from "./components/Login.vue"; export default { components: { Login, }, }; </script> ``` 这是一个非常简单的登录注册案例,你可以根据自己的需求进行修改和完善。在实际项目中,你需要发送 AJAX 请求到后端服务器,进行用户登录注册的处理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值