整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
在HTML/CSS 中，我們經常用HTML來布局和填充內容，用CSS來添加效果，修飾內容和布局，使整個頁面變得更好看。
即在<head></head>標簽內添加CSS樣式表的鏈接：
代碼展示如下：
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Make a Table Frame</title> <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" > </head>
定義：
對帶有指定屬性的 HTML 元素設置樣式。
注意：
只有在規定了 !DOCTYPE 時，IE7 和 IE8 才支持屬性選擇器。在 IE6 及更低的版本中，不支持屬性選擇。
功能：
“選擇器”指明了{}中的“樣式”的作用對象，也就是“樣式”作用于網頁中的哪些元素。
CSS中的選擇器有三個：
標簽選擇器、class類選擇器、id選擇器
1.標簽選擇器樣式表：a{}、 div{}、table{} ...
{對全局所有的選中類型標簽的樣式修改}
2.class類選擇器 樣式表： .class{}
{在HTML中每個標簽都可以同時綁定多個類名，每個標簽都可以設置class；同一個界面中class是不可重復}
3. id選擇器樣式表： #d1 {}
{每個標簽都可有id，每個頁面不可重復id，}
【一個HTML標簽只能綁定一個id屬性,一個HTML標簽可以綁定多個class屬性】
單純選擇<div>標簽的時候 是對全局的的（所有的）<div>進行修飾；
選擇器優先級：
id選擇器>class類選擇器>標簽選擇器
所以有id和class 選擇器的標簽將不會被覆蓋。交叉時是按照優先級覆蓋顯示的。
單純的HTML 表格表單內容
標題<caption>標簽：
表格的標題<caption>的內容填充（HTML）：
<caption> 表格標題</caption>
標題<caption>的樣式修飾(CSS)
table.formdata caption
{
text-shadow: #FF00ff;
text-align: center;
padding-bottom: 6px;
font-weight: bold;
}
其他<table>標簽相關內容可參考 HTML中表格的實例應用 一文。
form在網頁中主要負責數據采集功能。
一個表單有三個基本組成部分：
（1）表單標簽：包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。
（2）表單域：包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文件上傳框等。
（3）表單按鈕：提交按鈕、復位按鈕和一般按鈕；用于將數據傳送到服務器上的CGI腳本或者取消輸入。還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
定義：
<input> 標簽規定用戶可輸入數據的輸入字段。
根據不同的 type 屬性，輸入字段有多種形態。輸入字段可以是文本字段、復選框、密碼字段、單選按鈕、按鈕等等
語法代碼：
<input type="value" >
實例代碼：
<td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td>
關系展示：
實例代碼：
<p>
<input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn">
<input type="reset" value= "Reset All" class="btn">
</p>
實例展示：
<input>標簽的其他屬性值：
input標簽外是否添加form標簽需要按情形區分：
應用場景的區別：
1.所有向后臺提交數據（包括原生和ajax提交）的<input>都建議用<form>包裹.
2.如果只是用來做前臺交互效果則不推薦使用form包裹。
但提交數據時，其實也可以不用form包裹input標簽：
1.如果有form標簽，在點擊提交銨鈕時，瀏覽器自動收集參數，并打包一個http請求到服務器，完成表單提交。在這一過程中，瀏覽器會根據method的不同，將參數編碼后，放在urI中(get)，或者放在請求的data中(post)。然后發送到服務器。
2.如果沒有form，post方式的提交要使用ajax手工完成。get方式的提交需要自己拼接url。
<form>表單其他相關內容可參考 HTML中 表單 的應用實例 一文。
最后，附帶一下該可輸入的EXCEL表格的源碼。
HTML code：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Make a Table Frame</title> <link rel="stylesheet" type="text/css" href="CSS/tableframe.css" > </head> <body image=""> <form method="psot"> <table border="1px" class="formdata"> <caption>電腦配件管理表2018年5月-8月</caption> <tr> <th></th> <th scope="col">5月</th> <th scope="col">6月</th> <th scope="col">7月</th> <th scope="col">8月</th> </tr> <tr> <th scope="row">Hard Disk</th> <td><input type="text" name="Hard Disk 5月" id="Hard Disk 5月"></td> <td><input type="text" name="Hard Disk 6月" id="Hard Disk 6月"></td> <td><input type="text" name="Hard Disk 7月" id="Hard Disk 7月"></td> <td><input type="text" name="Hard Disk 8月" id="Hard Disk 8月"></td> </tr> <tr> <th scope="row">Mainboard</th> <td><input type="text" name="Mainboard 5月" id="Mainboard 5月"></td> <td><input type="text" name="Mainboard 6月" id="Mainboard 6月"></td> <td><input type="text" name="Mainboard 7月" id="Mainboard 7月"></td> <td><input type="text" name="Mainboard 8月" id="Mainboard 8月"></td> </tr> <tr> <th scope="row">Case</th> <td><input type="text" name="Case 5月" id="Case 5月"></td> <td><input type="text" name="Case 6月" id="Case 6月"></td> <td><input type="text" name="Case 7月" id="Case 7月"></td> <td><input type="text" name="Case 8月" id="Case 8月"></td> </tr> <tr> <th scope="row">Power</th> <td><input type="text" name="Power 5月" id="Power 5月"></td> <td><input type="text" name="Power 6月" id="Power 6月"></td> <td><input type="text" name="Power 7月" id="Power 7月"></td> <td><input type="text" name="Power 8月" id="Power 8月"></td> </tr> <tr> <th scope="row">CPU Fan</th> <td><input type="text" name="CPU Fan 5月" id="CPU Fan 5月"></td> <td><input type="text" name="CPU Fan 6月" id="CPU Fan 6月"></td> <td><input type="text" name="CPU Fan 7月" id="CPU Fan 7月"></td> <td><input type="text" name="CPU Fan 8月" id="CPU Fan 8月"></td> </tr> <tr> <th scope="row">Total</th> <td><input type="text" name="Total 5月" id="Total 5月"></td> <td><input type="text" name="Total 6月" id="Total 6月"></td> <td><input type="text" name="Total7月" id="Total 7月"></td> <td><input type="text" name="Total 8月" id="Total 8月"></td> </tr> </table> <p> <input type="submit" name="btnSubmit" id="btnSubmit" value="Add Data" class="btn"> <input type="reset" value= "Reset All" class="btn"> </p> </form> </body> </html>
CSS code :
body
{
font-family: Arial;
/*background-image: url(image/mainroad.jpg) no-repeat;*/
background-color: #00ff00;
background-size: 100%;
}
table.formdata
{
width: 300px;
height: 150px;
border: 2px solid #F00;
border-collapse: collapse;
font-family: Arial;
}
table.formdata caption
{
text-shadow: #FF00ff;
text-align: center;
padding-bottom: 6px;
font-weight: bold;
}
table.formdata th
{
border:1px solid #be34hc;
background-color: #E2E2E2;
color:#000000;
text-aglin:center;
font-weight: normal;
padding: 2px 8px 2px 6px;
margin: 0px;
}
table.formdata input
{
width: 100px;
padding: 1px 3px 1px 3px;
margin: 0px;
border:none;
font-family: Arial;
}
.btn
{
width:100px;
background-color: #FF00ee;
border:1px solid #00f2f2;
font-family: Arial;
}
本文部分內容來自網絡，如有侵權，請聯系修改。
django開發網頁中經常會遇到需要將本地的文件上傳到服務器，這里我們就需要通過post請求將數據推送到服務器上去
1 ，定義視圖
def upLoadPic(request):
return render(request, 'booktest/upLoadPic.html')
2 ，定義URL
path('upLoadPic/',views.upLoadPic,name='upLoadPic'),
3 ，前臺界面html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/uploadHandler/" method="post" enctype="multipart/form-data">
{% csrf_token %}
<input type="file" name="pic1">
<br>
<input type="submit" value="上傳">
</form>
</body>
</html>
其實這里也就是一個表單，通過post請求提交相關的數據
從上面可以看到，當點擊提交的時候.post請求會攜帶數據發送到 這個地址，那我在定義一個處理數據的視圖
上傳部分
def uploadHandler(request):
if request.method == "POST":
f1 = request.FILES['pic1']
fname = '%scar/%s'%(MEDA_PATH, f1.name)
#fname = 'static/media/car/a.png'
print(fname)
with open(fname, 'wb+') as pic:
# 根據上傳的流中的數據一點一點往內存中寫
for c in f1.chunks():
pic.write(c)
return HttpResponse(fname)
else:
return HttpResponse("ERROR")
配置下 URL: path('uploadHandler/', views.uploadHandler,name='uploadHandler')
注釋：解釋下上面的內容,當post請求攜帶數據傳到相關的頁面后，這個接收頁面，
1. 首先判斷是不是POST請求，表單提交一定是post請求
2. 通過request.FILES['pic1'] 拿到指定的文件 pic1是傳過來的鍵
3. 拼接需要存放的目標地址
4. 通過with，使用二進制的寫權限向指定目錄中寫
5. 這里的 f1.chunks()表示將數據分塊寫到相關位置
天是劉小愛自學Java的第156天。
感謝你的觀看，謝謝你。
學習計劃安排如下：
后臺管理系統的學習就暫且告一段落了，其實無外乎就是各種增刪改查。
筆記中主要是記錄了查詢和新增操作，關于修改和刪除基本也是大同小異。
后臺管理系統是給網站管理人員看的，前幾天寫的功能主要都用于對商品的管理。
管理人員通過該系統控制商品的樣式啊，是否上下架，庫存啊這些。
而前臺門戶系統是給用戶看的，如下圖：
現在主流電商網站的前臺門戶系統，基本上都是這么一個樣式。
以前后臺管理系統較簡單，我可以在對應頁面做一個修改，從而將其轉換成劉小愛商城。
現在前臺門戶系統較為復雜，有的還涉及到圖片，我一時修改不過來，索性就不改了。
但愿不會說我在打廣告什么的哈哈哈，到時候被平臺給屏蔽了可就不好了。
那使用到的技術是什么呢？
以前后臺系統使用的是SPA（單頁應用），SPA理解起來其實非常簡單。
它就是只有一個html文件，其它的都是以vue組件的形式拼接，從而實現了頁面切換。
SPA的好處在于速度快，但是第一次加載慢，它等于是第一次將靜態資源全部加載下來了，所以后續頁面切換時就非常流暢。
但是這樣有一個問題，不利于SEO優化，當然還有緩存的問題，在此就不說明了。
這個SEO是啥？我大致說下，當然不可能將其說得很清楚，我自己也不太懂，但作為一名程序員對這些有一定的了解肯定是沒壞處的。
比如說用戶要買東西，他可能會在百度上面搜索，那百度出來的頁面是如何排序的呢？
這就涉及到SEO搜索引擎優化了，如果優化好，會排在更前面。
當然最前面的肯定是直接給百度錢打廣告的。
而百度搜索引擎的一個機制，是利用爬蟲爬別人的網站，再顯示出來。
如果只是SPA單頁應用，爬蟲就只能爬到一個html文件，不利于SEO搜索引擎優化。
當然做一個強調：
SEO這塊我也不是太了解，所以只是簡單地做一個描述，自己了解的說不定也有問題。
總之SEO對于網站來說很重要，會增加搜索后的排名，使用單頁應用就不太合適了。
所以前臺門戶系統使用多頁應用：
依舊是前后端分離，不過前端頁面會獨立多個html頁面，每個頁面使用vue完成渲染。
做一個總結就是：
后臺管理系統中用了webpack，很簡單地就實現了熱部署，這個太重要了，不像Java代碼每次一改就要重啟微服務，很麻煩。
而此處使用的叫live-server，其翻譯過來就是“活的服務器”，很生動形象。
安裝live-server
使用npm命令完成安裝即可，命令如下：
npm install -g live-server
這里使用的是全局安裝，以后任意位置可用。
安裝好了之后運行live-server，同時可以使用命令指定端口：
命令：live-server --port=9002
port即端口的意思，我們這里指定9002為前臺門戶系統的端口。
域名即為本地域名，通過域名+端口就能訪問到對應的頁面了。
和后臺管理系統一樣，為了讓域名更加地正規好看，我們使用SwitchHosts+nginx實現域名和端口的反向代理。
該方式在第142天的學習筆記中專門講解過，這里做一個簡單的回顧：
在SwitchHosts配置我們想要的一個域名為本地域名，也就是說當在瀏覽器上訪問該域名時，系統會自動認為它對應本地域名。
而瀏覽器上如果不指定端口時，會默認解析成80端口，所以在nginx配置中監聽該端口，并跳轉到前臺門戶系統路徑。
所以當在瀏覽器上訪問對應域名時，實際上訪問的就是nginx中配置的那個路徑。
今天不涉及到具體的業務實現，但是對接下來一段時間的學習做一個了解。
①搜索業務的實現
一個電商網站，搜索肯定是核心關鍵了。
現在可不像以前那樣，還用什么模糊查詢，效率太低了，有專門的搜索技術，明天開始就專門學習。
②商品詳細以及RabbitMQ？
這是個啥還不太清楚，后續學到了再說。
③用戶中心的實現
最常見的也就是用戶的注冊和登錄了，這個以前就實現過好幾次了。
當然還有其它的一些比如個人信息管理呀，用戶地址管理，收藏管理……等。
④購物車以及下單的實現
購物車也是商城非常核心的一環，并且肯定是需要使用到支付的，微信支付或者支付寶支付等多種方式。
行有不得反求諸己，我是@劉小愛
一個白天上班晚上學習的95后滬漂，不為其它，只為學會自律做好自己，也愿我的每日打卡能給你帶來勇氣，歡迎點贊關注和評論。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
