vue2+node+mysql demo总结
1.App.vue中:
2.在main.js中的new vueRouter里设置mode:history或者hash ;设置{path:'/',redirect:'home'}默认进入的路径;设置linkActiveClass改变路由激活时的class名;也定义全局基本样式和全局过滤器等,例如:
import moment from 'moment'; Vue.filter('datefmt',function(input,fmtstring){ // 使用momentjs这个日期格式化类库实现日的格式化功能 return moment(input).format(fmtstring); });
在oschina git代码
git init git add. git commit -m "项目版本1" git remote add origin https://git.oschina.net/.../... git push -u origin master
更改原类库的css时遇到伪类图标时可以修改成自定义图片
.mui-icon-phone:before{ content: ''; background-image: url(../../statics/imgs/3.png); display: inline-block;//将行间变成块级元素 width: 50px; height: 50px; background-repeat: round; }
v-bind="{to:'/news/newsinfo/'+item.id}" 特殊写法
通过this.$route.params.id获取main.js中设置的路由id值
用post方法提交评论数据
postData(){ if (this.content.trim().length === 0) { Toast('评论不能为空'); return; } this.$http.post('/api/comment/' + this.id, { content: this.content, }).then(res => { //, {params: {cId: this.id}}可以传值给后台node服务器,在content后 console.log(res); Toast('成功提交'); this.list = [{
"user_name": "匿名用户",
"add_time": new Date(),
"content": this.content
}].concat(this.list);
this.content = ''; }) },
get评论数据
getcommentlist(pageindex=1){ 1.0 确定评论数据的url let url = common.apidomain + '/api/getcomments/'+this.id+'?pageindex='+pageindex; 2.0 发出ajax请求获取数据即可 this.$http.get(url).then(function(res){ if(res.data.status !== 0 ){ Toast(res.data.message); return; } 3.0 将message数组中的数据赋值给this.list this.list = this.list.concat(res.data.message); }); }
实现更多页的加载
getmore(){ 1.0 实现this.pageindex值的增加1 this.pageindex++; console.log(this.pageindex); 2.0 获取当前this.pageindex值对应的分页数据 this.getcommentlist(this.pageindex); }
设置overflow-x:auto;出现x轴滚动条
通过v-bind绑定样式:
<ul v-bind="{style:'width:'+ulWidth+'px'}">
--------------------------------------------------------------------------------------------------------------
let w = 62; let count = res.data.message.length + 1; this.ulWidth = w * count ;
使用插件时(比如vue-preview)记得确认在webpack.config.js的loader中增加扩展名(如.svg),vue-preview不能放在<a></a>中
在photoinfo的getimgs方法里通过forEach遍历服务器数据,来按照vue-preview的要求更改图片宽高:
getSuolue(){ this.$http.get('/api/suoluetu').then(res=>{
res.data.forEach(item=>{ let img=document.createElement('img'); img.src=item.src; item.h=img.height; item.w=img.width; }); this.list=res.data; }) }
在子组件inputNumber.vue中定义加和减的方法,通过this.$emit传值给父组件
methods:{ substrict(){ this.count--; 确保最小值为1 if(this.count <1){ this.count = 1; } this.sendmessage(); }, add(){ this.count++; this.sendmessage(); }, sendmessage(){ this.$emit('dataobj',this.count); } }
在父组件goodsinfo.vue中
<inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber> ---------------------------------------------------------------------------------- getcount(count){ this.inputNumberCount = count; }, // getcount中的第一个参数就是子组件inputNumber中传递过来的count值
通过localStorage完成在goodsinfo.vue中点击 加入购物车 将数据同步至app.vue中的购物车页面
1. 只有2个vm对象是同一个对象时才能实现父子间传值,于是可以创建一个公共的vm.js文件,(将购买数量添加至app.vue下方的购物车徽章。)
//vm.js import Vue from 'Vue'; export const COUNTSTR = 'inputNumberCount'; export var vm = new Vue();
//goodsinfo.vue
import {vm,COUNTSTR} from '../../kits/vm.js';
toshopcar(){ // 1.0 触发事件 vm.$emit(COUNTSTR,this.inputNumberCount); }
//app.vue import {vm,COUNTSTR} from './kits/vm.js'; // 利用 vm.$on() 来注册 COUNTSTR这个常量代表的事件 vm.$on(COUNTSTR,function(count){ // 1.0 将count值追加到购物车中 var badgeobj = document.querySelector('#badge'); badgeobj.innerText = parseInt(badgeobj.innerText) + count; });
2.封装localSg.js
// 1.0 定义常量key,将来操作的localStorage中的数据都以这个key来作为标识 export const KEY = 'goodsdata'; export let valueObj = {goodsid:0,count:0}; // 2.0 实现数据的增加 // value;格式: {goodsid:87,count:10} export function setItem(value){ //1.0 获取json格式 let jsonString = localStorage.getItem(KEY); jsonString = jsonString || '[]'; let arr = JSON.parse(jsonString); // 2.0 将value追加进入arr arr.push(value); // 3.0 将arr 转换成json字符串保存起来 localStorage.setItem(KEY,JSON.stringify(arr)); } // 3.0 获取数据 export function getItem(){ let jsonString = localStorage.getItem(KEY); // 将json格式字符串转换成 js对象 // jsonString:是一个标准的json格式 jsonString = jsonString || '[]'; return JSON.parse(jsonString); }
在goodsinfo中使用:
import {setItem,valueObj} from '../../kits/localSg.js' toshopcar(){ // 1.0 触发事件 vm.$emit(COUNTSTR,this.inputNumberCount); // 2.0 将数据保存到localStroage中 valueObj.goodsid = this.id; valueObj.count = this.inputNumberCount; setItem(valueObj); }
使用index使开关互不干扰
<div class="row" v-for="(item,index) in datalist"> <mt-switch class="switch" v-model="value[index]"></mt-switch> getdatalist(){ // 1.0 从localstorage中获取到所有的商品id值 // obj的格式:{ // 87:4, // 88:1 // } let obj = getgoodsObject(); // 2.0 将id值按照 api的参数格式提交给api let idstring = ''; for(let key in obj){ idstring+= key + ','; } idstring = idstring.substring(0,idstring.length-1);//提交服务器的数据格式为/id1,id2,id3...
整合数据格式:从[{"goodsid":87,"count":2},{"goodsid":88,"count":3}]变成{87:2,88:3}
export function getgoodsObject(){ // 获取 数组 /* * arr的格式: * [{goodsid:87,count:1},{goodsid:87,count:3},{goodsid:88,count:1}] * */ let arr = getItem(); // 将arr数组中的goodid相同的多个对象合并成同一个对象 let resObj ={}; for(let i = 0 ; i<arr.length; i++){ if(!resObj[arr[i].goodsid]){ // 如果没有当前商品的数据,则添加一个数据 resObj[arr[i].goodsid] = arr[i].count; }else{ // 已经有当前商品的数据了,则将cont追加 let count = resObj[arr[i].goodsid]; resObj[arr[i].goodsid] = count + arr[i].count; } } return resObj; }
实现购物车里的购买数量组件cartInputNumber.vue:
拿到服务器的数据后先进行处理:(cart.vue)
this.$http.get(url).then(function(res){ //状态值的判断 if(res.data.status != 0 ){ Toast(res.data.message); return; } // 将locaStorage中的所有的商品对应的count的值赋值给message中每个对象的cou(服务器接口的数据) res.data.message.forEach((item)=>{ item.cou = obj[item.id];// obj是从localStorage中获取的数据(let obj = getgoodsObject();) // 为了解决一个bug所以必须在此处初始化values数组全部为false this.value.push(false); }); this.datalist = res.body.message; });
cartInputNumber.vue(cart的子组件)中用props接受initCount和goodsid
methods:{ substrict(){ this.count--; // 确保最小值为1 if(this.count <1){ this.count = 1; return; } this.sendmessage('substrict'); }, add(){ this.count++; this.sendmessage('add'); }, sendmessage(type){ this.resObj.type = type; this.resObj.goodsid = this.goodsid; this.$emit('cardataobj',this.resObj); } }
在localSg中添加方法:
//obj的格式:{goodsid:87,type:'add'} export function updateData(obj){ let arr = getItem(); let count = 1; if(obj.type ==='add'){ //加 arr.push({goodsid:obj.goodsid,count:count}); }else{ //减 for(let i =0 ;i < arr.length ; i++){ //如果这个对象中的count值等于1,则删除这个对象,否则将这个对象的count减1以后保存回去 if(arr[i].goodsid === obj.goodsid){ if(arr[i].count > 1){ arr[i].count = arr[i].count -1; break; }else{ //删除此对象 arr.splice(i,1); break; } } } } // 将最新的arr保存回localStorage中 localStorage.setItem(KEY,JSON.stringify(arr)); }
在cart中使用:
getiInputNumber(resObj){ console.log(resObj); // 1.0 更新localStorage中的数据 updateData(resObj); // 2.0 更新 this.datalist中的当前数量 for(let i = 0;i <this.datalist.length ; i++){ if(this.datalist[i].id == resObj.goodsid){ if(resObj.type =='add'){ this.datalist[i].cou = this.datalist[i].cou + 1; }else{ this.datalist[i].cou = this.datalist[i].cou - 1; } break; } } },
实现小球飞入购物车功能:
<transition name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter > <div v-if="isshow" class="ball"></div> </transition> --------------------------------------------------------------------------------------------------------- 动画3个方法 beforeEnter(el){ // 设定小球的初始位置 el.style.transform = "translate(0px,0px)"; }, enter(el,done){ // 保证小球出现动画 el.offsetWidth; // 设置小球的结束位置 el.style.transform = "translate(75px,366px)"; // 结束动画 done(); }, afterEnter(el){ // 重置小球的初始状态 this.isshow = !this.isshow; } ------------------------------------------------------------------------------------ .ball{ background-color: red; height: 20px; width: 20px; border-radius: 50%; position: absolute; left:150px; top:10px; transition: all 0.4s ease; z-index: 100; }