ionic登录功能实现

实现ionic的登录功能

前端

小伙伴们按照我上一篇推荐的博主教程就可以搭建一个大概的框架起来了，我们可以拿到自己输入的登录信息了，那么接下来就是发送数据到后台了 ，可以参靠 博客，我用的他里面的第三种方法，这里我就简写了：
首先，我们在在app.module.ts 文件中添加

import {HttpClientModule} from '@angular/common/http';

然后再imports里面添加上 HttpClientModule
然后回到login.ts文件里面，引入：import { HttpClient } from "@angular/common/http";在构造函数中定义一下

在这之前还是先写一下登陆页面吧，看一下效果图

上代码：

<ion-content class="login">
	<img class="rent_logo" src="../../assets/imgs/logo.png"/>
	<ion-item class="login_input login_item_first">
	  <ion-label fixed>账号</ion-label>
	  <ion-input type="text" placeholder="请输入账号" #username></ion-input>
	</ion-item>
	<ion-item class="login_input">
	  <ion-label fixed>密码</ion-label>
	  <ion-input type="password" placeholder="请输入密码" #password></ion-input>
	</ion-item>
  <ion-item no-lines class="login_input">
    <label item-right>记住密码</label>
    <ion-toggle></ion-toggle>
  </ion-item>

  <div style="text-align: center; margin-left: 30px; margin-right: 30px;">
    <button ion-button block color="danger" (click)="logIn(username, password)">
      登录
    </button>
    <button ion-button block color="danger" (click)="next()">
      跳过
    </button>
  </div>
</ion-content>

在登陆按钮那里调用方法的时候将用户名和密码（username, password）传到方法中去，看一下登陆逻辑方法：

logIn(username: HTMLInputElement, password: HTMLInputElement) {
    if (username.value.length == 0) {
    	this.showToast("bottom", "请输入账号");
    } else if (password.value.length == 0) {
        this.showToast("bottom", "请输入密码");
    } else {
        let userinfo: string = '用户名：' + username.value + '密码：' + password.value;
        alert(userinfo);
        var data = {"userName": username.value,"password":password.value};
        this.http.post("/api/login", data).toPromise()
          .then(res => {
            console.log(res)
          })
          .catch(err => {
            console.log(err)
          });
	    this.navCtrl.push(TabsPage);
  	}
  }

这样写了还不够，在this.http.post("/api/login", data)这里使用了代理，可能会疑惑，为什么要使用代理呢，如果不使用代理会有跨域的请求，网上的跨域请求也是一大堆，我们先来设置代理

这样写了过后所有的/api请求都会以http://localhost:8080/api发送相应的请求，这样就不会有跨域问题了，这样，一个简单的前端发送请求就做出来了，这时候就需要后台的同学给你返回请求数据了（记录一个跨域请求的坑）

后台

我用的是mybatis-plus，小伙伴们需要引入这个jar包哦

<dependency>
      <groupId>com.baomidou</groupId>
      <artifactId>mybatis-plus</artifactId>
      <version>2.2.0</version>
    </dependency>

首先建立好一个用户的实体类，就是数据库中对应的字段

@TableName("sys_user")
public class UserEntity {
    @TableId
    private Long id;
    private String email;
    private String phone;
    private String userName;
    private String password;

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPhone() {
        return phone;
    }

    public void setPhone(String phone) {
        this.phone = phone;
    }
}

然后建立一个userMapper.xml文件，用来写sql语句，我这里写了一个根据用户名查找用户select语句，其中select标签中的id命名要和dao接口里面的方法名称一样，比如我这里是queryByUserName,那么接口中的方法也必须是queryByUserName

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.renttravel.dao.UserDao">

    <select id="queryByUserName" parameterType="string" resultType="com.renttravel.entity.UserEntity">
		select * from sys_user where user_name = #{userName}
	</select>

</mapper>

建立dao接口，写一个mapper文件中对应的方法，将userName传过去

@Mapper
public interface UserDao extends BaseMapper<UserEntity> {
    UserEntity queryByUserName(@Param("userName") String userName);
}

首先建立一个controller，在控制器上方加上注解@RestController,表明这是一个控制器，在配置文件中才能扫描到，然后再加入一个@RequestMapping("/api")接收请求

@RestController
@RequestMapping("/api")
public class IndexController {

    @Autowired
    private UserService userService;

    /**
     * 登录
     * @param user
     * @return 登录成功 返回用户实体类信息
     */
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    public R login(@RequestBody UserEntity user){
        userService.userLogin(user);
        return R.ok();
    }
}

service层的接口

public interface UserService extends IService<UserEntity> {

    UserEntity userLogin(UserEntity user);
}

然后写service层的代码（实现类），注意实现类上面的注解@Service，这个要求加上，不然会报错

@Service("UserService")
public class UserServiceImpl extends ServiceImpl<UserDao, UserEntity> implements UserService {

    @Override
    public UserEntity userLogin(UserEntity user) {
        return baseMapper.queryByUserName(user.getUserName());
    }
}

讲道理的情况下，应该能查询出数据出来，如果没查出来，可能就需要小伙伴自己排查一下错误的原因咯