張哲嘉
6
位追蹤者
追蹤
I'm a full-stack engineer in Senao Networks. Vue/Django/MongoDB/Nginx
發佈內容
我的成就
由新到舊
Tomtoc 玩家首選旅行包 for Nintendo Switch 開箱
最近想把我的 Switch OLED 帶出門,在挑什麼 Switch 攜帶包比較好,看很多人都推薦 tomtoc,感覺評價挺不錯的,最後決定入手 tomtoc 的玩家首選旅行包 以 Switch OLED 來說有三種選擇...... https://zjzhang.org/post/nintendo
2023-01-09
3
Set-up SSD cache for Synology NAS
Cache categories There are two kinds of cache, one is the read-only cache, and the other one is the read-and-write cache.
2022-12-14
3
在 Vue 中使用 Tailwind CSS
最近在把 Tailwind CSS 加入我的技能樹中,其實像這種 Bootstrap, Tailwind CSS 都是很基本前端需要掌握的 CSS 相關工具 但是我其實對美工比較沒那麼大的興趣,我對功能、效能、安全比較感興趣,所以後端、架站、DevOps、一些安全防護玩了一圈,現在來加強我的排版功力
2022-10-13
7
[30] TLS/SSL for MongoDB
Obtain certificate 我們用之前提到的 Let’s Encript 來獲得憑證 在 nginx/sites-available 再增加一個網站設定,然後再做個連結到 nginx/sites-enabled,設定的內容就隨便寫個 server_name 和 listen 就好了 然後
2022-10-10
5
[29] 讓網站更安全,不准直接連我的網站 IP
Block direct access by ip 一旦將網站對外,就要開始面對這個險惡的世界每天遭受一堆攻擊,雖然大部分都無關痛癢,幾乎都是機器人在 scan ip 然後在發一些無意義的請求,或者亂試 api,看能不能試出來...,最好是哪麼好試啦,而且加上我們之前在 JWT 篇章講到的 prot
2022-10-10
2
[28] 用 Nginx 部署 production back-end server
保護後端重要資訊 在 django 專案中我們會把設定都寫在 settings.py 內,包含了 SECRET_KEY 等機密資訊,通常專案都會做版本控制上 git,但把這些機密資訊也上 git 是很不好的一件事,畢竟 github 也是曾經被駭過的,所以最好是把這些不想讓別人知道的資訊寫在另外一個
2022-10-10
2
[27] 用 Nginx 部署前端網站
打包網頁 在部署網站之前,我們要先來打包我們的網頁前端專案 為什麼要打包呢?什麼是打包呢?這有點像是編譯,如果你寫過 C 應該講到這裡就理解為什麼要這樣做了 在網頁開發中網頁內容最原始就是直接用 html 下去寫,但一個成熟的開發者會善用框架來開發,不論是用 vue 或 react,樣式的部分也會從
2022-10-10
1
[26] Nginx 介紹
歷經千辛萬苦,終於要來架站啦!首先先來介紹我們的架站工具 Nginx,最常用的架站工具主要有兩個,Apache 和 Nginx Apache 的歷史悠久,使用的人數也最多,之前在選擇架站工具時,考量的點是 Apache 比較肥,設定也比較難寫,所以最後選擇 Nginx 作為我的架站工具 Nginx
2022-10-10
1
[25] MongoDB 匯出整個資料庫
資料庫複制、身份驗證都有了,還能做什麼讓我們的資料更加安全呢?喔對了,還可以備份我們的資料!接下來來講匯出整個資料庫的資料來做備份 安裝 MongoDB Database Tools MongoDB 這邊有一個指令叫 mongodump 是用來匯出資料庫的資料,你可以匯出整個資料庫,也可以選擇匯出部
2022-10-10
1
[24] MongoDB 資料庫複制 & 身份驗證
資料庫複製 不知道大家有沒有聽過負載均衡或者水平擴展呢?在網站佈署中我們會透過這些技術把網站架在多台 server 上,以避免萬一某台 server 掛掉,讓網頁服務仍能維持運作,或者去分擔負載 MongoDB 這邊有一個叫資料庫複製的技術,建立多個相同的 MongoDB service 在不同的
2022-10-10
1
[23] MongoDB: 更有技巧的查詢資料方法
在上一篇文章中,我們講解了 MongoDB 的基本操作,接下來想講講如何更有效率的查詢想要找的資料 模糊查詢 就是查詢的條件只要部分符合就可以找到了,不用查找的關鍵字完全正確,我們直接來舉個例子比較好理解 先假設有以下這些資料 模糊查詢,查找的資料 item 值內有包含 book 就返回 這樣就會找
2022-10-10
3
[22] 用 python 來操作 MongoDB
Connect database 因爲我們後端是用 django,所以我們要用 python 來操作 MongoDB,MongoDB 官方推薦的 python driver 是 pymongo,首先來安裝 在想使用的檔案內加入 myclient = pymongo.MongoClient("mong
2022-10-10
3
[21] MongoDB Compass
上一篇有提到 MongoDB Compass,而且也已經裝好了,那就來介紹一下吧 MongoDB Compass 是官方做的圖形介面工具用來操作架好的 MongoDB service,這樣就不用什麼事情都辛苦的用 mongo shell 操作了 New connection 輸入想要連接的 Mong
2022-10-10
3
[20] MongoDB getting started
Introduction MongoDB 應該是目前 NoSQL 陣營中最大家的資料庫,另外 Redis 也蠻多人使用,兩者主要區別是,Redis 更高效能,但是預設佔用的資源也較多 Installation 基本上就從 MongoDB 官網下載,然後解壓縮後一直點下去就好 執行安裝檔有一個 Ins
2022-10-10
1
[19] JWT --part4: interceptor & api authentication
前言 只要把後端對外,或者網站對外,就一定會被攻擊,有自己用自己的電腦當 server 架站過就一定知道,只要一對外,每天都會收到一些隨機的攻擊,最常見就是別人在亂試 api 看能不能猜對,通常是猜不到啦,鬼知道你的 api 長什麼樣子,更別提要帶什麼參數,能猜對真的是會通靈。 儘管如此,你可能還是
2022-10-09
4
[18] Json web token authentication --part3: Vue
State management 首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management,檔案位置在 src/store/index.ts Login 接下來我們來寫一下登入頁面在 src/components/login.vue ,以下是 sc
2022-10-09
1
[17] Json web token authentication --part2: Django
django 這邊需要使用 Django REST framework (drf) 及 drf 官方推薦實作 JWT 的 Django-rest-framework-simplejwt 這兩個套件。 settings.py 再來設定 django 的 back_end/settings.py 引入,
2022-10-09
1
[16] Json web token authentication --part1: JWT introduction
session & token 驗證機制早期是用 session,server 這裡會發一個 session 給 client,並在資料庫記錄這個 session 屬於誰,而且每個裝置都會記一組 session,這會造成 server 這邊需要記錄大量的資料。 後來發展出 token,client
2022-10-09
1
[15] 用 POST 串起前後端
講完 get 來講 post,那這兩個 call api 的方法有什麼差別呢?先記得一個原則,要傳遞機密的資料用 post,如果要傳遞的參數被別人知道也無所謂就用 get post 是傳遞資料到後台,資料不會顯示在 url 上,get 是傳遞參數到後台,參數會直接顯示在 url 上和後端的終端上,像
2022-10-09
1
[14] 用 GET 串起前後端
前端和後端溝通,最常用就是 get 和 post 後端 先在 django 專案這邊的 views.py 內建立一個讓前端以 get 方法呼叫的 api function1 內的第一個參數是前端的 request,之後第二個參數第三個參數可以隨便你設,這倒是沒有限制 用 request.GET 這個
2022-10-07
6
[13] Compare axios, ajax, fetch
接下來要講前後端怎麼溝通,最常見應該都是用 axios, ajax 或 fetch 來 call api。先講結論,個人推薦使用 axios,那他們又有什麼優缺點呢?讓我簡單講解一下 ajax ajax 用法有點麻煩,要先引入 jQuery,用法如下 ajax 比起 axios 較為笨重也較不安全
2022-10-07
1
[12] Django app
Create app django 的架構是這樣的,在專案底下有 app,你的 api 會寫在 app 底下,這樣好處就是可以分門別類,不同功能寫在不同 app 內 建立 app 的指令如下 比方說我建立了一個 app 叫 app,那專案內就會多了個 app 路徑 settings.py 把這個 a
2022-10-07
4
[11] Create Django project
Create project 那來建立 django 專案吧 django 的專案結構長這個樣子 settings.py 是 django 專案的設定檔,之後會常常提到 urls.py 是設定路由 wsgi.py 和 asgi.py 是正式部署後端時相關的檔案 manage.py 是部署開發模式時或
2022-10-07
1
[10] Django getting started
Introduction 如果以 python 為後端,那最常見而且我覺得也比較穩定的框架是 django 和 flask 適合 flask 的使用場景是如果你只是簡單想要一個 py 檔可以做為一個 api 被前端呼叫使用,不想要太多其他設定,最好是兩三行 code 就建立一個後端,那就用 flas
2022-10-06
3
[9] State management
狀態管理有點像是 cookie 或 localStorage,可是又多了更多操作可以用,讓你再切換頁面時可以使用相同的變數。 用來使用這個功能的套件叫做 vuex 以下不是狀態管理全部的功能,但是最常在用的其實就是這些 state 首先先來定義一個可以在各個網頁頁面取用的變數吧 所有的狀態管理設定
2022-10-06
1
[8] Vue Router
Basic config 最基本的寫法就是在 src/router/index.ts 的 routes 內設定像這樣 path 是設定路由,name 如果你沒有要用路由傳參,不寫也沒關係,component 是對應到哪個你寫的 vue 頁面 router-link 跟 <a></a> 很像,用法是像
2022-10-06
3
[7] Vue: Life cycle
今天來介紹 vue 的生命週期,什麼是生命週期呢?講簡單一點就是從你用瀏覽器打開網頁開始,到網頁內的元件一個一個生成,到整個完整的網頁建立的過程就叫生命週期,完整過程如下圖 是不是眼花撩亂啊?讓我簡化一下,其實主要順序就是如下圖 在加上 setup 語法糖的 script 標籤內做的事相當於在 be
2022-10-06
3
[6] Vue 指令
v-bind v-bind 可以讓 template 內的標籤去綁定 script 內定義的變數,舉個例子 可以改寫成這樣 最後效果是一樣的,在標籤內 v-bind 可以簡寫成 : v-model 上一篇已經提到了,就是可以透過網頁上的操作去改變資料的值,比方說表單、輸入欄等等。 v-for 迴圈,
2022-10-06
1
[5] 寫一個 Vue 頁面
定義路由 首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts,在 routes 內定義 path 定義 url,component 定義要指向哪個 vue 頁面,component:()=>import('@/components/hom
2022-10-06
2
[4] Vue 頁面結構
在寫頁面之前,先來介紹 Vue 頁面結構。 首先先在 src/components 底下建立一個 home.vue 跟寫一個 html 頁面很像,一樣是分成 寫網頁內容、script、style,三個部分,只是 html 標籤換成了 template。 template 就是相當於原生 html 檔
2022-10-05
4
[3] Vue 專案架構
專案建好了,那先來講 Vue 的專案架構 詳細內容很多,所以我挑重點講 public index.html public/index.html 是 Vue 頁面的 entry point,進入一個 Vue 頁面會先進 public/index.html,再套用 App.vue,最後才是進入你寫的 .
2022-10-05
1
[2] Vue: getting started
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
2022-10-05
1
[1] Introduction of Vue, Django, MongoDB, Nginx
要完整的了解整個網頁的開發需要掌握相當多的知識,就算目標只是學習網頁開發中的其中一個部分,比方說只是想成為前端工程師,或是只是想成為後端工程師,最好還是對整個網頁專案整體有一定程度的了解,才不會和其他工程師合作的時候,各開發各的,然後兜不起來 這個系列的教學,希望就算你的目標不是成為全端工程師,也能
2022-10-05
4
非電資理工生如何成為軟體工程師
非電資相關科系畢業可以成為軟體工程師嗎?以我的經歷和觀察來講,是沒什麼問題的 先說說我的背景,物理系畢業,之後跟著興趣念了物理碩士,研究高能物理,在研究所期間開始接觸程式,那個時候是寫 Linux, C/C++, python,但都偏學術方面,業界常用的工具或套件幾乎是都沒用到 慢慢地我對寫程式的興
2022-10-04
12
大安區湯料理美食 - 小湯烏
今天想來介紹一間很特別的料理店,他的主角不是飯或麵,而是各種湯! 小湯烏之前叫做家.溫度,不知道什麼時候改名的,位於台北市大安區光復南路240巷3號 菜單 餐廳裡面很漂亮,然後它的廁所很大很乾淨 我來這邊都是點小套餐,有兩個湯和一個主食,畢竟來這裡就是要吃它的湯啊 每天有供應的湯都不太一樣,來之前可
2022-10-03
7
冷水坑 - 擎天岡半日遊
交通 建議不要開車上去,不然上去之後會排隊停車排到天荒地老,而且山路蠻危險的,很多彎道根本就看不到對向有來車,建議就坐小 15 公車上去就好了 小 15 位於捷運劍潭站旁邊,等公車的地方可以看到劍潭大貢丸 冷水坑服務站 小 15 的終點站是冷水坑服務站 下站後旁邊就可以看到冷水坑服務站了 這裡是陽明
2022-10-02
9
Json web token authentication with django&vue—part 2: vue
State management 首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management,檔案位置在 src/store/index.ts Login 所有頁面每隔一段時間自動刷新 token Logout
2022-08-31
1
從 0 到有 vue3 前端工程師養成 — part 2: create a Vue project
Create project 裝好 vue CLI 之後,只要在終端輸入 vue create 想取的專案名稱 就可以開始創建 vue 專案囉 1. Pick a preset 2. Select the features 3. Choose the version of vue 選擇 vue3
2022-08-31
2
羅技 combo touch 開箱
其實當初它在嘖嘖集資的時候我就有在看了,看得挺心動的,蘋果原廠的鍵盤保護套我記得快一萬,combo touch 之前原價 應該六七千吧,這次端午節在打優惠,原價 5990 再折 1000,另外我還有一些羅技的購物金,最後台幣 4463 元入手。 再來介紹有了觸控板有多方便,
2022-08-30
3
Basic settings of Nginx
Recently, I add some useful settings for my nginx web server. I would like to take a note of some basic and useful settings of nginx. http server
2022-08-30
1
MongoDB authentication and replication feat. pymongo
Authentication create root user In the mongo shell, create a root user to handle everything as follows. mongod.cfg connection Replication
2022-08-30
1
Let’s Encrypt in Nginx
I’m sure that I would forget it again after a few months, so let’s take note of it. Installation We need to use homebrew to install certbot. renew
2022-08-30
1
Django as a back-end web server in production feat. Nginx
Introduction There are some differences between deploying a front-end framework project on the web server and deploying a back-end one. uWSGI Nginx
2022-08-30
1
Flutter for a very beginner
Introduction Flutter is a powerful framework for developing the app for different platforms without redevelopment. main.dart route routing map
2022-08-30
1
Package Flutter windows app
msix After comparing different methods, I think the most stable way is using msix to package the windows desktop app. Installation download
2022-08-29
1
set up DDNS with ddclient & Google Domains
Introduction Set DDNS on Google Domains To set your DDNS record on Google Domains, just follow this document. ddclient installation ddclient.conf
2022-08-27
1
DDNS & TLS/SSL for MongoDB
2022-08-25
1
MongoDB authentication and replication feat. pymongo
2022-08-02
1
Json web token authentication with django & vue — part 3: interceptor & api authentication
2022-07-07
1
vocus 勳章
NFT
了解
如何蒐集勳章