【文章內(nèi)容簡(jiǎn)介】 質(zhì)量，獲得更好的經(jīng)濟(jì)效益。其具體目標(biāo)包括：（1）快速完成顧客的結(jié)賬。（2）準(zhǔn)確無誤地記錄顧客的每筆消費(fèi)記錄。（4）方便查詢顧客消費(fèi)情況。（5）方便查詢美發(fā)店的營(yíng)業(yè)額情況。權(quán)限模塊收銀模塊會(huì)員模塊信息查詢登錄模塊美發(fā)店收銀系統(tǒng)數(shù)據(jù)庫圖2：系統(tǒng)框架圖5. 網(wǎng)站實(shí)體設(shè)計(jì)前臺(tái)界面采用HTML + CSS + javascript + JQuery。 進(jìn)行結(jié)合設(shè)計(jì)，寬度為990px,高度視內(nèi)容而定，共8個(gè)頁面分別為：登錄管理：首頁：收銀臺(tái)：會(huì)員功能:信息臺(tái):報(bào)表：美發(fā)店簡(jiǎn)介：關(guān)于我們：除登錄管理：。：?php require_once(39。/39。)。 ?內(nèi)容分為三個(gè)部分：1）div id=container/div 這里面內(nèi)容為歡迎詞及登錄字體輸出。2）div id=logo/div這里面容為一張logo圖片及一張美發(fā)店收銀系統(tǒng)圖片。圖片加載的HTML方式為：img src=/images/ border=0 height=70 width=140 /。其中img /為加載圖片的HTML標(biāo)簽，屬性 src為設(shè)置圖片的路徑，屬性border為圖片的邊框，屬性height為圖片的高度，屬性width為圖片的寬度。3）div class=nav1 /div這里內(nèi)容是導(dǎo)航菜單欄主要結(jié)構(gòu)由ulli /li/ul 組成。，調(diào)用CSS文件方式為：link rel=stylesheet type=text/css href=/css//CSS文件可用編輯器打開查看，這里針對(duì)導(dǎo)航做分析：1）首先設(shè)置ul,li{liststyle:none。}將所有l(wèi)i列表前默認(rèn)的一個(gè)點(diǎn)（”?” ）設(shè)置為不顯示。2）.nav ul li{display:inlineblock。marginleft:1px。height:40px。width:121px。float:left。textalign:center。backgroundimage:url(/images/)。borderbottom:1px solid ffffff。} ul 標(biāo)簽下的列表元素li進(jìn)行設(shè)置了高度：40像素、寬度:121像素、下邊框:1像素 實(shí)線 顏色為白色、左邊距：1像素、背景圖片:、內(nèi)容：居中顯示以及最重要的浮動(dòng)方式的設(shè)置float:left左浮動(dòng)，這個(gè)浮動(dòng)方式的設(shè)置才能將內(nèi)容默認(rèn)的以7行顯示改成的為同一行顯示。3）.nav1{border:0px。height:40px。width:100%。marginbottom:5px。 background:url(/images/) repeatx 999999。} 這里是對(duì)頁面中寬度最寬的一條藍(lán)色橫條進(jìn)行樣式設(shè)置，其中有兩個(gè)關(guān)鍵點(diǎn)：:100%,這里使橫條充滿一整行，并且可隨著頁面的變化而自動(dòng)改變寬度。:url(/images/) repeatx 999999。這里是用一條寬1px，高40px的圖片將寬大于990px的橫條全部變?yōu)樗{(lán)底圖片，repeatx 圖片沿X軸方向無限重復(fù)，原圖如下圖3：圖3：導(dǎo)航背景圖4）.nav ul li a:hover{display:inlineblock。fontsize:16px。height:40px。color:ff0000。width:124px。lineheight:40px。background:url(/images/)。fontsize:14px。textdecoration:none。}在這里是對(duì)鼠標(biāo)移動(dòng)到首頁、收銀臺(tái)、會(huì)員功能等模塊上時(shí)，會(huì)由原先的藍(lán)底變?yōu)榘椎椎男ЧM(jìn)行設(shè)置。 對(duì)圖片自動(dòng)切換設(shè)計(jì)1）內(nèi)容設(shè)計(jì)：內(nèi)容只需要6張大圖片，對(duì)6張圖片的命名要有規(guī)律分別為: 、、并且在同一目錄下，這樣可以減少JQuery程序語言編寫的難度。把內(nèi)容通過HTML代碼嵌入到頁面中主要通過divulli，之后需要在li中自定義一個(gè)”data”屬性，每一個(gè)li中data屬性的值按順序?yàn)?、5因?yàn)樵诔绦蛑袑⑺鼈兇嫒胍粋€(gè)數(shù)組中方便調(diào)用。2）排版設(shè)計(jì)：大體分左右兩部分。因?yàn)閮蓚€(gè)部分都各自放在一個(gè)div中處于同級(jí)，這樣對(duì)兩個(gè)div容器進(jìn)行CSS中 浮動(dòng)設(shè)置便可讓內(nèi)容分為左右兩部分。再給兩個(gè)容器及容器中圖片進(jìn)行大小設(shè)置以到達(dá)規(guī)定效果3）設(shè)計(jì)思想：a) 圖片能夠自動(dòng)的按順序自上而下循環(huán)切換。b) 當(dāng)鼠標(biāo)移動(dòng)到左邊圖片時(shí)，圖片切換必須停止。c) 當(dāng)鼠標(biāo)移動(dòng)到右邊圖片時(shí)，必須切換至相應(yīng)的圖片，切換之后立即停止。d) 當(dāng)切換至下一張圖片時(shí)，左部分圖片也要同時(shí)更新。e) 當(dāng)某張圖片成為當(dāng)前圖片時(shí)，通過程序?qū)τ疫叺膱D片設(shè)置成特殊CSS樣式，將其加以突出，同時(shí)其它圖片設(shè)置成普通的CSS樣式。運(yùn)用JQuery 必須將程序?qū)懺?(function(){ })。的大括號(hào)中，基于以上五點(diǎn)。我們程序如下：var adqh = {} 創(chuàng)建對(duì)象、由于對(duì)象屬性設(shè)置比較多，這里不列出，1. function picqh(){ //圖片自動(dòng)切換函數(shù) if( == 1)。 //該auto屬性值為1停止自動(dòng)切換 else{//當(dāng)圖片切換至第6張時(shí)，返回每一張 if( = 5) = 0。 else ++。 //切換圖片至下一張 } picqh1()。 //圖片切換的具體變化設(shè)置 //用setTimeout()函數(shù)設(shè)置每1500毫秒調(diào)用自身一次， setTimeout(picqh,1500)。 }2. $(39。.adcontent a39。).hover()。利用該語句監(jiān)聽左邊圖片， = 1。停止圖片切換， = 0。繼續(xù)圖片切換。3. $(39。.adqh li39。).hover()。利用該語句監(jiān)聽右邊圖片， = 1。 = $(this).attr(data)。通過以上在li中自定義的data屬性獲取鼠標(biāo)是在哪一個(gè)圖片上。之后調(diào)用picqh1()。完成圖片切換及5點(diǎn)的變化 。 2236673行。首頁設(shè)計(jì)界面如下圖圖4：首頁效果圖首頁可放6張圖片，可根據(jù)需要放置不同類型的圖片：例如宣傳圖片，最新優(yōu)惠活動(dòng)，流行發(fā)型，優(yōu)秀員工等。 javaScript對(duì)各個(gè)頁面中的表單檢查//檢查表單輸入function check1(obj,type){ if(type == 1){ //輸入只能為數(shù)字 //用正則表達(dá)式匹配不為數(shù)字的字符，并替換為空 = (/[^\d]/,)。 } if(type == 2){ //輸入最多只有一個(gè)點(diǎn)，第一個(gè)不能為點(diǎn) //用正則表達(dá)式匹配不為數(shù)字和點(diǎn)的字符，并替換為空 = (/[^\d.]/,)。 // //若匹配出第一個(gè)為點(diǎn)則將點(diǎn)替換為空 = (/^\./,)。 //將匹配出所有點(diǎn)，并替換為一個(gè)點(diǎn) = (/\.{2,}/g,.)。 } if(type == 3){ //輸入只能為字母數(shù)字劃線 //用正則表達(dá)式匹配不為字母數(shù)字劃線字符，并替換為空 = (/[^\w]/,)。 } if(type == 4){ //過濾非法字符 //用正則表達(dá)式匹配下列設(shè)置的特殊字符，并替換為空 = (/[\.39。\(\)\*%\$\^\amp。]+/g,)。 }}通過以上代碼對(duì)表單的檢查，防止用戶的錯(cuò)誤輸入，以及減少個(gè)別人通過表單注入SQL語句破壞系統(tǒng)。 MySQL 數(shù)據(jù)庫的設(shè)計(jì)要實(shí)現(xiàn)以上主要功能模塊，必須建立相對(duì)應(yīng)的數(shù)據(jù)庫。采用B/S體系架構(gòu)，核心業(yè)務(wù)進(jìn)行封裝，用戶通過瀏覽器進(jìn)行訪問；編程語言采用PHP語言，數(shù)據(jù)庫采用MySql；服務(wù)器采用基于Windows系統(tǒng)。 可進(jìn)行登錄人員信息實(shí)體圖管理者id最后登錄日期姓名密碼用戶名類型登錄IP圖5：登錄人員信息實(shí)體圖 用戶類型及權(quán)限信息實(shí)體圖用戶類型權(quán)限級(jí)別權(quán)限信息類型名稱圖6：用戶類型及權(quán)限信息實(shí)體圖 會(huì)員信息實(shí)體圖會(huì)員密保問題最后消費(fèi)日期姓名密碼用戶名類型生日金額性別會(huì)員卡號(hào)答案圖7：會(huì)員信息實(shí)體圖 賬單信息記錄實(shí)體圖賬單id打折信息顧客姓名發(fā)型師當(dāng)前管理員消費(fèi)卡號(hào)單號(hào)消費(fèi)類型時(shí)間消費(fèi)金額圖8：賬單信息記錄實(shí)體圖 數(shù)據(jù)結(jié)構(gòu)ER圖會(huì)員消費(fèi)賬單管理者/員工管理/剪發(fā)收銀/業(yè)績(jī)管理者類型職能圖9：數(shù)據(jù)結(jié)構(gòu)ER圖 數(shù)據(jù)表的設(shè)計(jì)(1)表 rd_admin:表1：rd_admin管理員/員工信息表編號(hào)字段名字段類型是否為主