主頁 > 企業開發 > 從資料庫中洗掉專案時如何使用自定義配接器自動更新ListView

從資料庫中洗掉專案時如何使用自定義配接器自動更新ListView

2022-06-15 04:32:24 企業開發

我創建了一個 ListView,我為其實作了一個自定義配接器。此外,我將它連接到 SQLite 資料庫,其中包含 ListView 的內容。

我有一個包含多個專案的 ListView。每個專案都由一個 TextView 和一個用作按鈕的 ImageView 組成。當用戶單擊 ImageView 時,我想從資料庫中洗掉該專案并自動更新 ListView。

不幸的是,我只知道如何從資料庫中洗掉該專案。在專案從資料庫中洗掉后,我想不出一種自動更新程式中的 ListView 的方法。

在下面的版本中,我在 MainActivity 中為 ListView 添加了一個 onItemClickListener - 但它在用戶單擊 ImageView 時不起作用(即使 ImageView 是 ListView 的一部分)。

主要活動

public class MainActivity extends AppCompatActivity {
//References to buttons and other controls on the layout
private Button btn_add;
private EditText et_todo;
private Switch sw;
private static ListView lv;
private static DataAdapter todoAdapter;
private DataBaseHelper dbHelper;

/**
 * Initialization Method
 *
 * @param savedInstanceState
 */
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    dbHelper = new DataBaseHelper(MainActivity.this);

    assignVariables();
    registerClick();
    showAllToDos(dbHelper);
}

private void assignVariables() {
    //assign values to variables
    btn_add = (Button) findViewById(R.id.btn_add);
    et_todo = (EditText) findViewById(R.id.et_todo);
    lv = (ListView) findViewById(R.id.lv);
}

public void showAllToDos(DataBaseHelper dbHelper) {
    todoAdapter = new DataAdapter(MainActivity.this, R.layout.list_item, dbHelper.getAllAsList(), dbHelper);
    lv.setAdapter(todoAdapter);
}

private void registerClick() {
    btn_add.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            String toDoTitle = et_todo.getText().toString();

            if(Pattern.matches("s*", toDoTitle)) {
                Toast.makeText(MainActivity.this, "Title is missing", Toast.LENGTH_SHORT).show();
            } else if(dbHelper.existsInDB(new DataModel(toDoTitle))) {
                Toast.makeText(MainActivity.this, "Already added as ToDo", Toast.LENGTH_SHORT).show();
            } else {
                DataModel dModel = new DataModel(toDoTitle);
                dbHelper.addOne(dModel);

                showAllToDos(dbHelper);
            }
            //empty input field
            et_todo.setText("");
        }
    });

    lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
            DataModel clickedItem = (DataModel) adapterView.getItemAtPosition(position);
            dbHelper.deleteOne(clickedItem);

            showAllToDos(dbHelper);
        }
    });
}

}

資料模型

public class DataModel {

//Attributes
private int id;
private String title;

//Constructors
public DataModel(String title) {
    this.title = title;
}

public DataModel() {

}

//toString
@Override
public String toString() {
    return "DataModel{"  
            "id="   id  
            ", title='"   title   '\''  
            '}';
}

//Getters and Setters
public int getId() {
    return id;
}

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

public String getTitle() {
    return title;
}

public void setTitle(String title) {
    this.title = title;
}

}

資料配接器

public class DataAdapter extends ArrayAdapter<DataModel> {

/**
 * Attributes
 */
private Context mContext;
private int mResource;
private ArrayList<DataModel> mList;
private DataBaseHelper mDbHelper;


public DataAdapter(Context context, int resource, ArrayList<DataModel> list, DataBaseHelper dbHelper) {
    super(context, resource, list);
    mContext = context;
    mResource = resource;
    mList = list;
    mDbHelper = dbHelper;
}

public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
    //get the objects information
    String title = getItem(position).getTitle();

    //create object with the information
    DataModel model = new DataModel(title);

    LayoutInflater inflater = LayoutInflater.from(mContext);
    convertView = inflater.inflate(mResource, parent, false);

    //get TextViews
    TextView tvTitle = (TextView) convertView.findViewById(R.id.task);

    //set information to TextViews
    tvTitle.setText(title);

    //delete function
    ImageView delView = (ImageView) convertView.findViewById(R.id.delView);
    delView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            mDbHelper.deleteOne(model);
        }
    });
    return convertView;
}

}

資料庫助手

public class DataBaseHelper extends SQLiteOpenHelper {

public static final String TODO_TABLE = "TODO_TABLE";
public static final String COLUMN_ID = "ID";
public static final String COLUMN_TODO_TITLE = "TODO_TITLE";
private Context mContext;

public DataBaseHelper(@Nullable Context context) {
    super(context, "todo.db", null, 1);
    mContext = context;
}

/**
 * Is called when the app requests or inputs new data.
 *
 * @param db
 */
@Override
public void onCreate(SQLiteDatabase db) {

    String createTableStatement = "CREATE TABLE "   TODO_TABLE
              " ("   COLUMN_ID   " INTEGER PRIMARY KEY AUTOINCREMENT,"
              COLUMN_TODO_TITLE   " TEXT)";

    db.execSQL(createTableStatement);
    //create new Table
}

/**
 * Called whenever the database version number changes.
 * Prevents the previous apps from crashing.
 *
 * @param sqLiteDatabase
 * @param i
 * @param i1
 */
@Override
public void onUpgrade(SQLiteDatabase sqLiteDatabase, int i, int i1) {

}

/**
 * method to add new database entry
 *
 * @param dModel
 * @return
 */
public boolean addOne(DataModel dModel) {
    SQLiteDatabase db = this.getWritableDatabase(); //for insert actions
    ContentValues cv = new ContentValues(); //Content values stores data in pairs

    cv.put(COLUMN_TODO_TITLE, dModel.getTitle());

    long insert = db.insert(TODO_TABLE, null, cv);

    //clean up, close connection to database and cursor
    db.close();
    if(insert == -1) { //if insert is negative number than insert went wrong
        return false;
    } else { //if insert is positive number than insert succeeded
        return true;
    }
}

public boolean deleteOne(DataModel dModel) {
    //if DataModel is found in the database, delete it and return true
    //if it is not found, return false
    SQLiteDatabase db = this.getWritableDatabase();

    String queryString = "DELETE FROM "   TODO_TABLE
              " WHERE "   COLUMN_TODO_TITLE   " = "   "\""   dModel.getTitle()   "\"";;

    Cursor cursor = db.rawQuery(queryString, null);

    if(cursor.moveToFirst()) {
        return true;
    } else {
        return false;
    }
}

public ArrayList<DataModel> getAllAsList() {
    //create empty list
    ArrayList<DataModel> returnList = new ArrayList<>();
    //get data from the database
    String queryString = "SELECT * FROM "   TODO_TABLE;
    SQLiteDatabase db = this.getReadableDatabase(); //get data from database
    Cursor cursor = db.rawQuery(queryString, null);

    if(cursor.moveToFirst()) { //returns a true if there were items selected
        //loop through results, create new todo objects, put them into return list
        do {
            String todoTitle = cursor.getString(1);

            DataModel newTodo = new DataModel(todoTitle);
            returnList.add(newTodo);

        } while(cursor.moveToNext());
    } else { //returns a false if no items were selected
        //failure, to not add anything to the list
    }

    //clean up, close connection to database and cursor
    cursor.close();
    db.close();

    return returnList;
}

public boolean existsInDB(DataModel dModel) {
    SQLiteDatabase db = this.getWritableDatabase(); //for insert actions
    String queryString = "SELECT * FROM "   TODO_TABLE
              " WHERE "   COLUMN_TODO_TITLE   " = "   "\""   dModel.getTitle()   "\"";

    Cursor cursor = db.rawQuery(queryString, null);

    if(cursor.moveToFirst()) {
        return true;
    } else {
        return false;
    }
}

}

我感謝任何幫助或建議。如果您需要進一步解釋,請告訴我。

妮可

uj5u.com熱心網友回復:

在下面的版本中,我在 MainActivity 中為 ListView 添加了一個 onItemClickListener - 但它在用戶單擊 ImageView 時不起作用(即使 ImageView 是 ListView 的一部分)。

根據您的代碼考慮以下內容:-

作業示例

以下代碼基于您的代碼,但進行了各種更改,這些更改會在影像(單擊紫色框)時洗掉并重繪 串列。

list_item.xml布局(更改為將專案突出顯示為無影像):-

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/teal_200">
    <TextView
        android:id="@ id/task"
        android:layout_width="400dp"
        android:layout_height="match_parent"
        >
    </TextView>
    <ImageView
        android:id="@ id/delView"
        android:layout_width="100dp"
        android:layout_height="20dp"
        android:layout_gravity="center"
        android:background="@color/purple_200"
        >
    </ImageView>
</LinearLayout>

DataModel保持不變。

DatabaseHelper已更改為 a) 不關閉資料庫(這是低效的,因為它將應用 WAL 更改,然后必須隨后打開相對資源消耗較大的資料庫)和 b) 完成后關閉所有游標和c) 利用方便的方法:-

public class DataBaseHelper extends SQLiteOpenHelper {

    public static final String TODO_TABLE = "TODO_TABLE";
    public static final String COLUMN_ID = "ID";
    public static final String COLUMN_TODO_TITLE = "TODO_TITLE";
    private Context mContext;

    public DataBaseHelper(@Nullable Context context) {
        super(context, "todo.db", null, 1);
        mContext = context;
    }
    
    @Override
    public void onCreate(SQLiteDatabase db) {
        String createTableStatement = "CREATE TABLE "   TODO_TABLE
                  " ("   COLUMN_ID   " INTEGER PRIMARY KEY AUTOINCREMENT,"
                  COLUMN_TODO_TITLE   " TEXT)";

        db.execSQL(createTableStatement);
    }
    
    @Override
    public void onUpgrade(SQLiteDatabase sqLiteDatabase, int i, int i1) {

    }
    
    public boolean addOne(DataModel dModel) {
        SQLiteDatabase db = this.getWritableDatabase(); //for insert actions
        ContentValues cv = new ContentValues(); //Content values stores data in pairs
        cv.put(COLUMN_TODO_TITLE, dModel.getTitle());
        return db.insert(TODO_TABLE, null, cv) > -1;
    }

    public boolean deleteOne(DataModel dModel) {
        SQLiteDatabase db = this.getWritableDatabase();
        return db.delete(TODO_TABLE,COLUMN_TODO_TITLE  "=?",new String[]{dModel.getTitle()}) > 0;
    }

    @SuppressLint("Range")
    public ArrayList<DataModel> getAllAsList() {
        //create empty list
        ArrayList<DataModel> returnList = new ArrayList<>();
        SQLiteDatabase db = this.getReadableDatabase();
        Cursor cursor = db.query(TODO_TABLE,null,null,null,null,null,null);
        while (cursor.moveToNext()) {
            returnList.add(new DataModel(cursor.getString(cursor.getColumnIndex(COLUMN_TODO_TITLE))));
        }
        cursor.close();
        return returnList;
    }

    public boolean existsInDB(DataModel dModel) {
        boolean rv = false;
        SQLiteDatabase db = this.getWritableDatabase(); //for insert actions
        Cursor cursor = db.query(TODO_TABLE,null,COLUMN_TODO_TITLE "=?",new String[]{dModel.getTitle()},null,null,null);
        if(cursor.moveToFirst()) {
            rv = true;
        }
        cursor.close();
        return rv;
    }
}

資料配接器

public class DataAdapter extends ArrayAdapter<DataModel> {

   /**
    * Attributes
    */
   private Context mContext;
   private int mResource;
   private ArrayList<DataModel> mList;
   private DataBaseHelper mDbHelper;


   public DataAdapter(Context context, int resource, ArrayList<DataModel> list, DataBaseHelper dbHelper) {
      super(context, resource, list);
      mContext = context;
      mResource = resource;
      mList = list;
      mDbHelper = dbHelper;
   }

   public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
      //get the objects information
      String title = getItem(position).getTitle();

      //create object with the information
      DataModel model = new DataModel(title);

      LayoutInflater inflater = LayoutInflater.from(mContext);
      convertView = inflater.inflate(mResource, parent, false);

      //get TextViews
      TextView tvTitle = (TextView) convertView.findViewById(R.id.task);

      //set information to TextViews
      tvTitle.setText(title);

      //delete function
      ImageView delView = (ImageView) convertView.findViewById(R.id.delView);
      delView.setTag(position); //<<<<< ADDDED Sets the tag with the position in the list
      delView.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View view) {
            Integer position = new Integer(view.getTag().toString()); // gets the position from the tag
            DataModel model = mList.get(position); // gets the respective DataModel from the ArrayList
            Toast.makeText(view.getContext(),"You clicked the Image for Title = "   model.getTitle()   " position "   view.getTag(),Toast.LENGTH_SHORT).show();
            Log.d("CLICKACTION","Image clicked for title = "   model.getTitle()   " position "   view.getTag());
            /* probably faster but the potential for issues if for some reason deletes other than expected
            if (mDbHelper.deleteOne(model)) {
               mList.remove(model);
               notifyDataSetChanged();
            }
             */
            /* Alternative approach - more intensive but the resultant list IS accurate */
            mDbHelper.deleteOne(model);
            ArrayList<DataModel> newlist = mDbHelper.getAllAsList();
            mList.clear();
            for (DataModel dm: newlist) {
               mList.add(dm);
               notifyDataSetChanged();
            }
         }
      });
      return convertView;
   }
}
  • 注意一個重要的方面是利用標簽將點擊的視圖系結到 Todo/DataModel。
  • 注意另一個重要因素是對 DataAdapter 的 ArrayList 實體的操作以及notifyDatasetChanged告訴配接器重建的后續操作。

MainActivity:-

public class MainActivity extends AppCompatActivity {
    //References to buttons and other controls on the layout
    private Button btn_add;
    private EditText et_todo;
    private Switch sw;
    private static ListView lv;
    private static DataAdapter todoAdapter;
    private DataBaseHelper dbHelper;

    /**
     * Initialization Method
     *
     * @param savedInstanceState
     */
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        dbHelper = new DataBaseHelper(MainActivity.this);

        assignVariables();
        registerClick();
        showAllToDos(dbHelper); // creates a new instance of the adapter each time it is called
    }


    private void assignVariables() {
        //assign values to variables
        btn_add = (Button) findViewById(R.id.btn_add);
        et_todo = (EditText) findViewById(R.id.et_todo);
        lv = (ListView) findViewById(R.id.lv);
    }

    public void showAllToDos(DataBaseHelper dbHelper) {
        todoAdapter = new DataAdapter(MainActivity.this, R.layout.list_item, dbHelper.getAllAsList(), dbHelper);
        lv.setAdapter(todoAdapter);
    }
    
    private void registerClick() {
        btn_add.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String toDoTitle = et_todo.getText().toString();

                if(Pattern.matches("s*", toDoTitle)) {
                    Toast.makeText(MainActivity.this, "Title is missing", Toast.LENGTH_SHORT).show();
                } else if(dbHelper.existsInDB(new DataModel(toDoTitle))) {
                    Toast.makeText(MainActivity.this, "Already added as ToDo", Toast.LENGTH_SHORT).show();
                } else {
                    DataModel dModel = new DataModel(toDoTitle);
                    dbHelper.addOne(dModel);

                    showAllToDos(dbHelper);
                }
                //empty input field
                et_todo.setText("");
            }
        });


        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
                Toast.makeText(view.getContext(),"Item was clicked for Title = "   ((DataModel) adapterView.getItemAtPosition(position)).getTitle(),Toast.LENGTH_SHORT).show();
                Log.d("CLICKACTION","Item was clicked for Title"   ((DataModel) adapterView.getItemAtPosition(position)).getTitle());
                //DataModel clickedItem = (DataModel) adapterView.getItemAtPosition(position);
                //dbHelper.deleteOne(clickedItem);
                //showAllToDos(dbHelper);
            }
        });
    }
}

*結果

從新安裝(空資料庫)開始,采取了以下措施:-

  1. 添加 Test001 - Test006 所以: -

    1. 從資料庫中洗掉專案時如何使用自定義配接器自動更新 ListView
  2. 單擊專案 Test003(不是紫色框(影像))

    1. Toast 按預期顯示。
    2. 日志包括D/CLICKACTION: Item was clicked for TitleTest003
  3. 單擊 Test003 的洗掉影像(紫色框)

    1. Toast 按預期顯示 Test003 位置 2
    2. 日志包括D/CLICKACTION: Image clicked for title = Test003 position 2
    3. 從資料庫中洗掉專案時如何使用自定義配接器自動更新 ListView
      1. ie Test003 從顯示中移除
    4. 通過 App Inspection 的資料庫顯示:-
    • 從資料庫中洗掉專案時如何使用自定義配接器自動更新 ListView
      • 即資料庫中沒有Test003行

uj5u.com熱心網友回復:

直接使用 SQLite 可能具有挑戰性,而且 ListView 已過時,不建議再使用。最佳實踐是使用 RecycleView

這是一個很好的教程如何使用它

Room - 來自 Google 的 SQLite 包裝庫

LiveData - 用于訂閱實時更新

RecyclerView - 用于構建高效串列的 UI 小部件

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/490803.html

標籤:爪哇 安卓 sqlite 安卓-sqlite 定制适配器

上一篇:SQLmax是不確定的?

下一篇:多個子查詢和視窗操作SQLite

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C#(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了!

    這里給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下面,我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果,首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下: 實作代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中,有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子: 1、可選鏈運算子(optional chaining operator) ?.是可選鏈運算子(optional chaining operator)。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位,它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思,中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px,即默認情況下: 1rem = 16px rem布局原理:根據CSS媒體查詢功能,更改根標簽的字體尺寸,實作rem單位隨螢屏尺寸的變化,如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標:計算屬性是如何實作的?計算屬性快取原理以及洋蔥模型的應用?在初始化Vue實體時,我們會給每個計算屬性都創建一個對應watcher,我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講,http就是計算機通過網路進行通信的規則,是一個基于請求與回應,無狀態的,應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行,否則無法連接。tcp(三次握手,四次揮手)。 請求與回應:客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more