vue ui九宫格、底部导航、新闻列表、跨域访问

一、  九宫格

九宫格:在mint-ui组件库基于vue框架

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

(1)官方网站下载安装包

(2)copy css js fonts[字体图标] src/lib/mui/...

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

即可以使用

(4)src/img/...

二、学子商城--Home----九宫格图片大小-(重点)

前端设计(PS) 项目所有外观结果ps效果图

-物理像素:设计效果图片中像素   120px

-逻辑像素:程序中使用像素        60px

#智能手机:iphone4 技术参数标准 ..

#大公司:前端设计ps图片

#iphone6 逻辑像素物理像素 2x   dpr

#iphone6 plus 3x

常见错误:

(1)启动脚手架 8081

三、学子商城--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  新闻表不存在