首页
Python
Java
IOS
Andorid
NodeJS
JavaScript
HTML5
【
十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面
】的更多相关文章
十一、VueJs 填坑日记之使用Amaze ui调整列表和内容页面
上一篇博文我们整合了Amaze ui,并且调整了一个头部header和底部footer文件,其实做起来也很简单,只要按照步骤来做,完全没有问题.今天我们来重新调整一下列表页面和内容页面,使我们做的后台管理系统更有范儿. 制作左侧菜单一个后台管理系统,大致的样式都是分为南北东西的,而西(也就是左侧)一般是我们的菜单.如图: 我们今天就来把我们的项目完成到如上图的样式,首先我们来制作左侧的菜单,在/src/components/下新建menu.vue.代码如下: <template> <di…
十、VueJs 填坑日记之在项目中使用Amaze UI
上一篇博文,我们把jQuery集成到了项目中,今天我们来集成Amaze ui(妹子UI).先来介绍一下妹子UI.Amaze UI 含近 20 个 CSS 组件.20 余 JS 组件,更有多个包含不同主题的 Web 组件,可快速构建界面出色.体验优秀的跨屏页面,大幅提升开发效率.最主要是妹子UI的性能好,轻量级. 获取妹子UI(Amaze UI)下载地址:http://amazeui.org/getting-started 点击上方绿色的按钮,我们来下载最新版的妹子UI,下面有配套的文档和编辑器,…
一、VueJs 填坑日记之基础概念知识解释
概述在最开始听说vuejs这个词是在2016年,当时天真的认为自己是个后端开发工程师不需要学习太多的前端知识,不过紧接着在2017年在公司就用到了vuejs.对于初学者(尤其是干后端的初学者)来说,刚接触时,有好多思路都很难理解. 本来写这一系列博客,只是为了记录自己在这一段时间学习vuejs的成果.如果有何纰漏请大家多多理解,不喜勿喷… 再说,在目前互联网的调整发展情况下,javascript更是在快速的更新迭代,如今对前端工程师来说,需要会的不只有css+div,js+jq了.近年来,jav…
八、VueJs 填坑日记之参数传递及内容页面的开发
我们在上一篇博文中,渲染出来了一个列表,并在列表中使用了router-link标签,标签内的:to就是链接地址,昨天咱们是<router-link :to="'/content/' + i.id">这样写的,今天我们来完成内容页面的渲染. 编写内容页面还是废话少说,先上代码,将以下代码保存到/src/pages/Content.vue中: <template> <div> <myHeader></myHeader> <h…
三、VueJs 填坑日记之项目文件认识
上一篇博文,我们搭建了一套基础的vuejs的环境,首先安装node.js,然后利用npm包管理器,安装vue-cli,设置淘宝镜像,初始化项目,安装依赖,运行.在这一篇,我们将认识vuejs项目里的各个目录结构. 基础项目目录 build // 编译配置文件,一般不用管 |-build.js |-check-versions.js |-logo.png |-utils.js |-vue-loader.conf.js |-webpack.base.conf.js |-webpack.dev.con…
七、VueJs 填坑日记之渲染一个列表
在上一篇博文中,我们对vue组件有了一个简单的认识和大概的理解.在之前认识项目结构的时候,我们在/src目录中创建了一个components的文件夹,而今天就要用到了,这个文件夹的作用就是放置我们的自定义组件. 制作header.vue组件在components文件夹中,创建一个header.vue的文件,然后填入以下内容: <template> <header class="header"> <h1 class="logo">V…
二、VueJs 填坑日记之基础项目构建
在上一篇文章中,大致介绍了一下本系列博文以及学习vuejs我们需要了解的一些概念,希望大家认真阅读,所谓知己知彼,百战百胜,学习也一样,工欲善其事,必先利其器,要想学好vuejs,那前提的概念一定要熟悉.否则在接下来的博文中,遇到一些概念很有可能理解不了. 由于不能FQ,所以之下大部分的操作都是在国内的网站里进行下载或是用的国内代理. 安装NodeJs下载Node.js,在这里我用的是Node中文网http://nodejs.cn/下载.大家可以按自己电脑的系统来下载不同版本的Node.关于Li…
六、VueJs 填坑日记之初识*.Vue文件
上一篇博文中,我们将接口的地址通过webpack代理到了本地,解决了跨域的问题.在之前的文章中,我们一直对项目进行配置,并没有真正的切入正题,可能很多人还不明白我们要做什么?那么今天,我们就要开写代码了.忠心感谢FungLeo,是你们无私的奉献,才让我们有了学习的参考,以下是地址:本文转载:http://blog.csdn.net/fungleo/article/details/77575077 什么是*.vue文件首先,我们用 vue-cli 脚手架搭建的项目,里面我们已经遇到了很多,如 in…
四、VueJs 填坑日记之搭建Axios接口请求工具
上一章,我们认识了项目的目录结构,以及对项目的目录结构做了一些调整,已经能把项目重新跑起来了.今天我们来搭建api接口调用工具Axios.Vue本身是不支持ajax调用的,如果你需要这些功能就需要安装对应的工具. 支持ajax请求的工具很多,像superagent和axios.今天我们用的就是axios,因为听说最近网上大部分的教程书籍都使用的是axios,本身axios这个工具就已经做了很好的优化和封装,但是在使用时,还是比较繁琐,所以我们来重新封装一下. 安装Axios工具 cnpm ins…
五、VueJs 填坑日记之将接口用webpack代理到本地
上一篇博文,我们已经顺利的从cnodejs.org请求到了数据,但是大家可以注意到我们的/src/api/index.js的第一句就是: // 配置API接口地址 var root = 'https://cnodejs.org/api/v1' 这里我们的接口地址是写死的,这固然是一个问题,但是其实并不是最重要的,而是在cnodejs.org已经帮我们把接口处理的很好了,帮我们解决了跨域问题.而在实际开发中,很多项目接口是不允许我们跨域请求的. 而在第一章说到的前后端分离开发模式,前端开发前端,同…
九、VueJs 填坑日记之在项目中使用jQuery
很多人学习 js 都是从 jQuery 开始的,我也不例外.有时候进行一些操作的时候,还是感觉 jQuery 比较好用,那么,我们如何在项目中使用 jQuery 呢?这篇博文带你实践. 引用 jQuery 文件首先呢,jQuery 是提供了 npm 的安装包的.我们的 vue-cli 脚手架,也是支持引入的.不过设置比较麻烦,如果你对使用这种方法比较敢兴趣,可以直接参考下面的内容:https://maketips.net/tip/223/how-to-include-jquery-into-vu…
十二、VueJs 填坑日记之项目打包发布
通过上一篇博文的学习,我们其实已经完成了我们设想的项目的开发.但是,我们做好的这套东西,是基于 nodejs 开发的.而我们最终希望,我们开发的项目,生成好一堆文件,然后随便通过任何一个 http 服务就能跑起来,也就是,还原成我们熟悉的 html+css+js 的模式.这章,我们来讲解这部分内容. 打包项目进入到我们的项目根目录 d: cd vueworks/my-vue 然后运行如下代码,进行打包: npm run build 结果如下: 现在我们已经把项目打包好,打完好的项目默认位置在/d…
前端系列——jquery前端国际化解决方案“填坑日记”
前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都有成熟的方案,比如: vue + vue-i18n angular + angular-translate react + react-intl 但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初…
jquery.i18n.properties前端国际化解决方案“填坑日记”
但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初接到这个任务,并没有太多顾虑,毕竟这种东西有很成熟的解决方案,实现起来难点不会很大.可当真正动起来手来去实现的时候发现一些问题,这里先介绍下我们老平台的架构:MVC+WebApi,MVC项目负责页面渲染,webapi负责数据接口,是一种很传统的架构方式.国际化主要在MVC端去做就好了,可是由于MVC项目里面使用了大量第三方bootstrap组件…
前端系列——jquery.i18n.properties前端国际化解决方案“填坑日记”
前言:最近,新的平台还没有开发完成,原来的老项目又提出了新的需求:系统国际化.如果是前后端完全分离的开发模式,要做国际化,真的太简单了,有现成的解决方案,基于Node构建的时下热门的任何一种技术选型都有成熟的方案,比如: vue + vue-i18n angular + angular-translate react + react-intl 但现在的情况是老的项目并没有使用这类架构.说起国际化,博主几年前就做过,在MVC里面实现国际化有通用的解决方案,主要就是通过资源文件的方式定义多语言.最初…
WindowsPhone&Windows8.1&Windows8&Unity3d 填坑日记
近期的游戏开发大体上接近尾声,总结了不少关于Unity3d面向Windows几大平台开发时遇到的各种坑以及怎样填坑的经验.总的来说,Windows8.1 Windows8/RT以及WindowsPhone这几个平台的开发人员很的少,文档也很的有限.甚至于MSDN的文档写的也是不清不楚.所以我认为有必要用一系列的文章具体的和大家分享一下. 这一篇仅仅是一个文件夹,先介绍一下我要写的一些部分: 1. Unity项目导出至各个平台注意事项. 2. API不兼容问题以及怎样解决. 3. Windows8…
公网访问阿里云数据库MongoDB——填坑日记
业务情景 两台服务器,一台阿里云ECS云服务器(专用网络),另一台是阿里云数据库MongoDB,处于安全考虑MongoDB是不运行外网连接的,那接下来就看怎么实现公网访问. 看到上面红色的网络类型描述,有些人可能已经看出问题所在了,小小的提示:问题出现在开放端口上! 专用网络和经典网络的大致区别可以用一句话讲明白:专用网络更安全,需要设置和配置的东西比较多,适合精通网络的高手:经典网络使用更方便,适合更适合小白用户,使用起来更简单方便,不用繁杂的配置: 思路分析 既然无法直接使用公网(俗称的外网…
UiAutomator2.0升级填坑记
UiAutomator2.0升级填坑记 SkySeraph May. 28th 2017 Email:skyseraph00@163.com 更多精彩请直接访问SkySeraph个人站点:www.skyseraph.com 啰嗦 Google Android Developers 在2015年3月就发布了UiAutomator 2.0版本(下文简称U2),而公司的核心产品中用到还是UiAutomator老版本(下文简称U1),业界用U2的也不是很多,虽然有诸多问题和不便(如高版本OS中不支持Re…
vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox> <yd-flexbox-item>能耗排行</yd-flexbox-item> <yd-flexbox-item>房间号</yd-flexbox-item> <yd-flexbox-item>能耗程度</yd-flexbox-item&g…
oracle入坑日记<五>数据表
1 数据表 1.1.数据表是存放数据字段信息的地方:在Oracle,数据表拥有者单位是用户,同时数据表属于表空间.如: 登录my_user用户在orcl表空间下创建的表就是 my_user用户在ocrl表空间下的数据表(有点绕,多用用就了解了) 2 创建数据表 2.1.创建数据表 create table RYXXB( -- 创建表名 RYID ) primary key, -- primary key 设置主键 RYXX ) not null, -- not null 不可为空 RYB…
H5填坑笔记--持续更新
最近一直在做移动端的页面,发现很多的坑,这里做一下总结,填填坑…… css常见的问题(一) 一.iOS键盘首字母自动大写 IOS的机子,默认英文输入法状态下,首字母是自动大写的,有时候挺烦人的. 在iOS中,默认情况下键盘是开启首字母大写的功能的,如果业务不想出现首字母大写,可以这样: <input type="text" autocapitalize="off" /> 二.iOS输入框默认内阴影和样式问题 在iOS上,输入框默认有内部阴影,但无法使用…
Vue2.0 新手完全填坑攻略——从环境搭建到发布
Jinkey原创感谢 showonne.yubang 技术指导Demo 地址:http://demo.jinkey.io/vue2源码:https://github.com/Jinkeycode/vue2-example 什么是 Vue Vue 是一个前端框架,特点是数据绑定 比如你改变一个输入框 Input 标签的值,会自动同步更新到页面上其他绑定该输入框的组件的值 数据绑定 组件化 页面上小到一个按钮都可以是一个单独的文件.vue,这些小组件直接可以像乐高积木一样通过互相引用而组装起来 组…
Android—基于微信开放平台v3SDK,开发微信支付填坑。
接触微信支付之前听说过这是一个坑,,,心里已经有了准备...我以为我没准跳坑出不来了,没有想到我填上了,调用成功之后我感觉公司所有的同事都是漂亮的,隔着北京的大雾霾我仿佛看见了太阳~~~好了,装逼结束...进入正题 开发准备: 1.在微信开放平台申请账号 2.成功后创建应用,就是填一些看似很官方很正经的资料了...(说审核7天左右,没有意外的情况下你的app第二天就审核成功了是不是很开心,有了appid,是不是就可以调用微 信支付了????-------想多了,真的) 3.微信支付是需要额外…
css 填坑常用代码分享
以下是常用的代码收集,没有任何技术含量,只是填坑的积累.转载请注明出处,谢谢. 因为提交比较麻烦,后来转置github:https://github.com/jsfront/src/blob/master/css.md 一. css 2.x code 1. 文字换行 /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: normal; /*强制英文单词断行*/ word-break:break-all;…
填坑系列:通过ESXi来配置IPMI
近日西安的天气很不错,可是看到从其他地方迁移来的主机在新环境下无法远程调试怪郁闷的,这就需要填坑,要不就会给后来者挖更大的坑. 今天遇到的坑是在IPMI的网络设置里面启用了VLAN标签之后,在新环境下IPMI直接失灵的问题. 由于时间原因,当时迁移的时候直接就断电了,很中国的理念是不——就是要快,先不看结果. 原有的环境是vSphere ESXi 4.1的操作系统,配置好IP之后可以通过vSphere Client去管理他,服务器是Supermicro的. 传统方式解决此问题需要还原出一个原有的…
Node学习笔记(四):gulp+express+io.socket部署angularJs2(填坑篇)
这篇就先暂停下上篇博客--你画我猜的进度,因为在做这个游戏的时候,想采用最新的ng2技术,奈何坑是一片又一片,这边就先介绍下环境部署和填坑史 既然要用ng2,首先要拿到资源,我这边用的是angularJs2 beta版的,网上的资源有两种,一个是文件全压缩版的.min.js版的另一个就是一大堆乱七八糟的js文件,主要是ng2已经完全采用TypeScript,加之对es6的支持,所以需要引入一大堆兼容,编译文件 这边刚好特别手欠想学学gulp,于是开搞配置gulp环境,压缩所有的js文件成一个mi…
【结果很简单,过程很艰辛】记阿里云Ons消息队列服务.NET接口填坑过程
Maybe 这个问题很简单,因为解决方法是非常简单,但填坑过程会把人逼疯,在阿里云ONS工作人员.同事和朋友的协助下,经过一天的调试和瞎捣鼓,终于解决了这个坑,把问题记下来,也许更多人在碰到类似问题的时候,会开放思路.当然不得不说,Ons的.NET接口还很不完善,甚至没有独立在Windos 2008/2012服务器测试过,希望官方加把力. 1.阿里云ONS介绍 ONS(Open Notification Service)即开放消息服务,是基于阿里开源消息中间件MetaQ(RocketMQ)打造的…
【填坑向】spoj COT/bzoj2588 Count on a tree
这题是学主席树的时候就想写的,,, 但是当时没写(懒) 现在来填坑 = =日常调半天lca(考虑以后背板) 主席树还是蛮好写的,但是代码出现重复,不太好,导致调试的时候心里没底(虽然事实证明主席树部分没出问题) #include <cstdio> #include <algorithm> using namespace std; ]; ]; ,N=,lastans=; ],nex[],list[]; ],h[],fir[],root[],f[],pos[]; ],near[],rm…
windows下jenkins常见问题填坑
没有什么高深的东西,1 2天的时间大多数人都能自己摸索出来,这里将自己遇到过的问题分享出来避免其他同学再一次挖坑. 目录 1. 主从节点 2. Nuget自动包还原 3. powershell部署 4. 内网机器实现基于变化的构建 5. Github私有项目pull时限 所谓主从,主要应用的场景例如多种环境(windows/linux,.net/java/php)需要不同的构建基础,而我们又不想都将一系列的步骤和环境混杂在一台构建服务器上,所以类似于go中的代理,jenkins也提供了slave…
bootstrap-table填坑之旅<一>认识bootstrap-table
应公司需求,改版公司ERP的数据显示样式.由于前期开发的样式是bootstrap,所以选bootstrap-table理所当然(也是因为看了bootstrap-table官网的example功能强大,样式清爽). 然后... ... 开启bootstrap-table填坑之旅. 开始就扒本园的资源,确实有不少bootstrap-table的文章.确实写的不错很详细,请恕本菜实在菜了点,看了半天demo的页面都没弄出来(勿吐槽~~).终于11点了.. .. 于是决定跟着官网的小白教程一点点的玩.…