vue ui九宮格、底部導航、新聞列表、跨域訪問

1、  九宮格

  九宮格:在mint-ui組件庫基於vue框架

         mui不是基於vue框架 只是css/js文件

  (1)官方網站下載安裝包

  (2)copy css js fonts[字體圖標] src/lib/mui/...

  (3)使用css文件  main.js 直接 import 引入任何組件

    便可以使用

  (4)src/img/...

 

 2、學子商城--Home----九宮格圖片大小-(重點)

   前端設計(PS) 項目全部外觀結果ps效果圖

   -物理像素:設計效果圖片中像素   120px

   -邏輯像素:程序中使用像素        60px

   #智能手機:iphone4 技術參數標準 ..

   #大公司:前端設計ps圖片 

   #iphone6 邏輯像素物理像素 2x   dpr

   #iphone6 plus 3x

 

  常見錯誤:

  (1)啓動腳手架 8081

 

3、學子商城--Home----tabbar-(底部導航條)

   (1)mui 組件庫中有 tabbar.html

  3.3:學子商城--Home----圖片輪播

   (1)圖片保存服務器端 文件夾 public/img/...

     圖片保存路徑放在  數據庫中

        http://127.0.0.1:3000/img/banner1.png

     爲何?圖片多;安全

   (2)建立服務器

    //服務器項目目錄

    vue_server_00

     public/img/輪播圖圖片

     pool.js    鏈接池

     db.sql    數據庫建立表腳手架

     app.js    主程序

   (3)經過腳手架使用ajax獲取服務器端圖片列表

     axios 第三方組件與vue 關係

     -下載 npm i axios

     -main.js 引入axios 庫

     import axios from "axios"

     -main.js 配置axios 庫跨域訪問保存session值

     axios.defaults.withCredentials=true

     -main.js 將axios 庫配置Vue

     Vue.prototype.axios = axios

     -Home.vue

     this.axios.get(url).then(result=>{

     })

  3.4:學子商城--跨域訪問

    三種不一樣跨域訪問方式

     -訪問域名不一樣 a.com/1.js  -> b.com/2.js

     -訪問端口不一樣 a.com:8080/1.js  ->a.com:3000/2.js

     -訪問協議不http://127.0.0.1/1.js  https://127.0.0.1/2.js

    解決跨域訪問

     -jsop 填充式json

     -在服務器端程序配置容許那個域名下程序訪問

      nodejs 下載模塊 cors   

      npm i cors

     -在主程序 app.js

      const cors = require("cors"); #引入模塊

      app.use(cors({     #容許那個域名程序跨域訪問

       origin:["http://127.0.0.1:8080","http://localhost:8080"]

       ....

      }))

      app.get("/list"...)

     #注意:配置代碼在全部請求以前添加

     #常見錯誤:輪播圖片錯誤

     

  3.5:學子商城--新聞列表

    (1)分析新聞列表保存數據庫  表 名 列 類型

       vue_server_00/db.sql

    (2)app.js 分頁請求

    (3)腳手架建立組件

     - /home/NewsList.vue    /NewsList.vue

     -發送ajax請求獲取新聞列表第一頁數據

     -使mui組件建立新聞列表

     常見錯誤:

     - net::ERR_CONNECTION_RESET

     緣由:服務器 node.js 出錯而且中止工做

         查看node.js 控制檯出錯消息

    Table 'xz.xz_news' doesn't exist  新聞表不存在