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  新闻表不存在