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 确定评论数据的urllet 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.listthis.list = this.list.concat(res.data.message);});}

实现更多页的加载

            getmore(){
                1.0 实现this.pageindex值的增加1this.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--;
                 确保最小值为1if(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的参数格式提交给apilet 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数组全部为falsethis.value.push(false);});this.datalist = res.body.message;});

cartInputNumber.vue（cart的子组件）中用props接受initCount和goodsid

        methods:{substrict(){this.count--;
//                确保最小值为1if(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;}

转载于:https://www.cnblogs.com/jiuyejiu/p/8361741.html

vue2+node+mysql demo总结相关推荐

vue2+node实现全栈多人视频会议
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录项目前言一.前期准备二.开发展示三.开发过程 1.环境配置 2.源码目录 3.运行 4.部署上线总结项目前言场景 ...
node与mysql开源_node与mysql的相互使用————node+mysql
node与mysql的相互使用----node+mysql 为什么选node???因为我是个前端. 为什么选mysql???因为成熟,稳定,听说容易学. 一.mysql数据库: mysql下载和使用我 ...
node+Mysql，数据库时区显示正确，查询时却显示另一个时区
问题: 1.node+Mysql,查看数据库时区显示正确,但查询时,显示的确是另一个时区的时间. 2.前端调用接口返回:startTime: "2020-03-04T17:53:55.000 ...
【Node学习】—运行node服务demo
[Node学习]-运行node服务demo 创建node文件名字不能是node.js 复制官网的案例启动node服务:node 文件名字.js 浏览器来访问这个服务官网版改写版
前后端分离vue2+node易购商城后台管理系统
继续学习vue 之前写了个全栈后台管理系统,功能上大体已经满足了后台管理的全部内容.利用空余时间又重新写了一个,虽然页面上精简了很多,但是基本上都是自己写的,而且加入了自己的理解,尤其是vuex那一块 ...
Vue2+Node.js前后端分离项目部署到云服务器
本文参考教程: NodeJS项目部署到阿里云ECS服务器全程详解 - 知乎本文详细介绍如何部署NodeJS项目到阿里云ECS上,以及本人在部署过程中所遇到的问题.坑点和解决办法,可以说是全网最全最详细 ...
node mysql await_node.js中对 mysql 进行增删改查等操作和async，await处理
要对mysql进行操作,我们需要安装一个mysql的库. 一.安装mysql库 npm install mysql --save 二.对mysql进行简单查询操作 const mysql = requ ...
Node Mysql事务处理封装
node回调函数的方式使得数据库事务貌似并没有像java.php那样编写简单,网上找了一些事务处理的封装并没有达到自己预期的那样简单编写,还是自己封装一个吧. 封装的大体思路很简单:函数接受一个事务处 ...
node mysql登录注册_图解NodeJS实现登录注册功能
该Demo根据菜鸟教程的练手项目,请提前到菜鸟教程的官网查看nodejs的相关教程,根据教程实际操作一遍,然后自己动手去实现登录.注册功能,此Demo只作参考,不符合前端相关规范. 使用的技术栈 no ...

vue2+node+mysql demo总结

vue2+node+mysql demo总结相关推荐

最新文章

热门文章