整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          Vue 小Demo-留言板

          個留言板小demo,題目來自 《Vue.js實戰(zhàn)》第九章 9.7實戰(zhàn):留言板。

          有人想看源碼,源碼已上傳GitHub

          GitHub地址 https://github.com/zhaiyifei/VueDemo.git

          頭條怎么插超鏈啊(捂臉)

          看下需求:

          1. 輸入昵稱,以及留言內(nèi)容,都不允許為空。
          2. 發(fā)布留言內(nèi)容到 留言板中。
          3. 留言回復(fù)。

          Vue組件模板有3種書寫形式:

          1. 第一種:使用script標簽:<script type="text/x-template" id="myComponent"> 通過id來引用模板
          2. 第二種:使用template標簽 :<template id="myComponent">通過id來引用模板。HTML5才有template標簽,IE未實現(xiàn)此標簽。
          3. 第三種:單文件組件( .vue格式文件)。適用與大型復(fù)雜的項目。

          這個小demo 就使用簡單的 script標簽方式來寫vue組件模板啦。

          先看一下成品展示:

          1. 首先制作靜態(tài)頁:

          制作動態(tài)頁:

          抽象出組件:抽象出三個組件 input組件,textarea組件,留言列表組件

          input組件

          編寫模板

          注冊組件

          使用組件

          textarea 和留言列表組件:

          注冊組件:

          使用組件

          2.填充數(shù)據(jù):

          使用 v-model 指令在表單 <input> 及 <textarea> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素。

          username 和 message 數(shù)據(jù)屬性 保存輸入的值.

          v-model是語法糖,對inout事件的包裝,相當于:

          發(fā)布功能:

          發(fā)布公能是 拿到輸入的 昵稱(username) 和 留言內(nèi)容(message),填充到 留言板列表中。昵稱和留言內(nèi)容分別在 v-input 和 v-textarea組件中,而 按鈕在 根組件中,與v-input和v-textarea為兄弟關(guān)系。 所以我們將 昵稱 和留言 提取到 v-input v-textarea的父組件——根組件中。

          通過 v-model指令,將昵稱 和 留言內(nèi)容,綁定到對應(yīng)的子組件上去。

          將v-model的值 綁定到 子組件中props中的 value屬性上。父組件通過props向子組件傳遞數(shù)據(jù)。

          在子組件中使用組件上v-model指令綁定的數(shù)據(jù),input和 textarea標簽需要使用,所以:

          修改input標簽元素,并刪除v-input組件中的 data屬性,這個不需要了:

          將 props.value 綁定到 input元素的value屬性上 :value 指向input元素的value屬性。”value" 中的value指向 props中的value。input元素上 監(jiān)聽input事件。input事件調(diào)用父組件的input事件來更新值。

          對比一下可以發(fā)現(xiàn)v-model指令使用在html標簽上 和 使用在 組件之上是不一樣的。當v-model指令 用在組件上的時候,跟用在DOM元素上的使用方式并不一樣,在DOM元素上使用v-model時,Vue幫我們實現(xiàn)了語法糖。在組件上使用v-model,Vue幫我們實現(xiàn)了一半的語法糖,剩下一半需要我們自己實現(xiàn) 。

          其實就是這樣 :

          1. 將根組件(根實例可以看作根組件)中的 message 綁定到 子組件v-input中的 props中的 value中 。

          2. 將根組件中的 updataUsernameEvent 方法注冊到 子組件中的 input事件上。

          子組件v-input :

          1.將v-input中的 props中的 value屬性 綁定到 input標簽中的 value屬性上。

          2.將v-input中的方法 childrenInputEvent 方法 注冊 到inpu標簽中的input事件上。

          v-input中的childrenInputEvent 方法觸發(fā) 父組件(根組件)注冊到子組件上的input事件,調(diào)用updateUsernameEvent來修改 username屬性的值

          看下效果:

          v-model指令語法糖的形式如下:

          子組件:

          子組件還可以簡寫成這樣:

          對比一下 可以發(fā)現(xiàn) 在組件上使用v-model指令時,Vue幫我們實現(xiàn)了一半的語法糖 :

          v-model指令語法糖形式

          沒用使用v-model指令語法糖形式 :

          子組件中 Vue沒用幫我們實現(xiàn)語法糖,所以我們需要我們自己實現(xiàn):

          v-textarea組件同樣如此。

          點擊發(fā)布按鈕,將 username 與 message 存儲到 留言列表中 :

          做一些驗證判斷,將 username 與 message 存儲到 留言列表中,并清空輸入內(nèi)容。將handleSend方法注冊到 button標簽元素的點擊事件上。

          使用push將數(shù)據(jù)插入數(shù)組中來觸發(fā)視圖更新。一定不要使用不能觸發(fā)Vue視圖更新的方式來修改更新數(shù)組!

          Vue 不能檢測以下變動的數(shù)組:

          1. 當你利用索引直接設(shè)置一個項時,例如:vm.items[indexOfItem] = newValue
          2. 當你修改數(shù)組的長度時,例如:vm.items.length = newLength

          數(shù)組更新檢測Vue官方文檔 列表渲染 一節(jié)中有詳細的介紹

          渲染留言列表:

          綁定留言列表 list到 留言板v-list組件上:

          注冊v-list組件:

          使用v-for渲染留言板:

          效果如下:

          回復(fù)功能:

          回復(fù)同樣也是 將回復(fù)信息儲存到留言列表中,所以將回復(fù)公能也放到 根組件中;

          將handleReply方法注冊到 v-list組件中的 reply事件上。

          通過點擊事件來觸發(fā) reply事件

          點擊回復(fù)按鈕時候,我們需要觸發(fā)input標簽的焦點事件。我們怎么拿到 input標簽元素呢?可以給 input標簽做一個 標記:通過ref屬性拿到所標記的元素或者組件實例:

          通過 Vue的 $refs實例屬性來訪問 注冊過 ref 特性 的所有 DOM 元素和組件實例。 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子組件上,引用就指向組件實例

          通過 Vue的$refs實例屬性來訪問 input標簽元素,并觸發(fā)其焦點事件。$refs實例屬性 只能訪問 當前組件作用域內(nèi)的(組件html模板內(nèi)部) ref標簽,無法被外部訪問,父組件也不可以。

          無法訪問

          因此我們需要先拿到子組件,然后在通過子組件去拿著子組件中ref標記的html元素標簽。

          給子組件加一個 ref標記:

          通過 refs拿到子組件實例,調(diào)用子組件中的方法:

          子組件通過 refs 拿到作用域內(nèi)的 ref標記,(input標簽元素)并觸發(fā)焦點事件

          看下效果:

          在增加一個刪除留言的功能:

          注冊到子組件的 delete事件上:

          通過點擊事件觸發(fā) 注冊的 delete事件:

          看下效果:

          好了 一個簡單的留言板功能我們實現(xiàn)完了。

          題目的、意義及研究現(xiàn)狀:

          研究的背景目及意義:

          以往,農(nóng)民將農(nóng)產(chǎn)品進行生產(chǎn),為了將其轉(zhuǎn)化成商品,就必須將其向集散地進行運輸,產(chǎn)品銷售的成本非常高。現(xiàn)在通過建立網(wǎng)站,能夠使農(nóng)民、商人不出門就可以在市場上進行交易,產(chǎn)品也不需要運輸。網(wǎng)站不單單能夠發(fā)布、查看信息,同時還可以進行交易等,用戶利用網(wǎng)絡(luò)能夠?qū)鹘y(tǒng)交易中的采集信息、市場調(diào)查以及技術(shù)咨詢等工作直接完成,科學(xué)的網(wǎng)站結(jié)構(gòu),能夠使商人以及現(xiàn)代農(nóng)民的需求有效地得到滿足。

          研究枸杞農(nóng)產(chǎn)品信息網(wǎng)有極其重要的現(xiàn)實意義。一是通過對枸杞子農(nóng)產(chǎn)品信息網(wǎng)的了解及相關(guān)技術(shù)以及功能是研究,提出了對枸杞農(nóng)產(chǎn)品網(wǎng)站功能進一步優(yōu)化,促進枸杞農(nóng)產(chǎn)品信息網(wǎng)的實現(xiàn)。二是有效地破解了銷售環(huán)節(jié)的信息不對稱的問題,避免因信息獲取上的不一致而造成交易過程中的不公平、不合理。充分利用互聯(lián)網(wǎng)優(yōu)勢將農(nóng)產(chǎn)品的詳細信息通過網(wǎng)絡(luò)擴散到各地,使農(nóng)產(chǎn)品交易打破了傳統(tǒng)的地域限制。三是降低了交易過程中成本的支出,減少中間環(huán)節(jié),消除部分運輸成本、店面成本,節(jié)約人力,消除代理之間的差價。實現(xiàn)了買賣雙方的互利共贏,也推動了我國農(nóng)業(yè)產(chǎn)業(yè)的發(fā)展。

          研究現(xiàn)狀:

          國外,一些發(fā)達國家的電子商務(wù)研究要比中國起步早很多,特別是美國作為全球電子商務(wù)發(fā)展最早的國家,一度引領(lǐng)農(nóng)產(chǎn)品電商研究的發(fā)展趨勢,目前來看也是農(nóng)產(chǎn)品電商研究領(lǐng)域的佼佼者,這主要得益于美國在信息技術(shù)方面發(fā)展的良好基礎(chǔ)和獨特優(yōu)勢。據(jù)資料顯示,美國的農(nóng)產(chǎn)品網(wǎng)站已經(jīng)超過800個,之前的傳統(tǒng)農(nóng)產(chǎn)品公司也在逐步實現(xiàn)轉(zhuǎn)型發(fā)展,向線上化趨勢靠攏。在此基礎(chǔ)上,電子商務(wù)逐步建立一體化運行機制,農(nóng)產(chǎn)品電商研究有了更多的實踐成果。

          當前中國農(nóng)產(chǎn)品電子商務(wù)發(fā)展有了一定的成績,但也存在不少問題。第一, 農(nóng)產(chǎn)品電子商務(wù)交易平臺建設(shè)還不完善。因為信息網(wǎng)絡(luò)技術(shù)的普及程度還低,很多偏遠地區(qū)的農(nóng)村還依賴于電視或固定電話獲取信息,造成信息不流暢,物流供應(yīng)鏈不健全。第二,農(nóng)戶對農(nóng)產(chǎn)品電子商務(wù)的認識還處在初級階段。因為教育程度參差不齊,農(nóng)戶對網(wǎng)絡(luò)發(fā)展的信息滯后,造成了主體上的思想落后,跟不上網(wǎng)絡(luò)經(jīng)濟時代發(fā)展的步伐。第三,農(nóng)產(chǎn)品電子商務(wù)的法律法規(guī)還不健全。就目前來說,農(nóng)產(chǎn)品電子商務(wù)的發(fā)展正處在初步階段,不免會有法律上的漏洞,而網(wǎng)絡(luò)犯罪的猖獗給不法分子提供了可乘之機,出現(xiàn)了網(wǎng)絡(luò)詐騙現(xiàn)象,打擊了農(nóng)戶的積極性。

          研究內(nèi)容:

          本網(wǎng)站按照用戶類型可分為普用戶端及管理員端

          用戶模塊包括:

          1. 商品信息模塊:該模塊分為商品信息顯示、商品信息查詢。可查詢商品,而且可以查看商品的詳細信息,剩余數(shù)量、介紹等。

          2. 會員信息模塊:該分為會員登陸、會員信息修改,以及會員注冊。用戶輸入登錄名和密碼進行登錄,如果用戶名和密碼錯誤則無法登錄。

          3. 購物車模塊:用戶登錄后就可以購物,可以把商品加入到購物車,或者把商品從購物車刪除,如果商品數(shù)量為0則無法加入到購物車。

          4. 訂單模塊:用戶把商品添加到購物車后即可提交訂單,訂單提交后用戶可以進行付款。用戶可以查看自己的訂單。

          5. 留言板模塊:留言板可以添加留言和刪除留言

          管理模塊:

          1. 商品管理模塊:管理登錄后臺后可以對商品種類進行添加、刪除。添加時如果商品種類已經(jīng)存在會提示添加錯誤。

          2. 訂單管理模塊:管理員可以查詢訂單,查看所有訂單信息

          3. 用戶管理:管理員可以查詢用戶信息,管理用戶信息。

          4. 系統(tǒng)管理:管理員可以修改登錄密碼,安全退出。

          5. 留言板管理:審核留言,刪除惡劣留言

          本網(wǎng)站采用JavaWeb、JavaScript、HTML、CSS等技術(shù),整理規(guī)劃網(wǎng)站中的每個功能,合理的網(wǎng)站的整體布局。利用JSP、HTML、CSS和JavaScript腳本編寫代碼,B/S框架進行編寫,即Browse/Server(瀏覽器/服務(wù)器)架構(gòu),讓網(wǎng)站整體布局合理,美觀大方。

          3.工作計劃和進度安排

          起 訖 日 期: 工 作 內(nèi) 容:

          第一階段:(2022.6.26-2022.7.1)

          第二階段:(2022.7.1)

          第三階段:(2022.7.2-2022.9月10)

          第四階段:(2022.9.11-2022.10.20)

          第五階段:(2022.10.21-2022.11.10)

          第六階段:(2022.11.11-2022.12.15)

          第七階段:(2022.12.16)

          第八階段:(2022.12.17-2023.01.16)

          第九階段:(2023.01.17-2023.2.21)

          第十階段:(2023.2.21-2023.3.1)

          第十一階段:(2023.3.2-2023.3.20)

          第十二階段:(2023.3.21-2023.3.25)

          第十三階段:(2023.4.7-2023.4.12)

          第十四階段:(2023.4.13-2023.4.20)

          第十五階段:(2023.4.21-2023.4.30)


          4.主要參考文獻

          [1]Ying Xin Liu,Xi Yuan Li. Design and Implementation of a Business Platform System Based on Java[J]. Procedia Computer Science,2020,166(C).

          [2]馬瀟. 基于J2EE和Lucene搜索架構(gòu)的網(wǎng)絡(luò)購物平臺的設(shè)計與實現(xiàn)[D].東南大學(xué),2021.DOI:10.27014/d.cnki.gdnau.2021.001016.

          [3]朱成. 基于Java的網(wǎng)上購物系統(tǒng)的設(shè)計與開發(fā)[D].南昌航空大學(xué),2019.

          [4]黃遠洋. 基于HTML5和CSS3的響應(yīng)式Web的設(shè)計與實現(xiàn)[D].華北電力大學(xué),2018.

          [5]張昭.大理非遺博物館網(wǎng)頁設(shè)計研究[D].昆明理工大學(xué),2019.DOI:10.27200/d.cnki.gkmlu.2019.001314.

          [6]徐智宇. 基于B/S架構(gòu)的工具管理系統(tǒng)設(shè)計與實現(xiàn)[D].北京交通大學(xué),2021.DOI:10.26944/d.cnki.gbfju.2021.003272.

          [7]趙智. 基于SpringBoot的某綜合訓(xùn)練平臺成績分析與預(yù)測系統(tǒng)設(shè)計與實現(xiàn)[D].浙江理工大學(xué),2021.DOI:10.27786/d.cnki.gzjlg.2021.000251.

          [8]宋宇. 黑龍江省堅果類農(nóng)產(chǎn)品信息網(wǎng)設(shè)計與實現(xiàn)[D].大連海洋大學(xué),2019.DOI:10.27821/d.cnki.gdlhy.2019.000177.

          [9]任小旦.基于互聯(lián)網(wǎng)下農(nóng)產(chǎn)品電子商務(wù)網(wǎng)站的設(shè)計與實現(xiàn).2018.浙江海洋大學(xué),MA thesis.

          于想從事IT工作的人們來說,HTML5前端開發(fā)是一個不錯的切入點。學(xué)習(xí)的門檻低,而且與后端語言相比,前期沒有那么多抽象的知識需要理解,HTML5的學(xué)習(xí)曲線是先快后慢的。

          青島HTML5

          對于HTML5零基礎(chǔ)的人員來說,可能看到一開始有許多的知識點,就會覺得基礎(chǔ)知識很多、很難學(xué),其實只要規(guī)劃好了一條學(xué)習(xí)路線,學(xué)習(xí)的時候更有針對性,HTML5遠沒有看起來那么難,知識點也沒有你想的那么復(fù)雜。

          1、HTML5介紹

          內(nèi)容包括:(互聯(lián)網(wǎng)發(fā)展趨勢、HTML5語言的優(yōu)勢、簡單易學(xué)人人都能編程、H5就業(yè)和薪資情況、HTML5常見的項目與產(chǎn)品、HTML5的未來與方向)

          2、HTML基礎(chǔ)

          內(nèi)容包括:(HTML簡介與歷史版本、常用開發(fā)軟件、常見標簽與屬性、表格與表單、標簽規(guī)范與標簽語義化、實戰(zhàn):網(wǎng)頁結(jié)構(gòu)布局)

          3、CSS基礎(chǔ)

          內(nèi)容包括:(CSS簡介與基本語法、常見的各種樣式屬性、CSS選擇器與標簽類型、理解盒子模型與CSS重置、浮動與定位、利用PS工具測量樣式、HTML+CSS開發(fā)網(wǎng)頁、實戰(zhàn):仿電商首頁效果)

          4、CSS3基礎(chǔ)

          內(nèi)容包括:(CSS3常見樣式、CSS3選擇器、變形與動畫、3D效果與關(guān)鍵幀、彈性盒模型)

          5、移動端布局

          (移動端基本概念、viewport窗口設(shè)置、移動端布局方案、rem、vh、vw等單位、響應(yīng)式布局、bootstrap框架)

          6、JavaScript基礎(chǔ)

          內(nèi)容包括:(JS簡介、JS變量、數(shù)據(jù)類型與類型轉(zhuǎn)換、運算符與優(yōu)先級、流程控制-if..else流程控制-switch...case、流程控制-while、do..while、for循環(huán)、break、continue語法、函數(shù)定義與調(diào)用、全局變量與局部變量。還有函數(shù)傳參與返回值、函數(shù)作用域與變量作用域、DOM的基本操作、定時器使用、this指向與修改指向、數(shù)組、字符串等方法操作、時間對象與正則對象、掌握常見BOM操作、常見事件與事件細節(jié)、JSON與AJAX、JSONP跨域操作、前端cookie的使用、實戰(zhàn):JS配合HTML與CSS完成電商項目)

          7、jquery框架

          內(nèi)容包括:(jquery框架介紹及優(yōu)勢介紹、jquery核心思想、jquery常見方法、jquery動畫操作、jqueryAJAX操作、jquery工具方法、利用jquery快速開發(fā)網(wǎng)頁)

          8、PHP基礎(chǔ)

          內(nèi)容包括:(PHP簡介與基本語法、mysql數(shù)據(jù)庫及sql語法、apache服務(wù)器與集成開發(fā)工具、PHP鏈接數(shù)據(jù)庫、PHP與AJAX交互、實戰(zhàn):留言板、登錄、注冊等)

          9、HTML5基礎(chǔ)項目

          內(nèi)容包括:(項目簡介、項目功能演示、項目劃分及框架、編寫HTML頁面結(jié)構(gòu)、設(shè)置CSS樣式、添加JS交互、可選框架:bootstrap、jquery、PHP等、項目調(diào)試及兼容、項目驗收)

          雖然HTML5前端薪資高入門門檻低, 但是俗話說得好:入門容易,精通難。HTML5前端開發(fā)的知識點繁多,要想真正掌握HTML5前端工程師開發(fā)技能,并非易事,因此什么時候也不要忘記多學(xué)習(xí),多思考,多練習(xí)。


          主站蜘蛛池模板: 亚洲日韩AV无码一区二区三区人 | 国产成人一区二区在线不卡| 麻豆国产在线不卡一区二区| 国产亚洲一区二区手机在线观看| 日韩a无吗一区二区三区| 无码精品人妻一区二区三区人妻斩 | 国产福利一区二区三区| 国产色综合一区二区三区| 免费一区二区三区在线视频| 爆乳无码AV一区二区三区| 精品爆乳一区二区三区无码av| 日韩一区二区电影| 精品国产一区二区三区免费| 精品乱子伦一区二区三区 | 久久久久久免费一区二区三区| 无码欧精品亚洲日韩一区夜夜嗨| 无码日本电影一区二区网站| 国产99视频精品一区| 国产精品亚洲午夜一区二区三区| 久久久av波多野一区二区| 精品乱人伦一区二区三区| 亚洲综合av永久无码精品一区二区 | 农村乱人伦一区二区| 人妻AV一区二区三区精品 | 日韩视频一区二区在线观看 | 97精品国产一区二区三区| 日本免费一区二区三区 | 国产一区二区精品久久91| 国产精品熟女视频一区二区| 国产精品亚洲一区二区三区久久 | 日韩视频在线观看一区二区| 青娱乐国产官网极品一区| 日本在线视频一区| 精品无码综合一区| 亚洲AV乱码一区二区三区林ゆな| 午夜DV内射一区二区| 午夜福利av无码一区二区| 国产精品香蕉一区二区三区| 在线一区二区三区| 亚洲性日韩精品一区二区三区| 中文字幕不卡一区|