Android的前后端分离尝试——基于springboot和okhttp3_springboot +android 项目实战

最近在学习web项目的前后端分离，正好在做Android的大作业，于是想尝试做一下Android的前后端分离实验。虽然功能很简单，但也花了不少时间调试，特在此记录。

基本思路

1. 首先用SpringBoot技术搭建一个后端项目，用来操作一些数据
2. 创建一个Android项目，通过简单的获取后端数据库中的值来测试前后端数据的交互。

实验的环境

1. IntelliJ IDEA 2021.1.1 (Ultimate Edition)
2. Android Studio 4.2.1
3. Navicat Premium 15.0.19
4. JDK1.8
5. MySQL 8.0
6. Gradle Plugin Version: 4.2.1
7. okhttp 3.10.0
8. 调试环境：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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

③配置数据库驱动和相关参数
在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
1
2
3
4

注意：很多数据库连接不上都是这里的 驱动 或者 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 + '\'' +
                '}';
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

编写数据访问层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);
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

编写服务层

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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

服务层实现，将一个或多个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);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

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;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

点击运行，当出现端口号8080（默认）时表示后台部署成功

测试：
在浏览器中输入http://localhost:8080/user/getById?id=1005,查看返回值

到此后台搭建成功。

二、前端安卓项目搭建

注意：这里只进行简单的前后端信息交互功能测试，没有复杂的业务实现

①新建安卓项目

在build.gradle(:app)文件中导入okhttp3依赖包

implementation 'com.squareup.okhttp3:okhttp:3.10.0'
1

②编写布局文件

<?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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

③编写网络请求工具类

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);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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);
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

此时的项目结构

④查看当前计算机的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();
                    }
                });
            }
        });
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

测试：
在使用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>
1
2
3
4

并在清单文件中引用：

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

通过连接Android手机进行真机测试

注意：测试时一定要选择网络稳定的环境进行，否则很容易导致请求失败!!
并且用于测试的手机应和计算机在同一局域网内。

此时，可以查看后台的打印数据

最后：
再着重强调，网络很重要！！！
我在调试的时候用的是学校的校园网，一直请求失败，用寝室的局域网，直接请求成功！

该实验大概内容就是这些，希望能对后续学习有所帮助。

大佬轻拍，谢谢！●^●