YY公司成本管理存在的问题及对策分析

基于vue框架的移动端在线服装商城的设计与实现摘要：本设计主要是基于html、css、js等技术，采用vue前端开发框架写一个能够实现网上浏览商品，网上添加购物车，网上对购物车里的商品进行处理等功能的webApp，本项目主要是采用的现在网上流行的vue前端开发框架，Vue.js本身具有响应式编程和组件化的特点。所谓响应式编程,即为保持状态和视图的同步。组件化提高了开发效率，一些组件可以重复使用，采用了媒体查询，对手机的类型进行查询，长度也采用了百分数代替，能够实现适应不同的手机，使浏览商品更加舒适。[1]关键字：css；js；html；vue1引言选题目的和意义WebAPP是基本于HMTL5的新标准的网站新技术，专门针对于手机移动互联网的Web项目开发。比如微信上面的营销游戏，一个手机浏览器打开的淘宝APP、美团APP和基他的一些商城APP等。由于是Web现在主流的新技术，用它开发的移动应用就可以在微信上打开，在手机浏览器上打开，也可以在自己开发的APP上面打开。只需要开发一套全部设备都可以正常使用，这也是低开发成本、开发时间、快速验证我们构想的新商业模式的最好的路径。国内外的发展及研究趋势WebAPP最广泛使用的开发工具包括HTML，CSS，JavaScript，HTML的语义化表达是搜索的基石之一，使得WebAPP易于被索引和发现。Web协议栈让全世界的网页成为即时更新并通过URL相互联系的网络，使得WebAPP具有天然的开放的优势。然而WebAPP也存在着后台运行能力缺失、访问页面孤立等问题，由于框架和控件的调用功能受限，影响UI设计和使用体验。从开发角度看，国内外大型互联网企业推出的开源跨平台移动开放项目，可有效降低应用的开发和推广成本，给互联网创业者带来了新的机会。例如微信已经对开发者提供了完整的设计指南，并提供一套可供Web设计和小程序使用的Sketch和PS基础控件库和开发者调用资源库，但同时也对小程序的开发框架、样式和传播方式作了诸多限制[2]。2前端开发及相关技术2.1前端开发的简单介绍\t"/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/_blank"前端开发是创建Web页面或app等前端界面呈现给用户的过程，通过\t"/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/_blank"HTML，\t"/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/_blank"CSS及\t"/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/_blank"JavaScript以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从\t"/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/_blank"网页制作演变而来，名称上有很明显的时代特征。在\t"/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/_blank"互联网的演化进程中，网页制作是\t"/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/_blank"Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着\t"/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/_blank"互联网技术的发展和\t"/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/_blank"HTML5、\t"/item/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/_blank"CSS3的应用，现代网页更加美观，交互效果显著，功能更加强大。2.2前端的发展前端的发展是经历了一些阶段性的发展的：在最开始那些年是一个前后端不分的蛮荒时代，那个时候前后端没有分离，程序员是又当爹又当妈，要做前端又要做后端。代码各种耦合在一起，服务器压力巨大，因为服务器会受到各种http的请求。例如静态的css，js，图片等，一旦服务器出现问题，前后台一起玩儿完，用户体验特别差。而且开发上也是，UI出好设计图之后，必须先切html页面，再来套jsp等数据化的内容。开发时间变长，出错率也非常高如果html发生变更，就更惨了，可以说是开发效率奇低。后来随着开发和应用的需求变化，逐渐进入到了前后端分离的文明时代。在文明时代的第一阶段，js通常使用原生js，但这样做的缺点也很明显，首先是js语言设计比较草率，一些原生的api并不好用，因此需要更多代码来解决浏览器的兼容问题，需要大量的时间精力，对开发人员要求也比较高。因此在第二阶段，为了解决原生js晦涩难懂还不好用的问题，出现了jquery等框架解救了万千开发人员。和js相比，这些库的语法更简单，可以很容易地浏览文档，选择元素，处理事件等，也降低了开发人员的门槛。到了第三阶段，因为随着互联网的发展，项目越来越大，前后端分离后的开发工作量越来越多的转移到前端上来。一个简单的jquery库或者是underscore库等等已经难以管理控制整个项目了，代码变得越来越复杂难以修改。这个时候就迫切的需要将代码更合理的划分以便于开发和管理，因此诞生了MVC这种取自于后端的概念沿用到前端来。M是模型model用于数据保存V是视图view用于用户界面绘制C是控制器controller用于业务逻辑这就将代码分层，成为了我们基本的MVC框架。当然还有一些框架提出了MVVM模式，其实就是用ViewModel代替了Controller，成为了简化的Controller这样做唯一的作用就是为view提供处理好的数据，不含其它任何逻辑，实现视图与数据模型的强耦合，数据的变化会实时反映在view上，不再需要手动处理。2.3html5前端相关开发技术2.3.1JavaScript的简单介绍Js是一种脚本语言，有以下几个特点代码可以在任何文本编辑工具编写，语法类似C和java无需编译，由js解释器执行弱类型语言：没有过多的数据类型，只有一种var，为变量赋值时会自动判断并转换数据的具体类型；强类型语言数据类型有int(整型)、float(浮点型，小数)、char(字符型) 4.基于对象：没有提供对象抽象、继承、重载等有关面向对象语言的功能，二是把其他语言所创建的复杂对象统一起来，从而形成一个强大的对象系统。[3]2.3.2css的简单介绍层叠样式表（级联样式表），简称为样式表；html是网页的内容，css是内容的表现，css主要是给html中的页面元素定义样式，实现了内容与表现的分离，提高了代码的可读性和可重用性，html用于构建网页的结构，css用于构建html元素的样式，我们尽量使用css来代理样式属性，实现内容与表现的分离，除非样式为html属性特有。2.3.3jq的简单介绍JQuery是一个优秀的js框架。JQuery是继Prototype之后又一个优秀的js框架。其宗旨是——写更少的代码,做更多的事情。它是轻量级的js库，这是其它的js库所不及的，它兼容CSS3，还兼容各种常用浏览器。JQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。JQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。JQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。2.3.4vue的简单介绍Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

[2]

。Vue.js自身不是一个全能框架——它只聚焦于视图层，而且在与相关工具和支持库一起使用时

[3]

，Vue.js也能完美地驱动复杂的单页应用。3前端编辑器HBuilder：一款中国人自己开发编程软件。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。插件、快捷键齐全，支持代码回退、前进。云打包功能，可以将HTML5项目打包成app应用。简单粗暴无需安装，最重要的是免费使用。缺点就是项目过大，文件过多时会非常卡顿WebStormWebStorm被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”等。这个编译器的特点是自动保存，历史记录方便回退，插件、快捷键齐全，集成node.js,html5,git,cvs。可直接使用自带的控制台编译打包webpack等模块化代码。缺点就是该软件要收费3.3SublimeText具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。该编辑器的特点是拼写检查，书签，完整的

PythonAPI，

Goto功能，即时项目切换，多选择，多窗口等等。SublimeText是一个跨平台的编辑器，同时支持Windows、Linux、MacOSX等操作系统。不足之处是安装插件比较麻烦。3.4VisualStudioCode该编辑器是由微软开发，号称地表最强编辑器。该编辑器的特点是开源，免费，自定义配置，集成git，智能提示强大，支持各种文件格式（html/jade/css/less/sass/xml），调试功能强大，各种方便的快捷键，强大的插件扩展，不足之处是同样的是插件安装比较繁琐，不像前两个编辑器一样可以一键安装4产品的设计4.1产品的初始思路首先这个产品主题是一个关于网上商城的webapp，所以要实现以下几个功能顾客登录（让顾客登录，查看属于自己的商品以及信息），商品展示（展示出该app可以卖出的商品以便用于顾客进行挑选），推荐商品（推荐一些卖的火热的商品，好卖的商品），购物车（存放顾客自己想要购买的商品，并且可以对自己想要购买的商品进行处理），查看自己的一些信息修改密码的功能所以该app需要包括登录页面，商品展示页面，推荐，购物车，我的这几个模块来实现上面的功能。通过对该webapp的主题分析以及功能实现要求确定了该webapp的设计风格为精致简约。4.2页面的布局网站页面布局是网站站内优化的一个重要组成部分;而网站站内优化却又是一个网站最终是否能够冲入百度首页甚至前三的最关键要点。我们设置的webApp的页面采用的是上中下结构，在上方显示该页面是哪一个位置，中间部分显示页面的内容，下面显示主要板块和路由，让客户跳转到想去的页面。[4]5.产品的主要功能展示5.1登录注册页面的实现登录页面就是为了让客户登录本网站用的，用来判断客户的登录情况以及保留顾客登录本webApp的历史数据和之前的操作。验证登录主要是以下几个流程，当顾客点击注册页面的时候，会先跳转到注册的页面，进行注册操作，当然也会进行验证，首先进行表单验证，验证账号密码是否符合要求，符合之后，再验证本号是否已经注册过了，注册了的话给返回一个关于已经注册的信息，没有注册过就会返回注册成功，当点击登录的时候会先查看你的账号是否符合要求，先进行表单验证，在验证是否存在，不存在的话，会提示该账号不存在之类的话，存在了就会对密码进行验证，成功了就会提示登录成功，然后跳转到主页。主页效果图登录注册页面代码首先先通过html和css实现页面，然后通过js实现登录页面的功能，此处是用的本地储存暂时模拟后台处理数据<template> <divclass="entry"> <header><span@click='regret'>取消</span></header> <div><imgsrc="/static/images/entry/1.png"alt=""></div> <ul> <li><inputtype="text"placeholder="邮箱/手机号"v-model="number"@blur='numbertext'><span>{{numbercontent}}</span></li> <li><inputtype="password"placeholder="密码"v-model="password"@blur='passwordtext'><span>{{passwordcontent}}</span></li> <router-linktag='li':to='towhere'><inputtype="button"value="登录"@click='tohome'></router-link> </ul> <div> <div>忘记密码?</div> <div>注册账号</div> </div> <footer> <imgsrc="/static/images/entry/sina.png"alt=""> <div></div> <imgsrc="/static/images/entry/wx.png"alt=""> </footer> </div></template><script> exportdefault{ data(){ return{ number:'', numbercontent:'', password:'', passwordcontent:'', towhere:'/entry', } }, methods:{ regret(){ history.back() }, numbertext(){ if(/^1[3-9]\d{9}$/.test(this.number)||/\S*@\S*\.\S*/.test(this.number)){ this.numbercontent=''; }else{ this.numbercontent='账号不符合要求'; } }, passwordtext(){ if(this.password.length>=6){ this.passwordcontent=''; }else{ this.passwordcontent='密码长度不能小于6'; } }, tohome(){ if(this.numbercontent==''&&this.passwordcontent==''){ localStorage.setItem('entryStatus','true'); localStorage.setItem('my','/my'); localStorage.setItem('myche','/shopping'); history.back(); } } }}</script><stylelang="less"scoped> .entry{ height:100vh; background-image:url(/static/images/entry/2.png); background-repeat:no-repeat; background-size:100%100%; header{ max-width:600px; width:90%; color:white; margin:auto; padding-top:1.2rem; font-size:1.2rem; } header+div{ width:4rem; height:4rem; margin:auto; margin-top:3rem; img{ width:4rem; height:4rem; } } ul{ margin:0; padding:0; list-style-type:none; li{ max-width:600px; width:90%; margin:auto; margin-top:40px; text-align:center; input{ font-size:20px; max-width:600px; width:100%; height:2rem; text-align:center; } &:last-childinput{ border:none; color:white; background-color:#e7b800; } span{ color:red; font-size:30px; } } } ul+div{ margin:auto; max-width:600px; width:90%; display:flex; justify-content:space-around; margin-bottom:2rem; div{ color:#7d7c7c; width:5rem; text-align:right; } } footer{ max-width:600px; width:90%; margin:auto; text-align:center; div{ display:inline-block; width:30px; } img{ width:4rem; } } }</style>5.2购物车功能的实现购物车的功能包括添加想要购买的商品，增加减少商品数量，删除商品显示想要购买的商品等等功能点击编辑之前的页面效果点击编辑之后的效果图代码实现的原理首先点击想要购买的物品的时候会把想要购买的物品先本地储存，当返回购物车页面的时候把本地储存的信息展示出来，当点击结算的时候跳转到下一个页面填写一些地址信息等，然后把所有内容返给后台，然后再显示信息，同理这里用的本地储存模拟的后台，代码如下<template> <divclass="shopping"> <header> <div><imgsrc="/static/images/shoes/left.svg"alt=""@click='regret'></div> <divclass="headline"><imgsrc="/static/images/shoes/1.png"alt="">购物车</div> <divclass='isSure'@click='isisSure'>{{isSure}}</div> </header> <section> <divv-for='(m,n)ingoodsinfor'class="buygoods"> <div@click='checkgoods(m)'><img:src="m.pitch"alt=""></div> <div:style='{backgroundImage:m.img}'><!--<img:src="m.imgs"alt="">--></div> <ul> <li>{{m.title}}</li> <li>数量：<inputtype="button"value='+':style='{display:buttonArise}'@click='addnum(m)'>{{m.num}}<inputtype="button"value='-':style='{display:buttonArise}'@click='reducenum(m)'><divclass="delete"@click='deleted(m)':style='{display:buttonArise}'>删除</div></li> <li>¥{{m.newprice}}</li> </ul> </div> </section> <footer> <divclass='footerleft'> <divclass='xuan'@click='checkall'> <div><img:src="all"alt=""></div> <div>全选</div> </div> <div> <div>¥{{allnum}}</div> <div>不包含其他费用</div> </div> </div> <divclass="footerright"@click='buygoods'>结算</div> </footer> </div></template><script> //localStorage.clear() exportdefault{ data(){ return{ goodsinfor:'', all:'/static/images/shopping/nopitch.svg', allnum:0, isSure:'编辑', buttonArise:'none', } }, created(){ this.goodsinfor=JSON.parse(localStorage.getItem('shopping')); vararr=JSON.parse(localStorage.getItem('shopping')); vark=0; this.allnum=0; for(varainarr){ if(arr[a].pitch==arr[a].pitch1){ k++ this.allnum+=arr[a].num*arr[a].newprice } if(k==arr.length){ this.all='/static/images/shopping/pitch.svg' } } }, methods:{ regret(){ history.back() }, checkgoods(n){ if(n.pitch==n.pitch1){ n.pitch=n.pitch2 this.all='/static/images/shopping/nopitch.svg' this.allnum-=n.newprice*n.num }else{ n.pitch=n.pitch1 this.allnum+=n.newprice*n.num } vararr=JSON.parse(localStorage.getItem('shopping')); vark=0; for(varainarr){ if(n.imgs==arr[a].imgs){ arr[a].pitch=n.pitch; localStorage.setItem('shopping',JSON.stringify(arr)); } if(arr[a].pitch==arr[a].pitch1){ k++ } if(k==arr.length){ this.all='/static/images/shopping/pitch.svg' } } }, checkall(){ vararr=this.goodsinfor; if(this.all=='/static/images/shopping/nopitch.svg'){ this.all='/static/images/shopping/pitch.svg'; this.allnum=0; for(varainarr){ arr[a].pitch=arr[a].pitch1 this.allnum+=arr[a].newprice*arr[a].num localStorage.setItem('shopping',JSON.stringify(arr)); } }else{ this.all='/static/images/shopping/nopitch.svg'; for(varainarr){ arr[a].pitch=arr[a].pitch2 } this.allnum=0; localStorage.setItem('shopping',JSON.stringify(arr)); } }, isisSure(){ if(this.isSure=='编辑'){ this.isSure='完成' this.buttonArise='inline-block' }else{ this.isSure='编辑' this.buttonArise='none' } }, addnum(n){ n.num++ if(n.pitch==n.pitch1){ this.allnum+=n.newprice*1 } }, reducenum(n){ if(n.num){ n.num-- if(n.num==0){ n.num=1 }else{ if(n.pitch==n.pitch1){ this.allnum-=n.newprice*1 } } } }, buygoods(){ vararr1=[]; vararr=JSON.parse(localStorage.getItem('shopping')); for(varainarr){ if(arr[a].pitch==arr[a].pitch1){ arr1.push(arr[a]) localStorage.setItem('buygoods',JSON.stringify(arr1)); } } if(arr1.length){ open("http://localhost:8080/#/sureGoods","_self"); }else{ alert('请选中商品') } }, deleted(n){ for(varainthis.goodsinfor){ if(n.title==this.goodsinfor[a].title){ this.goodsinfor.splice(a,1); localStorage.setItem('shopping',JSON.stringify(this.goodsinfor)) } } this.allnum=0; for(varainthis.goodsinfor){ if(this.goodsinfor[a].pitch==this.goodsinfor[a].pitch1){ this.allnum+=this.goodsinfor[a].newprice*this.goodsinfor[a].num } } } }}</script><stylelang="less"scoped> .shopping{ max-width:600px; width:100%; margin:auto; header{ position:fixed; top:0%; left:50%; transform:translate(-50%); background-color:white; max-width:600px; width:100%; height:2.5rem; display:flex; justify-content:space-between; div{ width:2.5rem; height:2.5rem; line-height:3rem; img{ width:1.5rem; height:1.5rem; } } .headline{ width:6rem; height:2.5rem; line-height:2.5rem; font-size:1.3rem; img{ width:1.3rem; height:1.3rem; margin-bottom:-0.25rem; margin-right:0.2rem; } } .isSure{ font-size:1.1rem; height:2.5rem; width:2.5rem; line-height:2.5rem; margin-right:1rem; } } section{ margin-top:3rem; max-width:600px; width:100%; &>div{ padding:.2rem; width:90%; margin:auto; display:flex; background-color:#e7e7e7; div{ &:first-child{ width:1rem; height:6rem; line-height:6rem; margin-right:0.2rem; img{ width:1rem; height:1rem; } } &:nth-child(2){ width:6rem; height:6rem; line-height:4rem; margin-right:0.2rem; background-repeat:no-repeat; background-size:95%; background-position:center; } } ul{ margin:0; margin-top:0.8rem; width:100%; list-style-type:none; padding:0; li{ font-size:0.8rem; height:1.5rem; line-height:1.5rem; input{ width:1.5rem; height:1.5rem; } } } } } .delete{ border:1pxsolidblack; background-color:white; margin-left:1rem; color:red; } footer{ position:fixed; bottom:0%; left:50%; transform:translate(-50%); max-width:600px; width:100%; height:3rem; display:flex; .footerleft{ background-color:yellow; width:50%; display:flex; color:#333333; .xuan{ display:flex; width:3.5rem; line-height:3rem; font-size:0.5rem; img{ width:1rem; margin-right:.2rem; margin-left:.2rem; } } .xuan+div{ div{ font-size:0.8rem; height:50%; line-height:1.5rem; } } } .footerright{ width:50%; background-color:#000000; color:yellow; text-align:center; line-height:3rem; } } }</style>5.3添加喜爱物品这个功能是用来让顾客看到喜欢的商品，但此时还不能买，不能加入购物车，以后再找找不到的问题，有了这个功能后当你看到自己喜欢的商品后，可以把它添加到自己喜欢的列表上，等以后有能力购买的时候就可以直接通过喜欢的商品里去找点击喜欢商品之前点击小心之后命名完名字之后然后可以通过我的去查看自己喜爱的山品表单代码实现的方法首先点击小心之后会出现一个框，同时会把这个商品储存在本地，然后再把名字之类的也放到本地，最后展示出来，代码如图<divclass="heart"@click='entry(n)'> <img:src="n.heartsrc"alt=""></div><Style>.heart{ height:2rem; width:3rem; border:1pxsolidred; text-align:center; line-height:2rem; img{ height:2rem; width:2rem; }}</style>这些代码用来写出心的样字来 entry(n){ if(localStorage.getItem('entryStatus')=='true'){ if(n.heartsrc==n.heart1src){ n.heartsrc=n.heart2src; localStorage.setItem('goodsinformation',JSON.stringify(rmation)) vararr=JSON.parse(localStorage.getItem('favorite')); for(vara=0;a<arr.length;a++){ for(varb=0;b<arr[a].inform.length;b++){; if(n.imgs==arr[a].inform[b].imgs){ arr[a].inform.splice(b,1); } } if(!arr[a].inform.length){ console.log(a); arr.splice(a,1); } localStorage.setItem('favorite',JSON.stringify(arr)) } }else{ this.isShow=false; this.open='block';