这个vue项目是紧跟着之前的项目跟我一起做一个vue的小项目(一)来的. 我继续后面的开发(写的比较粗糙,边学边记录) 下图是header头部的样式 header组件内容如下 //header.vue <template> <div class="header"> <div class="header-left">返回</div> <div class="header-input">输入…

接下来我们进行的是城市选择页面的路由配置 添加city.vue,使其点击城市,然后跳转到city页面 //router.js import Vue from 'vue' import Router from 'vue-router' import Home from '@/pages/home/Home' import City from '@/pages/city/City' Vue.use(Router) // 导出一组路由配置项 export default new Router({ ro…

先看下我们所做项目的效果 这些数据都是我们在data中定义的,不是从后端数据中请求的.那么 接下来我们使用axios渲染数据 npm install axios --save 每个组件里面的数据都不相同,但是单个的组件去进行数据请求的话,那么ajax请求还是太多了,我们在home.vue中发起一个请求 我们使用mock数据,在static中创建一个mock文件夹写入json文件 vue中提出了一个转发功能,我们写的接口路径就可以直接同线上的一致 { "ret":true, "…

接下来我们要做的是热门推荐页面,我们写一个推荐组件 使用的方法也是前端data中的数据渲染到页面上面,这里对文字过长取省略号的方法不成功使用了一个小技巧 使用了min-width:0 我们来看完整的代码和效果吧 //src\pages\home\components\Recommend.vue <template> <div> <div class="recommend-title">热销推荐</div> <ul> <l…

先放一下这个完结项目的整体效果 下面跟我我一起进行下面项目的进行吧~~~ 接下来我们进行的是实现header的渐隐渐显效果,并且点击返回要回到首页 我们先看效果 在处理详情页向下移动过程中,header页出现,我们使用的是监听滚动的方法,然后动态传入样式 //src\pages\detail\components\Header.vue <template> <div> <router-link class="header-abs" tag="di…

接下来我们进行的是轮播页面下面的导航页的开发 我们需要的是实现轮播页下面的图标,并且实现轮播效果 这个话,其实基本思路先是渲染出小图标,然后,我们要对页数进行判断,如果图标的个数展示的就是8个,那个这个就是一页轮播 如果大于8个,我们要计算是显示几个轮播页.再根据这个轮播页我们去渲染的数据 //icons.vue <template> <div class="icons"> <swiper> <!-- 这个是轮播的页数 --> <s…

接下来我们进行的是详情页动态路由及banner布局 先看页面的效果 下面是代码部分 <template> <div> <div class="banner"> <img src="//img1.qunarzz.com/sight/p0/1409/19/adca619faaab0898245dc4ec482b5722.jpg_600x330_f922b488.jpg" alt="" class="…

接下来我们对城市列表页面进行优化,除了对数据优化,也会进行节流处理 //src\pages\city\components\Alphabet.vue <template> <ul class="list"> <li class="item" v-for="item of letters" @click="handleLetterClick" @touchstart="handleTouc…

接下来我们进行轮播的开发 安装插件,选用2.6.7的稳定版本 npm install vue-awesome-swiper@2.6.7 --save 根据其github上面的用法,我们在全局引用,在main.js中添加 //main.js import VueAwesomeSwiper from 'vue-awesome-swiper' require('swiper/dist/css/swiper.css') Vue.use(VueAwesomeSwiper) 在components里面写入S…

接下来我们进行的就是城市列表页面数据额动态渲染. 也是在mock数据,进行动态渲染 //city.json { "ret": true, "data":{ "hotCities": [{ "id": 1, "spell": "beijing", "name": "北京" }, { "id": 3, "spell&quo…

项目架子 npm install --global vue-cli vue init webpack travel cd travel/ npm run dev 运行效果 添加home页及其路由,添加list页及其路由 移动端项目配置项完善 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalabl…

接下来我们编写周末游组件 <template> <div> <div class="recommend-title">周末去哪儿</div> <ul> <li class="item border-bottom" v-for="item of recommendList" :key="item.id"> <div class="item-i…

今天来做一个PHP电影小爬虫.我们来利用simple_html_dom的采集数据实例,这是一个PHP的库,上手很容易.simple_html_dom 可以很好的帮助我们利用php解析html文档.通过这个php封装类可以很方便的解析html文档,对其中的html元素进行操作 (PHP5+以上版本)下载地址:https://github.com/samacs/simple_html_dom下面我们以 http://www.paopaotv.com 上的列表页 http://paopaotv.com…

最近做的一个Spring Boot小项目,欢迎大家访问 http://39.97.115.152/,帮忙找找bug,网站里有源码地址 网站说明 甲壳虫社区(Beetle Community) 一个开源的问答社区.论坛博客,您可以提出自己的问题.发布自己的文章.和其他用户交流 目前功能有第三方登陆.查看.发布.评论.消息通知.顶置.一键已读.搜索等 后续会不断更新完善,欢迎大家提供更好的建议 使用技术 Spring Boot.Mybatis.Thymeleaf.BootStrap.MySQL等 使…

本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件拆分components(header.footer.literature.science.humanity) 路由router(router-link.router-view) 一.准备工作 1.首先开始一个项目第一步是准备工作. 2.准备工作包括需求分析和项目资源准备两大步. 需求分析就是思考想…

Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以使用,并具备基本功能的 Markdown 笔记本应用,再进行逐步完善. 知识点 本文会指导初学者如何一步步运用 Vue 的计算属性.双向绑定.指令.生命周期钩子,还有 localStorage 和异步请求等知识点. 完整示例图     代码与资源文件 https://github.com/liqin…

实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的对应商品删除就能再次加入. 商品加入购物车后,导航栏会出现商品数量和总价标识. 一.详情页的实现和其中的方法 1.在子组件literature.vue中写: 应该加一个data先定义一下selecGoods,但是prop中已经有了(prop优先级更高,而且可以父子传参),那就不用在data中写sel…

实现内容: axios取到的数据在前端使用(父子组件各自应该怎么使用) 一.简单使用(在哪取在哪用) 1.在App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop,prop优先级高于data,这个我们稍后讨论),created中的this.xxx就指向data中的数据(简单来说就是先在data中定义) 2.我现在是直接在App.vue中写的getScience.getLiterature.getHumanity取得数据,要在App.vue中直接用的话这样写:…

实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就不再维护vue-resourse,推荐使用axios. 2.在axios取到数据前要先写一下路由接口,不同版本vue-cli建的文件目录有一点不一样. 我用的是vue2.5.2,写路由接口是在build文件夹下的某文件,以下分别列出高版本和低版本写法: ①2.5.2版本 文件里加上这些程序: dev…

Nodejs将JavaScript语言带到了服务器端,作为js主力用户的前端们,因此获得了服务器端的开发能力,但除了用express搭建一个博客外,还有什么好玩的项目可以做呢?不如就做一个网络爬虫吧.据说互联网上的流量90%以上都是爬虫贡献的,不知道真假,但起码证明了,爬虫是一种用途广泛的东西,尤其在电商比价领域,整个就是爬虫的技术较量,当然我要做的是爬虫中的弱鸡,只实现基本功能,先上源码. 下面简述一下实现过程.首先挑选爬取对象,这里选择的也是门槛比较低的新闻站cnBeta.com,因为每天上…

思路:1.使用mongoose 进行 数据库的链接 2.使用Schema来进行传输字段的定义 3.安装koa-router进行数据处理4.安装koa-bodyparser 进行post数据交互5.解决跨域 6.前端传递值 7.在router.pot里面 处理 前端传递过来的值. 一.连接数据库(1)建立一个项目文件夹: service , npm init (2)安装 mongoose连接数据库,Mongoose是一个开源的封装好的实现node和MongoDB数据通讯的数据建模库 ,npm i…

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习.   上一节简单介绍了什么是MEAN全栈项目,这一节将简要介绍三个内容:(1)一个通用的MEAN项目的技术架构,(2)为什么我们要打造单页应用,(3)本系列项目的技术架构和开发计划.希望通过这三个问题,我们能够对本项目产生一个全局视角. 实现一个常见的MEAN全栈项目的核心就是RESTful API.这个接口通常是用MongoDB, Express, Node.js实现的,而单页应用(SPA)由AngularJ…

写这篇文章之前先吐槽一下,最近换了一个公司,是给一个国企做外包,有两个月了,感觉这里的气氛有点不爽,还有点怀念以前的公司.具体听我说来,这里有几个团队,.net,java,手机开发,.net只有6个人,其他团队都很多人,没办法,这个貌似国际惯例了. 用.net在这里开发一个类似展示信息的系统,是航空公司的运营信息,包括飞机,跑道,地勤,机场等.java做的是飞机排班系统,一听说明白,.net受歧视啊.这个还不是最主要的,我们做的这个系统没有什么重要的逻辑,无非是展示一下表,图等,但是项目经理给我…

我们的开源宗旨:自由 协调 开放 合作 共享 拥抱开源,丰富国内开源生态,开展多人运动,欢迎加入我们哈~ 和一群志同道合的人,做自己所热爱的事! 项目开源地址:https://github.com/Cai-Zi/STM32_RC_Transmitter Bilibili账号:蔡子CaiZi 个人主页:https://space.bilibili.com/349576976 1.为什么要用STM32做航模遥控器?Arduino不香嘛? 之前用Arduino Pro Mini制作了一个航模遥控器+接…

欢迎关注本人的微信公众号"前端小填填",专注前端技术的基础和项目开发的学习. 上一篇文章给大家讲了一下本项目的开发计划,这一章将会开始着手搭建一个MEAN项目.千里之行,始于足下,打造MEAN全栈项目的第一步就是创建一个新的Express项目.在本项目中,你需要安装以下工具: (1) Node和npm (2)全局安装的Express (3)git (4)一个云服务器 (5)一个写命令行的接口(CLI)或者是终端 创建一个Express项目 具体的安装方式请自行百度.首先,我们创建一个项…

安装Vuefity的时候,碰到一些坑,经过一番折腾,终于成功,记录正确的姿势如下: 创建一个Vue项目: vue init webpack-simple vular-admin 进入项目目录: cd vular-admin 选择:Webpack 安装方式 npm install npm install vue-router npm install vuetify npm install css-loader npm install material-design-icons-iconfont n…

继上次利用列表相关知识做了简单的人机交互的小项目名字管理系统后,当学习到字典时,老师又让我们结合列表和字典的知识,结合一起做一个名片管理系统,这里分享给在学习Python的伙伴! 1.不使用函数 1 print("*"*30) 2 print("\t名片管理系统") 3 print("1.增加一个名片") 4 print("2.删除一个名片") 5 print("3.修改一个名片") 6 print(&qu…

先了解下SSO 对于单点登陆浅显一点的说就是两种,一种web端的基于Cookie.另一种是跨端的基于Token,一般想要做的都优先做Token吧,个人建议,因为后期扩展也方便哦. 小程序也是呢,做成token的形式是较好的. 流程图 PS:图中4的文字打错了~ 1.启动服务 2.小程序初次加载app.js校验token,使用code去换取token 3.检测User信息是否存在code,不存在则注册新用户,最后返回对应用户Id 4.将随机Token与UserId一起存入Redis中 5.返回To…

根据huangyi老师的慕课网vue项目跟着做的,下面大概记录了下思路 1.轮播图的图 先不做轮播图逻辑部分,先把数据导进来,看看什么效果.在recommend组件新建一个recommends的数组,用这个数组来接受数据的录播图部分.然后再轮播图的插槽部分添加图片,代码如下 <slider> <div v-for="(item,index) in recommends" :key="index"> <a :href="item…

canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说,直接来讲思路和代码. ----------------------------------------------------------------------------------------------------------------- 开发思路:首先要有蛇吃的食物,就是一个个canv…