以后撷取过如前所述Vue的京东工程项目，那时再给他们撷取两个。那个工程项目较之以后的，介面更为漂亮，最重要的是轻松还原成了华为京东的介面，对自学和参照具备非常大的象征意义。

工程项目概要

本工程项目其间端分立，后端如前所述Vue Vue-router Vuex Axios Element-ui MySql，参照华为京东同时实现。后端如前所述Koa架构 Node.js同时实现。

后端包涵了11个网页：主页、登入、注册登记、货品详情页、有关他们、我的珍藏、全数货品、科季夫、订货清算网页、我的订货和consequences网页。

同时实现了登入、注册登记、使用者科季夫、货品的展现、货品进行分类查阅、URL搜寻货品、货品详细资料展现、订货清算、使用者订货、使用者珍藏条目和consequences机能。

控制技术栈

• 后端：Vue Vue-router Vuex Element-ui Axios
• 后端：Koa架构、Node.js
• 数据库：Mysql5.7

机能模块

登入

element-ui网页使用了的Dialog同时实现弹出蒙版对话框的效果，登入按钮设置在App.vue根组件，通过vuex中的showLogin状态控制登入框是否显示。

自定义了校验规则进行校验，使用者输入的数据往往是不可靠的，所以本工程项目其间端都对登入信息进行了校验，后端如前所述element-ui的表单校验方式。

注册登记

同样使用了element-ui网页的Dialog弹出蒙版对话框的效果，通过父子组件传值控制注册登记框是否显示，注册登记按钮设置在App.vue根组件。

自定义了校验规则进行校验，使用者输入的数据往往是不可靠的，所以本工程项目其间端同样都对注册登记信息进行了校验，后端如前所述element-ui的表单校验方式。

主页

主页顶部是轮播图，下方是热销货品的展现，底部是一些简单的菜单。

全数货品

全数货品网页集成了全数货品展现、货品进行分类查阅，和根据URL搜寻货品结果展现。

货品详情页

货品详情页主要是对某个货品的详细资料进行展现，使用者可以在这里把喜欢的货品加入科季夫或珍藏条目。

我的科季夫

科季夫采用vuex同时实现，网页效果参照了华为京东的科季夫。

详细同时实现过程请看：如前所述Vuex同时实现华为京东科季夫

订货清算

使用者在科季夫选择了准备购买的货品后，点击去清算按钮，就会来到该网页。 使用者在这里选择收货地址，确认订货的相关信息，然后确认购买。

我的珍藏

使用者在货品的详情页，可以通过点击加入 喜欢 按钮，把喜欢的货品加入到珍藏条目里。

我的订货

对使用者的所有订货进行展现。

Vue介绍

Vue是一套用于构建使用者介面的渐进式架构。与其它大型架构不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有工程项目整合。另一方面，当与现代化的工具链和各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Koa架构介绍

Koa架构是两个如前所述Node同时实现的web架构。

对比于Express架构，丢弃了回调函数，并有效地增强了异常处理。

丢弃回调函数是因为Koa使用Promise配合Async函数同时实现异步，解决了Node回调地狱的问题。 Express架构同时实现consequences是通过consequences中间件，这样把错误一层一层抛出来，交由consequences中间件处理；而到了Koa则是通过全局错误事件监听，这样把consequences写在最外层即可。

MySql介绍

MySQL 是两个关系型数据库管理系统，由瑞典 MySQL AB 公司开发的，目前属于 Oracle 公司。MySQL 是一种关联数据库管理系统，关联数据库将数据保存在不同的表中，而不是将所有数据放在两个大仓库内，这样就增加了速度并提高了灵活性。