铭记喜悦
铭记喜悦

购物街项目（3）

四、开始完成商品详情页的功能

4.1 创建商品详情页组件和路由，并实现跳转

  1. 创建 detail 组件
  2. 配置动态路由，由于点击每个 goodsitem 进入的商品详情页不一样，要带上商品标记 iid
  3. 点击是在 GoodsItem 组件上触发的，需要在组件中设置点击事件，来跳转到对应的商品详情页
goodsItemClick() {
      this.$router.push("/detail/" + this.goodsItem.iid);
    }
  1. detail 组件中获取到从路由中传过来的 iid，并保存下来
this.iid = this.$route.params.iid

4.2 完成详情页头部的导航组件

  1. 使用公共组件 navbar 并再次封装成详情页的头部 DetailNavBar 组件
  2. v-for 遍历 title 里面的数据，让头部内容显示正确
  3. 通过绑定 :class=“{active: currentIndex === index}” 属性对象语法，来让判断哪个标题高亮显示
  4. 通过点击 title 名来切换高亮显示不同的标签，绑定点击事件：@click=“titleClick(index)”
  5. 使用左侧的插槽实现箭头返回的功能

4.3 进入详情页请求详情页数据

  1. 配置详情页的请求和方法的配置文件 detail.js 
     import { request } from './request'
   
 export function getDetailData(iid) {
   return request({
     url: "/detail",
     params: {
       iid
     }
   })
 }
  2. 在 Detail 组件中导入详情页请求方法 getDetailData()
  3. 在 method 中配置好调用该请求的方法 getDetailData
  4. 在生命周期函数 created 中调用该请求的方法 getDetailData，并查看可否请求到返回的数据

注意： 由于 App 组件中用了 导致每次进入 Detail 组件页面时 created() 函数不会执行，也就意味着不会去获取新的 iid ，从而无法拿到详情页新的数据。因此需要在 App 组件的 标签上采用 exclude=“Detail” 来将 Detail 组件排除在外，这样在用户每次进入详情页时，就会重新执行 created() 生命周期函数中的代码去获取并存储新的 iid。

4.4 完成详情页轮播组件

  1. 初始化轮播图片的数据 topImages: [] ，并从 getDetailData 方法中获取到轮播的数据，将其赋给 this.topImages
  2. 创建详情页轮播的子组件 DetailSwiper.vue ，并在 Detail 父组件中导入、注册和使用
  3. 通过在 组件上绑定轮播图片属性，传给子组件的 props 中
  4. 使用 Vant ui组件中的 swipe 轮播
    • 安装 Vant 组件
      npm i vant -S
    • 在 main.js 中引入 swiper 轮播功能
     import { Swipe, SwipeItem } from 'vant';
 import 'vant/lib//index.css';
     
 Vue.use(Swipe);
 Vue.use(SwipeItem);
  5. 将 topImages 中的数据用 swipe 组件进行遍历实现，并调试样式使轮播正常

4.5 完成详情页基本信息（标题、价格、销量等）

  1. 创建商品详情信息组件 DetailBaseInfo.vue ，并引入、注册和使用
  2. 创建获取商品信息的 goodsInfo 对象
    • 使用构造函数new一个 Goods 的对象
    • 通过创建类对象 class Goods {} 来将所有需要的商品信息拼凑到一起
    • 通过构造方法 constructor(){} 初始化 class 创建的对象
       export class Goods {
     constructor(itemInfo, columns, services) {
       this.title = itemInfo.title
       this.desc = itemInfo.desc
       this.newPrice = itemInfo.price
       this.oldPrice = itemInfo.oldPrice
       this.realPrice = itemInfo.lowNowPrice
       this.discount = itemInfo.discountDesc
       this.columns = columns
       this.services = services
     }
   }
  3. 再将拼凑好的商品信息对象 goodsInfo 通过组件上的自定义属性传递给子组件中 props 中的商品信息 goodsInfo 对象
  4. 在 template 中创建商品信息的结构，将 goodsInfo 中的数据显示在对应的位置，并调试好样式
  5. 在组件最外层的 div 标签上通过 v-if 指令判断对象中 keys 的长度，来判断 goodsInfo 是否有数据， 
       v-if="Object.keys(goodsInfo).length !== 0"

4.6 完成详情页店铺信息

  1. 创建组件 DetailShopInfo.vue 引入、注册并使用
  2. 创建获取商店信息的数据对象 shopInfo
    • 使用构造函数 new 一个 Shop 对象
    • 通过创建一个 class Shop{} 对象来将所有的数据拼凑到一起
    • 通过构造方法 constructor(){} 初始化 class 创建的对象 
         export class Shop {
     constructor(shopInfo) {
       this.name = shopInfo.name
       this.shopLogo = shopInfo.shopLogo
       this.cSells = shopInfo.cSells
       this.cGoods = shopInfo.cGoods
       this.score = shopInfo.score
       this.cFans = shopInfo.cFans
     }
   }
  3. 在将创建好的的 Shop 对象赋值给 this.shopInfo 后，在 data(){} 中初始化一个 shopInfo 对象
  4. 将父组件 shopInfo 对象通过在组件标签中绑定属性的方式将数据传递给子组件中的 props
  5. 在 template 中创建商品信息的结构，将 goodsInfo 中的数据显示在对应的位置，并调试好样式
    • 其中总销量是 5.2 万，需要用 vue 的过滤器将实际的52157转换成 5.2万
    • 商店评价部分的内容可以用表格 标签和 v-for 遍历数据，来实现结构样式

      4.7 完成详情页商品信息穿着效果

      1. 创建组件 DetailGoodsInfo.vue 引入、注册和使用
      2. 在详情页 Detail.vue 组件中获取详情页请求中的商品穿着效果图信息数据 this.detailInfo ，并在 data 中初始化自定义一个 detailInfo 对象，用来存储获取到的数据
      3. 通过 prop 在父组件 Detail.vue 的子组件标签上定义一个 detail-info=“”属性来将，父组件的数据传递给子组件
      4. 在子组件 DetailGoodsInfo 中的 props 中自定义一个 detailInfo ，并拿到 detailInfo 中的详细数据
      5. 完成 DetailGoodsInfo 组件中解构数据样式的渲染
        • 注意：需要使用 v-if 指令先判断子组件是否有获取到数据，再进行页面解构样式的渲染 v-if="Object.keys(detailInfo).length !== 0
      6. 引入 batter-scroll 组件来使页面可以手动滚动
        • 需要在 scroll 组件标签上设置 content 属性
        • 在 content 上设置样式，采用 .content { height: calc(100% - 44px) }
      7. 防止用户在滚动时图片还未加载出来的情况
        • 监听传过来的 detailInfo 对象中图片长度的变化，将最终获取到的图片长度，保存到 imagesLength 中
        • 判断图片是否加载完成，之后再进行一次回调

      4.8 完成商品参数信息的内容

      1. 创建组件 DetailParamsInfo.vue 引入、注册和使用
      2. 在父组件 Detail.vue 中获取参数信息数据 this.paramsInfo ，并将其保存到 data 中
        • 使用构造函数 new 一个 Params 对象
        • 通过创建一个 class Params{} 对象来将所有的数据拼凑到一起
        • 通过构造方法 constructor(){} 初始化 class创建的对象 
             export class Params {
     constructor(paramInfo, paramRule) {
       this.rulekey = paramRule.key
       this.tables = paramRule.tables
       this.infokey = paramInfo.key
       this.set = paramInfo.set
       this.image = paramInfo.image ? paramInfo.images[0] : '';
     }
   }
      3. 通过 prop 父子组件传值的方式将 paramsInfo 参数数据传递给子组件 DetailParamsInfo
      4. 在组件 DetailParamsInfo 中完成结构样式的实现

      4.9 完成商品评论部分的内容

      1. 创建组件 DetailCommentInfo.vue 引入、注册和使用
      2. 在父组件 Detail 中获取评价部分的数据 commentInfo ，并将其保存到 data 中
      3. 通过 prop 父子组件传值的方式将 commentInfo 参数数据传递给子组件 DetailCommentInfo
      4. 在组件 DetailCommentInfo 中渲染数据和样式
      5. 由于用户评价部分有涉及到时间的数据，需要采用过滤器将时间戳转换成年月日
        • 在 commen 文件夹中的 utils.js 中实现将时间戳转换成 yyyy-MM-dd hh:mm:ss 的字符串
        • 将其引入组件 DetailCommentInfo 中
        • 在组件中的 filters 过滤器中实现转换功能
        • 将实际的时间戳转成 Date 对象
        • 将 date 进行格式化
        • 再在时间数据后接入 {{ commentInfo.created | showDate }} 
             filters: {
     showDate(value) {
       // 1.将时间戳转成Date对象
       const date = new Date(value * 1000);
 
       // 2. 将 date 进行格式化
       return formatDate(date, "yyyy-MM-dd hh:mm:ss");
     }
   }

      4.10 完成商品详情页推荐部分的内容

      1. 在详情页请求数据文件 detail.js 中创建推荐请求 getRecommd 方法
      2. 在父组件 Detail 中调用 getRecommd 方法，来获取推荐数据 recommendsInfo
      3. 将 recommendsInfo 在 data 中初始化，并将获取到的数据存储到 recommendsInfo
      4. 由于推荐数据的样式结构和首页 GoodsList 组件的样式结构一致，因此可以直接复用该组件
      5. 引入 GoodsList 组件，注册、使用
      6. 采用 prop 父子组件传值的方法将 recommendsInfo 数据传给 GoodsList 子组件中的 goods

      4.11 解决商品详情页图片加载刷新影响首页的问题

      1. 由于商品详情推荐信息部分使用的是 GoodsList 和 GoodsItem 组件，而组件中有事件总线方法 $bus 来监听并将图片加载完的事件 itemImageLoad 发送给首页 Home ，导致商品详情页中的图片刷新时会影响首页
      2. 因此需要在首页 deactivated() 函数中，取消全局事件监听 this.$bus.$off()
      3. 先在 data 中初始化一个 itemImgListener 事件监听方法名，并将首页监听事件 $on() 中的刷新方法保存到 itemImgListener 中 
            const newRefresh = debounce(this.$refs.scroll.refresh, 100);    
    // 监听事件总线中的事件变化，即 item 中图片加载完成
       // 对监听事件进行保存, 保存到 itemImgListener 中
       this.itemImgListener = () => {
         newRefresh();
       };
       this.$bus.$on("itemImageLoad", this.itemImgListener);
      4. 由于上面的方法在组件 Home 和 Detail 中的 mounted(){} 中都有使用，因此需要采用混入 mixin 方式将这些方法内容抽离合并到 mixin.js 文件中
        全局混入: https://cn.vuejs.org/v2/guide/mixins.html 
           import { debounce } from "../common/utils";
   
   export const itemListenerMixin = {
     data() {
       return {
         itemImgListener: null，
         newRefresh: null
       }
     },
     mounted() {
       // 1.图片加载完的事件监听
       // 通过防抖函数 this.$refs.scroll.refresh 的调用来防止 newRefresh() 函数被频繁调用
       this.newRefresh = debounce(this.$refs.scroll.refresh, 100);
       // 监听事件总线中的事件变化，即 item 中图片加载完成
       // 对监听事件进行保存, 保存到 itemImgListener 中
       this.itemImgListener = () => {
         this.newRefresh();
       };
       this.$bus.$on("itemImageLoad", this.itemImgListener);
     },
   }
      5. 然后在 Home 和 Detail 组件中引入混入方法 
           import { itemListenerMixin } from "../../common/mixin";
   
   export default {
     mixins: [itemListenerMixin],
   }

      4.12 完成点击头部标题跳转对应模块位置

      1. 在子组件 DetailNavBar 中通过 $emit 方法把点击标题的动作和参数 titleClick 传递给父组件 Detail
      2. 在父组件 Detail 中的 DetailNavBar 标签上绑定点击该事件的动作 @titleClick 的方法 titleClick(index) 来监控点击的是哪个标题
      3. 该 titleClick 方法需要调用 scrollTo 方法来实现跳转到标题对应的组件标签所在的 y 轴的位置 this.$refs.scroll.scrollTo(0, -y, 100)
        • 在 data 中给 y 值定义一个初始化属性值叫 titleTopYs: [0, 1000, 2000, 3000]
        • 然后点击详情页顶部标题，看检验是否能正常跳转
      4. 然后获取每个标题对应的实际组件所在位置的 offsetTop ，在替代 titleTopYs 数组中的具体值（即将每个 offsetTop 值通过 push 存入 titleTopYs 中）
      5. 通过给每个组件绑定一个 ref 属性来获取到每个组件的 offsetTop
      6. 由于在获取 offsetTop 时需要先拿到数据，并且也在页面渲染完了数据，否则获取到的 offsetTop 会出现 undefined 的情况。因此需要在 updated() 钩子函数中去进行。
        • 方法二：在获取数据的方法中去调用 this.$nextTick(() => {}) 方法，并在该方法中去获取这些组件的 offsetTop 值
        • 注意： 方法二中根据最新的数据，对应的DOM是已经被渲染出来，但图片依然图片依然是没有加载完完成，图片的高度没有完成包含在其中

      4.13 滚动页面后头部标题自动切换到当前位置对应的标题

      1. 需要知道滚动的位置，当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件，即在 Scroll 组件上绑定属性 probe-type
      2. 将 Scroll 组件中监听事件和位置参数 position 发送给父组件 Detail 中的绑定的 scroll 属性上的方法 contentScroll
      3. 获取滚动的高度 positionY 的值
      4. 把 positionY 值和 titleTopYs 值进行对比，来判断当前是处在哪个标题的位置
        • positionY 在0到10762之间时， index = 0
        • positionY 在10762到11573之间时， index = 1
        • positionY 在10762到11762之间时， index = 2
        • positionY 在大于11762之间时， index = 3
      5. 完成判断逻辑，并将滚动位置的 currentIndex 和标题的 currentIndex 同步
      6. 方法一：普通判断方法 
           let titleLength = this.titleTopYs.length;
   for (let i = 0; i < titleLength; i++) {
     if (
       this.currentIndex !== i &&
       ((i < titleLength - 1 &&
         positionY >= this.titleTopYs[i] &&
         positionY < this.titleTopYs[i + 1]) ||
         (i === titleLength - 1 && positionY >= this.titleTopYs[i]))
     ) {
       this.currentIndex = i;
       console.log(this.currentIndex);
       // 将滚动判断的currentIndex赋值给DetailNavBar组件中的currentIndex来改变标题的切换
       this.$refs.detailnavbar.currentIndex = this.currentIndex;
     }
   }
      7. 方法二：在 titleTopYs 最后加一个最大值，将最后一个大于判断变成区间判断 
           let titleLength = this.titleTopYs.length;
   for (let i = 0; i < titleLength; i++) {
     if (
       this.currentIndex !== i &&
       i < titleLength - 1 &&
         positionY >= this.titleTopYs[i] &&
         positionY < this.titleTopYs[i + 1]
     ) {
       this.currentIndex = i;
       console.log(this.currentIndex);
       // 将滚动判断的currentIndex赋值给DetailNavBar组件中的currentIndex来改变标题的切换
       this.$refs.detailnavbar.currentIndex = this.currentIndex;
     }
   }

      4.14 完成详情页底部商品动作栏

      1. 采用 Vant 组件中的 （GoodsAction 商品导航） 组件来完成
      2. 先引入该UI组件对应的库
      3. 创建组件 DetailGoodsAction.vue 并在 Detail 组件中导入、注册和使用
      4. 调整 DetailGoodsAction.vue 组件中的样式参数
      5. 并在加入购物车的标签上绑定点击事件方法

      4.15 完成详情页回到顶部的按钮

      1. 使用之前已经封装好的 BackTop.vue 组件
      2. 导入、注册并使用
      3. 由于首页也有该组件和功能，所有采用混入的方式来实现
      4. 在 mixin.js 中定义一个混入对象 backTopMixin
      5. 把 Detail.vue 和 Home.vue 组件中用到的对象
        • data 中定义的对象 isShowBackTop
        • methods 中用到的方法 backClick(){} 和 listenShowBackTop(positon){}
        • 在 mixin.js 中同样要引入 BackTop 组件
        • 同样要在 components 中注册 BackTop
      6. 再在 Detail.vue 和 Home.vue 组件中引用混入，并使用 mixin: [backTopMixin]

      4.16 完成添加购物车的功能

      1. 在组件 DetailGoodsAction 中的添加购物的标签上绑定点击事件 @click=“onClickButton”
      2. 通过 $emit 将 addCart() 方法发送到父组件 Detail
      3. 并在父组件的 DetailGoodsAction 标签上绑定 addCart 方法来调用 addToCart()
      4. 通过 addToCart 方法将商品数据添加到购物车
      5. 先获取添加到购物车的商品信息 products
      6. 由于 Detail 组件与购物车组件 Cart 组件直接没有任何父子关系，其组件直接的传值需要使用 vuex 来进行全局的状态管理
        • 先安装 vuex 插件工具 npm i vuex --save
        • 创建 store 文件夹，并新建一个 index.js 的文件，其中用来配置 vuex 中初始化一个 Store 对象 
             import Vue from 'vue'
   import Vuex from 'vuex'
   
   // 1.使用Vuex
   Vue.use(Vuex)
   // 2.初始化Store实例
   const store = new Vuex.Store({
     state: {
       cartList: []
     },
     mutations: {},
     getters: {},
     actions: {}
   })
   // 3.将store导出给vue中去挂载
   export default store
        • 在 main.js 中引入 store ，并将其挂载到 vue 实例上 
             import store from './store'
   
   new Vue({
     render: h => h(App),
     store, // 4.挂载 store
   }).$mount('#app')
      7. 将 products 购物车数据，提交到 vuex 中的 state 上的商品列表 cartList 进行存储
        • 通过 this.$store.commit 提交 addToCartList 方法给 store 中的 mutation
        • 在 mutation 中通过提交的方法 addToCartList 来变更 state 中的状态

      你可能感兴趣的:(购物街项目（3）)

      • 斤斤计较的婚姻到底有多难？ 白心之岂必有为
        很多人私聊我会问到在哪个人群当中斤斤计较的人最多？我都会回答他，一般婚姻出现问题的斤斤计较的人士会非常多，以我多年经验，在婚姻落的一塌糊涂的人当中，斤斤计较的人数占比在20～30%以上，也就是说10个婚姻出现问题的斤斤计较的人有2-3个有多不减。在婚姻出问题当中，有大量的心理不平衡的、尖酸刻薄的怨妇。在婚姻中仅斤斤计较有两种类型：第一种是物质上的，另一种是精神上的。在物质与精神上抠门已经严重的影响
      • 情绪觉察日记第37天 露露_e800
        今天是家庭关系规划师的第二阶最后一天，慧萍老师帮我做了个案，帮我处理了埋在心底好多年的一份恐惧，并给了我深深的力量！这几天出来学习，爸妈过来婆家帮我带小孩，妈妈出于爱帮我收拾东西，并跟我先生和婆婆产生矛盾，妈妈觉得他们没有照顾好我…。今晚回家见到妈妈，我很欣赏她并赞扬她，妈妈说今晚要跟我睡我说好，当我们俩躺在床上准备睡觉的时候，我握着妈妈的手对她说:妈妈这几天辛苦你了，你看你多利害把我们的家收拾得
      • QQ群采集助手，精准引流必备神器 2401_87347160 其他经验分享
        功能概述微信群查找与筛选工具是一款专为微信用户设计的辅助工具，它通过关键词搜索功能，帮助用户快速找到相关的微信群，并提供筛选是否需要验证的群组的功能。主要功能关键词搜索：用户可以输入关键词，工具将自动查找包含该关键词的微信群。筛选功能：工具提供筛选机制，用户可以选择是否只显示需要验证或不需要验证的群组。精准引流：通过上述功能，用户可以更精准地找到目标群组，进行有效的引流操作。3.设备需求该工具可以
      • 关于沟通这件事，项目经理不需要每次都面对面进行 流程大师兄
        很多项目经理都会遇到这样的问题，项目中由于事情太多，根本没有足够的时间去召开会议，那在这种情况下如何去有效地管理项目中的利益相关者？当然，不建议电子邮件也不需要开会的话，建议可以采取下面几种方式来形成有效的沟通，这几种方式可以帮助你努力的通过各种办法来保持和各方面的联系。项目经理首先要问自己几个问题，项目中哪些利益相关者是必须要进行沟通的？可以列出项目中所有的利益相关者清单，同时也整理出项目中哪些
      • 底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说 造命者说
        底层逆袭到底有多难，不甘平凡的你准备好了吗？让吴起给你说说我叫吴起，生于公元前440年的战国初期，正是群雄并起、天下纷争不断的时候。后人说我是军事家、政治家、改革家，是兵家代表人物。评价我一生历仕鲁、魏、楚三国，通晓兵家、法家、儒家三家思想，在内政军事上都有极高的成就。周安王二十一年（公元前381年），因变法得罪守旧贵族，被人乱箭射死。我出生在卫国一个“家累万金”的富有家庭，从年轻时候起就不甘平凡
      • OC语言多界面传值五大方式 Magnetic_h iosui学习objective-c开发语言
        前言在完成暑假仿写项目时，遇到了许多需要用到多界面传值的地方，这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值，简单地说就是通过访问后一个视图控制器的属性来为它赋值，通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt
      • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
        el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
      • 谢谢你们，爱你们！ 鹿游儿
        昨天家人去泡温泉，二个孩子也带着去，出发前一晚，匆匆下班，赶回家和孩子一起收拾。饭后，我拿出笔和本子（上次去澳门时做手帐的本子）写下了1\2\3\4\5\6\7\8\9,让后让小壹去思考，带什么出发去旅游呢？她在对应的数字旁边画上了，泳衣、泳圈、肖恩、内衣内裤、tapuy、拖鞋……画完后，就让她自己对着这个本子，将要带的，一一带上，没想到这次带的书还是这本《便便工厂》(晚上姑婆发照片过来，妹妹累得
      • 2021年12月19日，春蕾教育集团团建活动感受——黄晓丹 黄错错加油
        感受:1.从陌生到熟悉的过程。游戏环节让我们在轻松的氛围中得到了锻炼，也增长了不少知识。2.游戏过程中，我们贡献的是个人力量，展现的是团队的力量。它磨合的往往不止是工作的熟悉，更是观念上契合度的贴近。3.这和工作是一样的道理。在各自的岗位上，每个人摆正自己的位置、各司其职充分发挥才能，并团结一致劲往一处使，才能实现最大的成功。新知:1.团队精神需要不断地创新。过去，人们把创新看作是冒风险，现在人们
      • 《策划经理回忆录之二》 路基雅虎
        话说三年变六年，飘了，飘了……眨眼，2013年5月，老吴回到了他的家乡——油城从新开启他的工作幻想症生涯。很庆幸，这是一家很有追求，同时敢于尝试的，且实力不容低调的新星房企——金源置业(前身泰源置业)更值得庆幸的是第一个盘就是油城十路的标杆之一:金源盛世。2013年5月，到2015年11月，两年的陪伴，迎来了一场大爆发。2000个筹，5万/筹，直接回笼1个亿！！！这……让我开始认真审视这座看似五线
      • Long类型前后端数据不一致 igotyback 前端
        响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
      • swagger访问路径 igotyback swagger
        Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
      • 如何在 Fork 的 GitHub 项目中保留自己的修改并同步上游更新？github_fork_update iBaoxing github
        如何在Fork的GitHub项目中保留自己的修改并同步上游更新？在GitHub上Fork了一个项目后，你可能会对项目进行一些修改，同时原作者也在不断更新。如果想要在保留自己修改的基础上，同步原作者的最新更新，很多人会不知所措。本文将详细讲解如何在不丢失自己改动的情况下，将上游仓库的更新合并到自己的仓库中。问题描述假设你在GitHub上Fork了一个项目，并基于该项目做了一些修改，随后你发现原作者对
      • 30天风格练习-DAY2 黄希夷
        Day2（重义）在一个周日/一周的最后一天，我来到位于市中心/市区繁华地带的一家购物中心/商场，中心内人很多/熙熙攘攘。我注意到/看见一个独行/孤身一人的年轻女孩/，留着一头引人注目/长过腰际的头发，上身穿一件暗红色/比正红色更深的衣服/穿在身体上的东西。走下扶梯的时候，她摔倒了/跌向地面，在她正要站起来/让身体离开地面的时候，过长/超过一般人长度的头发被支撑身体/躯干的手掌压/按在下面，她赶紧用
      • ArcGIS栅格计算器常见公式（赋值、0和空值的转换、补充栅格空值） 研学随笔 arcgis经验分享
        我们在使用ArcGIS时通常经常用到栅格计算器，今天主要给大家介绍我日常中经常用到的几个公式，供大家参考学习。将特定值（-9999）赋值为0，例如-9999.Con("raster"==-9999,0,"raster")2.给空值赋予特定的值（如0）Con(IsNull("raster"),0,"raster")3.将特定的栅格值(如1)赋值为空值，其他保留原值SetNull("raster"==
      • 高级编程--XML+socket练习题 masa010 java开发语言
        1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
      • 抖音乐买买怎么加入赚钱?赚钱方法是什么 测评君高省
        你会在抖音买东西吗?如果会，那么一定要免费注册一个乐买买，抖音直播间，橱窗，小视频里的小黄车买东西都可以返佣金!省下来都是自己的，分享还可以赚钱乐买买是好省旗下的抖音返佣平台，乐买买分析社交电商的价值，乐买买属于今年难得的副业项目风口机会，2019年错过做好省的搞钱的黄金时期，那么2022年千万别再错过乐买买至于我为何转到高省呢？当然是高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个自
      • 开心 蒋泳频
        从无比抗拒来上课到接受，感动，收获～看着波哥成长，晶晶幸福笑容满面。感觉自己做的事情很有意义，很开心！还有3个感召目标就是还有三个有缘人，哈哈。明天感召去明日计划：8：30-11：00小公益11：00-21点上班，感召图片发自App图片发自App图片发自App
      • 2018-07-23-催眠日作业-#不一样的31天#-66小鹿 小鹿_33
        预言日：人总是在逃避命运的路上，与之不期而遇。心理学上有个著名的名词，叫做自证预言；经济学上也有一个很著名的定律叫做，墨菲定律；在灵修派上，还有一个很著名的法则，叫做吸引力法则。这3个领域的词，虽然看起来不太一样，但是他们都在告诉人们一个现象：你越担心什么，就越有可能会发生什么。同样的道理，你越想得到什么，就应该要积极地去创造什么。无论是自证预言，墨菲定律还是吸引力法则，对人都有正反2个维度的影响
      • 本周第二次约练 2cfbdfe28a51
        中原焦点团队中24初26刘霞2021.12.3约练161次，分享第368天当事人虽然是带着问题来的，但是咨询过程中发现，她是经过自己不断地调整和努力才走到现在的，看到当事人的不容易，找到例外，发现资源，力量感也就随之而来。增强画面感，或者说重温，会给当事人带来更深刻的感受。
      • 回溯 Leetcode 332 重新安排行程 mmaerd Leetcode刷题学习记录leetcode算法职场和发展
        重新安排行程Leetcode332学习记录自代码随想录给你一份航线列表tickets，其中tickets[i]=[fromi,toi]表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。所有这些机票都属于一个从JFK（肯尼迪国际机场）出发的先生，所以该行程必须从JFK开始。如果存在多种有效的行程，请你按字典排序返回最小的行程组合。例如，行程[“JFK”,“LGA”]与[“JFK”,“LGB
      • 今日联对0306 诗图佳得
        自对联：烟销皓月临江浒，水漫金山荡塔裙。一一肖士平2020.3.6.1、试对肖老师联：烟销皓月临江浒，夜笼寒沙梦晚舟。耀哥求正2、试对萧老师联:烟销浩月临江浒，雾散乾坤解汉城。秀霞习作请各位老师校正3、自对联：烟销皓月临江浒，水漫金山荡塔裙。一一肖士平2020.3.6.4、试对肖老师垫场联：烟销皓月临江浒，雾锁寒林缈葉丛。小智求正[抱拳]5、试对肖老师联：烟销皓月临江浒；风卷乱云入峰巅。一一五品6
      • 每日一题——第八十九题 互联网打工人no1 C语言程序设计每日一练c语言
        题目：在字符串中找到提取数字，并统计一共找到多少整数，a123xxyu23&8889，那么找到的整数为123，23，8889//思想：#include#include#includeintmain(){charstr[]="a123xxyu23&8889";intcount=0;intnum=0;//用于临时存放当前正在构建的整数。boolinNum=false;//用于标记当前是否正在读取一个整
      • 每日一题——第八十四题 互联网打工人no1 C语言程序设计每日一练c语言
        题目：编写函数1、输入10个职工的姓名和职工号2、按照职工由大到小顺序排列，姓名顺序也随之调整3、要求输入一个职工号，用折半查找法找出该职工的姓名#define_CRT_SECURE_NO_WARNINGS#include#include#defineMAX_EMPLOYEES10typedefstruct{intid;charname[50];}Empolyee;voidinputEmploye
      • 《小满细雨轻湿尘》 快乐的人ZZM
        图片发自App《小满细雨轻湿尘》文/快乐的人zzm小满细雨轻湿尘石榴花开落纷纷落红不是无情物坠入泥土育养根2018-5-23
      • WPF中的ComboBox控件几种数据绑定的方式 互联网打工人no1 wpfc#
        一、用字典给ItemsSource赋值（此绑定用的地方很多，建议熟练掌握）在XMAL中：在CS文件中privatevoidBindData(){DictionarydicItem=newDictionary();dicItem.add(1,"北京");dicItem.add(2,"上海");dicItem.add(3,"广州");cmb_list.ItemsSource=dicItem;cmb_l
      • Python中os.environ基本介绍及使用方法 鹤冲天Pro #Pythonpython服务器开发语言
        文章目录python中os.environos.environ简介os.environ进行环境变量的增删改查python中os.environ的使用详解1.简介2.key字段详解2.1常见key字段3.os.environ.get()用法4.环境变量的增删改查和判断是否存在4.1新增环境变量4.2更新环境变量4.3获取环境变量4.4删除环境变量4.5判断环境变量是否存在python中os.envi
      • 怎么起诉借钱不还的人？怎样起诉欠款不还的人？ 影子爱学习
        怎么起诉借钱不还的人？怎样起诉欠款不还的人？如果遇到难以解决的法律问题，我们可以匹配专业律师。例如：婚姻家庭（离婚纠纷）、刑事辩护、合同纠纷、债权债务、房产（继承）纠纷、交通事故、劳动争议、人身损害、公司相关法律事务（法律顾问）等咨询推荐手机/微信:15633770876【全国案件皆可】借钱不还起诉对方需要哪些资料起诉欠钱不还的，一般需要的材料包括以下这些：借据、收据、欠条、付款凭证等证据，以及向
      • 2019-12-22-22:30 涓涓1016
        今天是冬至，写下我的日更，是因为这两天的学习真的是能量的满满，让我看到了自己，未来另外一种可能性，也让我看到了这两年这几年的过程中我所接受那些痛苦的来源。一切的根源和痛苦都来自于人生，家庭，而你的原生家庭，你的爸爸和妈妈，是因为你这个灵魂在那一刻选择他们作为你的爸爸和妈妈来的，所以你得接受他，你得接纳他，他就是因为他的存在而给你的学习和成长带来这些痛苦，那其实是你必然要经历的这个过程，当你去接纳的
      • linux sdl windows.h,Windows下的SDL安装 奔跑吧linux内核 linuxsdlwindows.h
        首先你要下载并安装SDL开发包。如果装在C盘下，路径为C:\SDL1.2.5如果在WINDOWS下。你可以按以下步骤：1.打开VC++，点击"Tools",Options2,点击directories选项3.选择"Includefiles"增加一个新的路径。"C:\SDL1.2.5\include"4，现在选择"Libaryfiles“增加"C:\SDL1.2.5\lib"现在你可以开始编写你的第
      • [星球大战]阿纳金的背叛 comsci
              本来杰迪圣殿的长老是不同意让阿纳金接受训练的.........     但是由于政治原因,长老会妥协了...这给邪恶的力量带来了机会     所以......现代的地球联邦接受了这个教训...绝对不让某些年轻人进入学院    
      • 看懂它，你就可以任性的玩耍了！ aijuans JavaScript
                  javascript作为前端开发的标配技能，如果不掌握好它的三大特点：1.原型 2.作用域 3. 闭包 ,又怎么可以说你学好了这门语言呢？如果标配的技能都没有撑握好，怎么可以任性的玩耍呢？怎么验证自己学好了以上三个基本点呢，我找到一段不错的代码，稍加改动，如果能够读懂它，那么你就可以任性了。 function jClass(b
      • Java常用工具包 Jodd Kai_Ge javajodd
        Jodd 是一个开源的 Java 工具集， 包含一些实用的工具类和小型框架。简单，却很强大！ 写道 Jodd = Tools + IoC + MVC + DB + AOP + TX + JSON + HTML < 1.5 Mb Jodd 被分成众多模块，按需选择，其中 工具类模块有： jodd-core    &nb
      • SpringMvc下载 120153216 springMVC
        @RequestMapping(value = WebUrlConstant.DOWNLOAD) public void download(HttpServletRequest request,HttpServletResponse response,String fileName) { OutputStream os = null; InputStream is = null;
      • Python 标准异常总结 2002wmj python
        Python标准异常总结 AssertionError 断言语句（assert）失败 AttributeError 尝试访问未知的对象属性 EOFError 用户输入文件末尾标志EOF（Ctrl+d） FloatingPointError 浮点计算错误 GeneratorExit generator.close()方法被调用的时候 ImportError 导入模块失
      • SQL函数返回临时表结构的数据用于查询 357029540 SQL Server
        这两天在做一个查询的SQL，这个SQL的一个条件是通过游标实现另外两张表查询出一个多条数据，这些数据都是INT类型，然后用IN条件进行查询，并且查询这两张表需要通过外部传入参数才能查询出所需数据，于是想到了用SQL函数返回值，并且也这样做了，由于是返回多条数据，所以把查询出来的INT类型值都拼接为了字符串，这时就遇到问题了，在查询SQL中因为条件是INT值，SQL函数的CAST和CONVERST都
      • java 时间格式化 | 比较大小| 时区 个人笔记 7454103 javaeclipsetomcatcMyEclipse
        个人总结！ 不当之处多多包含！ 引用 1.0 如何设置 tomcat 的时区：          位置：(catalina.bat---JAVA_OPTS  下面加上)          set JAVA_OPT
      • 时间获取Clander的用法 adminjun Clander时间
        /**    * 得到几天前的时间    * @param d    * @param day    * @return    */   public static Date getDateBefore(Date d,int day){    Calend
      • JVM初探与设置 aijuans java
        JVM是Java Virtual Machine（Java虚拟机）的缩写，JVM是一种用于计算设备的规范，它是一个虚构出来的计算机，是通过在实际的计算机上仿真模拟各种计算机功能来实现的。Java虚拟机包括一套字节码指令集、一组寄存器、一个栈、一个垃圾回收堆和一个存储方法域。 JVM屏蔽了与具体操作系统平台相关的信息，使Java程序只需生成在Java虚拟机上运行的目标代码（字节码）,就可以在多种平台
      • SQL中ON和WHERE的区别 avords
        SQL中ON和WHERE的区别   数据库在通过连接两张或多张表来返回记录时，都会生成一张中间的临时表，然后再将这张临时表返回给用户。   www.2cto.com   在使用left jion时，on和where条件的区别如下：  1、 on条件是在生成临时表时使用的条件，它不管on中的条件是否为真，都会返回左边表中的记录。 
      • 说说自信 houxinyou 工作生活
        自信的来源分为两种,一种是源于实力,一种源于头脑.实力是一个综合的评定,有自身的能力,能利用的资源等.比如我想去月亮上,要身体素质过硬,还要有飞船等等一系列的东西.这些都属于实力的一部分.而头脑不同,只要你头脑够简单就可以了!同样要上月亮上,你想,我一跳,1米,我多跳几下,跳个几年,应该就到了!什么?你说我会往下掉?你笨呀你!找个东西踩一下不就行了吗?     无论工作还
      • WEBLOGIC事务超时设置 bijian1013 weblogicjta事务超时
                系统中统计数据，由于调用统计过程，执行时间超过了weblogic设置的时间，提示如下错误： 统计数据出错! 原因：The transaction is no longer active - status: 'Rolling Back. [Reason=weblogic.transaction.internal
      • 两年已过去，再看该如何快速融入新团队 bingyingao java互联网融入架构新团队
        偶得的空闲，翻到了两年前的帖子 该如何快速融入一个新团队，有所感触，就记下来，为下一个两年后的今天做参考。     时隔两年半之后的今天，再来看当初的这个博客，别有一番滋味。而我已经于今年三月份离开了当初所在的团队，加入另外的一个项目组，2011年的这篇博客之后的时光，我很好的融入了那个团队，而直到现在和同事们关系都特别好。大家在短短一年半的时间离一起经历了一
      • 【Spark七十七】Spark分析Nginx和Apache的access.log bit1129 apache
        Spark分析Nginx和Apache的access.log，第一个问题是要对Nginx和Apache的access.log文件进行按行解析，按行解析就的方法是正则表达式：   Nginx的access.log解析正则表达式   val PATTERN = """([^ ]*) ([^ ]*) ([^ ]*) (\\[.*\\]) (\&q
      • Erlang patch bookjovi erlang
        Totally five patchs committed to erlang otp, just small patchs. IMO, erlang really is a interesting programming language, I really like its concurrency feature. but the functional programming style
      • log4j日志路径中加入日期 bro_feng javalog4j
        要用log4j使用记录日志，日志路径有每日的日期，文件大小5M新增文件。 实现方式 log4j: <appender name="serviceLog" class="org.apache.log4j.RollingFileAppender"> <param name="Encoding" v
      • 读《研磨设计模式》-代码笔记-桥接模式 bylijinnan java设计模式
        声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * 个人觉得关于桥接模式的例子，蜡笔和毛笔这个例子是最贴切的：http://www.cnblogs.com/zhenyulu/articles/67016.html * 笔和颜色是可分离的，蜡笔把两者耦合在一起了：一支蜡笔只有一种
      • windows7下SVN和Eclipse插件安装 chenyu19891124 eclipse插件
        今天花了一天时间弄SVN和Eclipse插件的安装，今天弄好了。svn插件和Eclipse整合有两种方式，一种是直接下载插件包，二种是通过Eclipse在线更新。由于之前Eclipse版本和svn插件版本有差别，始终是没装上。最后在网上找到了适合的版本。所用的环境系统：windows7JDK：1.7svn插件包版本：1.8.16Eclipse：3.7.2工具下载地址：Eclipse下在地址：htt
      • [转帖]工作流引擎设计思路 comsci 设计模式工作应用服务器workflow企业应用
        作为国内的同行，我非常希望在流程设计方面和大家交流，刚发现篇好文(那么好的文章，现在才发现，可惜)，关于流程设计的一些原理，个人觉得本文站得高，看得远，比俺的文章有深度，转载如下 ================================================================================= 自开博以来不断有朋友来探讨工作流引擎该如何
      • Linux 查看内存，CPU及硬盘大小的方法 daizj linuxcpu内存硬盘大小
        一、查看CPU信息的命令 [root@R4 ~]# cat /proc/cpuinfo |grep "model name" && cat /proc/cpuinfo |grep "physical id" model name : Intel(R) Xeon(R) CPU X5450 @ 3.00GHz model name :
      • linux 踢出在线用户 dongwei_6688 linux
        两个步骤： 1.用w命令找到要踢出的用户，比如下面：   [root@localhost ~]# w 18:16:55 up 39 days, 8:27, 3 users, load average: 0.03, 0.03, 0.00 USER TTY FROM LOGIN@ IDLE JCPU PCPU WHAT
      • 放手吧,就像不曾拥有过一样 dcj3sjt126com
        内容提要： 静悠悠编著的《放手吧就像不曾拥有过一样》集结“全球华语世界最舒缓心灵”的精华故事，触碰生命最深层次的感动，献给全世界亿万读者。《放手吧就像不曾拥有过一样》的作者衷心地祝愿每一位读者都给自己一个重新出发的理由，将那些令你痛苦的、扛起的、背负的，一并都放下吧！把憔悴的面容换做一种清淡的微笑，把沉重的步伐调节成春天五线谱上的音符，让自己踏着轻快的节奏，在人生的海面上悠然漂荡，享受宁静与
      • php二进制安全的含义 dcj3sjt126com PHP
        PHP里，有string的概念。 string里，每个字符的大小为byte（与PHP相比，Java的每个字符为Character，是UTF8字符，C语言的每个字符可以在编译时选择）。 byte里，有ASCII代码的字符，例如ABC，123，abc，也有一些特殊字符，例如回车，退格之类的。 特殊字符很多是不能显示的。或者说，他们的显示方式没有标准，例如编码65到哪儿都是字母A，编码97到哪儿都是字符
      • Linux下禁用T440s，X240的一体化触摸板(touchpad) gashero linuxThinkPad触摸板
        自打1月买了Thinkpad T440s就一直很火大，其中最让人恼火的莫过于触摸板。   Thinkpad的经典就包括用了小红点(TrackPoint)。但是小红点只能定位，还是需要鼠标的左右键的。但是自打T440s等开始启用了一体化触摸板，不再有实体的按键了。问题是要是好用也行。   实际使用中，触摸板一堆问题，比如定位有抖动，以及按键时会有飘逸。这就导致了单击经常就
      • graph_dfs hcx2013 Graph
        package edu.xidian.graph; class MyStack { private final int SIZE = 20; private int[] st; private int top; public MyStack() { st = new int[SIZE]; top = -1; } public void push(i
      • Spring4.1新特性——Spring核心部分及其他 jinnianshilongnian spring 4.1
        目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
      • 配置HiveServer2的安全策略之自定义用户名密码验证 liyonghui160com
            具体从网上看   http://doc.mapr.com/display/MapR/Using+HiveServer2#UsingHiveServer2-ConfiguringCustomAuthentication   LDAP Authentication using OpenLDAP Setting
      • 一位30多的程序员生涯经验总结 pda158 编程工作生活咨询
        1.客户在接触到产品之后，才会真正明白自己的需求。 　　这是我在我的第一份工作上面学来的。只有当我们给客户展示产品的时候，他们才会意识到哪些是必须的。给出一个功能性原型设计远远比一张长长的文字表格要好。 2.只要有充足的时间，所有安全防御系统都将失败。 　　安全防御现如今是全世界都在关注的大课题、大挑战。我们必须时时刻刻积极完善它，因为黑客只要有一次成功，就可以彻底打败你。   3.
      • 分布式web服务架构的演变 自由的奴隶 linuxWeb应用服务器互联网
        最开始，由于某些想法，于是在互联网上搭建了一个网站，这个时候甚至有可能主机都是租借的，但由于这篇文章我们只关注架构的演变历程，因此就假设这个时候已经是托管了一台主机，并且有一定的带宽了，这个时候由于网站具备了一定的特色，吸引了部分人访问，逐渐你发现系统的压力越来越高，响应速度越来越慢，而这个时候比较明显的是数据库和应用互相影响，应用出问题了，数据库也很容易出现问题，而数据库出问题的时候，应用也容易
      • 初探Druid连接池之二——慢SQL日志记录 xingsan_zhang 日志连接池druid慢SQL
        由于工作原因，这里先不说连接数据库部分的配置，后面会补上，直接进入慢SQL日志记录。   1.applicationContext.xml中增加如下配置： <bean abstract="true" id="mysql_database" class="com.alibaba.druid.pool.DruidDataSourc