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