随笔 - 419  文章 - 3  评论 - 331  阅读 - 120万
03 2020 档案
Vue2.5 旅游项目实例26 联调测试上线-真机测试
摘要:我们访问项目都是在浏览器输入 http://localhost:8080/#/ 打开一个命令行窗口,获取当前机器的内网IP window输入:ipconfig mac输入:ifconfig 得到自己的内网ip后,按说输入 http://192.168.0.xxx:8080 一样可以访问到项目,但是却 阅读全文
posted @ 2020-03-31 15:11 JoeYoung 阅读(285) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例25 联调测试上线-项目前后端联调
摘要:我们开发的时候使用的数据都是本地 mock 目录下的模拟数据,现在需要调用的是线上数据。假如我们在本地启用了一个php的后台服务,地址为 http://localhost:80 打开config/index.js文件,我们上次修改的 dev 开发模式,修改为: proxyTable: { '/api 阅读全文
posted @ 2020-03-27 20:11 JoeYoung 阅读(231) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例24 详情页-在项目中添加基础动画
摘要:创建分支:detail-animation 拉去到本地并切换分支: git pull git checkout detail-animation 在详情页点击banner,显示画廊轮播组件的时候,添加渐隐渐显的动画效果。 在 src/common 目录下创建 fade 文件夹,并新建FadeAnim 阅读全文
posted @ 2020-03-26 14:25 JoeYoung 阅读(246) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例23 详情页 Ajax动态获取数据
摘要:创建分支:detail-ajax 拉取到本地并切换分支: git pull git checkout detail-ajax 打开Detail.vue页面,添加代码: import axios from 'axios' export default { data () { return { sigh 阅读全文
posted @ 2020-03-25 16:44 JoeYoung 阅读(351) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例22 详情页 使用递归组件实现详情页列表
摘要:创建分支:detail-list 拉取到本地并切换分支: git pull git checkout detail-list 在detail/components目录下,创建List.vue文件: <template> <div>list</div> </template> <script> exp 阅读全文
posted @ 2020-03-25 14:34 JoeYoung 阅读(441) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例21 详情页 对全局事件的解绑
摘要:上次在Header.vue中写了一个: activated () { window.addEventListener('scroll', this.handleScroll) }, 这个是对全局的 window 对象,所以会出现问题,不仅对这个组件,也对全局的组件都造成了影响。 解决办法: // 页 阅读全文
posted @ 2020-03-24 14:04 JoeYoung 阅读(206) 评论(0) 推荐(0) 编辑
Web安全——跨站脚本攻击(XSS)
摘要:web常见攻击手段 我只会大概提及它的攻击原理和预防方法,具体的实现和深入研究还请大家自行百度,因为只有真正需要用到才会去详细了解,这里我只为web安全小白做知识扫盲。因为博主目前接触最多的服务端语言是JAVA所以例子都从java web项目来讲。 跨站脚本攻击(XSS) 虽然我们目前做的是一个博客 阅读全文
posted @ 2020-03-23 16:28 JoeYoung 阅读(1017) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例20 详情页 实现Header渐隐渐显效果
摘要:创建分支:detail-header 拉取到本地并切换分支: git pull git checkout detail-header 在detail/components目录下,创建Header.vue文件: <template> <div> <div class="header-abs"></di 阅读全文
posted @ 2020-03-23 15:17 JoeYoung 阅读(355) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例19 详情页 动态路由及banner布局
摘要:创建分支:detail-banner 拉取到本地并切换分支: git pull git checkout detail-banner 打开home下的Recommend.vue文件: <router-link tag="li" class="item border-bottom" :to="'/de 阅读全文
posted @ 2020-03-23 10:36 JoeYoung 阅读(500) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例18 城市选择页-使用keep-alive优化网页性能
摘要:创建分支:city-keepalive 拉取并切换分支: git pull git checkout city-keepalive 启动服务,点击右上角的城市进入城市列表页,点击城市再返回到首页,这一系列操作下来,我们在Network里会发现不停的请求 indes.json 和 city.json 阅读全文
posted @ 2020-03-20 17:10 JoeYoung 阅读(267) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例17 城市选择页-使用Vuex实现数据共享
摘要:创建分支:city-vuex 拉取到本地并切换分支: git pull git checkout city-vuex 我们要做的功能是在城市列表页,选择某一个城市后,首页右上角的城市也跟着变化。 安装Vuex: npm install vuex --save 在src目录下,创建store文件夹,新 阅读全文
posted @ 2020-03-20 11:22 JoeYoung 阅读(332) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例16 城市选择页-搜索逻辑实现
摘要:创建恩智:city-search-logic 拉取到本地并切换分支: git pull git checkout city-search-logic 打开search.vue文件,先增加一个显示结果区域,并给input增加双向绑定: <template> <div> <div class="sear 阅读全文
posted @ 2020-03-19 18:12 JoeYoung 阅读(281) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例15 城市选择页-兄弟组件数据传递
摘要:在城市列表页,我们想实现点击右侧的字母表,左侧城市列表会自动的滚动到对应的字母显示区域之中。 创建分支:city-components 拉取到本地并切换分支: git pull git checkout city-components 打开Alphabet.vue文件,给li添加一个点击事件: <l 阅读全文
posted @ 2020-03-19 16:54 JoeYoung 阅读(337) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例14 城市选择页-动态数据渲染
摘要:创建分支:city-ajax 拉取到本地并切换分支: git pull git checkout city-ajax 然后在City.vue文件中发起axios请求: import axios from 'axios' export default { data () { return { hotC 阅读全文
posted @ 2020-03-19 10:12 JoeYoung 阅读(431) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例13 城市选择页-Better-scroll插件及字母表布局
摘要:安装Better-scroll插件: npm install better-scroll --save 查看github发现使用better-scroll,需要元素符合以下这种结构: <div class="wrapper"> <ul class="content"> <li>...</li> <l 阅读全文
posted @ 2020-03-18 17:31 JoeYoung 阅读(359) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例12 城市选择页-列表布局
摘要:创建分支:city-list 拉取到本地并切换分支: git pull git checkout city-list 新建List.vue文件: <template> <div class="list"> list </div> </template> <script> export default 阅读全文
posted @ 2020-03-18 14:28 JoeYoung 阅读(374) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例11 城市选择页-搜索框布局
摘要:创建分支:city-search 拉取到本地并切换分支: git pull git checkout city-search 新建Search.vue文件: <template> <div class="search"> <input class="search-input" type="text" 阅读全文
posted @ 2020-03-17 17:09 JoeYoung 阅读(324) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例10 城市选择页-路由配置
摘要:创建分支:city-router 拉取到本地并切换分支: git pull git checkout city-router 然后配置路由index.js: import Vue from 'vue' import Router from 'vue-router' import Home from 阅读全文
posted @ 2020-03-17 11:40 JoeYoung 阅读(272) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例9 首页-首页父子组件间的传值
摘要:头部城市部分,在Home.vue页面添加代码: <home-header :city="city"></home-header> <script> export default { data () { return { city: '', swiperList: [], iconList: [], 阅读全文
posted @ 2020-03-17 09:36 JoeYoung 阅读(241) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例8 首页-使用axios获取首页数据
摘要:创建分支:index-axios 拉取到本地并切换分支: git pull git checkout index-axios 安装axios: npm install axios --save 在Home.vue文件中添加代码: <script> import HomeHeader from './ 阅读全文
posted @ 2020-03-16 14:40 JoeYoung 阅读(324) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例7 首页-周末游区域代码
摘要:新建Weekend.vue文件,并添加到Home.vue里 <template> <div> <home-header></home-header> <home-swiper></home-swiper> <home-icons></home-icons> <home-recommend></hom 阅读全文
posted @ 2020-03-13 18:45 JoeYoung 阅读(497) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例6 首页-推荐区域组件
摘要:还是在远程创建分支 :index-recommend 拉到本地并切换分支: git pull git checkout index-recommend 在home\components目录下新建Icons.vue文件, 然后在Home.vue文件中引用: <template> <div> <home 阅读全文
posted @ 2020-03-13 14:52 JoeYoung 阅读(386) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例5 首页-图标区域的布局代码
摘要:还是在远程创建分支 :index-icons 拉到本地并切换分支: git pull git checkout index-icons 在home\components目录下新建Icons.vue文件, 然后在Home.vue文件中引用: <template> <div> <home-header> 阅读全文
posted @ 2020-03-13 10:23 JoeYoung 阅读(377) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例4 首页-轮播图区域
摘要:先在远程创建分支 :index-swiper 然后把新创建的分支拉到本地,并切换分支: git pull git checkout index-swiper 轮播需要用一个第三方插件:vue-awesome-swiper 为了稳定性,我们安装使用v2.6.7的版本: npm install vue- 阅读全文
posted @ 2020-03-12 17:27 JoeYoung 阅读(441) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例3 首页-iconfont和代码优化
摘要:到iconfont官网上新建项目文件Travel,然后选择你需要的图标加入购物车,并下载到本地,解压缩后把 iconfont.css 文件拷贝到项目的Travel\src\assets\styles文件夹下,再新建iconfont文件夹,里面包含了(iconfont.eot、iconfont.svg 阅读全文
posted @ 2020-03-12 17:25 JoeYoung 阅读(608) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例2 首页-header区域开发
摘要:安装stylus依赖包: npm install stylus --save 安装stylus-loader依赖: npm install stylus-loader --save 都按照完成后,在home文件夹下新建components文件夹,里面新建Header.vue文件 <template> 阅读全文
posted @ 2020-03-12 14:03 JoeYoung 阅读(447) 评论(0) 推荐(0) 编辑
Vue2.5 旅游项目实例1 代码初始化
摘要:1、打开index.html文件 修改meta:移动端禁止放大缩小 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalabl 阅读全文
posted @ 2020-03-12 11:05 JoeYoung 阅读(272) 评论(0) 推荐(0) 编辑
Git 撤销或提交单个文件修改
摘要:撤销修改 1.先查看该Git仓库的当前状态: git status 显示: On branch master Changes to be committed: (use "git restore --staged <file>..." to unstage) modified: a.txt 2.现在 阅读全文
posted @ 2020-03-12 11:03 JoeYoung 阅读(2540) 评论(0) 推荐(0) 编辑
vue-cli2.x创建项目
摘要:1.安装cli2.x脚手架 npm install --global vue-cli 2.创建项目 vue init webpack 项目名 按照填写就行了 ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint y 阅读全文
posted @ 2020-03-09 15:10 JoeYoung 阅读(517) 评论(0) 推荐(0) 编辑
Vue-cli脚手架2.0和3.0创建项目的区别?
摘要:一、生成项目命令 1、安装3.x版本的Vue脚手架: npm install -g @vue/cli 创建Vue项目命令: vue create 项目名称 或基于ui界面创建Vue项目,命令:vue ui 2、安装了vue-cli 3.x 后如何使用 vue-cli 2.x 创建项目 需要安装一个桥 阅读全文
posted @ 2020-03-09 14:55 JoeYoung 阅读(3157) 评论(0) 推荐(2) 编辑

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示