三掌柜

三掌柜 查看完整档案

深圳编辑南阳理工学院  |  软件工程 编辑佰钧成技术有限责任公司  |  架构师 编辑 segmentfault.com/u/sanzhanggui 编辑
编辑

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

个人动态

三掌柜 发布了文章 · 2月25日

前端开发:Mac环境的Chrome浏览器设置跨域请求的SameSite解决方法

前段时间在开发项目的时候,遇到一个比较稀奇古怪的跨域问题,不管怎么写就是解决不了,后来通过Chrome浏览器的设置,解决了跨域问题,这样就不需要在项目里通过设置代理来解决跨域问题,直接通过设置修改Chrome浏览器的设置就可以解决项目跨域问题。具体的跨域问题如下所示:

Access to XMLHttpRequest at 'https://weixin.xxx.com/ems/login' (redirected from 'http://localhost:8081/xxx/queryBalance') from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

image
本篇博文就来分享一下上述情况的操作步骤,这里是基于Mac环境下来讲解的,其他电脑操作系统(如Windows操作系统)的设置方法这里不再过多介绍,如有其他电脑操作系统的设置方法请找度娘。

在通过Chrome浏览器设置跨域配置之前,首先要在Mac电脑的终端里面输入以下命令行。
1、打开Mac电脑终端,输入以下命令行:

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/你的Mac用户名/MyChromeDevUserData/    回车,即可。

image
image
image
首次打开Chrome浏览器会有黄色背景色的“您使用的是不受支持的命令行标记:--disable-web-security。稳定性和安全性会有所下降。”的提示,那就说明浏览器设置跨域成功,若再次重复执行上述命令行时,不会再有相关提示了,但是还是可以跨域。通过命令行设置完Chrome之后,需要进行其他选项设置,直接打开Mac电脑的谷歌浏览器进行操作即可,具体操作步骤如下所示:
2、打开Chrome浏览器之后,在浏览器地址栏里面输入chrome://flags 然后回车键,打开;
image
3、直接在浏览器搜索栏里面输入以下内容:

SameSite by default cookies   然后回车,搜索结果显示以下两项选项,然后直接禁用两项设置,即把状态改为Disabled,然后点击右下角的relaunch重启浏览器即可,如下图所示:

image
image
4、一般情况下上述操作即可通过浏览器解决跨域问题,但是特殊情况上述步骤依然不能设置跨域问题,那就继续在浏览器搜索框输入以下内容:

Schemeful Same-Site  回车,同理把该选项禁用,状态设置为Disabled,然后重启浏览器,即可。

image
image
经过上述步骤,就完美实现通过Chrome浏览器设置解决跨域问题,这种方法也为前端开发过程中遇到的跨域问题提供一种非常有效的解决方式,方便又好用。

以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

查看原文

赞 3 收藏 2 评论 0

三掌柜 关注了用户 · 2月7日

高阳Sunny @sunny

SegmentFault 思否 CEO
C14Z.Group Founder
Forbes China 30U30

独立思考 敢于否定

曾经是个话痨... 要做一个有趣的人!

任何问题可以给我发私信或者发邮件 sunny@sifou.com

关注 2161

三掌柜 发布了文章 · 2月4日

微信小程序开发:腾讯地图集成步骤(旧题新说)

在腾讯生态开发过程中,包括在微信小程序开发的时候,避免不了使用腾讯送的腾讯大礼包,从微信支付到腾讯地图,一条龙的腾讯大礼包,不得不说鹅厂的实力是无可比拟的。

但是话又说回来了,鹅厂的官方API真是不敢恭维,尤其是微信小程序的开发文档,如果不熟悉的话,真的是大坑不断,连环坑不断,无力吐槽。

本篇博文来说说微信小程序开发的时候集成实现腾讯地图的功能,虽然微信官方API介绍了集成步骤,但是还是会给小白带来云里雾里的感觉,接下来就详细来说说具体的集成步骤,分享出来,若有不妥之处请指正。

其实微信小程序还可以集成百度地图的,只是这里不再介绍其他家的地图集成到微信小程序的步骤。本案例直接把小程序的地图部分进行了封装,用组件的形式调用,方便使用,便于理解。
还是直接上代码比较好,具体操作如下所示:
一、map组件的实现
1、homeMap.js文件

const app = getApp()
Component({
  properties: {
    position: {
      type: Array,
      value: [],
    },
    markers: {
      type: Array,
      value: [],
    },
    markerList: {
      type: Array,
      value: []
    },
    getCurrentElement: {
      type: Function,
      value: function () { }
    }
  },
  data: {
    position: [],
    markerList: {},
    markers: []
  },
  ready: function () {
    const mapContext = wx.createMapContext('map')
    const {
      position,
      markers,
      markerList
    } = this.properties;
    this.setData({
      position,
      markers,
      markerList,
    });
    mapContext.moveToLocation({
      longitude: 114.54286,
      latitude: 22.05956,
      complete(e) {
        console.log('moveToLocation', e)
      }
    })
  },
  methods: {
    markertap({
      markerId
    }) {
      let {
        markerList
      } = this.properties;
      markerList && markerList.map((item, idx) => {
        if (item.id === markerId) {
          item.num = markerList.length;
          this.triggerEvent('onMarker', item) //通过triggerEvent将参数传给父组件
        }
      })
    }
  },
})

 
2、homeMap.json文件

`{
  "component": true
}`

 
3、homeMap.wxml文件

`<map id="map"
longitude="{{position[0]}}"
latitude="{{position[1]}}"
scale="14"
controls="{{controls}}"
bindcontroltap="controltap"
markers="{{markers}}"
markerList="{{markerList}}"
enable-zoom="true"
bindmarkertap="markertap"
polyline="{{polyline}}"
scale="11"
style="width: 100%; height: 100%;" >
</map>`

 
4、homeMap.wxss文件
该文件不做操作
 
二、调用map组件的实现
在需要使用地图的地方,调用map组件,具体操作步骤如下所示:
1、home.js文件
` Page({

  data: {
    markerPorts: [], // 定位点
    position: [], // 地图中心点位置
    parkMark: {}
  },
  onReady: function () {
  //网络请求,这里可以忽略
    let url = 'ec/me/pag-space/list'
    const params = {
      pageNum: 1,
    }
    homeParkList(url, params).then(({
      code,
      data,
      msg
    }) => {
      if (code === "200") {
        const {
          records,
          list
        } = data
        this.setData({
          records: records
        })
        const markers = []; // 定位点集合
        const marker = {
          '0': "/images/green_marker.png",
          '1': "/images/red_marker.png",
          '2': "/images/yellow_marker.png",
          'def': "/images/yellow_marker.png"
        }
        // 拼装定位点集合
        list.forEach(res => {
          const {
            id,
            latitude,
            longitude,
            parkingStatus,
          } = res
          markers.push({
            id,
            latitude,
            longitude,
            iconPath: marker[parkingStatus],
            width: 30,
            height: 30
          })
        })
        wx.chooseLocation({
          complete: e => {
            markers.push({
              id: 9999,
              latitude: this.data.position[0],
              longitude: this.data.position[1],
              iconPath: marker['def'],
              width: 30,
              height: 30
            })
            this.setData({
              position: [e.longitude, e.latitude],
              markerPorts: markers,
              markerList: list
            })
          }
        })
      }
    })
  },
  getMarkerInfo(e) {
    if (e.toString() === '[object Object]') {
      this.setData({
        parkInfo: e.detail
      })
    }
  },
})`

 
2、home.json文件
` {

  "component": true,
  "usingComponents": {
    "component":"../../components/Map/homeMap"  //引用map组件
  }
}`

 
3、home.wxml文件
` <view class="page">

    <view class='content'>
      <component class="map-comp" position="{{position}}" markers="{{markerPorts}}" markerList="{{markerList}}" bind:onMarker="getMarkerInfo" bind:aaa="bb" />
    </view>
</view>`

 
具体实现的效果图如下所示:
image
以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

查看原文

赞 0 收藏 0 评论 0

三掌柜 赞了文章 · 2月3日

乡村教师自学低代码开发,4 年用 43 款软件改变了留守儿童学校管理难题

乡村教师自学低代码开发,4 年用 43 款软件改变了留守儿童学校管理难题

扎根乡村的青年教师彭龙,靠自学编程 4 年开发了 43 款软件,让农村里的学校也走上了数字化管理的道路。

彭老师开发的软件包含了 学生请假、卫生管理、值周考勤、教师查课等方方面面。现在,这些软件已经全部应用在了学校的日常管理中。彭老师说:“不管在大城市还是小山村,都要活到老学到老。”

image.png

为了让乡村学校走向数字化,他自学编程开发了 43 款软件

四川泸州古蔺县皇华中学是一所寄宿制的乡村学校,学校里的 2000 多名学生基本都是留守儿童,但学校一共只有 131 名教师,管理难度非常大。

学校的校长周静知道彭龙有一定的计算机基础,而且平时也会自学这方面的知识,于是向他提出希望他能帮学校开发出一款管理软件。

image.png

彭龙结下这个重任后,立即开始了研发。但是在这所乡村学校,没有人能帮他,他只有自学。彭龙开始不断的上网找学习资料、加入技术论坛,4 年多的时间,他在钉钉上用低代码开发出了 43 款软件。彭龙骄傲的说:“以前开发一个软件要花七八个小时甚至几天,现在 1 个小时就搞定了。”

彭龙开发了很多用于学校日常管理和学生成绩查询的软件,现在只要通过钉钉,学生和老师都能及时查询到成绩信息。

除此之外,彭龙最满意的作品要数学生请假软件了。他说,以前学生请假都是通过纸质假条,这种方法很难及时让学校的老师和家长同步信息。现在有了软件的支持,可以打通学生请假和学校的宿舍管理,学生的安全也会更有保障。

https://www.qq.com/video/g322...

学校管理成功走上数字化道路后,彭龙也不再是单打独斗了,现在他已经有了两个徒弟。这两位新考入学校的年轻教师将和他一起,为学校开发更多数字化应用软件。校长周静还说,等到学校软件研发更成熟后,可以复制推广到其他学校。

低代码开发,把计算机能力交到更多人手中

乡村学校的数字化是一个典型的例子,也许彭龙不是专业的程序员,但他靠自学为学校的管理和学生的学习带来了巨大的改变。

image.png

微软在最近的关于 2021 年技术趋势预测的文章中提到,未来五年将有超过 5 亿个应用程序被开发出来,这就需要足够的人来处理业务,而低代码技术将赋予更多人创建应用程序的能力。

无论是专业的技术人员还是其他开发人员,都应该拥抱低代码开发的趋势,在最容易协作的地方提供业务应用程序和解决方案。

“每个人都应该学会编程”这句话不是要求每个人都成为专业的程序员,而是每个人都能更有效的利用计算机知识服务自己的工作和生活。未来将有更多新的语言和工具支持代码开发,计算机的能力将被交到更多人手中。

(本文图片及视频来自梨视频)

segmentfault 公众号

查看原文

赞 0 收藏 0 评论 1

三掌柜 赞了文章 · 2月2日

2020年思否有奖征文获奖名单公布,快来领奖!

小伙伴们,思否年度有奖征文活动,开奖咯~
活动截止1月31日晚上12点,下面就让我们正式公布一下此次年度总结活动的获奖名单~


2020 人气顶流奖

  1. 夜尽天明前端工程师的 2020 年终总结 - 成长不及预期的 3 年之痒
  2. 蒋鹏飞工作都是公司的,技术才是自己的!| 底层技术人的2020年度总结
  3. axuebin:一个小小前端的 2020 年流水账
社区文章互动数多的(基于点赞、评论等)的3人
融云鼠标垫 + ARM 蓝牙音箱 + 京东玩偶 + 编程课程 8 折劵 各一份(文中列出的课程)

2020 凡尔赛文学奖

  1. 死月死月的二零二零总结
  2. CrazyCodes2021 PHP程序员修炼秘籍
  3. 张晋涛2020 小回顾 | 新晋程序员奶爸的云原生之路
文笔超赞/分享硬核干货内容的 3 人
青云定制包 + AWS 玩偶 + 技术书籍 + 编程课程 8 折劵 各一份(文中列出的课程)

2020 搞笑担当奖

  1. 卡颂:大佬那么多,为什么不能是我 | 卡颂2020年终总结
  2. pingan87872020 总结 | 21 张图总结我的 2020 年
  3. 沉默王二2020总结文章|乘风破浪的一年
内容超有趣的 3 人
京东鼠标垫 + AWS 玩偶 + ARM 蓝牙音箱 + 编程课程 8 折劵 各一份(文中列出的课程)

2020 人间真爱奖

  1. 欧雷属于我的三年·第一年
  2. Kevinwan一个20年技术老兵的 2020 年度技术总结
  3. 小傅哥2020总结 | 作为技术号主的一年!
  4. 民工哥我的 2020 年是这样的。。你的呢?
  5. 沈唁今天,告别 2020 年。
  6. masonli“措手不及”的2020 | 2020总结
  7. 敲键盘的猫我的2020,在非常时期的非常努力
  8. 皮小蛋2020 年终总结
  9. Why技术2020,我这一年。
  10. xuexiangjys年终总结 | 在开源、博客和搬砖的路上砥砺前行「2020」
  11. codecraft2020年终总结
  12. 公丕昊再见,2020
  13. robin2020,再见
  14. linong2020总结😊我想混个奖品
  15. YourbatmanYourBatman 2020年感悟关键词:科比、裁员、管理层、活着
  16. 边城边城客栈的 2020
  17. Fw恶龙2020 年终盘点
  18. 波波Nadia我的 2020 个人成长回顾:花足够长的时间,有智慧地做“无用功”
  19. 折腾不止的追梦人我的2020,啪啪打脸
  20. Kense2020 年终总结
  21. 一个优秀的废人来年,做个俗人!
  22. formulahendry我的 2020:出书、办签售会、发展 VS Code 中文社区、成为开源先锋、全网 10 万粉丝、10 场演讲、内推 21 人
  23. 程序员哆啦A梦2020回顾-个人web分享JavaScript面试题附加回答
  24. Shenfq:普普通通打工人的2020
  25. HLQ\_Struggle静心,未来可期 | 告别 2020
  26. Raymond懒人的2020
  27. xindooXINDOO的2020总结
  28. tina6662020 疫情下湖北人的生活(只谈生活)
  29. 张喜硕度光阴的人
  30. JerryWang\_汪子熙一个SAP成都研究院开发工程师的2020年度总结:未知生,焉知死
  31. JamesGoodbye 2020 wassup 2021 | 2020 总结
  32. howie梦想开始的地方
  33. 运维汪回顾2020,展望202,确定三个关键字:自我成长、打地基、过男人关
  34. zangecizangeci的2020年度报告
  35. Meathill2020 年知识分享与学习总结
  36. 寒雁2021,一个长期主义者的年度计划
  37. 程序员cxuan:坚持并活下去!cxuan 在思否的 2020 年终总结。
  38. 芋头芒果小龙虾再见2020,再见口罩,再见所有的不愉快
  39. thinkwei全面建设小康社会的2020年
  40. Java中文社群大龄程序员10年编程生涯的转型之旅,2020年新的开始
  41. kumfo写在2020年结尾——2020总结
  42. qqxx6661阔别2020 | 我的年度总结
  43. joking_zhang2020 总结 | 张兜兜 - 神奇的一年
  44. ChorChor 的 2020 年度总结 | 2020,再见;2021,你好
  45. 0xBoo二零二零年终总结
  46. 风中有php做的云洪光光的2020年
  47. 陆陆通通「2020总结」一个老程序员的 2020 年总结回顾,2021 年如何变的更牛逼
  48. By无邪2020年度总结
  49. 三掌柜2020年年度关于前端学习与工作的心得体会
  50. Gopalopal 的 2020 年度总结
【50人】(自本篇文章发布至1月31日)参与活动且文章符合要求被收录的征文作者即可获得奖励
1-20 可获得 SegmentFault 思否定制马克杯 + 编程课程 8 折劵(文中列出的课程)
21-50 可获得重启世界限量版手办 + 编程课程 8 折劵(文中列出的课程)
PS:如果同时入选了其他奖项,奖品不重复提供哦,会顺延~

礼品如下:

编程课程8折劵(会在现有的折扣价上再打 8 折):

视频课程
图文课程

实物奖品
image
实物奖品大合影

感谢融云RongCloud、青云QingCloud、京东智联云开发者社区、AWS、ARM中国 等对本次活动的赞助

如何领取奖品?

中奖的小伙伴请扫描下方二维码,添加 SF 思否小姐姐 微信,提供你的礼物邮寄地址和相关快递信息~

PS:临近过年,只能年后给大家发礼品了,大家记得把联系方式发给我
祝大家新年快乐 ~

图片描述

查看原文

赞 12 收藏 0 评论 10

三掌柜 发布了文章 · 1月28日

前端开发:Vue项目Uploader文件上传的方法(图片上传)

前段时间在开发项目的时候,有一个业务需求是上传图片,之前做移动端开发的时候上传图片也是非常基本的需求,但是对于前端开发来说需要研究一下怎么实现的。我们的项目用的是Vant组件,然后我就直接去Vant的组件官网查看上传文件的使用方法,然后直接看着官网API教程使用即可,如果有什么疑问还可以问度娘、问朋友。

废话不多说,接下来就来分享一下具体的上传图片方法,具体步骤如下所示:
1、引入
首先要在项目中引入这个Uploader组件,打开项目工程,找到main.js文件,然后复制以下代码粘贴进去即可:

import Vue from 'vue';
import { Uploader } from 'vant';
Vue.use(Uploader);

2、使用的具体文件写法
我的实例里面直接把上传图片那个模块用一个组件来封装起来,这样方便调用和管理,具体组件文件写法如下所示:

`<template>
<div class="file-uploader">
<div class="credential-infor">
  <van-uploader 
    :after-read="afterRead"
    class="img-uploader"
    :max-count="1"    //这里是限制上传图片的张数,最低上传一张
    v-model="fileList"
  />
</div>
</div>
</template>

<script>
export default {
 name: "FileUploader",
 data() {
return {
  fileList: [],
  imgKey:[]
};
},
created() {},
computed: {},
methods: {
afterRead(file) {
  // 此时可以自行将文件上传至服务器
  let imgFile = new FormData();
  imgFile.append("fileType", 'IMAGE');
  imgFile.append("file", this.fileList[0].file);
  this.$service.apply
    .uploadImage({
      data: imgFile,
    })
    .then((r) => {
      if (r.data.success) {
        this.imgKey.push(r.data.data.key) 
      }
    });
}
},
};
</script>

<style lang="scss">
.file-uploader {
.credential-infor {
margin: px2em(20);
height: px2em(100);
 }
}
</style>
`

image
针对上述代码大概解释一下使用过程,具体如下所示
首先在HTML里面引入上传图片的组件:

<van-uploader :after-read="afterRead" />

然后在js里面进行如下操作:

export default {
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器,这里就是要写调用后台上传图片的接口位置
      console.log(file);
    },
  },
};

其实还可以加一个上传图片之后的预览效果,上述代码没有写,但是我在下面添加一下,具体操作如下:
在组件上面绑定图片的数据源,如下所示:

<van-uploader 
    :after-read="afterRead"
    v-model="fileList"   //绑定数组格式
   multiple  />

通过v-model来绑定已经上传的图片的列表,并展示图片列表的预览图。
image

以上就是本章全部内容,欢迎关注三掌柜的微信公众号“程序猿by三掌柜”,三掌柜的新浪微博“三掌柜666”,欢迎关注!

查看原文

赞 6 收藏 4 评论 0

三掌柜 关注了用户 · 1月28日

星辰间的希望 @xingchenjiandexiwang

关注 1

三掌柜 关注了用户 · 1月28日

仰望☆『Dream』 @yangwangdream

关注 1

三掌柜 关注了用户 · 1月28日

对方正在输入... @duifangzhengzaishuru_60121cd2e8b2a

关注 1

三掌柜 关注了用户 · 1月28日

再出发 @zaichufa

关注 1

认证与成就

  • 获得 23 次点赞
  • 获得 4 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 4 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 1月15日
个人主页被 1.7k 人浏览