• 当前频道:程序开发

程序开发 yarn upgrade 更新依赖包

更新依赖包时yarn.lock、package.json同步更新版本信息 yarn upgrade-interactive --latest // 需要手动选择升级的依赖包,按空格键选择,a 键切换所有,i 键反选选择

2019-11-12 10:36:21 20 0 0
阅读详情

程序开发 js动态添加js文件

/** * 动态添加js * @param {String}} url js地址 * @param {Function}} callback 回调 */ function loadJS(url, callback) { var script = document.createElement('script'), fn = callback || function () { }; script.type = 'text/javascript'; //IE if (script.readyState) { script.onreadystatechange = function () { if (script.readyState == 'loaded' || script.readyState == 'complete') { script.onreadystatechange = null; fn(); } }; } else { //其他浏览器 script.onload = function () { fn(); }; } script.src = url; document.getElementsByTagName('head')[0].appendChild(script); } // 加载jquery loadJS('https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js',function(){});

2019-11-03 10:41:20 20 0 1
阅读详情

程序开发 git fork后更新原作者仓库代码到自己仓库

fork 了别人的仓库后,原作者又更新了仓库,如何将自己的代码和原仓库保持一致?本文将给你解答。 假设远程源仓库为A,自己fork后的远程仓库为B,自己本地的代码仓库为C 给 fork 配置一个 remote 一般来说从自己远程仓库B去拉代码后就会有remote 使用 git remote -v 查看远程状态。 git remote -v origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch) origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (push) 添加一个将被同步给 fork 远程的上游仓库A git remote add upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git 再次查看状态确认是否配置成功。 git remote -v origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch) origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (push) upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git (fetch) upstream https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY.git (push) 执行同步fork操作 从上游仓库A fetch 分支和提交点,传送到本地,并会被存储在一个本地分支 upstream/master git fetch upstream 默认会将远程所有的分支fetch下来 remote: Counting objects: 41, done. remote: Compressing objects: 100% (41/41), done. remote: Total 41 (delta 17), reused 0 (delta 0) Unpacking objects: 100% (41/41), done. From https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY * [new branch] dev -> upstream/dev * [new branch] master -> upstream/master 将upstream的代码合并到本地仓库C上 同步自己的远程仓库 从自己的远程仓库B上拉取最新的代码 git pull origin master 执行合并upstream操作 把 upstream/master 分支合并到本地 master 上 git merge upstream/master 如果想同步upstream/dev 分支的话执行 git merge upstream/dev 把 upstream/dev 分支合并到本地 push本地代码到自己的远程仓库 处理冲突代码,后提交到自己的远程仓库 git add . git commit -m '描述' git push 文章来自:shunyang

2019-10-19 15:29:43 63 0 0
阅读详情

程序开发 js瀑布流中图片加载导致渲染重叠解决方案

问题:每个item里面包含图片,由于加载延迟,导致渲染重叠。 解决方法:等待图片加载完毕再次渲染。 判断图片加载完毕方法: //判断图片加载完成后 var t_img; // 定时器 var isLoad = true; // 控制变量 // 判断图片加载的函数 function isImgLoad(callback) { // 注意我的图片类名都是cover,因为我只需要处理cover。其它图片可以不管。 // 查找所有封面图,迭代处理 $('.cover').each(function () { // 找到为0就将isLoad设为false,并退出each if (this.height === 0) { isLoad = false; return false; } }); // 为true,没有发现为0的。加载完毕 if (isLoad) { clearTimeout(t_img); // 清除定时器 // 回调函数 callback(); // 为false,因为找到了没有加载完成的图,将调用定时器递归 } else { isLoad = true; t_img = setTimeout(function () { isImgLoad(callback); // 递归扫描 }, 500); // 我这里设置的是500毫秒就扫描一次,可以自己调整 } } 在数据加载完的地方添加 isImgLoad $.getJSON("/mock/index/team.json", {}, res => { let html = `<ul class="masonry-list">`; for (const i of res) { html += ` <li class="masonry-item"> <h4 class="masonry-item-tit">${i.title}</h4> <img class="cover" src="${i.img}" alt="${i.title}"> </li>` } html += '</ul>' $('#team .team-main').append(html) // 忽略以上代码 // 判断图片加载状况,加载完成后回调 isImgLoad(function () { // 加载完成,初始化瀑布流 init('team') // 初始化瀑布流方法 }); }) 内容参考:予早

2019-09-17 17:24:33 61 0 0
阅读详情

程序开发 jQuery tab选项卡中的瀑布流

ui使用 weui ,主要看js部分,样式只在外盒子上加 position: relative; width : 100%; item元素添加绝对定位和固定宽度 width : calc((100% - 5px) / 2); position : absolute; <div class="weui-tab"> <div class="weui-navbar"> <div data-id="0" class="weui-navbar__item weui-bar__item_on"> 合作酒店 </div> <div data-id="1" class="weui-navbar__item"> 公司团队 </div> <div data-id="2" class="weui-navbar__item"> 会员活动 </div> <div data-id="3" class="weui-navbar__item"> 加盟共赢 </div> </div> <div class="weui-tab__panel"> <!-- 合作酒店 --> <div> <div class="store" id="store"> <div class="store-main"></div> </div> </div> <div style="display:none"> <div class="masonry" id="team"> <ul class="masonry-list"> <li class="masonry-item"> <h4 class="masonry-item-tit">公司团队</h4> <img src="img/store/kaiwei.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">公司团队</h4> <img src="img/banner/home-swiper1.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">公司团队</h4> <img src="img/banner/home-swiper1.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">公司团队</h4> <img src="img/store/kaiwei.jpg" alt="${j.name}"> </li> </ul> </div> </div> <div style="display:none"> <div class="masonry" id="activity"> <ul class="masonry-list"> <li class="masonry-item"> <h4 class="masonry-item-tit">会员活动</h4> <img src="img/store/kaiwei.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">会员活动</h4> <img src="img/store/kaiwei.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">会员活动</h4> <img src="img/banner/home-swiper1.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">会员活动</h4> <img src="img/banner/home-swiper1.jpg" alt="${j.name}"> </li> <li class="masonry-item"> <h4 class="masonry-item-tit">会员活动</h4> <img src="img/store/kaiwei.jpg" alt="${j.name}"> </li> </ul> </div> </div> <div style="display:none"> <div class="masonry" id="join"> <ul class="masonry-list"> <li class="masonry-item"> <h4

2019-08-22 14:45:19 144 4 0
阅读详情

程序开发 nuxt使用@nuxtjs/sitemap生成sitemap.xml

依赖于@nuxtjs/sitemap 和 axios ,如果是少量静态页面的话则不需要axios 先安装@nuxtjs/sitemap插件: yarn add @nuxtjs/sitemap axios 然后在 nuxt.config.js 中添加配置 sitemap: { path: '/sitemap.xml', // sitemap文件名,不用改 hostname: 'https://xn--nf1a578axkh.xn--fiqs8s/', // 网址 cacheTime: 1000 * 60 * 60 * 24, // 更新频率,只在 generate: false有用 gzip: true, // 生成 .xml.gz 压缩的 sitemap generate: false, // 允许使用 nuxt generate 生成 // 排除不要页面 exclude: [ '/404' ], // 页面路由 routes (callback) { axios.all([ // blog 分类 axios.get('https://blog.huangliangbo.com/wp-json/xm-blog/v1/menu'), // 文章列表 axios.get('https://blog.huangliangbo.com/wp-json/wp/v2/posts', { params: { page: 1, per_page: 100, _embed: true }, data: { progress: false } }), // 标签 axios.get('https://blog.huangliangbo.com/wp-json/xm-blog/v1/info') ]).then(axios.spread(function (menu, posts, info) { let now = new Date(); now.setHours(now.getHours(), now.getMinutes() - now.getTimezoneOffset()); let indexRoutes = [ { url: '/', changefreq: 'daily', priority: 1, lastmodISO: now.toISOString() } ] let menuRoutes = menu.data.mainMenu.map((data) => { let url = '' if (data.object === 'category') { url = '/category/1?type=' + data.object_id + '&title=' + data.title } if (data.object === 'page') { url = '/page/' + data.object_id } if (data.object === 'post_tag') { url = '/tags/1?type=' +

2019-08-12 09:20:36 190 0 0
阅读详情

程序开发 Nuxt.js客户端、服务端设置请求头

依赖:cookieparser、@nuxtjs/axios 在 plugins/axios.js 中设置请求头: import { Message } from 'element-ui' const cookieparser = process.server ? require('cookieparser') : undefined // eslint-disable-next-line prettier/prettier export default function (ctx) { ctx.$axios.onRequest((config) => { // 客户端设置token if (process.client) { if (ctx.store.state.auth) { config.headers.Authorization = 'bearer ' + ctx.store.state.auth.access_token config.headers.token = ctx.store.state.auth.access_token } } // 服务端设置token if (process.server) { if (ctx.req.headers.cookie) { const parsed = cookieparser.parse(ctx.req.headers.cookie) try { const auth = JSON.parse(parsed.auth) config.headers.Authorization = 'bearer ' + auth.access_token config.headers.token = auth.access_token } catch (err) { // 找不到有效的Cookie } } } // 开发模式打印 URL if (process.env.NODE_ENV !== 'production') { console.log('Making request to ' + config.url) // console.log('Making request to ', config) } }) ctx.$axios.onResponse((res) => { // console.log('onResponse ', res) const code = res.data.code || null const msg = res.data.msg || '' if (code) { if (code !== 0) { Message.error(msg) return Promise.reject(msg) } } }) ctx.$axios.onError((error) => { const code = parseInt(error.response && error.response.status) if (code === 400) { ctx.redirect('/400') } }) } 然后在 store 的

2019-07-26 11:00:43 181 0 0
阅读详情

程序开发 js网络图片通过canvas获取图片颜色

依赖于 rgbaster 包, 安装rgbaster: yarn add rgbaster import analyze from 'rgbaster' export default { mounted() { this.getBackground() }, methods: { getBackground() { const that = this function getBase64Image(img, suffix) { let canvas = document.createElement('canvas') canvas.width = img.width canvas.height = img.height const ctx = canvas.getContext('2d') ctx.drawImage(img, 0, 0, img.width, img.height) const dataURL = canvas.toDataURL('image/' + suffix) // 可选其他值 image/jpeg canvas = null // 释放 return dataURL } function getColors(src, cb) { const image = new Image() const splits = src.split('.') const suffix = splits[splits.length - 1] image.setAttribute('crossOrigin', 'anonymous') // 支持跨域图片 image.src = src + '?v=' + Math.random() // 处理缓存 image.onload = function () { const base64 = getBase64Image(image, suffix) cb && cb(base64) } } getColors('https://cdn.huangliangbo.com/wp-content/uploads/2019/04/zh-2.jpg', async function (base64) { const result = await analyze(base64, { scale: 0.6 }) // also supports base64 encoded image strings that.bgColor = result[0].color }) } } } 部分内容来着:canvas图片问题浅析、JS将图片转为base64编码

2019-07-11 14:36:24 179 1 0
阅读详情
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 26
前往