David's Blog

Eat, Sleep, Code, Repeat

2020-09-22
- Note
从零开始用MERN搭建一个电商网站

介绍最近接触到MERN技术栈，想做一个全栈的项目练练手。正好之前在上网课的时候有提到如何使用第三方服务如stripe搭建一个支付系统，把这个支付系统拓展一下就可以变为一个电商网站（或者二手交易网站）了。整个项目大概花了一星期不到的时间（周一到周六完成开发，周日写这篇文章），一开始以为会是一个简单的CRUD应用，然而做的时候才体会到该项目的复杂性，有很多模块之间相互影响，还有很多安全性、跨域问... Continue reading...
2020-09-21
- Debug
一次关于express sameSite cookies的debug

最近在写一个google / facebook oauth登录系统，前端使用react，后端使用nodejs + express，前后端分别部署在vercel和heroku上，不可避免的遇到很多跨域问题。今天在将本地代码deploy到生产环境的时候，发现google oauth虽然能成功调用callback url重定向到后端，后端也能设置cookie，但后续的api操作却没有带上之前返回... Continue reading...
2020-09-07
- Life
Travel to the Northwest of China Vlog

I recently traveled to Ningxia and Shaanxi provinces in China with my undergrad roommates and friends. I have been to the desert in Zhongwei city (中卫), the museum of Terracotta Army (兵马俑), and Moun... Continue reading...
2020-08-21
- Note
使用Passport.js实现Google OAuth登录

Source Code Google OAuth 2.0 登录流程 client向server发起GET /auth/google请求 server将client重定向至google oauth登录页https://accounts.google.com/o/oauth2/auth，并附带以下查询参数集： response_type: code 登录后返回授权码 client_id:... Continue reading...
2020-08-05
- Projects
React APIs Widget

IntroductionThis React app contains four different widgets: A translate widget using Google Translate API A wiki search widget using Wikepedia API A photo search widget using Unsplash API A ... Continue reading...
- Javascript
- React
2020-08-05
- Projects
Youtube Shuffle

IntroductionLive Demo Source Code Youtube shuffle is a React app using Youtube Data API. It has a personalized user interface which allows users to search a Youtube video and play it. It also inclu... Continue reading...
- Javascript
- React
2020-08-03
- Note
在React中实现Debounced Textfield

Introduction假设我们需要实现一种类似google的搜索提示功能，即用户输入搜索词的过程中，输入框的下方会同步显示搜索的候选项：基本方案：通过input的onChan... Continue reading...
- Javascript
- React
2020-08-02
- Debug
React：一次关于onclick的debug

React中可以向onClick（onSubmit，onChange等同理）中传入一个函数，这个函数会在组件被click时执行： 123<button onClick={() => { // some code to execute after button clicked}}> 这个函数可以接受一个参数，即event： 1234&... Continue reading...
- Javascript
- React
2020-07-19
- Projects
Yelp Camp - A full-stack Node.js Web Application Project

IntroductionYelp Camp is a Yelp-like node.js web app. It’s the final course project of the Web Develop Bootcamp course in Udemy. Users and campground owners can upload their campground information ... Continue reading...
2020-07-17
- Projects
Dwitter - A Twitter-like Social Media App

IntroductionDwitter is a Twitter-like social media web app written in Javascript. The name “Dwitter” stands for “David’s Twitter”. Users can post their thoughs, follow other user, comment and like ... Continue reading...