vue-ui

vue ui組件庫

vue 當前很火前端框架vue用戶羣很是多, vue 開始針對PC端設備而不針對移動設備開發  pc端與移動端區別:   -屏幕寬度: <=750px   -操做方式:pc 鼠標 移動 手指  國內團隊:餓了麼:基於vue開發移動端組件庫 mint-ui           mui   移動組件庫

vue ui使用組件庫

-下載組件 js;css;fonts 在項目中便可使用  -使用腳手架 下載配置使用    *腳手架管理很是多第三方模塊  *webpack將項目打包  -node_modules  第三方模塊    mint-ui   -package.json   "script":{     "serve":"...."   }

vue 腳手建立新組件(網頁)   -建立空組件    　　  src/components/Test.vue   -爲空組件配置訪問路徑 router.js   　　 /Test   -測試  　　 http://127.0.0.1:8080/#/Test 　　  建立組件List.vue  　　 位置:src/componets/List.vue   　　訪問路徑: /List   　　在data中保存數組數據其中3用戶對象 {id:1,name:"tom"}  　　 而且將用戶對象值顯示模板中 　　 常見錯誤:    1: ERROR  Failed to compile with 1 errors        error  in ./src/router.js      This relative module was not found:      ./components/Test1.vue     錯誤: compile 編譯出錯(書寫代碼出錯)        2: ERROR  Failed to compile with 1 errors     tag <template> has no matching end tag    緣由:<template></template>

爲腳手架添加組件庫:     移動端組件庫(mint-ui)   官方網站: http://mint-ui.github.io/#!/zh-cn

(1)下載mint-ui組件庫       npm i mint-ui  -S    (2)在main.js 引入組件(按需加載)       import {Header} from "mint-ui"    (3)在main.js 註冊組件       Vue.component(Header.name,Header);    (4)在指定組件使用組件 List.vue       <template>          <mt-header title="XX商城"></mt-header>       </template>    #注意:css文件單獨引入

1.1 vue ui學子商城--建立表app_server_00/db.sql      xz_login      id        INT PRIMARY KEY AUTO_INCREMENT      uname    VARCHAR(25)      upwd     VARCHAR(32)     #mysql函數 md5('123')=>8sxj23jksd89xcjkw2     1   tom   202cb962ac59075b964b07152d234b70     #用戶登陸判斷     --用戶輸入 tom  123     --程序  md5(123)  202cb962ac59075b964b07152d234b70

1.2 建立服務器端程序  app_server_00/app.js        功能一:用戶登陸       -客戶請求方法GET  客戶請求路徑 /login       -獲取客戶參數 用戶名/密碼 uname;upwd       -sql           SELECT id FROM xz_login          WHERE uname =? AND upwd = 'md5(?)       -返回數據格式 json          {code:1,msg:"登陸成功"}          {code:-1,msg:"用戶名或密碼有誤"} 常見錯誤  1: 該網頁沒法正常運做      node.js 程序己經中止工做出錯      解決問題:查看node.js 窗口出現信息      res.send(status, body):: Invalid status code      res.send()中間只能字符串;數組;js對象  2: Error: Can't set headers after they are sent      緣由:你在程序中一個流程執行二次 res.send();      res.send(); 功能:發送數據+不再發數據中止工做      res.send()      解決問題:將前面send註釋 3: Error: listen EADDRINUSE :::3000      緣由: 有下程序正在運行佔用3000端口            再啓動程序佔用3000 報錯地址衝突      解決:關閉原先程序 vs code 點擊回收站

1.3腳手架建立 Login.vue      1:打開腳手架建立空組件        src/components/tabbar/Login.vue       2:配置路徑 /Login

2.1:學子商城--用戶登陸      -爲登陸按鈕綁定點擊事件 @click="btnClick"       爲用戶和密碼雙向綁定      -btnClick       獲取用戶名和密碼       發送ajax       this.axios.get(); 2.2:提示用戶信息  登陸成功 用戶名格式不正確      mint-ui   Toast("提示消息");      -因爲此功能不是每一個組件都使用      -在main.js 引入註冊全局組件,全部自定義組件都要使用      -局部組件使用Toast      (1)在當前組件 import {Toast} from "mint-ui"      (2)Toast("消息")  2.3:發送ajax  使用axios第三方模塊      -下載第三方模塊 npm i axios      -在main.js 引入模塊       import axios from "axios"      -在main.js 配置跨域訪問保存session值選項       axios.defaults.withCredentials=true      -在main.js 將axios配置vue實例中       Vue.prototype.axios = axios      -在當前組件庫中使用axios       this.axios.get(url).then(result=>{})  常見錯誤:       - Access-Control-Allow-Origin 跨域訪問       腳手架8080  -->  node.js 3000   端口不一樣       解決問題       -node.js下載第三方模塊 cors       -app.js 引入模塊       const cors = require("cors");        -在服務器配置容許來自8080全部請求       app.use(cors({         origin:["http://127.0.0.1:8080","http://localhost:8080"],         credentials:true        }))       origin:容許訪問列表       credentials:每次訪問驗證 常見錯誤:      1:用戶名不管正確或者錯誤,服務器都是錯誤      -分析緣由      -解析:F12 network控制面板   2.4:學子商城--商品列表    功能:用戶選中商品列表組件顯示商品列表(一頁)    點擊[加載更多]顯示下一頁...     完成上述功能     -數據庫表     -node.js 程序     -腳手架 2.5:學子商城--商品列表-數據庫表[多表查詢]      1:xz_laptop   lid[商品編號]/lname[商品名稱]/price[價格]      2:xz_laptop_pic  laptop_id ,md[商品中圖]      多表查詢(套路)      -將表名保存from關鍵字後面       from xz_laptop,xz_laptop_pic      -爲每張表起一個別名       from xz_laptop l,xz_laptop_pic p      -查找兩張表關係(二張表某一列 相等 大於 小於)       WHERE l.lid = p.laptop_id      最終結果      SELECT l.lid,l.lname,l.price,p.md      from xz_laptop l,xz_laptop_pic p      WHERE l.lid = p.laptop_id      GROUP BY l.lid      LIMIT 0,7;      小結:多表查詢方法使用三步套路           多行相同數據只取第一個 GROUP BY           分頁 LIMIT    -node.js 程序學子商城--商品列表     獲取腳手架發送二個數據 第幾頁 一頁幾行     查詢數據庫內容而且將結果返回     -參數 pno[第幾頁]  pageSize[一頁幾行]           默認值 pno=1 pageSize=4     -sql   現成     -json  {code:1,data:[..]}  常見錯誤:     1: 沒法訪問此網站     緣由:node.js 出錯中止工做     解決:看node.js 窗口出錯信息     SQL syntax sql語法出錯 在附近 LIMIT  2.6:學子商城--商品列表-腳手架     -分析設計外觀      最外層父元素彈性佈局      子元素彈性佈局      子元素寬度 49%     -建立空組件 src/componet/tabbar/GoodList.vue     -指定組件訪問路徑 /GoodList     #項目不少圖片:商品圖片,廣告..     #全部圖片都保存服務器  node.js

學子商城--商品列表(mint-ui)   1.1 發送ajax請求獲取商品列表    1:什麼發送請求 [打開組件時候 1頁][點擊按鈕 2 3]    2:在哪實現功能 當前組件 created()    通用方法:    -先建立方法 loadMore() 加載更多    -created(){this.loadMore()}    -點擊加載更多按鈕 this.loadMore();   1.2:完成學子商城--商品列表-添加按鈕(mint-ui)    mint-ui button    -main.js 引入Button組件    -main.js 註冊 Button組件    -<mt-button>加載更多</mt-button>    -爲button組件綁定點擊事件,完成加載下一頁功能    #解決問題：加載一頁完成追加功能    #數組拼接操做    [一頁 二頁]    var rows = this.list.concat(result.data.data);    this.list = rows; 1.3:完成學子商城--首頁(mint-ui/mui)    #主要完成功能   腳手架    -建立首頁組件   src/componets/tabbar/Home.vue    -指定首頁路徑   /Home   (1)頂部導航條  完成學子商城--首頁-頂部導航條  -mint-ui組件庫 header 組件  -main.js 引入組件 import {Header} from "mint-ui"  -註冊組件        Vue.component(Header.name,Header)  -在模板中調用    <mt-header></mt-header>   屬性:   title="顯示文字"   fixed  固定在頂部    (2)輪播圖 完成學子商城--首頁-輪播圖   -引入組件 main.js     import {Swipe,SwipeItem} from "mint-ui"   -註冊組件 main.js     Vue.component(Swipe.name,Swipe);     Vue.component(SwipeItem.name,SwipeItem);   -在模板調用 Home.vue    <mt-swipe>      <mt-swipe-item> 1 img..</mt-swipe-item>      ...    </mt-swipe>   #屬性     :auto="4000"  自動播放的時間間隔   #注意:默認輪播圖高度爲 0    (3)九宮格 完成學子商城--首頁-九宮格    -九宮格組件庫 MUI 獨立庫與VUE關係不是綁定    -下載對應文件 mui [css;js;fonts]    -src/lib/mui/....    -main.js 直接加載css文件便可     import './lib/mui/css/mui.css'     import './lib/mui/css/icons-extra.css'    -在對應組件添加標籤和樣式    (4)tabbar 　完成學子商城--首頁-tabbar    mui 庫    複製 tabbar.html 標籤到 Home.vue組件  1.4: 擴展知識-圖片寬度    公司前端設計師：[PS]設計效果圖    前端開發工程師:  html/css/js/vue...    物理像素:設計效果圖中像素  120px    邏輯像素:程序中使用中像素  60PX    #智能手機:iphone4 技術標準    #手機系列:蘋果/安卓    #公司工做:效果圖片 iphone6    #iphone6 邏輯像素與物理    2x  DPR

1.1:學子商城--購物車(重點) XZ cart id    img_ _url price count title uid 1.2:購物車--購物車--appjs -查詢指定用戶購物車列表   tom/123   登陸 (1)參數(不用腳手架傳遞參數) 1 var uid = req.session.uid; (2)sq| SELECT id,img_ url,price,title FROM xz_ _cart WHERE uid= ? (3)json {code:1,data:([...]} 示例: (1)先登陸 http://127.0.0.1:3000/login?uname=tom&upwd=123 別關閉瀏覽器 (2)查購物車 http://127.0.0.1:3000/cart -刪除指定購物車中一個商品 -app.js 參數:id sq|: DELETE FROM XZ_ cart WHERE id= ? json: {code:1,msg:"刪除成功"} 測試: http://127.0.0.1:3000/delltem?id=4 -Cart.vue -刪除指定購物車中多個商品 -顯示確認框this.$messagebox(","); 1.3:購物車--購物車--Cart.vue     2.1:購物車完成 服務器端程序完成 測試 http://127.0.0.1:3000/delAll?ids=7,9 http://127.0.0.1:3000/delAll?ids=8 -<mt- button>刪除指定數據</mt-button> --判斷選哪一個商品lst:[{cb:true,id:1},{cb:true,id:2},{cb:false,d:3}] --拼接字符串1,2 --判斷若是用戶沒有選中商品提示 2.2:vuex做用 vuex  是一個容器用於保存多個組件共享數據 當前組件data其中數據能夠在當前組件中使用，其它組件 不能使用data中數據 解決問題 (1)使用vuex多個組件共享使用數據 (2)當某個組件修改共享數據 vuex通知全部使用此數據組件更新數據.保證全部組件使用數據狀態統一 2.3:vuex使用方式 -腳手架下載vuex第三方模塊     npm i vuex -S 結果:node_ modules/vuex/... -main.js引入   vuex import Vue from "vuex" -建立vuex實例對象 var store = new Vuex.Store({ state:{}, mutations:{}, getters:{} }) state:      保存全局共享數據 mutations:修改全局共享數據函數 getters:獲取全局共享數據函數 -main.js-將vuex註冊vue實例中 Vue.use(vuex); new Vue({strore}) -其它組件獲取vuex數據<template> {{$store.getters.獲取數據方法}} -其它組件操做vuex數據   js this. $store.commit("修改數據方法") 2.4:示例:將購物車中數量保存vuex state:{cartCount:0}      #購物車數量 mutations:{ increment(state){ #將購物車數量加 1       state.cartCount++;       }     } getters:{ getCartCount(state){ return state.cartCount; #獲取購物車 數量        }    } <template> <div>{{$store.getters. getCartCount }}</div> </template>  購物車:功能保存用戶但願購買商品，須要長期保存   數據庫;cookie;...   分析購物車外觀   (1)mui card.html   (2)mui media-list.html   開始流程:   -先建立組件 ShopCart.vue   /ShopCart  2.5:學子商城--購物車(重點)--刪除指定商品   -數據庫表:   xz_cart[id, uid,pid,pname, price]   -node.js 程序:    /removeItem    參數:id購物車id    sql:DELETE FROM xz_cart WHERE id = ?   -腳手架組件:    [button] onclick ajax    腳手架刪除當前商品     -常見錯誤   (1)node.js NaN   id=undefined   緣由:數據從組件沒有發送node.js   post請求   解決:F12->NETWORK->Header->response   Header標籤   FormData post請求發送數據格式與內容   id:3

3.1:學子商城-商品列表-主頁 3.2:學子商城--商品列表數據庫xz_ laptop (1)修改xz_ laptop 添加一列img_ url (2)更新   "01.jpg"   "02.png" (3)vue_ server_ 00/public/img/01.jpg 02.png 圖片保存目錄 3.3:學子商城--商品列表-app.js (1)指定靜態目錄public (2)分頁顯示商品信息 -參數pno頁碼pageSize 頁大小(每頁幾行) 默認值:pno:1 pageSize:4 -sql (1)查詢當前頁內容 SELECT lid,price,title,img_ url FROM XZ_ laptop   LIMIT ?，? ?起始記錄數(pno-1)* pageSize; ?幾行 示例: 第一頁：SELECT lid,price,title,img_ url FROM Xz_ _laptop LIMIT； 第二頁：SELECT lid,price,title,img_ url FROM Xz_ _laptop LIMIT 4,4;  (2)總頁數 SELECT count(*) as C FROM XZ_ laptop; Math.ceil(43/4)==11 json {code:1,msg:"查詢成功",data:[],pageCount:11}) 問題一:是單頁面程序 腳手架打包命令: npm run build 生成單頁面程序 生成目錄dist/ 問題二:pool.query爲何嵌套平行 var sq|1 var sq|2 pool.query(sq|1); pool.query(sq|2); 3.4:學子商城--商品列表Product.vue顯示商品列表 (1)建立Product.vue (2)發送ajax請求獲取分頁數據created() /product (3)獲取服務器返回數據循環顯示內容 (4)當用戶點擊"加載更多"顯示下一頁

學子商城項目小結    -用戶登陸      表    xz_login[id,uname,upwd]   md5()                    1  tom  202s03kd93827899b07      app.js app.get("/login",(req,res));            *參數 uname;upwd            *sql  SELECT id FROM xz_login                 WHERE uname = ? AND upwd = md5(?)            *json {code:1,msg:"登陸成功"}                 {code:-1,msg:"用戶名或密碼有誤"}      Login.vue           <form>               <input type="text" v-model="uname" />               ..               <input type="button" value="" @click="loginBtn" />           </form>           Toast("提示")   -商品列表      表:xz_laptop(商品表) xz_laptop_pic(商品圖片表)      app.js:        *參數:pno 頁碼 pageSize 頁大小(一頁幾行)        *sql:SELECT l.lid,l.lname,l.price,p.md           FROM xz_laptop l,xz_laptop_pic p           WHERE l.lid = p.laptop_id           LIMIT ?,?           ?:offset = (pno-1)*pageSize;           ?:pageSize = parseInt(pageSize)        *json:{code:1,data:[]}      GoodList.vue        <div class="item">              <img src="" />             <span>999.00</span>        </div>        -loadMore  加載下一頁數據         *顯示第一頁第二頁數據.. concat 數組拼接         *點擊下載更多按鈕         *created()        -pno:0 list:[]    -首頁        -表        -app.js         app.get("/imglist")   輪播圖         app.get("/grid")     九宮格        -Home.vue         *頂部導航欄 mint-ui Header         *輪播圖     mint-ui Swipe/SwipeItem         *九宮格     mui/grid_default.html         *tabbar      mui/tabbar.html

1.1:完成weixin--面板         <mt- tab-container v-mode|=" active">     <mt-tab-container-item id="message">         <messagelist></messagelist>    </mt-tab-container-item>  </mt-tab-container> 1.2:完成weixin--底部導航條 <mt-tabbar v-model=" active" fixed>. <mt-tab-item id="message">. 圖片:子組件 文字 </mt-tab-item> </mt-tabbar>   1.3:完成weixin--底部導航條-按鈕.上顯示圖片子組件 TabBarlcon.vue -focused:false當 前按鈕是不是焦點 -selectedlmage:選中顯示圖片 -normallmage：默認顯示圖片 1.4:修改tabbar默認樣式 /*修改tabbar默認文字顏色*/ .mint-tabbar>.mint-tab-item{ color:#99999; } /*修改tabbar選中文字顏色*/ .mint-tabbar>.mint-tab-item.is-selected{ color:#45c018; } 父元素給子元素綁定事件 native#注意: vue事件有- -些修飾符native: 原生事件 若是自定義屬性直使用事件綁定便可，若是調用組件庫中組件 直接綁定失敗狀況,清加修飾符native啓動原生事件綁定 #注意:去除默認邊框 -App.vue根組件它的內補丁影響咱們組件 -normalize.css通用樣式文件 public/n.css public/index.html

1.1:學子商城--新聞列表    分析功能:建立新聞列表組件 NewsList.vue    -建立新組件 src/component/home/NewsList.vue    -爲組件指定路徑  /NewsList     -修改組件外觀    mui/media-list.html    -組件建立成功後發送第一頁請求    -點擊組件"加載更多"按鈕 發送下一頁請求  1.2:學子商城--新聞列表-日期格式錯誤    網頁一般日期格式貨幣格式不知足要求使用過濾器    解決問題    格式:    *main.js建立全局過濾器其它任意組件均可以直接調用    Vue.filter("過濾器名稱",function(原始數據格式){       對原始數據格式處理       返回字符串    })    *在模板中直接調用過濾器    {{item.ctime | 過濾器名稱}}  1.3:組件之間跳轉與數據傳遞      (1)組件之間跳轉        方式一:標籤          <router-link to="組件路徑">文字</router-link>          示例:Exam01 -> Exam02          <router-link to="/Exam02">跳轉組件</router-link>        方式二:編程          this.$router.push("組件路徑");          示例:          <img src="1.jpg"  @click="jump"/>          function jump(){             this.$router.push("組件路徑")          }      (2)數據傳遞        發送數據:         方式一:<router-link :to="'/Exam02?nid='+item.id">...         方式二:this.$router.push("/Exam02?nid=5")        接收數據: this.$route.query.nid        #最先接收數 created() 2.4:學子商城--新聞詳細--評論列表(子組件)    -建立空組件 src/component/home/NewsInfo.vue    -爲此組件綁定路徑  /NewsInfo    -顯示新聞詳細信息  mui/card.html    -當用戶點擊新聞列表中某條新聞     跳轉NewsInfo.vue 組件nid=3    -將當前新聞編號傳遞NewsInfo.vue組件  2.5:學子商城--新聞詳細     表:xz_news    id INT    img_url VARCHAR(255)    title   VARCHAR(225)    ctime  DATETIME    point   INT    content VARCHAR(20000)      技巧1:SQL     var sql = "INSERT INTO xz_comment VALUES(null,?,?,now())";     1年項目升級,在表xz_comment添加3列     var sql = "INSERT INTO xz_comment(id,nid,content,ctime)";     sql+="VALUES(null,?,?,now())";    技巧2:post請求 vue 使用ajax庫 axios     #緣由 axios 處理post請求參數有一個內部問題.     #第三方式 qs 將js對象轉換字符串     1:在main.js 引入qs 模塊,將模塊註冊Vue實例       import qs from "qs"       Vue.prototype.qs = qs;     2:發送post數據將數據先建立js對象再用qs轉換      字符串.     var postData = this.qs.stringify({        nid:3,        content:"..."      });    this.axios.post(url,postData).then(...)

-session(會話)會話指用戶操做過程 (1)會話開始:用戶打開某個網站第一個網頁 (2)會話中:中間能夠打開網站多個網頁 (3)會話結束:當用戶關閉瀏覽器 -session對象 session對象用來保存這次會話中全部網頁共享數據 若是會話結束session 中保存數據丟失 將哪些數據保存session對象:uid當前登陸用戶編號 #此編號是當前用戶登陸成功惟一憑證   -程序中如何使用session(1)服務器node app.js -引入express-session模塊 const session = require("express-session") -配置express-session模塊 server.use(session({ secret:"128位字符串「，#自定義字符串用於加密數據使用 reserve：true，#每次請求更新數據 saveUninitialized:true  #保存初始化數據。 })) -將數據保存session對象 req.session.uid = 2;  #正確 req.session.id = 2;  #錯誤 #爲何不能用id緣由，session 對象本身有一個屬性id -從session中獲取數據 var uid = req.session.uid; 示例(1): 用戶登陸成功將uid保存session中,用戶獲取購物中內容讀取session中uid做爲判斷條件 app.get("/login" ,(req,res)=>{ if(result.length> 0){ req.session.uid= 1; } }) -app.get("/cart' ',(req,res)=>{ var uid = req.session.uid;, if(!uid){ //沒登陸.  } })

(2)腳手架 main.js 1:配置axios發送ajax請求時保存session信息 axios.defaults.widthCredentials=true 2:配:置axios基礎路徑 axios.defaults.baseURL = "http://127.0.0.1:3000/" 示例:登陸 this.axios.get("login") 常見錯誤 -this.axios.get("http://127.0.0.1:3000/login"); -this.axios.get("http://localhost:3000/cart"); #######如何調試ajax錯誤 (1)按F12->network網絡控制面板-> -登陸操做 -出現新請求信息login  xhr   點擊項目 -查詢header標籤:檢測出參數傳遞是否正確 -查詢response標籤:檢測出返回結果是否正確

2.1:錯誤集錦 (1)腳手架啓動錯誤 errno -4058 -啓動目標沒有腳手架程序 -node_ modules 出錯形成啓動。 (2)緣由:前一個腳手架沒有中止   ctrl+C http://127.0.0.1:8081/ (3)緣由:node.js出錯中止工做 查詢node.js控制檯 Uncaught (in promise) Error: Network Error (4)緣由: connect ECONNREFUSED 127.0.0.1:3306 mysql中止工做 (5) Unknown column 'name' in 'where clause' 緣由:未知列  name sq|語句中操做name列，可是表中沒有此列 解決:sq|語句錯誤/表沒有不存在 2.2:用戶登陸成功-跳轉操做/Home1 this. $router.push("組件路徑"); 示例: 登陸成功跳轉/Home1組件 this .$router.push("/Home1"); #建立空組件/Home1