前端筆記之Vue（六）分頁排序|酷表單實戰&Vue-cli

来源:https://www.cnblogs.com/rope/archive/2019/05/20/10740271.html
-Advertisement-
Play Games

一、分頁排序案例 後端負責提供介面（3000） 前端負責業務邏輯（8080） 介面地址：從8080跨域到3000拿數據 http://127.0.0.1:3000/shouji http://127.0.0.1:8080/api/shouji 後端app.js var express = requi ...


一、分頁排序案例

 後端負責提供介面（3000）

 前端負責業務邏輯（8080）

 介面地址：從8080跨域到3000拿數據

 http://127.0.0.1:3000/shouji

 http://127.0.0.1:8080/api/shouji

分頁排序介面：
http://127.0.0.1:3000/shouji?page=1&pagesize=5&sortby=price&sortdirection=dao

代理跨域回來的數據介面地址：
http://127.0.0.1:8080/api/shouji?page=1&pagesize=5&sortby=price&sortdirection=dao

 

後端app.js

var express = require("express");
var url = require("url");
var app = express();

var arr = [
    {"id" : 1 , "title" : "蘋果A" , "price" : 1699},
    {"id" : 2 , "title" : "蘋果B" , "price" : 1999},
    ...
    {"id" : 14 , "title" : "蘋果N" , "price" : 8888}
];

app.get("/shouji" , function(req,res){
    var obj = url.parse(req.url, true).query;
    var page = obj.page;   //頁碼
    var pagesize = obj.pagesize; //每頁顯示的數量
    var sortby = obj.sortby;     //排序條件
    var sortdirection = obj.sortdirection; //排序條件（正序或倒序）

    //按照id或價格排序
    arr = arr.sort(function(a,b){
        if(sortdirection == "zheng"){
            return a[sortby] - b[sortby];
        }else if(sortdirection == "dao"){
            return b[sortby] - a[sortby];
        }
})
    //提供數據給前端
    res.json({
        "number" : arr.length , //商品總數量
        "results": arr.slice((page - 1) * pagesize, page * pagesize) //顯示多少條數據
    })
});
app.listen(3000);
示例代碼

 

前端main.js

import Vue from "vue";
import Vuex from "vuex";
import App from "./App.vue";
import store from "./store";
Vue.use(Vuex);

new Vue({
    el : "#app",
    store,
    render : (h) => h(App)
})
示例代碼

 

新建taobao文件夾存放三要素，然後在文件夾的index.js中引入三要素：

state.js、action.js、mutations.js三個文件：

export default {
    ...
}

 store/index.js

import Vue from "vue";
import Vuex from "vuex";
import createLogger from "vuex/dist/logger";

import counterState from "./counter/state.js"
import counterMutations from "./counter/mutations.js"
import counterActions from "./counter/actions.js"

import taobaoState from "./taobao/state.js"
import taobaoMutations from "./taobao/mutations.js"
import taobaoActions from "./taobao/actions.js"

Vue.use(Vuex);
//全局數據
const store = new Vuex.Store({
    state : {
        counterState,
        taobaoState
    },
    //同步的（commit）
    mutations : {
        ...counterMutations,
        ...taobaoMutations
    },
    //非同步的（dispatch）
    actions : {
        ...counterActions,
        ...taobaoActions
    },
    plugins : [createLogger()]
});

export default store;
示例代碼

 

state.js存儲預設數據：

export default {
    page : 1,
    pagesize: 5,
    sortby : "id",
    sortdirection:"zheng",
    number : 0,
    results :[]
}
示例代碼

 

App.vue

<template>
    <div>
        <table>
            <tr>
                <th>編號</th>
                <th>商品</th>
                <th>價格</th>
            </tr>
        </table>
    </div>
</template>
<script>
    export default {
        created(){
            //生命周期，當組件被創建時觸發，發出一個非同步請求介面數據
            this.$store.dispatch("init");
        }
    }
</script>
示例代碼

 

actions.js

export default {
async init({commit,state}){
    var page = state.taobaoState.page;
    var pagesize = state.taobaoState.pagesize;
    var sortby = state.taobaoState.sortby;
    var sortdirection = state.taobaoState.sortdirection;
    //發出非同步的get請求拿數據
    var {results,number} = await fetch(`/api/shouji?page=${page}&pagesize=${pagesize}
&sortby=${sortby}&sortdirection=${sortdirection}`).then(data => data.json());

    //數據從後端拿回來後，改變results和number
    //改變state只能通過mutations
    commit("changeResults", {results})
    commit("changeNumber", {number})
}
}
示例代碼

 

mutations.js，此時可以從控制台logger中查看請求數據成功，然後回到App.vue的結構顯示數據。

export default {
    changeResults(state , payload){ 
        state.taobaoState.results = payload.results;
    },
    changeNumber(state, payload) {
        state.taobaoState.number = payload.number;
    }
}
示例代碼

 

回到App.vue顯示數據和換頁：

<template>
    <div>
        <table>
            <tr v-for="item in $store.state.taobaoState.results">
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>{{item.price}}</td>
            </tr>
        </table>
        <button v-for="i in allPage()" @click="changePage(i)">{{i}}</button>
    </div>
</template>
<script>
    export default {
        created(){
            //生命周期，當組件被創建的時候觸發
            this.$store.dispatch("init");
        },
        computed:{
            allPage(){
                //計算總頁碼數：總數量 / 每頁數量，向上取整
                var _state = this.$store.state.taobaoState;
                return Math.ceil(_state.number / _state.pagesize)
            }
        },
        methods : {
        //分頁頁碼跳轉
            changePage(page){
                this.$store.dispatch("changePage", {page});
            }
        }
    }
</script>
示例代碼

 

actions.js

export default {
async init({commit,state}){
    ...
},
//其他都和init一樣，只改名字即可
async changePage({commit,state},{page}){
    //改變page
    commit("changePage", {page})
    //湊齊4個數據
    var page = state.taobaoState.page;
    var pagesize = state.taobaoState.pagesize;
    var sortby = state.taobaoState.sortby;
    var sortdirection = state.taobaoState.sortdirection;

    //發出請求和init方法的一樣
    var {results, number} = await fetch(`/api/shouji?page=${page}&pagesize=${pagesize}
&sortby=${sortby}&sortdirection=${sortdirection}`).then(data => data.json());

    //改變state只能通過mutations
    commit("changeResults", {results})
    commit("changeNumber", {number})
}
}
示例代碼

 

mutations.js

export default {
    changeResult(state , payload){
        state.taobaoState.results = payload.results;
    },
    changeNumber(state, payload) {
        state.taobaoState.number = payload.number;
},
//頁碼跳轉
    changePage(state , payload){
        state.taobaoState.page = payload.page;
    }
}
示例代碼

 

 App.vue下麵實現每頁顯示多少條：

<template>
    <div>
        <table>
            <tr v-for="item in $store.state.taobaoState.results">
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>{{item.price}}</td>
            </tr>
        </table>
        <button v-for="i in allPage()" @click="changePage(i)">{{i}}</button>

        <select v-model="pagesize"> 
            <option value="3">每頁3條</option>
            <option value="5">每頁5條</option>
            <option value="10">每頁10條</option>
        </select>
    </div>
</template>
<script>
    export default {
        data(){
            return {
                pagesize : this.$store.state.taobaoState.pagesize
            }
        },
        created(){
            //生命周期，當組件被創建的時候觸發
            this.$store.dispatch("init");
        },
        methods : {
            changePage(page){
                this.$store.dispatch("changePage" , {page});
            }
        },
    //v-mode的值不能加圓括弧，所以不能直接計算,先通過data(){}中計算，再用watch監聽變化
        //Vue提供一種更通用的方式來觀察和響應Vue實例上的數據變動：偵聽屬性。
        //以V-model綁定數據時使用的數據變化監測
        //使用watch允許我們執行非同步操作
        watch : {
            pagesize(v){ //當pagesize改變，發出一個請求，去改變pagesize
                this.$store.dispatch("changePageSize" , {pagesize : v});
            }
        }
    }
</script>
示例代碼

 

actions.js

export default {
async init({commit,state}){
    ...
},
async changePageSize({commit,state},{pagesize}){
    //改變page
    commit("changePageSize", {pagesize:pagesize})
    //湊齊4個數據
    var page = state.taobaoState.page;
    var pagesize = state.taobaoState.pagesize;
    var sortby = state.taobaoState.sortby;
    var sortdirection = state.taobaoState.sortdirection;

    //發出請求
    var {results,number} = await fetch(`/api/shouji?page=${page}&pagesize=${pagesize}
&sortby=${sortby}&sortdirection=${sortdirection}`).then(data => data.json());

    //改變state只能通過mutations
    commit("changeResults", {results})
    commit("changeNumber", {number})
}
}
示例代碼

 

mutations.js

export default {
    //...省略
    changePage(state , payload){
        state.taobaoState.page = payload.page;
    },
    changePageSize(state, payload) {
        state.taobaoState.pagesize = payload.pagesize;
    }
}
示例代碼

 

下麵實現id和價格的排序

App.vue

<template>
    <div>
        <table>
            <tr>
                <th>
                    id：
                    <button @click="changeSort('id','dao')">↓</button>
                    <button @click="changeSort('id','zheng')">↑</button>
                </th>
                <th>商品：</th>
                <th>
                    價格：
                    <button @click="changeSort('price','dao')">↓</button>
                    <button @click="changeSort('price','zheng')">↑</button>
                </th>
            </tr>
            <tr v-for="item in $store.state.taobaoState.results">
                <td>{{item.id}}</td>
                <td>{{item.title}}</td>
                <td>{{item.price}}</td>
            </tr>
        </table>
        <button v-for="i in allPage()" @click="changePage(i)" 
:class="{'cur':$store.state.taobaoState.page == i}">
{{i}}
</button>
    </div>
</template>
<script>
    export default {
        methods : {
            changePage(page){
                this.$store.dispatch("changePage", {page});
            },
            changeSort(sortby , sortdirection){
                this.$store.dispatch("changeSort", {sortby , sortdirection});
            }
        }
    }
</script>
<style>
    .cur{ background : orange;}
</style>
示例代碼

 

actions.js封裝成函數：

async function load(commit, state){
    //湊齊4個
    var page = state.taobaoState.page;
    var pagesize = state.taobaoState.pagesize;
    var sortby = state.taobaoState.sortby;
    var sortdirection = state.taobaoState.sortdirection;

    //發出請求
    var {results,number} = await fetch(`/api/shouji?page=${page}&pagesize=${pagesize}&sortby=${sortby}&sortdirection=${sortdirection}`).then(data => data.json());

    //數據從後端拿回來後，改變results和number
    //改變state只能通過mutations
    commit("changeResults", { results})
    commit("changeNumber", { number })
}

export default {
    async init({commit , state}){
        await load(commit , state);
    },
    async changePage({ commit, state } , {page}) {
        //改變page
        commit("changePage", { page: page})
        await load(commit, state);
    },
    async changePageSize({ commit, state }, { pagesize }) {
        //改變pagesize
        commit("changePageSize", { pagesize: pagesize })
        //頁碼歸1
        commit("changePage", { page: 1 })
        await load(commit, state);
},
//排序
    async changeSort({commit, state}, {sortby, sortdirection}){
        //改變pagesize
        commit("changeSort", { sortby, sortdirection})
        //頁碼歸1
        commit("changePage", { page: 1 })
        await load(commit, state);
    },
}
示例代碼

 

mutations.js

export default {
     //...省略
    changePageSize(state, payload) {
        state.taobaoState.pagesize = payload.pagesize;
    },
    changeSort(state , payload){
        state.taobaoState.sortby = payload.sortby;
        state.taobaoState.sortdirection = payload.sortdirection;
    }
}
示例代碼

二、Vue-cli

2.1 Vue-cli的安裝

Vue 提供一個官方命令行工具(CLI)，可用於快速搭建大型單頁應用。該工具為現代化的前端開發工作流提供了開箱即用的構建配置。只需幾分鐘即可創建並啟動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。

Vue-cli是Vue的快速起步工具（腳手架工具），再也不用手動配webpack。

Vue-loader的官網：

https://cn.vuejs.org/v2/guide/installation.html

https://vue-loader.vuejs.org/zh-cn/start/setup.html

 在全局安裝vue-cli：

npm install -g vue-cli

 

創建一個基於webpack模板的新項目文件夾，並初始化配置：

vue init webpack hello-vue
vue init webpack-simple hello-vue

vue init webpack-simple項目預設打包後只有一個html和js文件（適合小項目）

vue init webpack項目預設打包完之後，會有很標準的目錄（適合中大型項目）

 

兩種方式初始化Vue-cli項目的目錄差別很大，你會發現vue init webpack的方式初始化項目，預設提供了很多webpack的配置，也更加方便你對代理(跨域)、最終打包資源放到伺服器什麼目錄、以及js、css、img和項目在打包過程等優化的配置等。

vue init webpack

vue init webpack-simple

 

 

  

 

 

安裝依賴：

npm install

啟動項目：

npm run dev

2.2 Vue-cli的配置講解

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},

cross-env NODE_ENV=development 將環境變數設置成開發模式

cross-env NODE_ENV=production  將環境變數設置成生產模式

--open 自動開啟瀏覽器

--hot 開啟熱更新， 熱更新就是保存後進行局部刷新

打開項目以後 vue-cli給我們配置了很多東西。

 

.editorconfig對編輯器的統一配置，是讓大家的代碼有一個規範、代碼縮進形式的統一，當大家提交代碼後使用不同的編輯器打開時，顯示的代碼格式是一樣的

root = true
[*]
charset = utf-8
indent_style = space //空格縮進
indent_size = 4      //統一縮進為4個
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

 

關於生產模式的配置

開發過程不需要優化配置，只有在生產模式下，才需要優化、css壓縮打包到一個文件，js合併壓縮，關於性能優化，小圖片會轉成base64 減少http請求。

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

將vue-cli提供的src文件夾中的assets圖片文件夾，移動到根目錄外面去，就是為了不讓圖片webpack編譯打包。

 

 

vue中使用圖片的兩種方式：

第一種：傳統方式

<img src="../assets/logo.png">

 

第二種：使用vue的v-bind指令來使用data數據中的圖片：

<img :src="imgSrc">
<script>
export default {
  data () {
    return {
       imgSrc : "../assets/logo.png"
    }
  }
}
</script>

 

webpack將png的圖片變成base64，使用url-loader

{
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'url-loader',
    options: {
        limit: 8192
    }
}

limit是設置一個圖片大小的臨界點，值小於8192位元組的圖片就轉成base64圖片源碼，好處就是能減少一個HTTP請求。

 

2.3項目打包上線

如果把自己的項目放到伺服器運行，就需要使用npm run build將自己的項目打包出來。

 

然後在dist文件夾下麵，就有打包、優化好的項目文件、打包好的項目文件可以放到伺服器中運行。

註意：項目啟動一定要在伺服器環境下運行，在webpack伺服器、node、phpnow伺服器都可以。

 

三、酷表單項目

main.js

import Vue from "vue";
import Vuex from "vuex";
import App from "./App.vue";

Vue.use(Vuex);
// 創建一個全局倉庫
const store = new Vuex.Store({
    state : {

    }
})

new Vue({
    el : "#app",
    store,
    render : (h) => h(App)
})
示例代碼

第一步：寫靜態頁面組件，App.vue

<template>
    <div>
        <div class="warp">
            <div
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如何做一個跨平臺的游戲App?
    如何做一個跨平臺的游戲App? iOS和安卓系統上的應用程式，根據提供的內容不同，按照開發方式和用戶體驗不同，可區分為app和游戲； 首先從開發方式不同來說明，app開發一般是用操作系統官方提供的開發套件來做對應的開發； 這裡的開發套件就系統不同可做以下區別: iOS: Xcode， Objecti ...
  • 手寫call,apply方法實現
    call apply ...
  • bootstrap3-javascript插件（模態框）- 慕課筆記
    bootstrap支持的js插件 概覽 bootstrap中的JavaScript插件： | 插件名稱 | 定義文件 | | | : | | 動畫過濾 | transition.js | | 模態框 | modal.js | | 下拉菜單 | dropdown.js | | 滾動偵測 | scrol ...
  • vue 中使用 watch 出現瞭如下的報錯
    報錯: Method "watch" has type "object" in the component definition. Did you reference the function Method "watch" has type "object" in the component def ...
  • vue 地圖可視化 maptalks 篇
    Maptalks 項目是一個 HTML5 的地圖引擎, 基於原生 ES6 Javascript 開發： - 二三維一體化地圖, 通過二維地圖的旋轉 /傾斜增加三維視角 - 插件化設計, 能與其他圖形庫結合, 開發各種二三維效果, 例如 echarts/d3/THREE 等 - 很認真的優化了繪製性能 ...
  • D3.js 動畫 過渡效果 (V3版本)
    一 、 過渡的啟動 啟動過渡效果，與以下四個方法相關: d3.transition([selection],[name]) //創建一個過渡對象。但是由於每個選擇集中都有transition()方法，可用d3.select("rect").transition()的方式來創建過渡，因此一般不直接用d ...
  • JavaScript的一些SAO操作
    IE判斷檢測 jQuery 在 1.9 版本之前，提供了一個瀏覽器對象檢測的屬性 使用率極高。但是在版本發佈之後，大家鐘愛的這個屬性被無情的拋棄了。大家開始著手尋找.browser 的替代方案。於是各種利用 IE bug 的檢測方法被搜了出來： // IE 678 最短方法 var ie = !-[ ...
  • jquery根據html()的內容來選擇
    <ul><li>First</li><li>http://www.hfxskyyj.com/</li></ul>如上,如何選中html()值為First的jquery對象,$([innerHTML='First'])這種方法不行,說沒有innerHTML這個屬性. $(&quot;ul li&quo ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類