整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
个留言板小demo，题目来自 《Vue.js实战》第九章 9.7实战：留言板。
有人想看源码，源码已上传GitHub
GitHub地址 https://github.com/zhaiyifei/VueDemo.git
头条怎么插超链啊（捂脸）
看下需求：
Vue组件模板有3种书写形式：
这个小demo 就使用简单的 script标签方式来写vue组件模板啦。
先看一下成品展示：
制作动态页：
抽象出组件：抽象出三个组件 input组件，textarea组件，留言列表组件
input组件
编写模板
注册组件
使用组件
textarea 和留言列表组件：
注册组件：
使用组件
2.填充数据：
使用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
username 和 message 数据属性 保存输入的值.
v-model是语法糖，对inout事件的包装，相当于：
发布功能：
发布公能是 拿到输入的 昵称(username) 和 留言内容(message)，填充到 留言板列表中。昵称和留言内容分别在 v-input 和 v-textarea组件中，而 按钮在 根组件中，与v-input和v-textarea为兄弟关系。 所以我们将 昵称 和留言 提取到 v-input v-textarea的父组件——根组件中。
通过 v-model指令，将昵称 和 留言内容，绑定到对应的子组件上去。
将v-model的值 绑定到 子组件中props中的 value属性上。父组件通过props向子组件传递数据。
在子组件中使用组件上v-model指令绑定的数据，input和 textarea标签需要使用，所以：
修改input标签元素，并删除v-input组件中的 data属性，这个不需要了：
将 props.value 绑定到 input元素的value属性上 :value 指向input元素的value属性。”value" 中的value指向 props中的value。input元素上 监听input事件。input事件调用父组件的input事件来更新值。
对比一下可以发现v-model指令使用在html标签上 和 使用在 组件之上是不一样的。当v-model指令 用在组件上的时候，跟用在DOM元素上的使用方式并不一样，在DOM元素上使用v-model时，Vue帮我们实现了语法糖。在组件上使用v-model，Vue帮我们实现了一半的语法糖，剩下一半需要我们自己实现 。
其实就是这样 ：
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 方法触发 父组件(根组件)注册到子组件上的input事件，调用updateUsernameEvent来修改 username属性的值
看下效果：
v-model指令语法糖的形式如下：
子组件：
子组件还可以简写成这样：
对比一下 可以发现 在组件上使用v-model指令时，Vue帮我们实现了一半的语法糖 ：
v-model指令语法糖形式
没用使用v-model指令语法糖形式 ：
子组件中 Vue没用帮我们实现语法糖，所以我们需要我们自己实现：
v-textarea组件同样如此。
点击发布按钮，将 username 与 message 存储到 留言列表中 ：
做一些验证判断，将 username 与 message 存储到 留言列表中，并清空输入内容。将handleSend方法注册到 button标签元素的点击事件上。
使用push将数据插入数组中来触发视图更新。一定不要使用不能触发Vue视图更新的方式来修改更新数组！
Vue 不能检测以下变动的数组：
数组更新检测Vue官方文档 列表渲染 一节中有详细的介绍
渲染留言列表：
绑定留言列表 list到 留言板v-list组件上：
注册v-list组件：
使用v-for渲染留言板：
效果如下：
回复功能：
回复同样也是 将回复信息储存到留言列表中，所以将回复公能也放到 根组件中；
将handleReply方法注册到 v-list组件中的 reply事件上。
通过点击事件来触发 reply事件
点击回复按钮时候，我们需要触发input标签的焦点事件。我们怎么拿到 input标签元素呢？可以给 input标签做一个 标记：通过ref属性拿到所标记的元素或者组件实例：
通过 Vue的 $refs实例属性来访问 注册过 ref 特性 的所有 DOM 元素和组件实例。 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
通过 Vue的$refs实例属性来访问 input标签元素，并触发其焦点事件。$refs实例属性 只能访问 当前组件作用域内的（组件html模板内部） ref标签，无法被外部访问，父组件也不可以。
无法访问
因此我们需要先拿到子组件，然后在通过子组件去拿着子组件中ref标记的html元素标签。
给子组件加一个 ref标记：
通过 refs拿到子组件实例，调用子组件中的方法：
子组件通过 refs 拿到作用域内的 ref标记，（input标签元素）并触发焦点事件
看下效果：
在增加一个删除留言的功能：
注册到子组件的 delete事件上：
通过点击事件触发 注册的 delete事件：
看下效果：
好了 一个简单的留言板功能我们实现完了。
题目的、意义及研究现状：
研究的背景目及意义:
以往，农民将农产品进行生产，为了将其转化成商品，就必须将其向集散地进行运输，产品销售的成本非常高。现在通过建立网站，能够使农民、商人不出门就可以在市场上进行交易，产品也不需要运输。网站不单单能够发布、查看信息，同时还可以进行交易等，用户利用网络能够将传统交易中的采集信息、市场调查以及技术咨询等工作直接完成，科学的网站结构，能够使商人以及现代农民的需求有效地得到满足。
研究枸杞农产品信息网有极其重要的现实意义。一是通过对枸杞子农产品信息网的了解及相关技术以及功能是研究，提出了对枸杞农产品网站功能进一步优化，促进枸杞农产品信息网的实现。二是有效地破解了销售环节的信息不对称的问题，避免因信息获取上的不一致而造成交易过程中的不公平、不合理。充分利用互联网优势将农产品的详细信息通过网络扩散到各地，使农产品交易打破了传统的地域限制。三是降低了交易过程中成本的支出，减少中间环节，消除部分运输成本、店面成本，节约人力，消除代理之间的差价。实现了买卖双方的互利共赢，也推动了我国农业产业的发展。
研究现状:
国外，一些发达国家的电子商务研究要比中国起步早很多，特别是美国作为全球电子商务发展最早的国家，一度引领农产品电商研究的发展趋势，目前来看也是农产品电商研究领域的佼佼者，这主要得益于美国在信息技术方面发展的良好基础和独特优势。据资料显示，美国的农产品网站已经超过800个，之前的传统农产品公司也在逐步实现转型发展，向线上化趋势靠拢。在此基础上，电子商务逐步建立一体化运行机制，农产品电商研究有了更多的实践成果。
当前中国农产品电子商务发展有了一定的成绩，但也存在不少问题。第一, 农产品电子商务交易平台建设还不完善。因为信息网络技术的普及程度还低,很多偏远地区的农村还依赖于电视或固定电话获取信息,造成信息不流畅,物流供应链不健全。第二,农户对农产品电子商务的认识还处在初级阶段。因为教育程度参差不齐,农户对网络发展的信息滞后,造成了主体上的思想落后，跟不上网络经济时代发展的步伐。第三,农产品电子商务的法律法规还不健全。就目前来说，农产品电子商务的发展正处在初步阶段，不免会有法律上的漏洞，而网络犯罪的猖獗给不法分子提供了可乘之机,出现了网络诈骗现象,打击了农户的积极性。
研究内容：
本网站按照用户类型可分为普用户端及管理员端
用户模块包括：
1. 商品信息模块：该模块分为商品信息显示、商品信息查询。可查询商品，而且可以查看商品的详细信息，剩余数量、介绍等。
2. 会员信息模块：该分为会员登陆、会员信息修改，以及会员注册。用户输入登录名和密码进行登录，如果用户名和密码错误则无法登录。
3. 购物车模块：用户登录后就可以购物，可以把商品加入到购物车，或者把商品从购物车删除，如果商品数量为0则无法加入到购物车。
4. 订单模块：用户把商品添加到购物车后即可提交订单，订单提交后用户可以进行付款。用户可以查看自己的订单。
5. 留言板模块：留言板可以添加留言和删除留言
管理模块：
1. 商品管理模块：管理登录后台后可以对商品种类进行添加、删除。添加时如果商品种类已经存在会提示添加错误。
2. 订单管理模块：管理员可以查询订单，查看所有订单信息
3. 用户管理：管理员可以查询用户信息，管理用户信息。
4. 系统管理：管理员可以修改登录密码，安全退出。
5. 留言板管理：审核留言，删除恶劣留言
本网站采用JavaWeb、JavaScript、HTML、CSS等技术，整理规划网站中的每个功能，合理的网站的整体布局。利用JSP、HTML、CSS和JavaScript脚本编写代码，B/S框架进行编写，即Browse/Server（浏览器/服务器）架构，让网站整体布局合理，美观大方。
3．工作计划和进度安排
起 讫 日 期： 工 作 内 容：
第一阶段：（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搜索架构的网络购物平台的设计与实现[D].东南大学,2021.DOI:10.27014/d.cnki.gdnau.2021.001016.
[3]朱成. 基于Java的网上购物系统的设计与开发[D].南昌航空大学,2019.
[4]黄远洋. 基于HTML5和CSS3的响应式Web的设计与实现[D].华北电力大学,2018.
[5]张昭.大理非遗博物馆网页设计研究[D].昆明理工大学,2019.DOI:10.27200/d.cnki.gkmlu.2019.001314.
[6]徐智宇. 基于B/S架构的工具管理系统设计与实现[D].北京交通大学,2021.DOI:10.26944/d.cnki.gbfju.2021.003272.
[7]赵智. 基于SpringBoot的某综合训练平台成绩分析与预测系统设计与实现[D].浙江理工大学,2021.DOI:10.27786/d.cnki.gzjlg.2021.000251.
[8]宋宇. 黑龙江省坚果类农产品信息网设计与实现[D].大连海洋大学,2019.DOI:10.27821/d.cnki.gdlhy.2019.000177.
[9]任小旦.基于互联网下农产品电子商务网站的设计与实现.2018.浙江海洋大学,MA thesis.
于想从事IT工作的人们来说，HTML5前端开发是一个不错的切入点。学习的门槛低，而且与后端语言相比，前期没有那么多抽象的知识需要理解，HTML5的学习曲线是先快后慢的。
青岛HTML5
对于HTML5零基础的人员来说，可能看到一开始有许多的知识点，就会觉得基础知识很多、很难学，其实只要规划好了一条学习路线，学习的时候更有针对性，HTML5远没有看起来那么难，知识点也没有你想的那么复杂。
1、HTML5介绍
内容包括：(互联网发展趋势、HTML5语言的优势、简单易学人人都能编程、H5就业和薪资情况、HTML5常见的项目与产品、HTML5的未来与方向)
2、HTML基础
内容包括：(HTML简介与历史版本、常用开发软件、常见标签与属性、表格与表单、标签规范与标签语义化、实战：网页结构布局)
3、CSS基础
内容包括：(CSS简介与基本语法、常见的各种样式属性、CSS选择器与标签类型、理解盒子模型与CSS重置、浮动与定位、利用PS工具测量样式、HTML+CSS开发网页、实战：仿电商首页效果)
4、CSS3基础
内容包括：(CSS3常见样式、CSS3选择器、变形与动画、3D效果与关键帧、弹性盒模型）
5、移动端布局
（移动端基本概念、viewport窗口设置、移动端布局方案、rem、vh、vw等单位、响应式布局、bootstrap框架)
6、JavaScript基础
内容包括：(JS简介、JS变量、数据类型与类型转换、运算符与优先级、流程控制-if..else流程控制-switch...case、流程控制-while、do..while、for循环、break、continue语法、函数定义与调用、全局变量与局部变量。还有函数传参与返回值、函数作用域与变量作用域、DOM的基本操作、定时器使用、this指向与修改指向、数组、字符串等方法操作、时间对象与正则对象、掌握常见BOM操作、常见事件与事件细节、JSON与AJAX、JSONP跨域操作、前端cookie的使用、实战：JS配合HTML与CSS完成电商项目)
7、jquery框架
内容包括：(jquery框架介绍及优势介绍、jquery核心思想、jquery常见方法、jquery动画操作、jqueryAJAX操作、jquery工具方法、利用jquery快速开发网页)
8、PHP基础
内容包括：(PHP简介与基本语法、mysql数据库及sql语法、apache服务器与集成开发工具、PHP链接数据库、PHP与AJAX交互、实战：留言板、登录、注册等)
9、HTML5基础项目
内容包括：(项目简介、项目功能演示、项目划分及框架、编写HTML页面结构、设置CSS样式、添加JS交互、可选框架：bootstrap、jquery、PHP等、项目调试及兼容、项目验收)
虽然HTML5前端薪资高入门门槛低， 但是俗话说得好：入门容易，精通难。HTML5前端开发的知识点繁多，要想真正掌握HTML5前端工程师开发技能，并非易事，因此什么时候也不要忘记多学习，多思考，多练习。
*请认真填写需求信息，我们会在24小时内与您取得联系。
