基于Android Studio购物商城app+web端，登录实现（前后端分离）二
文章目录
- 1. 涉及到技术点
- 2. 服务端编写登录接口
- 3. 编写登录UI界面
- 4. 记住密码实现
1. 涉及到技术点
- 使用MySQL实现数据储存
- SharedPreferences首选项的使用
- LinearLayoutCompat线性布局的使用
- ImageView，TextView，EditText，Button，CheckBox基础控件的使用
2. 服务端编写登录接口
这里忽略如何在服务端编写登录接口，本项目是前后端分离实现，app端的数据交互都是调用服务端接口来实现数据交互
3. 编写登录UI界面
- activity_login.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/my_light_primary"
app:title="登录"
app:titleTextColor="@color/white">
<ImageView
android:id="@+id/btn_login_close"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="right"
android:padding="10dp"
android:src="@drawable/baseline_close_24" />
</androidx.appcompat.widget.Toolbar>
<androidx.cardview.widget.CardView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="50dp"
app:cardCornerRadius="50dp">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@mipmap/img_logo" />
</androidx.cardview.widget.CardView>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:gravity="center"
android:text="登录"
android:textColor="#333"
android:textSize="20sp"
android:textStyle="bold" />
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="26dp"
android:orientation="vertical">
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/login_et_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="@drawable/baseline_account_box_24" />
<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:background="@null"
android:hint="请输入用户名"
android:textSize="14sp" />
</androidx.appcompat.widget.LinearLayoutCompat>
<androidx.appcompat.widget.LinearLayoutCompat
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="10dp"
android:background="@drawable/login_et_bg"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:src="@drawable/baseline_https_24" />
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:background="@null"
android:hint="请输入密码"
android:inputType="textPassword"
android:textSize="14sp" />
</androidx.appcompat.widget.LinearLayoutCompat>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<CheckBox
android:id="@+id/checkbox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:text="记住密码" />
<TextView
android:id="@+id/register"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="right"
android:layout_marginTop="10dp"
android:text="还未注册？"
android:textColor="@color/my_light_primary" />
</RelativeLayout>
<Button
android:id="@+id/login"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:text="登录" />
</androidx.appcompat.widget.LinearLayoutCompat>
</androidx.appcompat.widget.LinearLayoutCompat>
</RelativeLayout>
运行效果图
- LoginActivity.java 具体逻辑实现
a. 初始化控件
//初始化控件
et_username = findViewById(R.id.et_username);
et_password = findViewById(R.id.et_password);
checkbox = findViewById(R.id.checkbox);
btn_login_close = findViewById(R.id.btn_login_close);
b. 设置登录按钮的点击事件
//登录点击事件
findViewById(R.id.login).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String username = et_username.getText().toString();
String password = et_password.getText().toString();
if (TextUtils.isEmpty(username) || TextUtils.isEmpty(password)) {
showToast("请输入用户名和密码");
} else {
login(username, password);
}
}
});
c. 调用接口获取登录信息
/**
* 登录
*/
private void login(String username, String password) {
OkGo.<String>get(ApiConstants.LOGIN_URL)
.params("username", username)
.params("password", password)
.execute(new HttpStringCallback(mBaseActivity) {
@Override
protected void onSuccess(String msg, String response) {
showToast(msg);
UserInfo userInfo = GsonUtils.parseJson(response, UserInfo.class);
//保存用户名和密码
SharedPreferences.Editor edit = mSharedPreferences.edit();
edit.putBoolean("is_login", is_login);
edit.putString("username", username);
edit.putString("password", password);
//这句话不能少
edit.commit();
UserInfo.setUserInfo(userInfo);
finish();
}
@Override
protected void onError(String response) {
showToast(response);
}
});
}
温馨提示：调用接口API，可以使用开源网络库OkHttp来实现，本项目中使用OkGo开源库来实现，因为OkGo封装了OkHttp，简化了OkHttp的使用。OkGo可通过链式调用的形式，可以很简单的实现接口API数据的获取。
4. 记住密码实现
记住密码使用SharedPreferences来实现，实现思路: 用到SharedPreferences就需要先实例化，然后在调用登录接口成功后，保存用户名，密码和 是否记住密码状态，最后根据否记住密码状态来判断显示在控件上面
- 初始化SharedPreferences
//获取mSharedPreferences实例
mSharedPreferences = getSharedPreferences("user", MODE_PRIVATE);
- 在登录成功后，保存用户名和密码
//保存用户名和密码
SharedPreferences.Editor edit = mSharedPreferences.edit();
edit.putBoolean("is_login", is_login);
edit.putString("username", username);
edit.putString("password", password);
//这句话不能少
edit.commit();
- 根据否记住密码状态来判断显示在控件上面
//是否勾选了记住密码
is_login = mSharedPreferences.getBoolean("is_login", false);
if (is_login) {
String username = mSharedPreferences.getString("username", null);
String password = mSharedPreferences.getString("password", null);
et_username.setText(username);
et_password.setText(password);
checkbox.setChecked(true);
}