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