最近在学习web项目的前后端分离,正好在做Android的大作业,于是想尝试做一下Android的前后端分离实验。虽然功能很简单,但也花了不少时间调试,特在此记录。
基本思路
- 首先用SpringBoot技术搭建一个后端项目,用来操作一些数据
- 创建一个Android项目,通过简单的获取后端数据库中的值来测试前后端数据的交互。
实验的环境
- IntelliJ IDEA 2021.1.1 (Ultimate Edition)
- Android Studio 4.2.1
- Navicat Premium 15.0.19
- JDK1.8
- MySQL 8.0
- Gradle Plugin Version: 4.2.1
- okhttp 3.10.0
- 调试环境:Android 9、Android 10 华为的安卓机
实验详细步骤
一、搭建后台
注意在编写程序过程中,一定要注意注解的导入,如
@Service
,@RestController
等,否则会导致项目无法运行。
①新建Spring Initializr项目
点击Next
选择需要的依赖,先选择如图的三个依赖(注:这里不选也行,可在项目中的pom.xml
文件中添加依赖)
创建完成后的项目是这样的
②在pom.xml
文件中导入依赖。在前面创建时如果已勾选可跳过此步
<dependencies>
<!-- jdbc数据连接-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 引入mysql驱动包-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.example.springboot</groupId>
<artifactId>springboot-jdbc</artifactId>
<version>0.0.1-SNAPSHOT</version>
</dependency>
</dependencies>
③配置数据库驱动和相关参数
在application.properties
文件中配置数据库相关参数
spring.datasource.driver=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/test
spring.datasource.username=root
spring.datasource.password=123456
注意:很多数据库连接不上都是这里的 驱动 或者 url格式 不正确,这里我的配置不一定适合所有人的环境,注意甄别
④编写业务程序
创建一张表
插入测试数据
项目结构
在entity中编写实体类User
package com.example.demo.entity;
/**
* @date 2021/5/21 9:01
*/
public class User {
private int id;
private String username;
private String password;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
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;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}
编写数据访问层Dao层
package com.example.demo.dao;
import com.example.demo.entity.User;
/**
* @date 2021/5/21 9:21
*/
public interface UserDao {
/**增**/
int insert(User user);
/**删**/
int deleteById(Integer id);
/**改**/
int update(User user);
/**查**/
User getById(Integer id);
/**登录**/
User login(String username, String password);
}
Dao的实现(对数据表的操作)
package com.example.demo.dao.impl;
import com.example.demo.dao.UserDao;
import com.example.demo.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import org.springframework.stereotype.Repository;
import java.sql.ResultSet;
import java.sql.SQLException;
/**
* @date 2021/5/21 9:26
*/
@Repository
public class UserDaoImpl implements UserDao {
@Autowired
private JdbcTemplate jdbcTemplate;
@Override
public int insert(User user) {
String sql = "insert into t_user(id,username,password) values(?,?,?)";
return this.jdbcTemplate.update(
sql,
user.getId(),
user.getUsername(),
user.getPassword()
);
}
@Override
public int deleteById(Integer id) {
String sql = "delete from t_user where id = ?";
return this.jdbcTemplate.update(sql, id);
}
@Override
public int update(User user) {
String sql = "update t_user set password = ? where id = ?";
return this.jdbcTemplate.update(
sql,
user.getPassword(),
user.getId()
);
}
@Override
public User getById(Integer id) {
String sql = "select * from t_user where id = ?";
return this.jdbcTemplate.queryForObject(sql, new RowMapper<User>() {
@Override
public User mapRow(ResultSet resultSet, int i) throws SQLException {
User user = new User();
user.setId(resultSet.getInt("id"));
user.setUsername(resultSet.getString("username"));
user.setPassword(resultSet.getString("password"));
return user;
}
}, id);
}
@Override
public User login(String username, String password) {
String sql = "select * from t_user where username=? and password=?";
return this.jdbcTemplate.queryForObject(sql, (resultSet, i) -> {
User user = new User();
user.setId(resultSet.getInt("id"));
user.setUsername(resultSet.getString("username"));
user.setPassword(resultSet.getString("password"));
return user;
}, username,password);
}
}
编写服务层
package com.example.demo.service;
import com.example.demo.entity.User;
/**
* @date 2021/5/21 12:12
*/
public interface UserService {
int insert(User user);
int deleteById(Integer id);
int update(User user);
User getById(Integer id);
User login(String username, String password);
}
服务层实现,将一个或多个Dao封装成一个服务
package com.example.demo.service.impl;
import com.example.demo.dao.UserDao;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
/**
* @date 2021/5/21 12:13
*/
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserDao userDao;
@Override
public int insert(User user) {
return userDao.insert(user);
}
@Override
public int deleteById(Integer id) {
return userDao.deleteById(id);
}
@Override
public int update(User user) {
return userDao.update(user);
}
@Override
public User getById(Integer id) {
return userDao.getById(id);
}
@Override
public User login(String username, String password) {
return userDao.login(username, password);
}
}
Controller层负责请求转发
package com.example.demo.controller;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.Random;
/**
* @author wangrui
* @date 2021/5/21 12:21
*/
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@RequestMapping("/save")
@ResponseBody
public User save() {
User user = new User();
int id = new Random().nextInt(10000);
user.setId(id);
user.setUsername("张三" + id);
user.setPassword("zhangsan" + id);
int result = this.userService.insert(user);
System.out.println(result);
return user;
}
@RequestMapping("/deleteById")
public void deleteById(Integer id) {
int result = this.userService.deleteById(id);
System.out.println(result);
}
@RequestMapping("/update")
public void update() {
User user = new User();
user.setId(1);
user.setPassword("test123");
this.userService.update(user);
}
@RequestMapping("/getById")
@ResponseBody
public User getById(Integer id) {
User user = this.userService.getById(id);
System.out.println(user.getUsername());
return user;
}
@RequestMapping("/login")
@ResponseBody
public User login(String username, String password){
User user = this.userService.login(username, password);
System.out.println(user.toString());
return user;
}
}
点击运行,当出现端口号8080(默认)时表示后台部署成功
测试:
在浏览器中输入http://localhost:8080/user/getById?id=1005
,查看返回值
到此后台搭建成功。
二、前端安卓项目搭建
注意:这里只进行简单的前后端信息交互功能测试,没有复杂的业务实现
①新建安卓项目
在build.gradle(:app)
文件中导入okhttp3依赖包
implementation 'com.squareup.okhttp3:okhttp:3.10.0'
②编写布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
tools:context=".MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:id="@+id/tv_username"
android:text="用户名:"/>
<EditText
android:layout_toRightOf="@+id/tv_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/edit_username"
android:layout_centerVertical="true"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="40dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:id="@+id/pwd"
android:text="密码:"/>
<EditText
android:layout_toRightOf="@+id/pwd"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/edit_pwd"
android:layout_centerVertical="true"/>
</RelativeLayout>
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="登录"/>
</LinearLayout>
③编写网络请求工具类
package com.example.demo01.utils;
import okhttp3.MediaType;
import okhttp3.OkHttpClient;
import okhttp3.Request;
import okhttp3.RequestBody;
/**
* Post请求
*/
public class HttpPostRequest {
private static final MediaType JSON = MediaType.parse("application/json; charset=utf-8");
public static void okhttpPost(String url, RequestBody requestBody, okhttp3.Callback callback) {
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder()
.url(url)
.post(requestBody)
.build();
client.newCall(request).enqueue(callback);
}
}
package com.example.demo01.utils;
import okhttp3.OkHttpClient;
import okhttp3.Request;
/**
* Get请求
*/
public class HttpGetRequest {
public static void sendOkHttpGetRequest(String address,okhttp3.Callback callback){
OkHttpClient client = new OkHttpClient();
Request request = new Request.Builder()
.get()
.url(address)
.build();
client.newCall(request).enqueue(callback);
}
}
此时的项目结构
④查看当前计算机的ip地址
Win+R
->输入cmd
->回车->输入ipconfig -all
④编写主活动MainActivity.java
package com.example.demo01;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.os.Looper;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
import com.example.demo01.utils.HttpPostRequest;
import java.io.IOException;
import okhttp3.Call;
import okhttp3.Callback;
import okhttp3.FormBody;
import okhttp3.RequestBody;
import okhttp3.Response;
public class MainActivity extends AppCompatActivity {
private EditText et_username;
private EditText et_password;
private Button btn_login;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
//绑定控件
et_username = findViewById(R.id.edit_username);
et_password = findViewById(R.id.edit_pwd);
btn_login = findViewById(R.id.btn_login);
//为登录按钮设置点击事件
btn_login.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String url = "http://加上刚才复制的ip地址:8080/user/lgoin";
//请求传入的参数
RequestBody requestBody = new FormBody.Builder()
.add("username", et_username.getText().toString())
.add("password", et_password.getText().toString())
.build();
HttpPostRequest.okhttpPost(url, requestBody, new Callback() {
@Override
public void onFailure(Call call, IOException e) {
Looper.prepare();
Toast.makeText(MainActivity.this, "post请求失败", Toast.LENGTH_SHORT).show();
Looper.loop();
}
@Override
public void onResponse(Call call, Response response) throws IOException {
Looper.prepare();
Toast.makeText(MainActivity.this, "成功,用户名为:" + et_username.getText().toString(), Toast.LENGTH_SHORT).show();
Looper.loop();
}
});
}
});
}
}
测试:
在使用Android 9及以上手机调试时需要配置一个文件
在res
文件夹下新建xml
文件夹,并新建文件network_security_config.xml
<?xml version="1.0" encoding="utf-8" ?>
<network-security-config>
<base-config cleartextTrafficPermitted="true" />
</network-security-config>
并在清单文件中引用:
AndroidManifest.xml
文件内容
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.demo01">
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:networkSecurityConfig="@xml/network_security_config"
android:supportsRtl="true"
android:theme="@style/Theme.Demo01">
<uses-library android:name="org.apache.http.legacy" android:required="false"/>
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
通过连接Android手机进行真机测试
注意:测试时一定要选择网络稳定的环境进行,否则很容易导致请求失败!!
并且用于测试的手机应和计算机在同一局域网内。
此时,可以查看后台的打印数据
最后:
再着重强调,网络很重要!!!
我在调试的时候用的是学校的校园网,一直请求失败,用寝室的局域网,直接请求成功!
该实验大概内容就是这些,希望能对后续学习有所帮助。
大佬轻拍,谢谢!●^●