到了信息时代,我认为我们大概可以用八个字来概括——万物互联,人工智能。万物互联就是上面铁民说的“智慧温室”里的上百个传感器,我认为还不够,未来会有更多的传感器,比如说摄像头,可以去看植株长到什么时候,掉了几片叶子……都可以自动识别,判别它处在哪个生长周期,需要什么样的营养。
另外一个就是人工智能,也就是我们未来要做的“种植大脑”,这个大脑可以输出给到更多温室,这个大脑的计算之下调控所有的温室,这些数据又累积在一个平台之上,这将产生更大的价值。
涂雅芳:因为农产品有层层经销的概念,其实所谓的To B的包装,C端消费者其实是接触不到的。能够产生消费者记忆的我们才称之为品牌,一个品牌的建立有几个阶段:认知、好感、忠诚等等,所以其实现在的To B包装其实还没有建立C端消费者认知,我觉得换不换名字不是一个大问题。
马铁民:我觉得To B不存在品牌,可能商超知道你,同行知道你,但是消费者对你没有记忆,消费者在消费的时候是冲着你的品牌特性去的,所以核心还是产品打造,你叫什么名字我觉得不是最重要的,也不是决定性因素。
第一章 总论 1.1项目单位基本情况 1.1.1概况 XX市XX兔业有限公司成立于1998年,是XX市唯一一家集种兔繁育、养殖、技术服务、商品兔回收、加工、销售于一体的农业产业化民营企业。公司占地面积126亩,总资产835.07万元,下设6000笼位的种兔繁育场一座,规模化商品兔养殖基地5个,500吨规模肉食品加工厂一座。拥有专家教授加盟的技术研发队伍,常年致力于良种兔的培育和肉食品的研制开发,初步形成了集科、工、贸于一体的现代化企业格局。主营业务为:种兔、家兔养殖及养殖技术服务,肉及肉制品加工、销售,蛋制品加工销售。主导产品为:“益力康牌”兔肉风味系列产品和乡巴佬鸡。产品以其独特的风味和一流的质量,远销全国二十多个省(市,区),深受广大消费者青睐。公司现有员工96人,其中专业技术人员7名,管理人员9名。2007年1月,获得全国工业产品生产许可证(QS认证);2007年5月被XX市政府授予“守合同重信用企业”;2007年9月,获“全国消费者首选放心肉”证书;2007年11月通过河南省无公害畜产品产品产地认定;2008年被评为“河南省百佳民营企业”;2008年10月获得ISO22000食品安全管理体系认证证书;2009年6月通过ISO国际质量管理体系认证;2008年5月被XX市人民政府命名为农业产业化重点龙头企业;注册的“益力康”商标,被认定为“河南省著名商标”,2009年6月,被中国国际名牌发展协会、中国品牌企业联合促进会授为“中国著名品牌”,同年8月,授予公司“中国诚信企业500家”荣誉。2008年,中央电视台七套(致富经、科技苑)专题报道企业栏目以《小兔子,大产业》为题对XX公司2008年跨越式发展进行了专题报道。 法人代表:xxx,男,汉族,现年46岁,大专化程度,现任XX市XX兔业有限公司总经理。xx同志原籍XX县太和乡,1986年在湖北省潜江市江汉油田参加工作,在油田从一名普通的工人做起,工作积极,吃苦耐劳,踏实能干,在油田所属的多个企业历任车间主任、厂长、经理等职。由于该同志思路清晰,擅长管理,勇于创新,所领导管理过的企业无一亏损,年年被评为先进企业。1994年,为谋求更大的发展,该同志辞去正科级领导职务,下海到深圳从事进出口贸易业务。2003年为回报家乡,他回到XX县发展壮大了XX市XX兔业有限公司,并在公司任总经理至今。近十年来,xxx同志凭着务实苦干,艰苦创业的拼搏精神,通过开拓市场,灵活经营,强化管理等一系列措施,使企业一步步发展壮大,资产由原来的50万元发展到今天的800多万元。由于公司在发展农村经济,带动农民致富方面成绩突出,被XX市政府授为“农业产业化重点龙头企业”。为扩大生产规模,加快企业发展步伐,最近,xxx同志决定投资2000多万元,新建高标准食品加工厂一座。项目投产后,可使企业经济效益有一个大的跨越,也将为发展XX县畜牧产业,促进农村经济的快速发展做出更大的贡献。 法人代表xxx和XX市XX兔业有限公司无破产、银行欠资或其他有关社会形象和诚信问题。 1.2项目基本情况 1.2.1项目名称、建设性质及建设地点: 项目名称:年产2500吨兔肉蛋制品深加工生产线建设项目 建设性质:扩建 建设地点:河南省XX县产业集聚区 1.2.2产品方案及规模: 达产年份(3年后):年加工兔肉、蛋制品2500吨,其中:“益力康牌”酱卤兔肉制品2000吨,“乡巴佬牌”蛋制品500吨。 第一年(项目建设期):在原厂维持现有生产规模,设计生产负荷20%,年加工兔肉制品400吨、蛋制品100吨; 第二年:设计生产负荷50%,年加工兔肉制品1000吨、蛋制品250吨。 产品特点:营养丰富,风味独特,安全可靠,食用便捷。 1.2.3品种、技术、设备方案: 主要品种、技术及来源的可靠性、可得性: 主要品种:“益力康牌”兔肉风味系列产品和乡巴佬鸡蛋。原材料均来源于无公害生产基地,质量安全有保证。 技术:公司自行研发能力强,经验丰富,已获得ISO22000食品安全管理体系认证、ISO国际质量管理
map的返回值为一个数组,数组的内容由回调函数确定。
map的参数为一个有返回值的回调函数,返回值即为map函数将要返回的数组的元素。
将图标加入到项目文件夹下。
使用live插件打开。
单项数据绑定(简写为:)
Vue中有2种数据绑定的方式:
1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。
1.双向绑定一般都应用在表单类元素上(如:input、select等有value属性的值)
插值语法管理标签内容,指令语法管理标签。
相比于直接在对象中写属性,Object.defineproperty()给对象添加的属性可以添加很多限制,例如增删改的限制。
需要传参数可在函数名后加括号和参数。不写$event是没有event事件的
捕获到就触发事件而不等到冒泡再触发。
箭头函数this不指向vue实例而是指向window。
vue的data里面的内容就是这里说的属性。
计算属性在computed里面,每个属性写成一个对象。虽然写成一个对象,但存到vm的是计算好的属性,而不是一个对象。
使用时也是使用插值语法。
案例:以下的fullName是一个计算属性,使用属性经过计算的到的,使用get监听,一旦其依赖的属性发生改变,fullName也将改变。
当确定计算属性只读不写时可以不写set,否则必须要写。
缓存:多次读取 fullName,第一次读取会计算 fullName,之后的读取都是读取缓存,fullName发生改变将更新缓存,因此缓存始终与最新的fullName保持一致。
不能开启异步任务,例如定时器,因为需要返回一个值,而使用定时器返回值将返回给定时器,而不返回给计算属性。
而监视属性可以,因为监视属性不靠返回值实现修改fullName的值。
配置方式和计算属性相似。
加参数,可以获得旧值和新值。
一定要使用箭头函数,因为定时器的回调不是属于vue管理的,而属于js引擎。不使用箭头函数this将指向window。
而箭头函数没有自己的this,因此this还是指向vue实例。
样式的类名不确定,需要动态绑定。
如果有多个样式对象,可以将多个样式对象放在一个数组里给style。这个办法不常用。
从上往下判断条件,找到符合条件的后就不再往下找了。
这几个要连着写,以下情况是不行的
使用场景,几个h2标签的判断条件相同,不用写三个v-if。这样写之后页面渲染时会把template标签去掉,保留三个h2标签,同时保留v-if的效果。
p和index分别是数组元素和索引。
value和k分别是值和键,例如’奥迪A8’和name。
使用index作为key会出现问题。
关键是虚拟DOM对比这一步。
使用id作为key就不会出现这种问题,
updateMei绑定在一个按钮上,但是点击按钮列表没有改变。
原因,直接修改数组元素,vue是监测不到的,要使用vue提供的方法对数组进行操作。
vue对数组元素的监测是通过包装数组的方法实现的,实现基本功能的同时加入了重新解析模板的步骤,将触发视图更新。包装的方法有以下几个。
对对象的监测是通过分配getter和setter实现的。
v-model.trim用于去掉输入框内首尾空格。
v-model.lazy当input框失去焦点时触发事件,vue更新读取到的数据。
过滤器不写括号也会传入参数,参数为value,多个参数时value是第一个参数。
可以用在插值语法(常用)和v-bind(罕见),其他不可用
dayjs是一个格式化时间戳的库(插件),可以在bootcdn官网查看和下载。
局部过滤器,只有vm绑定的元素可用:
向其所在的标签添加文本。添加的文本会覆盖标签原有的内容。
不能添加标签,会解析成文本。
和v-text相似,但是可以解析标签。
解决网速慢未经解析模板显示问题。当vue.js加载完接管容器之后这个v-cloak会被移除。
将标签作为普通标签,不会解析vue语法,直接渲染。加快编译。
使用函数的方式定义指令,big()两个参数分别是操作的元素和big指令这个对象,其中big对象的value是n的值。
v-big何时被调用?
以下代码不好使,因为指令执行时模板还未渲染到页面,因此当页面显示时input框并未获得焦点。
如何解决?当vue把元素放入页面之后给input框焦点。此处就要使用对象式定义了。
对象式中可以写成很多个函数的形式,
指令内vue根据不同时间节点提供了不同函数可以在不同时间节点做不同的事。不同函数都能收到两个参数,即element元素和binding绑定对象。
(1)命名:使用时多个单词用 -
分隔。定义时多个单词还用 -
分隔,但是要加 ''
。一个单词可以简写不用''
。
哪个浏览器存的cookie只能哪个浏览器用,不能跨浏览器。
概念:在vue实例的不同时间节点调用的函数。
vue的生命周期流程图
红色框内是不同时间节点的生命周期函数名。
vue将初始的真实DOM第一次挂载到页面上之后。只调用一次。
不会因为模板再次解析而被重复调用。
组件:用来实现局部功能效果的代码集合。
缺点:样式不能写在组件里面。
不能写el,data要写成函数形式。
所有vue实例都能用。
(3)使用组件,编写组件标签
(1)可以写多个相同组件标签,即可以复用。
(2)组件改变不会影响其他组件
单个单词:建议全部小写,也可以首字母大写,开发者工具中呈现的都是首字母大写的形式。
多个单词:官方推荐单词间使用-
连接,外加''
,
开发者工具显示是这样的
第二种书写方式是直接连接,首字母全部大写,需要在脚手架里面使用,否则会报错。
(4)在定义组件时添加配置项name
指定开发者工具中组件的名称,首字母还是会自动大写。
注册的组件名称不会改变,引用的组件标签也不会改变。
以下代码输出为true。
html页面,包含容器
render用于渲染使用精简版vue的页面,使用精简版vue空间小但是没有模板解析器,不能渲染 template 模板,不能使用 template 配置项。
只有创建 vm 的时候需要使用render,其他vue文件中的template还是可以使用。
下面的语句是引入组件和创建一个h1
标签需要两个参数,分别为标签类型和内容。
vue中有ref属性,用来替代id属性。
props接收的数据不建议更改。
Student.vue限制接收的数据的类型,age仍然可以接收string但是会输出警告提示。
如何修改props接收到的数据?不直接使用props接收到的数据,复制一个到data中,修改data中的数据。
可以将公共的配置项放入混合里面,复用配置,减少组件的代码量。
混合是一个.js
文件,里面可以放各种配置。
如果配置项在混合里面和组件的配置项里面都存在,会进行整合,如果冲突则以组件的配置项为准。
对于生命周期钩子,如果冲突则两者都要,混合的在前。
全局混合,所有vm、vc都会挂载。
插件放在一个.js
文件中,方法定义在install里面,install接收到的第一个参数是Vue的构造函数。
引入插件的时候可以传入参数交给插件处理
当不同组件类名相同时采用后来居上的策略,加上scoped之后限制样式的作用域为本组件,不会影响其他组件。
自定义事件也可以使用事件修饰符。
实现子组件向父组件传递数据的自定义事件。
简写形式,将v-on:
换成@
。
第二种绑定自定义事件的方式:
这种方式更加灵活,可以设置定时器。
在Student
组件设置触发atguigu
事件的方式,并将所需的数据,即name
作为事件的参数,getStudentName
作为atguigu
事件的回调将收到atguigu
事件传回的参数。因此完成了子组件向父组件传递数据。
销毁组件实例后,自定义事件将失效。原生事件将不受影响。
MyFooter
是一个组件标签,下面代码并不能给组件绑定一个原生的click
事件,vue将其解析为自定义事件。
以下代码会将click
解析为原生事件,绑定在组件的根元素,需要加native
事件修饰符。
核心思想是在vue
原型对象上绑定一个vue
实例对象,该vue
实例对象可以和各个组件通信,通过自定义事件的方式传输数据。
还是使用自定义事件的方式。
School
组件绑定事件。
School
组件销毁的时候解绑事件。
student
去触发hello
事件,hello
事件的回调函数将数据接收,School
组件就接收到数据了。
发送方:hello
是消息名,发送方与接收方应保持一致,666
是发送的消息。
组件化编程,使用了很多小技巧。
使用了自定义事件实现 数据子组件=>父组件
。
使用全局事件总线实现 数据子组件的子组件=>父组件
。
其中hello
是动画名,appear
属性默认为true
,页面加载完就有动画。
需要使用transition-group
包含,且为每个元素设置一个独一无二的key
。
将以下固定的类名放入name
中
选择动画,可根据需要选择,复制类名添加即可。
解决跨域问题需要后端人员配置cors
头部信息。
还可以使用代理服务器,前端和代理服务器交互,而代理服务器与目标服务器交互,因为服务器之间不会收到跨域的限制,因此可以解决跨域问题。
需要编辑配置项,而修改配置文件 vue.config.js
需要重启脚手架才会生效。
这种方式只能开启一个代理服务器,且会有一个问题。
在vue.config.js
中添加如下代码,注意5000
这个端口是目标服务器的端口。
一个代理服务器就开启了。
axios.get 请求发送给代理服务器,当代理服务器中有所请求的数据时将直接返回数据,而不会去请求目标服务器。
代理服务器拥有的数据是 public 中的数据。
可配置多个代理服务器。
同样在 vue.config.js 添加代码,以下代码中的/atguigu
是前缀,发送请求时在端口号后添加前缀,将不使用代理服务器的数据,代理服务器会将请求发给目标服务器。
changeOrigin为true时,代理服务器将告诉目标服务器自己的端口号和它一样,即5000;为 false 时将如实告知目标服务器 自己的端口号为 8080 。这个配置项不写默认为 true 。
./foo是另一个代理服务器。
在 app.vue 的组件标签中填入红色框中内容,作为插槽的使用者。
对应的组件用 slot 接收 app.vue 传过来的内容,slot用于确定传过来的内容的位置。
如果没有传过来内容,则显示 slot 标签的内容。
给slot标签一个 name
属性,指定一个名字。
组件标签中的元素加上slot属性,值为slot的name,就可指定元素的插槽。如下代码 img 将放在 name="center"
的插槽。
插槽的使用者要使用的数据在插槽所在的组件。
接收插槽提供者的数据,需要配置 scope
属性,名字可随意起,作为接收数据的对象,之后就可以使用插槽提供者的数据了。
vuex作为中间人,可以和任意组件通信,将数组存在vuex的state中,任何组件都能使用。
需要state中的名字和结构中的名字相同。
不同组件使用的配置分开写,开启命名空间。
不借助map的写法。getters中数据的读取
实现路由切换,router-link 渲染时会生成 a 标签。
配置子路由,需要注意的是子路由的 path 不用写 /
。
引用:to 里面路径要写两级
在子路由组件中使用参数
路由配置中使用如下方式占位,声明接收参数。
路径过长时可简化路由跳转。
分别控制页面的后退和前进。
go可以一次前进多步或后退多步,如下是连续前进3步,参数为负数则后退。
为何需要缓存,有时在 input 中进行了输入,到别的组件再回来希望输入还在。
include="News"
表示只缓存名称为 News
的路由组件,News为组件名而不是路由名。不写 include
则在该展示区的组件都将缓存。
时间点分别为切入和切出路由组件。
简化写法,在路由配置项增加自定义属性。
需使用meta
配置项添加自定义属性。
可以修改一些信息,例如网页标题
独享路由守卫只有前置守卫没有后置守卫。
有两个时间点,都需要调用next放行,beforeRouteLeave 和 后置守卫不同,是在离开时调用。
通过路由规则进入才会调用,直接使用组件标签不会调用。
最好引入时使用按需引入,减小代码体积。