完成注册与登出功能

1注册功能展示

 

 

注册成功,返回主页进行重新登录

 

 

 

 ZhuceServlet代码

package com.qiku.servlet;

import com.qiku.entity.User;
import com.qiku.service.UserService;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet(name = "zhuceServlet",urlPatterns = "/zhuce")
public class ZhuceServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取请求中的信息
        req.setCharacterEncoding("utf-8");
        String id = req.getParameter("id");
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        String telephone = req.getParameter("telephone");
        String birthday = req.getParameter("birthday");
        String sex = req.getParameter("sex");
        //创建Servlet对象 实现数据的封装校验功能
        UserService userService = new UserService();
        int i = userService.zhuce(new User(id, username, password, telephone, birthday, sex));
        //
        if (i<=0){
            System.out.println("注册失败,信息不符合规范");
            req.setAttribute("error","注册失败,信息不符合规范");
            RequestDispatcher requestDispatcher = req.getRequestDispatcher("zhuce.jsp");
            requestDispatcher.forward(req,resp);
        }else{
            System.out.println("注册成功");
            resp.setContentType("text/html;charset=utf-8");
            resp.getWriter().println("注册成功,稍后将进入首页,重新登录!");
            resp.sendRedirect("index.jsp");
        }
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
}

UserService代码

package com.qiku.service;

import com.qiku.dao.UserDao;
import com.qiku.entity.User;

public class UserService {
    private UserDao userDao = new UserDao();
    /*
    * 自定义方法 实现根据参数对应的User对象 调用 useDao 实现登录
    *@param user
    *@return
    * */
    public User login(User user) {
        if(user.getUsername()!=null&&user.getPassword()!=null){
            return userDao.login(user);
        }else {
            return null;
        }
    }

    public int zhuce(User user) {
        if(user.getUid()!=null&&user.getUsername()!=null&&user.getPassword()!=null&&user.getTelephone()!=null&&user.getBirthday()!=null&&user.getSex()!=null){
            return userDao.zhuce(user);
        }else {
            return 0;
        }
    }
}

UserDao代码

package com.qiku.dao;

import com.qiku.entity.User;
import com.qiku.utils.DruidUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;

import java.sql.SQLException;

public class UserDao {
    QueryRunner qr = new QueryRunner(DruidUtils.dataSource);
    /*
    * 登录功能
    *@param user
    * @return
    * */
    public User login(User user) {
        try {
            String sql = "select * from user where username =? and password = ?;";
            User user1 = qr.query(sql, new BeanHandler<>(User.class), user.getUsername(), user.getPassword());
            return user1;
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;

    }

    public int zhuce(User user) {
        try {
            String sql = "insert user values (?,?,?,?,?,?);";
            int update = qr.update(sql, user.getUid(), user.getUsername(), user.getPassword(), user.getTelephone(), user.getBirthday(), user.getSex());
            return update;
        } catch (SQLException e) {
            e.printStackTrace();
        } return 0;

    }
}

2推出登录功能展示

 退出并返回到首页

 

 ZhuxiaoServlet代码

package com.qiku.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;

@WebServlet(name = "zhuxiaoServlet",urlPatterns = "/zhuxiao")
public class ZhuxiaoServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        HttpSession session = req.getSession();
        session.removeAttribute("user");
        resp.sendRedirect("index.jsp");
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Vue.js 是一个用于构建用户界面的框架。下面是一个简单的示例,演示如何使用 Vue.js 实现登录注册功能。 首先,在 HTML 文件中创建一个 Vue 实例,并在其中定义组件: ```html <div id="app"> <login-form v-if="!loggedIn"></login-form> <logout-form v-else></logout-form> </div> ``` 然后,在 JavaScript 文件中定义组件: ```javascript Vue.component('login-form', { template: ` <form @submit.prevent="login"> <label> 用户名: <input v-model="username" type="text" /> </label> <br /> <label> 密码: <input v-model="password" type="password" /> </label> <br /> <button type="submit">登录</button> </form> `, data() { return { username: '', password: '', } }, methods: { login() { // 使用 axios 发送登录请求 axios.post('/login', { username: this.username, password: this.password }) .then(response => { // 登录成功 this.$emit('logged-in') }) .catch(error => { // 登录失败 console.log(error) }) } } }) Vue.component('logout-form', { template: ` <form @submit.prevent="logout"> <p>欢迎 {{ username }}</p> <button type="submit">登出</button> </form> `, props: ['username'], methods: { logout() { // 使用 axios 发送登出请求 axios.post('/logout') .then(response => { // 登出成功 this.$emit('logged-out') }) .catch(error => { // 登出失败 console.log(error) }) } } }) new Vue({ el: '#app', data: { loggedIn: false ### 回答2: 使用Vue实现登录注册功能可以通过以下步骤来完成: 1. 创建Vue项目:首先,你需要创建一个Vue项目。在终端中运行以下命令来创建一个新的Vue项目: ``` vue create login-registration ``` 然后,选择适合你的配置预设,并等待项目创建完成。 2. 创建登录和注册组件:在Vue项目的src目录下,创建Login.vue和Register.vue两个组件文件。 Login.vue源码示例: ```html <template> <div> <h2>Login</h2> <form @submit.prevent="login"> <input type="email" v-model="email" placeholder="Email" required> <input type="password" v-model="password" placeholder="Password" required> <button type="submit">Login</button> </form> </div> </template> <script> export default { data() { return { email: '', password: '' } }, methods: { login() { // 实现登录逻辑 } } } </script> ``` Register.vue源码示例: ```html <template> <div> <h2>Register</h2> <form @submit.prevent="register"> <input type="text" v-model="username" placeholder="Username" required> <input type="email" v-model="email" placeholder="Email" required> <input type="password" v-model="password" placeholder="Password" required> <button type="submit">Register</button> </form> </div> </template> <script> export default { data() { return { username: '', email: '', password: '' } }, methods: { register() { // 实现注册逻辑 } } } </script> ``` 3. 添加路由:在Vue项目中的src目录下创建一个router文件夹,并创建index.js文件。在index.js文件中添加如下代码: ```javascript import Vue from 'vue' import Router from 'vue-router' import Login from '@/components/Login' import Register from '@/components/Register' Vue.use(Router) export default new Router({ routes: [ { path: '/login', name: 'Login', component: Login }, { path: '/register', name: 'Register', component: Register } ] }) ``` 4. 在main.js中注册路由:在Vue项目的src目录下的main.js文件中添加如下代码: ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app') ``` 5. 修改App.vue文件:将App.vue文件中的内容修改为以下示例代码: ```html <template> <div id="app"> <router-link to="/login">Login</router-link> | <router-link to="/register">Register</router-link> <router-view></router-view> </div> </template> <script> export default { name: 'App' } </script> ``` 6. 启动项目:在终端中运行以下命令来启动项目: ``` npm run serve ``` 然后在浏览器中访问http://localhost:8080,你就可以看到登录和注册页面了。 以上是使用Vue实现登录注册功能的基本步骤和源码示例。你可以根据自己的需求和设计来进一步完善和优化代码。 ### 回答3: 使用Vue实现登录注册功能,以下是一个简单的实例: ``` <template> <div> <h1>登录</h1> <form @submit.prevent="login"> <input type="text" v-model="username" placeholder="用户名"> <input type="password" v-model="password" placeholder="密码"> <button type="submit">登录</button> </form> <h1>注册</h1> <form @submit.prevent="register"> <input type="text" v-model="newUsername" placeholder="用户名"> <input type="password" v-model="newPassword" placeholder="密码"> <button type="submit">注册</button> </form> </div> </template> <script> export default { data() { return { username: "", password: "", newUsername: "", newPassword: "", }; }, methods: { login() { // 发送登录请求,校验用户名和密码 console.log("登录成功"); }, register() { // 发送注册请求,保存新用户信息 console.log("注册成功"); }, }, }; </script> <style> h1 { margin-top: 20px; } input { margin-bottom: 10px; } button { margin-top: 10px; } </style> ``` 这个实例包含了一个登录和一个注册表单,通过v-model指令绑定输入框的value值。表单提交时,会调用相应的方法。在这个简单实例中,登录和注册的方法只打印了成功的信息,您可以根据需求进行更具体的处理,比如向后端发送请求进行验证和保存用户信息等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值