SpringBoot+Vue+Element-ui实现简单登录注册功能

目录

1.前端

（1）登录和注册页面

   HomeView.vue   

   RegisterView.vue

（2） main.js，作请求和响应拦截

2.后端

（1）mapper.xml

（2）mapper接口

（3）Service接口

（4）Service实现类

（5）Controller控制器

（6）实体类

3.效果

1.前端

（1）登录和注册页面

   HomeView.vue   

 
kground-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3

   RegisterView.vue

（2） main.js，作请求和响应拦截

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from "element-ui";
import axios from "axios";

Vue.config.productionTip = false;
Vue.prototype.$axios = axios;

Vue.use(ElementUI);

//------------------请求拦截-------------------//
axios.interceptors.request.use(config => {
  //例：若存在token则带token
  const token = store.state.token;
  if (token) {
      config.headers.Authorization = token
  }
  return config;
}, err => {
  console.log("请求拦截=>", err);
  return err;
})

//------------------响应拦截-------------------//
//-------------对响应数据做点什么-------------//
axios.interceptors.response.use(res => {
  console.log("响应拦截=>", res.data);
  //例：后端数据处理错误，并返回错误原因；前端获取错误原因并展示
  if (res.data.success == false) {
      Message({
          message: res.data.data.message + '，请重试！',
          type: 'warning'
      });
  }
  console.log("响应拦截=>", res);
  return res ? res.data : res;
}, err => {
  console.log(err);
  //打印完整的错误信息
  console.log("响应拦截错误完整信息=>",err.response)
  //也可以在这里对不同的错误码做不同的展示处理
  throw err;
})


new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

此处注意添加Element-ui依赖、axios依赖

2.后端

（1）mapper.xml

    
        select
        U.id,
        U.username,
        U.password
        from user U
    

    
        
        
             and username = #{username}
        
    

    
        
            
                 and username = #{username}
                 and password = #{password}
            
    

    
        insert into user
        
            username,
            password,
        
        
            #{username},
            #{password},
        
    

（2）mapper接口

@Mapper
public interface UserMapper extends tk.mybatis.mapper.common.Mapper{

    User selectByUsername(User user);

    User selectByUserNameAndPassword(User user);

    int insertUser(User user);

}

（3）Service接口

public interface LoginService {
    boolean login(User user);

    void register(String username, String password);



}

（4）Service实现类

@Service
@AllArgsConstructor
public class LoginServiceImpl implements LoginService {

    private UserMapper userMapper;
    @Override
    public boolean login(User user) {
        if(StringUtils.isBlank(user.getUsername()) || StringUtils.isBlank(user.getPassword())){
            throw  new ServiceException("用户名或密码不能为空");
        }

        User user1 = userMapper.selectByUserNameAndPassword(user);

        if(user1 != null) {
            return true;
        }else {
            return false;
        }
    }

    @Override
    public void register(String username, String password) {
        if(StringUtils.isBlank(username) || StringUtils.isBlank(password)){
            throw  new ServiceException("用户名或密码不能为空");
        }

        if(!password.matches(".*\\d+.*")||!password.matches(".*[a-zA-Z]+.*")){
            throw  new ServiceException("密码必须包含大写字母、小写字母、数字");
        }
       //查询注册的用户名是否存在
        User user1 = userMapper.selectByUsername(new User(username));

        if(user1 != null){
            throw  new ServiceException("用户名已存在");
        }

        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
        userMapper.insertUser(user);
    }

}

（5）Controller控制器

@RestController
@AllArgsConstructor
public class LoginController {

    private LoginService loginService;

    @PostMapping ("/login")
    public JSONResult login(@RequestBody User user) {
        boolean flag = loginService.login(user);
        if (flag) {
            return JSONResult.ok("登录成功！");
        } else {
            return JSONResult.errorMsg("登录失败！");
        }
    }

    @PostMapping("/register")
    public JSONResult register(@RequestBody User user) {
        loginService.register(user.getUsername(), user.getPassword());
        return JSONResult.ok("注册成功！");
    }

}

（6）实体类

@Data
@Table(name = "`user`")
@AllArgsConstructor
@NoArgsConstructor
public class User {

    /**
     * 主键
     */
    @Id
    @Column(name = "`id`")
    private Integer id;

    /**
     * 用户名
     */
    @Column(name = "`username`")
    private String username;

    /**
     * 密码
     */
    @Column(name = "`password`")
    private String password;


    public User(Integer id){
        this.id = id;
    }

    public User(String username){
        this.username = username;
    }
}

3.效果

 以我数据库中存储的：username：zhan  password：123456 示例

登录成功时： 

登录失败时：

注册：

 测试：

 页面可以跳转，说明注册添加账户成功