vue vue-router vuex element-ui axios的学习笔记（十四）商品详情页
思路1、写api2、写详情页组件和路由router---->index.jsproductcontent.vue3、在productlist.vue把路由加上4、mock.js5、详情页添加内容<template><div><h1>productcontent.vue</h1><p>{{$route.params.class}}</p><p>{{$route.params.productname}}</p><div><h2v-text="product.productname"></h2><p>价格：{{product.productprice}}元</p><p>销量：{{product.productsells}}</p><im
vue vue-router vuex element-ui axios的学习笔记（十五）商品页面写一下样式
product.vue<template><divclass="container"><el-row><el-colclass="menu-box":span="6"><p></p><el-menuclass="menu":default-active="$route.path"routerbackground-color="#fff"text-color="#267943"active-text-color="#000"><el-menu-itemv-for="(item,index)inproductclass":index="'/product/'+item.class":key="'/product/'+item.cla
vue vue-router vuex element-ui axios的学习笔记（十七）改写learn目录
改写目录的原因既然使用的是前后端分离的写法，就该彻底分离，我应该将后台管理页面也写在learn项目里面，现在这个结构就显得不合理了，进入后台管理页面应该是全新页面，现在的结构并不合理！改写步骤1、新建一个admin目录添加页面admin.vue用于管理后台路由adminlogin.vue用于后台管理员登录home.vue用于后台主页显示信息mangeradmin.vue用于管理管理员账户mangeruser.vue用于管理用户账户mangerprods.vue用于管理商品操作mangersends.vue用于管理用户发货2、重新编写路由打开route/index.jsimportVuefrom'vue'importRouterfrom'vue-router'//引入前端组件importHomefrom'@/components/home'importConHomefrom'@/components/con-home'importLoginfrom'@/compo
vue vue-router vuex element-ui axios的学习笔记（十八）写后台页面admin,login
先写后台页面的原因是我需要先添加商品，然后才好在前端测试1、先把后端的主页大体写出来，主要是后端路由部分admin.vue<template><sectionclass="admin"><!--头部--><el-rowclass="header"><!--logo--><el-col:span="8"><imgclass="logo"src="../assets/logo.png"alt=""></el-col><!--管理员--><el-col:span="16"><imgclass="avatar"src="../assets/avatar.jpg"alt=""><pclass="adminname">李小霞<
vue vue-router vuex element-ui axios的学习笔记（十九）写后台商品管理页面
写后台商品页面的思路1、分析功能需求管理商品必须要实现的几个功能1、展示所有商品2、添加商品3、修改商品2、分析数据结构先看一下数据结构首先商品分类类下面的商品详情3、实现功能步骤思路：1、将添加商品类，添加商品，修改商品分离成单独的组件2、添加路由3、先写出添加商品页面挂在路由打开mangerprods.vue<template><sectionclass="box"><divclass="head"><h3>{{this.$route.name}}</h3></div><!--商品管理路由--><divclass="prodmenu">\<el-menumode="horizontal":default-active="$router.path"router
vue-cli (vue2.5.2&webpack3.6.0) 配置文件全注释
vue-cli配置文件注释新的项目组同事整了一个webpack3.*的脚手架(先前自己弄了一个2.0的脚手架)里面的配置项摸索了一遍,就想看看3.*在配置文件上面update了什么工作闲时花了一点时间将配置文件中都加上了注释,相信看了就和我一样从不那么太懂到有那么一点懂了.^^平时用的blog写这种文章十分不友好,所以记录在这边顺便和大家一起学习如果有需要的朋友可以上我的github下载,里面还有旧的2.0版本的脚手架.github链接基础准备nodev7.10.0vuev2.8.2vueinitwebpack项目名字各种下一步,(没啥用eslint没使用测试的那个模块)生成的目录如下基础配置文件(webpack.base.conf.js)这里的文件是公用的一些基础配置项'usestrict'//基础配置文件constpath=require('path')constutils=require('./utils')constconfig=require
Vue系列（四）：模块化开发、Elment UI、自定义全局组件（插件）、Vuex
上一篇：Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架一、模块化开发1.vue-router模块化cnpminstallvue-router-S1.1编辑main.js//引入VueRouterimportVueRouterfrom'vue-router'//使用VueRouterVue.use(VueRouter);importrouterConfigfrom'./router.config.js'//创建路由实例constrouter=newVueRouter(routerConfig);1.2编辑App.vue1.3编辑router.config.jsexportdefault{routes:[{path:'/home',component:Home},{path:'/news',
实践是检验程序员的唯一标准01：用户不想跟你说话并向你扔出一张图片 - 图片上传组件开发【思路篇】
温馨提示：这里除了一些幼稚的小组件啥也没有温馨提示-续：这是一个新的系列，写一些实际开发中遇到的一些常用的功能，想法笨拙，代码乱套写在前面图片上传，作为web端一个常用的功能，在不同的项目中有不同的需求，在这里实现一个比价基本的上传图片插件，主要能实现图片的浏览，剪裁，上传这三个功能，同时也是为了让自己对图片／文件上传和HTML5中名声在外的canvas相关能够有一些了解我就要自行车-需求整理放眼WWW，一般的图片上传模块，主要就是实现了三个功能，图片的预览，图片的剪裁及预览，图片的上传，那我也就整这么一个吧，再细化一下需求图片的预览用户使用：用户点击“选择图片”，弹出文件浏览器，可以选择本地的图片，点击确认后，所选图片会按照原始比例出现在页面的浏览区域中组件调用：开发者可以自己定义图片预览区域的大小，并限定所传图片的文件大小和尺寸大小图片的剪裁用户使用：用户根据提示，在预览区域的图片上拖动鼠标框出想要上传的图片区域，并且能在结果预览区域看到自己的剪裁结果组件调用：开发者可以自定义是否剪裁图片，并可以定义是否限定剪裁图片的大小
SpringBoot中使用POI，快速实现Excel导入导出
本文是vhr系列的第十一篇.vhr项目地址https://github.com/lenve/vhr导出Excel整体来说，Excel有.xls和.xlsx，那么在POI中这两个也对应两个不同的类，但是类名不同，方法基本都是一致的，因此我这里将只介绍.xls一种。整体来说，可以分为如下七个步骤：1.创建Excel文档HSSFWorkbookworkbook=newHSSFWorkbook();2.设置文档的基本信息，这一步是可选的//获取文档信息，并配置DocumentSummaryInformationdsi=workbook.getDocumentSummaryInformation();//文档类别dsi.setCategory("员工信息");//设置文档管理员dsi.setManager("江南一点雨");//设置组织机构dsi.setCompany("XXX集团");//获取摘要信息并配置SummaryInformationsi=workbook.getSummaryInfor
jQuery与vue分别实现超级简单的绿色拖动验证码功能
jquery的绿色拖动验证功能在网上看到了一个这样的问题：那种像拖动滑块匹配图形的验证方式是怎么实现的？。突然想到实现一个简单绿色拖动验证码的功能，在网上搜了下，有一个用jquery实现的该功能代码。体验地址：http://yanshi.sucaihuo.com/jquery/8/897/demo/。其CSS代码：#drag{position:relative;background-color:#e8e8e8;width:300px;height:34px;line-height:34px;text-align:center;}#drag.handler{position:absolute;top:0px;left:0px;width:40px;height:32px;border:1pxsolid#ccc;cursor:move;}.handler_bg{
实战：vue项目中导入swiper插件
版本选择swiper是个常用的插件，现在已经迭代到了第四代：swiper4。常用的版本是swiper3和swiper4，我选择的是swiper3。安装安装swiper3的最新版本3.4.2:npmiswiper@3.4.2-S这里一个小知识，查看node包的所有版本号的方法：npmview包名versions组件编写swiper官方的使用方法分为4个流程：加载插件HTML内容给Swiper定义一个大小初始化Swiper我也按照这个流程编写组件：加载插件importSwiperfrom'swiper';import'swiper/dist/css/swiper.min.css';HTML内容<template><divclass="swiper-container"><divclass="swiper-wrapper"><divclass="swiper-slide">Slide1
刷新页面vuex数据不消失和不跳转页面
先说点什么vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!!进入正题刷新刷新相当与重启项目，之前获取到的数据也只是通过store暂存起来，项目关闭时就不见了，这有些像电脑重启，存储在RAM的数据会消失。但是储存在sessionstorage、localstorage和cookie里的内容不会消失.Vuex方法思路首先得熟悉vuex,官网中介绍Vuex是一个专为Vue.js应用程序开发的状态管理模式,也就是说vuex中的store中的数据都是临时的,都是一些变量,页面刷新重新加载,所有都清空,并且已经在页面中没有进行二次登陆,vuex中就一直是空的,所以就分生出了几个方法1.因为sessionstorage(关闭页面会消失)、localstorage和cookie刷新页面数据不会消失,所以可以把所有请求到的数据都储存在里边,用的时候再取2.使用vuex插件3.登录的时候把token和登录状态(自定义的)赋值给sess
让前端攻城师独立于后端进行开发: Mock.js
一.Mock.js是什么?目前的大部分公司的项目都是采用的前后端分离,后端接口的开发和前端人员是同时进行的.那么这个时候就会存在一个问题,在页面需要使用大量数据进行渲染生成前,后端开发人员的接口也许并没有写完,作为前端的我们也就没有办法获取数据.所以前端工程师就需要自己按照接口文档模拟后端人员提供的数据,以此进行页面的开发.这个时候,Mock.js的作用就体现出来了,在数据量较大的情况下,我们不用一个一个的编写数据,只需要根据接口文档将数据的格式填入,Mock.js就能够自动的按需生成大量的模拟数据.且Mock.js提供了大量的数据类型,包括文本,数字,布尔值,日期,邮箱,链接,图片,颜色等.本文就简单的介绍一下Mock.js提供的语法,并介绍一下我平时在项目中是如何使用Mock.js去更方便的进行开发的.二.下载和引入Mock.js1.下载Mock.jsMock.js提供多种下载方式,本文以目前国内最常用的npm举例,只需要在命令行输入npminstallmockjs即可
vue+node+mongodb 搭建一个完整博客
Vue+Node+Mongodb开发一个完整博客流程前言前段时间刚把自己的个人网站写完，于是这段时间因为事情不是太多，便整理了一下，写了个简易版的博客系统服务端用的是koa2框架进行开发技术栈Vue+vuex+element-ui+webpack+nodeJs+koa2+mongodb目录结构讲解build-webpack的配置文件code-放置代码文件config-项目参数配置的文件logs-日志打印文件node_modules-项目依赖模块public-项目静态文件的入口例如:public下的demo.html文件,可通过localhost:3000/demo.html访问static-静态资源文件.babelrc-babel编译postcss.config.js-css后处理器配置build文件讲解build.js-执行webpack编译任务,还有打包动画等等get-less-variabl
Vue官网todoMVC示例
这个示例是模仿官网示例样式和功能用我自己的方式写的，基本上没有看官网的源码，只参考自定义指令。让我们一步步来探讨一下。官网demo要实现的功能单条添加todo单条删除todo双击编辑todo单条todo已完成相应样式状态改变全部todo是已完成相应样式状态改变清除全部已完成todos待办todos数量显示所有todos，已完成todos，未完成todos筛选单条添加todo<inputtype="text"class="todos_add"placeholder="Whatneedstobedone?"@keyup.enter="addTodo($event.target)"//绑定enter事件ref="currentInput">//操作input元素使enter一下之后清空输入框内容data(){//一些初始化数据return{todolists:[],dataStatus:["All","Active","Comple
前端文档汇总（觉得对您有用的话，别忘了给点个赞哦 ^_^ ！）
原文链接前端文档汇总front-end-Doc前端文档汇总（含代码规范、开发流程、知识分享等）这里的文档很重要，你可以在这里看到前端相关代码规范、开发规范、开发流程等，如果你是新人，务必看完，如果你是老员工，务必按这里的约定执行。BuildSetup#installdependenciesnpminstall#servewithhotreloadatlocalhost:3000npmrundev#buildforproductionwithminificationnpmrunbuild技术选型核心框架：Vue状态管理：Vuex路由映射：vue-routerUI组件库：Muse-UI,ElementHTTP请求库：axiosCSS的预处理框架:Stylus,中文文档资源加载打包工具：Webpack代码规范工具：eslint单元测试vue-test-utils其他：ES6,node.js,npm代码规范HTML规范CSS规
vue-aplayer：一个基于vue2.x易于配置的音乐播放器控制组件
vue-aplayer一个基于vue2.x易于配置的音乐播放器控制组件这个组件是aplayer基于vue的实现，并不断的更新完善，而不仅仅只是一层封装介绍demo截图安装$npminstallvue-aplayer--save使用<aplayerautoplay:music="{title:'Preparation',author:'HansZimmer/RichardHarvey',url:'http://devtest.qiniudn.com/Preparation.mp3',pic:'http://devtest.qiniudn.com/Preparation.jpg',lrc:'[00:00.00]lrchere\n[00:01.00]aplayer'}"></aplayer>//ES6importAplayerfrom'vue-aplayer'newVue({components:{
Vue_只弹一次的弹框
<template><divv-if="isShow"><!--最外层背景--><divclass="popup_container"><!--居中的容器--><img@click="noPopup"src="delete.png"alt=""><!--关闭弹框--><divclass="popup_text"><!--内容-->Loremipsumdolorsitamet,consecteturadipisicingelit.At,atqueeaevenietlaudantiummagni,maioresnamnihilnonnumquamodiopariaturperferendisplaceatquasquasisitsoluta,suntullamvoluptatibus.&
VUE使用中踩过的坑
前言vue如今可谓是一匹黑马,githubstar数已居第一位！前端开发对于vue的使用已经越来越多，它的优点就不做介绍了,本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结,帮助大家踩坑。如果喜欢的话可以点波赞，或者关注一下，希望本文可以帮到大家!!!----------我是分割线本篇介绍的问题大概如下:路由变化页面数据不刷新问题setTimeout/setInterval(泛指异步回掉函数的this指向)this指向改变，无法用this访问VUe实例setInterval路由跳转继续运行并没有及时进行销毁vue滚动行为用法,进入路由需要滚动到浏览器底部头部等等实现vue路由拦截浏览器的需求,进行一系列操作草稿保存等等v-once只渲染元素和组件一次，优化更新渲染性能vue本地代理配置解决跨域问题,仅限于开发环境本地开发没有任何问题部署服务器就404啊这些问题1.路由变化页面数据不刷新问题出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为
Vue系列（三）：组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇：Vue系列（二）：发送Ajax、JSONP请求、Vue生命周期及实例属性和方法、自定义指令与过渡一、组件component1.什么是组件？组件（Component）是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码组件是自定义元素（对象）2.定义组件的方式方式1：先创建组件构造器，然后由组件构造器创建组件方式2：直接创建组件<divid="itany"><hello></hello><my-world></my-world></div><script>/***方式1：先创建组件构造器，然后由组件构造器创建组件*///1.使用Vue.extend()创建一个组件构造器varMyComponent=Vue.extend({t