Android混合式开发实现本地存储(Room)

1.引入依赖

 //数据库
    def room_version = "2.2.6"
    implementation "androidx.room:room-runtime:$room_version"
    annotationProcessor "androidx.room:room-compiler:$room_version"
    // optional - RxJava support for Room
    implementation "androidx.room:room-rxjava2:$room_version"
    // optional - Guava support for Room, including Optional and ListenableFuture
    implementation "androidx.room:room-guava:$room_version"
    // optional - Test helpers
    testImplementation "androidx.room:room-testing:$room_version"

2.编写实体类

import androidx.annotation.NonNull;
import androidx.room.Entity;
import androidx.room.PrimaryKey;

@Entity
public class Img {
    @PrimaryKey(autoGenerate = true)
    @NonNull
    private int id;
    private String path;

    public int getId() {
        return id;
    }

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

    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }
}

 3编写表操作的Dao接口

import androidx.room.Dao;
import androidx.room.Delete;
import androidx.room.Insert;
import androidx.room.Query;
import androidx.room.Update;

import com.example.demo2.pojo.Img;

import java.util.List;

@Dao
public interface ImgDao {
    @Insert
    void addImg(Img img);
    @Update
    void updateImg(Img img);
    @Delete
    void deleteImg(Img img);
    @Query("select * from Img")
    List<Img> queryImg();
}

 4.定义操作数据库操作接口

import androidx.room.Database;
import androidx.room.RoomDatabase;
import androidx.room.TypeConverters;

import com.example.demo2.dao.AipInsurancePolicyDao;
import com.example.demo2.dao.ImgDao;
import com.example.demo2.pojo.AipInsurancePolicy;
import com.example.demo2.pojo.Img;


@Database(entities = {AipInsurancePolicy.class, Img.class}, version = 2, exportSchema = false)
@TypeConverters({Converters.class})
public abstract class BaseDatabase extends RoomDatabase {
    public abstract AipInsurancePolicyDao AipInsurancePolicyDao();
    public abstract ImgDao ImgDao();
}

 5.调用

  baseDatabase = Room.databaseBuilder(this, BaseDatabase.class, "word")
                //数据库操作比较耗时主要目的是熟悉数据库Room这句话代替了切换线程问题
                .allowMainThreadQueries()
                .build();
        aipInsurancePolicyDao = baseDatabase.AipInsurancePolicyDao();
        imgDao = baseDatabase.ImgDao();

    @JavascriptInterface
    public String addImg(String path) {
        Img img = new Img();
        img.setPath(path);
        Log.d("img",path);
        imgDao.addImg(img);
        return "添加成功";
    }

Vue

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="保单名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="保单号">
      <el-input v-model="form.code"></el-input>
    </el-form-item>
    <el-form-item>
      <div class="demo-image__preview" v-for="item in Img1" style="float: left;margin-right: 5px;">
        <el-image
            style="width: 100px; height: 100px"
            :src="item"
            :preview-src-list="Img1">
        </el-image>
      </div>
      <div
          style="background-color: #fbfdff;border: 1px dashed #c0ccda;border-radius: 6px;box-sizing: border-box;width: 100px;height: 100px;line-height: 100px;vertical-align: top; display: inline-block;text-align: center;cursor: pointer;outline: 0;"
          list-type="picture-card"
          @click="image">
        <i class="el-icon-plus"></i>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button @click="save">本地存储</el-button>
      <el-button @click="putFile">上传</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import {addIns} from "@/api/login"

export default {
  name: "form",
  data() {
    return {
      form: {
        name: '',
        code: ''
      },
      Img1: [],
    }
  },
  created() {
    window.addImage = this.addImage;
    this.queryImgs();
  },
  methods: {
    onSubmit() {
      let data = {
        code: this.form.code,
        name: this.form.name
      }
      addIns(data).then(res => {
        alert(res.data.code)
        if (res.data.code === 200) {
          alert("添加成功")
        }
      })
    },
    image() {
      window.androidinfo.takePhoto();
    },
    addImage(path) {
      // alert(path)
      this.Img1.push(path);
    },
    putFile() {
      let a = window.androidinfo.test(this.Img1[0], "http://192.168.1.97:7003/file/files")
      alert(JSON.parse(a).code);
      alert(JSON.parse(a).data);
    },
    save() {
      let that=this;
      alert(that.Img1)
      for (let i = 0; i < that.Img1.length; i++) {
        window.androidinfo.addImg(that.Img1[i])
      }
    },
    queryImgs(){
      let that=this;
      let a=window.androidinfo.queryImg();
      let b=JSON.parse(a)
      alert(b)
      for (let i = 0; i < b.length; i++) {
        that.Img1.push(b[i].path)
      }
    }
  }
}
</script>

<style scoped>

</style>

实现效果