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