この記事では主に、Vue + SpringBoot でページ分割されたリストデータを実装する方法を紹介します。 1. エフェクト表示2. VUEコードVUE ビュー定義 <el-行> <el-テーブル :data="テーブルデータ" スタイル="幅: 100%"> <el-テーブル列 v-for="(データ、インデックス) in tableHeader" :key="インデックス" :prop="データ.prop" :label="データラベル" :min-width="データ['min-width']" :align="データ.align"> </el-table-column> <el-テーブル列 ラベル="操作" 最小幅="240"> <テンプレート スロット スコープ="スコープ"> <el-button type="success" size="mini" @click="toRecharge(scope)">再チャージ</el-button> <el-button size="mini" @click="toView(scope)">表示</el-button> <el-button type="primary" size="mini" @click="toEdit(scope)">編集</el-button> <el-button type="danger" size="mini" @click="deleteCard(scope)">削除</el-button> </テンプレート> </el-table-column> </el-table> <br> <el-ページネーション @size-change="ハンドルサイズ変更" @current-change="現在の変更を処理する" :current-page="ページ区切りページインデックス" :ページサイズ="[5, 10, 20, 30, 40]" :page-size=ページネーション.ページサイズ layout="total, sizes, prev, pager, next, jumper" :total=ページネーション合計> </el-pagination> </el-row> 要点: データ型の定義: tableData: バックグラウンド データ モデル定義を定義します。 tableHeader: テーブルと背景データ間のバインディング関係を定義します。 pagination: ページング データ モデルを定義します。主に (pageIndex: 現在のページ、pageSize: ページ サイズ、total: レコードの合計数) が含まれます。 メソッド定義: handleSizeChange: ページサイズを更新する handleCurrentChange: 現在のページを更新する VUE モデル定義 (データ) テーブルデータ: [], ページネーション: ページインデックス: 1, ページサイズ: 10, 合計: 0, }, テーブルヘッダー: [ { プロパティ: 'sid'、 ラベル: '番号'、 配置: '左' }, { プロパティ: 'パスワード'、 ラベル: 'パスワード'、 配置: '左' }, { プロパティ: '状態'、 ラベル: 'ステータス'、 配置: '左' }, { 小道具: 'お金'、 ラベル: '金額', 配置: '左' }, { プロパティ: 'studentSid', ラベル: '学生SID'、 配置: '左' } ] VUEデータの初期化 VUE メソッド定義: 関連データをロードするためにバックグラウンド データ インターフェイスを要求します (メソッド) 初期化(){ var 自己 = これ this.$axios({ メソッド:'post', url:'/card/findPage', データ:{"page":this.pagination.pageIndex,"limit":this.pagination.pageSize}, ヘッダー:{ 'Content-Type':'application/json;charset=utf-8' //ここを変更するだけです} }).then(res => { コンソールログ(res); 自己ページネーション合計 = res.data.data.total_count; self.tableData = res.data.data.list; }) .catch(関数 (エラー) { コンソール.log(エラー) }) }, ハンドルサイズ変更(val) { this.pagination.pageSize = val; this.pagination.pageIndex = 1; これを初期化します。 }, 現在の変更を処理する(val) { this.pagination.pageIndex = val; これを初期化します。 }, VUE 宣言サイクル関数定義: VUE メソッド定義を呼び出して、データ初期化プロセスを完了します。 VUE 宣言サイクル関数 mounted() で、init を呼び出してデータ初期化プロセスを完了します。 マウント: 関数 () { この.init() } 3. SpringBootコードエンティティ定義 パッケージ com.zzg.entity; java.math.BigDecimal をインポートします。 java.util.Date をインポートします。 org.springframework.format.annotation.DateTimeFormat をインポートします。 com.fasterxml.jackson.annotation.JsonFormat をインポートします。 com.zzg.common.BaseModel をインポートします。 パブリッククラスTCardはBaseModelを拡張します{ /** * */ プライベート静的最終long serialVersionUID = 1035674221133528445L; プライベート整数sid; プライベート文字列パスワード; プライベート文字列状態; プライベート BigDecimal マネー; @DateTimeFormat(パターン="yyyy-MM-dd") @JsonFormat(パターン="yyyy-MM-dd",タイムゾーン="GMT+8") プライベート日付 starTime; @DateTimeFormat(パターン="yyyy-MM-dd") @JsonFormat(パターン="yyyy-MM-dd",タイムゾーン="GMT+8") プライベート日付終了時間; プライベート整数 studentSid; パブリック整数 getSid() { sid を返します。 } パブリックvoid setSid(整数sid) { this.sid = sid; } パブリック文字列getPassword() { パスワードを返却します。 } パブリック void setPassword(文字列パスワード) { this.password = password == null ? null : password.trim(); } パブリック文字列getState() { 状態を返します。 } パブリック void setState(文字列状態) { this.state = state == null ? null : state.trim(); } パブリックBigDecimal getMoney() { お金を返す; } パブリックvoid setMoney(BigDecimal money) { this.money = お金; } パブリック日付 getStarTime() { starTime を返します。 } パブリック void setStarTime(Date starTime) { this.starTime = スタータイム; } パブリック日付 getEndTime() { 終了時間を返します。 } パブリック void setEndTime(日付終了時刻) { this.endTime = 終了時間; } パブリック整数 getStudentSid() { studentSid を返します。 } パブリック void setStudentSid(整数 学生 ID) { this.studentSid = 学生のSid; } } マッパーの定義 パッケージ com.zzg.mapper; java.util.List をインポートします。 java.util.Map をインポートします。 com.zzg.entity.TCard をインポートします。 パブリックインターフェースTCardMapper{ int 主キーによって削除(Integer sid); int 挿入(TCard レコード); int insertSelective(TCard レコード); TCard selectByPrimaryKey(Integer sid); int updateByPrimaryKeySelective(TCard レコード); int updateByPrimaryKey(TCard レコード); /** * メソッド拡張 */ List<TCard> を選択します(Map<String, Object> パラメータ); 整数カウント(Map<String, Object> パラメータ); void バッチ挿入(List<TCard> リスト); void バッチ更新(List<TCard> リスト); } <?xml バージョン="1.0" エンコーディング="UTF-8"?> <!DOCTYPE マッパー PUBLIC "-//mybatis.org//DTD マッパー 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <マッパー名前空間="com.zzg.mapper.TCardMapper"> <resultMap id="BaseResultMap" タイプ="com.zzg.entity.TCard"> <id 列="sid" jdbcType="INTEGER" プロパティ="sid" /> <結果列="パスワード" jdbcType="VARCHAR" プロパティ="パスワード" /> <結果列="state" jdbcType="VARCHAR" プロパティ="state" /> <結果列="money" jdbcType="DECIMAL" プロパティ="money" /> <結果列="star_time" jdbcType="DATE" プロパティ="starTime" /> <結果列="end_time" jdbcType="DATE" プロパティ="endTime" /> <結果列="student_sid" jdbcType="INTEGER" プロパティ="studentSid" /> </結果マップ> <sql id="ベース列リスト"> sid、パスワード、状態、お金、スタータイム、終了時間、学生のsid </sql> <sql id="条件"> </sql> <select id="select" パラメータタイプ="map" resultMap="BaseResultMap"> 選択 <include refid="ベース列リスト" /> t_cardより ここで1 = 1 <include refid="条件"></include> </選択> <select id="count" パラメータタイプ="map" 結果タイプ="java.lang.Integer"> 選択 カウント(1) t_cardより ここで1 = 1 <include refid="条件"></include> </選択> <select id="selectByPrimaryKey" パラメータタイプ="java.lang.Integer" resultMap="BaseResultMap"> 選択 <include refid="ベース列リスト" /> t_cardより ここで、sid = #{sid,jdbcType=INTEGER} </選択> <delete id="deleteByPrimaryKey" パラメータタイプ="java.lang.Integer"> t_cardから削除 ここで、sid = #{sid,jdbcType=INTEGER} </削除> <挿入id="挿入" パラメータタイプ="com.zzg.entity.TCard"> t_cardに挿入(sid、パスワード、状態、 お金、スタータイム、終了時間、 学生ID 値(#{sid,jdbcType=INTEGER}、#{password,jdbcType=VARCHAR}、#{state,jdbcType=VARCHAR}、 #{money,jdbcType=DECIMAL}, #{starTime,jdbcType=DATE}, #{endTime,jdbcType=DATE}, #{学生ID、jdbcType=INTEGER}) </挿入> <挿入id="挿入選択" パラメータタイプ="com.zzg.entity.TCard"> t_cardに挿入 <trim prefix="(" suffix=")" suffixOverrides=","> <if test="sid != null"> シド、 </if> <if test="パスワード != null"> パスワード、 </if> <if テスト="状態 != null"> 州、 </if> <if test="お金 != null"> お金、 </if> <if test="starTime != null"> スタータイム、 </if> <if test="endTime != null"> 終了時間、 </if> <if test="学生ID != null"> 学生ID、 </if> </トリム> <trim prefix="値(" suffix=")" suffixOverrides=","> <if test="sid != null"> #{sid,jdbcType=INTEGER}, </if> <if test="パスワード != null"> #{パスワード,jdbcType=VARCHAR}, </if> <if テスト="状態 != null"> #{状態、jdbcType=VARCHAR}, </if> <if test="お金 != null"> #{money,jdbcType=DECIMAL}, </if> <if test="starTime != null"> #{starTime,jdbcType=DATE}, </if> <if test="endTime != null"> #{endTime,jdbcType=DATE}, </if> <if test="学生ID != null"> #{studentSid,jdbcType=INTEGER}, </if> </トリム> </挿入> <更新 id="updateByPrimaryKeySelective" パラメータタイプ="com.zzg.entity.TCard"> t_card を更新 <設定> <if test="パスワード != null"> パスワード = #{password,jdbcType=VARCHAR}, </if> <if テスト="状態 != null"> 状態 = #{状態、jdbcType=VARCHAR}、 </if> <if test="お金 != null"> お金 = #{お金,jdbcType=DECIMAL}, </if> <if test="starTime != null"> star_time = #{starTime,jdbcType=DATE}, </if> <if test="endTime != null"> end_time = #{endTime,jdbcType=DATE}, </if> <if test="学生ID != null"> 学生_sid = #{学生Sid,jdbcType=INTEGER}, </if> </set> ここで、sid = #{sid,jdbcType=INTEGER} </更新> <更新 id="updateByPrimaryKey" パラメータタイプ="com.zzg.entity.TCard"> t_card を更新 パスワードを #{password,jdbcType=VARCHAR} に設定します。 状態 = #{状態、jdbcType=VARCHAR}、 お金 = #{お金,jdbcType=DECIMAL}, star_time = #{starTime,jdbcType=DATE}, end_time = #{endTime,jdbcType=DATE}, 学生_sid = #{学生ID、jdbcType=INTEGER} ここで、sid = #{sid,jdbcType=INTEGER} </更新> </マッパー> サービス定義 パッケージ com.zzg.service; java.util.List をインポートします。 java.util.Map をインポートします。 com.zzg.common.BaseService をインポートします。 com.zzg.common.entity.PageDate をインポートします。 com.zzg.common.entity.PageParam をインポートします。 com.zzg.entity.TCard をインポートします。 パブリックインターフェースTCardServiceはBaseService<TCard>を拡張します。 /** * カスタムページネーション * * @param パラメータ * @param rb * @戻る */ パブリック PageDate<TCard> selectPage(Map<String, Object> parame, PageParam rb); /** * カスタムクエリ * @param パラメータ * @戻る */ パブリック List<TCard> select(Map<String, Object> parame); /** * カスタム統計 * @param パラメータ * @戻る */ パブリック整数カウント(Map<String, Object> パラメータ); /** * カスタムバッチ挿入 * @param リスト */ パブリック void batchInsert(List<TCard> list); /** * カスタムバッチ更新 * @param リスト */ パブリック void batchUpdate(List<TCard> list); /** * 再チャージ記録* @param tCard */ パブリックvoid recharge(TCard tCard); } パッケージ com.zzg.service.impl; java.math.BigDecimal をインポートします。 java.util.List をインポートします。 java.util.Map をインポートします。 org.springframework.beans.factory.annotation.Autowired をインポートします。 org.springframework.stereotype.Service をインポートします。 com.github.pagehelper.PageHelper をインポートします。 com.github.pagehelper.PageInfo をインポートします。 com.zzg.common.AbstractService をインポートします。 com.zzg.common.entity.PageDate をインポートします。 com.zzg.common.entity.PageParam をインポートします。 com.zzg.entity.TCard をインポートします。 com.zzg.mapper.TCardMapper をインポートします。 com.zzg.service.TCardService をインポートします。 @サービス パブリッククラスTCardServiceImplはAbstractService<TCard>を拡張し、TCardServiceを実装します。 オートワイヤード TCardMapper マッパー; パブリック int 挿入(TCard レコード) { // TODO 自動生成されたメソッドスタブ mapper.insert(レコード) を返します。 } パブリック int insertSelective(TCard レコード) { // TODO 自動生成されたメソッドスタブ mapper.insertSelective(レコード) を返します。 } パブリックTCard selectByPrimaryKey(Integer sid) { // TODO 自動生成されたメソッドスタブ mapper.selectByPrimaryKey(sid) を返します。 } パブリック int updateByPrimaryKeySelective(TCard レコード) { // TODO 自動生成されたメソッドスタブ mapper.updateByPrimaryKeySelective(レコード) を返します。 } パブリック int updateByPrimaryKey(TCard レコード) { // TODO 自動生成されたメソッドスタブ mapper.updateByPrimaryKey(レコード) を返します。 } パブリック void deleteByPrimaryKey(Integer sid) { // TODO 自動生成されたメソッドスタブ mapper.deleteByPrimaryKey(sid); } パブリック PageDate<TCard> selectPage(Map<String, Object> parame, PageParam rb) { // TODO 自動生成されたメソッドスタブ PageHelper.startPage(rb.getPageNo(), rb.getLimit()); リスト<TCard> rs = mapper.select(parame); PageInfo<TCard> pageInfo = 新しい PageInfo<TCard>(rs); super.page(pageInfo.getList(), pageInfo.getPageNum(), pageInfo.getPageSize(), pageInfo.getTotal()) を返します。 } パブリックList<TCard> select(Map<String, Object> parame) { // TODO 自動生成されたメソッドスタブ mapper.select(parame) を返します。 } パブリック整数カウント(Map<String, Object> パラメータ) { // TODO 自動生成されたメソッドスタブ mapper.count(parame) を返します。 } パブリック void batchInsert(List<TCard> リスト) { // TODO 自動生成されたメソッドスタブ mapper.batchInsert(リスト); } パブリック void バッチ更新 (List<TCard> リスト) { // TODO 自動生成されたメソッドスタブ mapper.batchUpdate(リスト); } パブリックvoid recharge(TCard tCard) { // TODO 自動生成されたメソッドスタブ TCard オブジェクト = mapper.selectByPrimaryKey(tCard.getSid()); BigDecimal のお金 = object.getMoney().add(tCard.getMoney()); オブジェクトにMoneyを設定します。 mapper.updateByPrimaryKeySelective(オブジェクト); } } コントローラの定義 パッケージ com.zzg.controller; java.util.List をインポートします。 java.util.Map をインポートします。 org.slf4j.Logger をインポートします。 org.slf4j.LoggerFactory をインポートします。 org.springframework.beans.factory.annotation.Autowired をインポートします。 org.springframework.stereotype.Controller をインポートします。 org.springframework.web.bind.annotation.PathVariable をインポートします。 org.springframework.web.bind.annotation.RequestBody をインポートします。 org.springframework.web.bind.annotation.RequestMapping をインポートします。 org.springframework.web.bind.annotation.RequestMethod をインポートします。 org.springframework.web.bind.annotation.ResponseBody をインポートします。 com.zzg.common.AbstractController をインポートします。 com.zzg.common.entity.PageDate をインポートします。 com.zzg.common.entity.PageParam をインポートします。 com.zzg.common.entity.Result をインポートします。 com.zzg.entity.TCard をインポートします。 com.zzg.service.TCardService をインポートします。 @コントローラ @リクエストマッピング("/api/card") パブリッククラスCardControllerはAbstractControllerを拡張します。 // ログ記録 public static final Logger log = LoggerFactory.getLogger(CardController.class); オートワイヤード TCardService カードサービス; @RequestMapping(値 = "/findPage", メソッド = RequestMethod.POST) @レスポンス本文 パブリック結果findPage(@RequestBody Map<String, Object> parame) { ページパラメータrb = super.initPageBounds(parame); PageDate<TCard> pageList = cardService.selectPage(parame, rb); 新しいResult().ok().setData(pageList)を返します。 } @RequestMapping(値 = "/find"、メソッド = RequestMethod.GET) @レスポンス本文 パブリック結果検索() { リスト<TCard> リスト = cardService.select(null); 新しいResult().ok().setData(list)を返します。 } @RequestMapping(値 = "/findBySid/{sid}", メソッド = RequestMethod.GET) @レスポンス本文 パブリック結果findBySid(@PathVariable("sid") 整数sid) { TCard オブジェクト = cardService.selectByPrimaryKey(sid); 新しいResult().ok().setData(object)を返します。 } @RequestMapping(値 = "/deleteBySid/{sid}", メソッド = RequestMethod.GET) @レスポンス本文 パブリック結果deleteBySid(@PathVariable("sid") Integer sid) { cardService.deleteByPrimaryKey(sid); 新しいResult().ok()を返します。 } @RequestMapping(値 = "/update", メソッド = RequestMethod.POST) @レスポンス本文 パブリック結果更新(@RequestBody TCardカード) { int num = cardService.updateByPrimaryKeySelective(カード); (数値>0)の場合{ 新しいResult().ok()を返します。 } 新しい Result().error("更新に失敗しました"); を返します。 } @RequestMapping(値 = "/recharge", メソッド = RequestMethod.POST) @レスポンス本文 パブリック結果再チャージ(@RequestBody TCardカード) { cardService.recharge(カード); return new Result().error("再充電に成功しました"); } @RequestMapping(値 = "/insert", メソッド = RequestMethod.POST) @レスポンス本文 パブリック結果挿入(@RequestBody TCardカード) { int num = cardService.insertSelective(カード); (数値>0)の場合{ 新しいResult().ok()を返します。 } return new Result().error("追加に失敗しました"); } } 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: VMware Workstation Pro でサーバー仮想マシンを構築する (グラフィック チュートリアル)
>>: mysql binlog (バイナリログ) を表示する方法
目次1. フロントエンドルーティングの実装原則2. vue-Routerの基本的な使い方2.1. イ...
1. IEブラウザモードハックロゴ1. CSSハックロゴコードをコピーコードは次のとおりです。 ie...
序文「画像処理というと、PhotoShop などの画像処理ツールを思い浮かべることが多いです。フロン...
Sublime Text 2 は、軽量でシンプル、効率的なクロスプラットフォーム エディターです。ブ...
今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね?今日はカルーセル画像の真髄を簡...
Tomcat8 イメージをダウンロード [root@localhost ~]# docker sea...
最近、UTF8 エンコードの中国語 Zen Cart Web サイトをデバッグしているときに奇妙な現...
背景PNG 画像は jpg 画像よりも多くのストレージスペースを占有しますが、PNG 画像の品質は大...
成果を達成する実装コードhtml <input type="radio" ...
MySQL はインストール時に自動的に mysql という名前のデータベースを作成します。mysql...
「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Ap...
この記事では、例を使用して、MySQL で複数のトリガー操作を作成する方法について説明します。ご参考...
成果を達成する実装コードhtml <div id="コンテナ"> &...
MySQL の導入現在、会社ではプラットフォーム運用を通じてMySQLを導入しています。金曜日、プラ...
目次使用されるPygame関数スクリーンの作成ヘビの作成ヘビを動かすゲームオーバーの処理食事を増やす...