PTT數位生活區 / Web_Design

[問題] 請問要寫出這樣的網頁需要看哪些書?

看板Web_Design作者 (sarsenwen)時間7年前 (2017/08/26 09:32), 7年前編輯推噓11(11推 0噓 22→)
留言33則, 12人參與, 最新討論串1/3 (看更多)
首先是這個網站首頁 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://www.ptt.cc/bbs/Web_Design/M.1503711162.A.02E.html
推
08/26 09:49, , 1F
是nodejs喔 一種後端語法
08/26 09:49, 1F
→
08/26 13:37, , 2F
沒載來玩，不過看起來是以nodejs為基礎，拿Meteor框架做
08/26 13:37, 2F
→
08/26 13:39, , 3F
出來的，該專案在佈署時會自動生成出用戶端檔案到public
08/26 13:39, 3F
→
08/26 13:42, , 4F
目前主流的 Web 開發大多會使用 Webpack(或類似套件) +
08/26 13:42, 4F
→
08/26 13:44, , 5F
須轉譯的語言 (jsx, es2017, vue等)來加速開發，市面上的
08/26 13:44, 5F
→
08/26 13:45, , 6F
書要把這些學齊要花不少時間哦
08/26 13:45, 6F
推
08/26 14:47, , 7F
這內含了不少know how，技術是一回事，重點的商業邏輯要
08/26 14:47, 7F
→
08/26 14:47, , 8F
懂，並不是看書就能理解
08/26 14:47, 8F
推
08/26 15:27, , 9F
index.html本來就不是必備的，只是apache之類的伺服會自己
08/26 15:27, 9F
→
08/26 15:27, , 10F
去抓index來當首頁
08/26 15:27, 10F
推
08/27 02:53, , 11F
要寫出這網站還需要資料庫規畫 相關的金融知識
08/27 02:53, 11F
推
08/27 20:56, , 12F
這是西洽版友做的 之前大家說著說著就 一個人自幹出來的專案
08/27 20:56, 12F
→
08/27 20:57, , 13F
而且他的金融相關知識好像也足夠...滿神的?
08/27 20:57, 13F
→
08/28 15:09, , 14F
這個蠻有趣的，除了要寫程式，還要有金融的領域知識
08/28 15:09, 14F
推
08/28 16:02, , 15F
這網頁有趣的地方其實是使用者之間的互動
08/28 16:02, 15F
請問一下 為何原始碼資料夾中 用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的電腦上架設起來 也可以順利執行嗎?
→
08/29 09:49, , 16F
用大括號包起來那是Meteor的templates語法
08/29 09:49, 16F
→
08/29 09:51, , 17F
只要先定義好template，就可以引用
08/29 09:51, 17F
所以Node.js裡面有一個框架(?)叫做Meteor Meteor的語法內有一個關鍵字"templates" "templates"的用法是 先定義內容 然後能被引用 所以 templates 是像C++的 #include 的概念?
推
08/29 21:00, , 18F
那是node框架meteor的東東，你去看個pug之類的也都有一堆
08/29 21:00, 18F
→
08/29 21:00, , 19F
非正常html的東東
08/29 21:00, 19F
推
08/29 23:58, , 20F
你對網頁的認知，還停留在早期剛流行網頁的時候
08/29 23:58, 20F
所以現在的網頁就是很神奇的巫術阿
推
08/30 12:52, , 21F
他是用 javascript 去和後端要資料，填入 html 裡。
08/30 12:52, 21F
→
08/30 12:52, , 22F
那些 {{layout}} <template> 就是填入的標誌。
08/30 12:52, 22F
我看不懂 {{layout}} <template> 是什麼意思 有啥用途 不過可以確定雖然我看不到<html> 但是它還是存在的 也許用一種很特別的方式隱藏起來 現在暫時先這樣了解就好 因為<html>真的不見的話 會讓我很傷心@@
推
08/30 22:23, , 23F
我覺得你從頭開始看比較好...
08/30 22:23, 23F
→
08/30 22:44, , 24F
有拉 我真的有從頭開始看 Trust Me!!
08/30 22:44, 24F
→
08/31 09:54, , 25F
你要先弄清楚靜態網站和動態網站，你認為的網頁、可以用瀏
08/31 09:54, 25F
→
08/31 09:55, , 26F
覽器開檔案看的是靜態的，連上網站時只是下載檔案
08/31 09:55, 26F
→
08/31 09:56, , 27F
動態網站是連上網站時，在網站上執行的程式才依參數組出網
08/31 09:56, 27F
→
08/31 09:57, , 28F
頁回傳，template就是組網頁用的材料，跟結果當然有差
08/31 09:57, 28F
→
08/31 09:57, , 29F
沒什麼隱藏不隱藏的...
08/31 09:57, 29F
所以連上一個網站 網頁只顯示 Hello World 這樣是靜態網站 連到另一個網站 上面只有一個文字輸入框跟送出按鈕 輸入 Tom 按送出 輸入框下面就顯示 Hello Tom這是動態網站 Tom 就是回傳的參數 文字輸入框跟送出按鈕是組網頁用的材料 template提供很多網頁用材料讓我們設計網頁的內容跟互動 也許是新標籤或函數或物件屬性方法 你的意思是這樣嗎????
→
08/31 09:59, , 30F
動態網頁20多年前就有了，不是現在的網頁神奇是你從來沒認
08/31 09:59, 30F
真 → ssccg: 知道吧，現代改變的只是寫網站程式用的語言框架 08/31 10:00 所以框架的改變就是 HTML1->HTML5 HTML CSS JavaScript 都算語言框界 那Node.js template也算是一種框架?
推
09/03 10:12, , 31F
建議原 po 找一些網頁程式設計的書從頭開始看
09/03 10:12, 31F
→
09/03 10:13, , 32F
要不然這樣子亂學反而誤了自己的時間
09/03 10:13, 32F
→
09/03 10:13, , 33F
後端語言很多，不一定要 JavaScript/Node 不可
09/03 10:13, 33F
我一開始覺得後端語言這麼多很怪 不像前端就是HTML+JavaScript+CSS 後來發現這些後端語言基本上都是在做同樣的事 因為網路基礎架構就是這樣 短期也不會有大改變 所以先學Node這個看起來最容易上手的 ※ 編輯: sarsenwen (36.238.38.65), 09/04/2017 14:22:25
‣ 更多 sarsenwen 的文章
文章代碼(AID): #1PeC-w0k (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 sarsenwen 的文章
文章代碼(AID): #1PeC-w0k (Web_Design)