作者sarsenwen (sarsenwen)
看板Web_Design
標題[問題] 請問要寫出這樣的網頁需要看哪些書?
時間Sat Aug 26 09:32:37 2017
首先是這個網站首頁
http://acgn-stock.com/
這是一個讓使用者可以用二次元角色創立公司
然後進行虛擬股票買賣的網站
我想讓自己以後也能設計出這樣有趣的網站
雖然作者有開放程式碼放在GitHub
https://github.com/mrbigmouth/acgn-stock
但是我不知道為何有這麼多檔案 最多的是js檔
網頁不是寫出一個index.html檔丟進瀏覽器嗎?
為何他沒有所謂的index.html檔?
還有像是使用者必須註冊 代表設計這個網頁的時候
伺服器端會有一個資料庫(?) 來存放使用者們的資料(帳號跟密碼)
讓每個使用者看到的網站有些微的不一樣
不同使用者點入"股市總覽" 都會看到一樣的角色列表
點入"帳號資料"頁面 顯示的是自己的帳號資料
代表背後有一套語法去區別不同的登入ID來抓取伺服器的資料
所以這套語法是? JacaScript嗎?
因為我搜尋js檔 跑出JavaScript語法相關資料
還有就是網站能顯示使用者提供的資料
登入的使用者能看到"新創計畫"的頁面有建立新角色按鈕
讓使用者輸入角色名稱 上傳角色圖 寫角色介紹
這些資料以及檔案 都會在另外的頁面顯示出來
所以想要知道這些存取使用者提供的資料背後的語法
是要找哪些書來看?
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 1.172.232.46
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1503711162.A.02E.html
1F：推 vi000246: 是nodejs喔 一種後端語法 08/26 09:49
2F：→ s540421: 沒載來玩，不過看起來是以nodejs為基礎，拿Meteor框架做 08/26 13:37
3F：→ s540421: 出來的，該專案在佈署時會自動生成出用戶端檔案到public 08/26 13:39
4F：→ s540421: 目前主流的 Web 開發大多會使用 Webpack(或類似套件) + 08/26 13:42
5F：→ s540421: 須轉譯的語言 (jsx, es2017, vue等)來加速開發，市面上的 08/26 13:44
6F：→ s540421: 書要把這些學齊要花不少時間哦 08/26 13:45
7F：推 maxfock: 這內含了不少know how，技術是一回事，重點的商業邏輯要 08/26 14:47
8F：→ maxfock: 懂，並不是看書就能理解 08/26 14:47
9F：推 oToToT: index.html本來就不是必備的，只是apache之類的伺服會自己 08/26 15:27
10F：→ oToToT: 去抓index來當首頁 08/26 15:27
11F：推 vi000246: 要寫出這網站還需要資料庫規畫 相關的金融知識 08/27 02:53
12F：推 spfy: 這是西洽版友做的 之前大家說著說著就 一個人自幹出來的專案 08/27 20:56
13F：→ spfy: 而且他的金融相關知識好像也足夠...滿神的? 08/27 20:57
14F：→ Neisseria: 這個蠻有趣的，除了要寫程式，還要有金融的領域知識 08/28 15:09
15F：推 nnlisalive: 這網頁有趣的地方其實是使用者之間的互動 08/28 16:02
請問一下 為何原始碼資料夾中
用Firefox打開任何HTML檔都是空白一片??
我想直接用他的原始碼直接執行
但是一直是一片空白?? WHY??
然後找到 layout.html 這個感覺像是首頁的檔案
因為在這個檔案裡終於看到<head>跟<title>
但是下面body裡面是
<body>
{{> layout}}
{{> loading}}
</body>
@_@?? 是一種這裡的程式碼寫在別的檔案的概念嗎?
打開其他html檔都是<template name=XXX開頭
不是應該要
<!DOCTYPE html>
<html>
<head>
......
這樣嗎?
這個專案到底什麼巫術@@?
另外是我也有找了一下node.js的資料
現在node.js(?) + JavaScript語言 好像就能做後端的工作
因為node.JS需要安裝 感覺不是一個語言
執行檔一個只是命令提示字元 另一個是啥都沒有的視窗
我想問的是
假如用node.js開發一個專案
把這專案拿到沒有安裝node.js的電腦上架設起來
也可以順利執行嗎?
16F：→ akccakcctw: 用大括號包起來那是Meteor的templates語法 08/29 09:49
17F：→ akccakcctw: 只要先定義好template，就可以引用 08/29 09:51
所以Node.js裡面有一個框架(?)叫做Meteor
Meteor的語法內有一個關鍵字"templates"
"templates"的用法是 先定義內容 然後能被引用
所以 templates 是像C++的 #include 的概念?
18F：推 oToToT: 那是node框架meteor的東東，你去看個pug之類的也都有一堆 08/29 21:00
19F：→ oToToT: 非正常html的東東 08/29 21:00
20F：推 yzfr6: 你對網頁的認知，還停留在早期剛流行網頁的時候 08/29 23:58
所以現在的網頁就是很神奇的巫術阿
21F：推 hijkxyzuw: 他是用 javascript 去和後端要資料，填入 html 裡。 08/30 12:52
22F：→ hijkxyzuw: 那些 {{layout}} <template> 就是填入的標誌。 08/30 12:52
我看不懂 {{layout}} <template> 是什麼意思 有啥用途
不過可以確定雖然我看不到<html>
但是它還是存在的 也許用一種很特別的方式隱藏起來
現在暫時先這樣了解就好
因為<html>真的不見的話 會讓我很傷心@@
23F：推 spfy: 我覺得你從頭開始看比較好... 08/30 22:23
24F：→ sarsenwen: 有拉 我真的有從頭開始看 Trust Me!! 08/30 22:44
25F：→ ssccg: 你要先弄清楚靜態網站和動態網站，你認為的網頁、可以用瀏 08/31 09:54
26F：→ ssccg: 覽器開檔案看的是靜態的，連上網站時只是下載檔案 08/31 09:55
27F：→ ssccg: 動態網站是連上網站時，在網站上執行的程式才依參數組出網 08/31 09:56
28F：→ ssccg: 頁回傳，template就是組網頁用的材料，跟結果當然有差 08/31 09:57
29F：→ ssccg: 沒什麼隱藏不隱藏的... 08/31 09:57
所以連上一個網站 網頁只顯示 Hello World 這樣是靜態網站
連到另一個網站 上面只有一個文字輸入框跟送出按鈕
輸入 Tom 按送出 輸入框下面就顯示 Hello Tom這是動態網站
Tom 就是回傳的參數 文字輸入框跟送出按鈕是組網頁用的材料
template提供很多網頁用材料讓我們設計網頁的內容跟互動
也許是新標籤或函數或物件屬性方法
你的意思是這樣嗎????
30F：→ ssccg: 動態網頁20多年前就有了，不是現在的網頁神奇是你從來沒認 08/31 09:59
真
→
ssccg: 知道吧，現代改變的只是寫網站程式用的語言框架 08/31 10:00
所以框架的改變就是 HTML1->HTML5
HTML CSS JavaScript 都算語言框界
那Node.js template也算是一種框架?
31F：推 Neisseria: 建議原 po 找一些網頁程式設計的書從頭開始看 09/03 10:12
32F：→ Neisseria: 要不然這樣子亂學反而誤了自己的時間 09/03 10:13
33F：→ Neisseria: 後端語言很多，不一定要 JavaScript/Node 不可 09/03 10:13
我一開始覺得後端語言這麼多很怪
不像前端就是HTML+JavaScript+CSS
後來發現這些後端語言基本上都是在做同樣的事
因為網路基礎架構就是這樣 短期也不會有大改變
所以先學Node這個看起來最容易上手的
※ 編輯: sarsenwen (36.238.38.65), 09/04/2017 14:22:25