MySQL实用教程(新体系.综合应用实例视频)(第4版）-网络文档-P2第2部分.docx

MySQL MySQL实用春程（新伟家?实州從频*'新）（第4版） MySQL MySQL实用春程（新伟家?实州從频*'新）（第4版） P2.3系统架构及开发工具中间件后端DB服务器 P2.3系统架构及开发工具 中间件 后端 DB服务器 第2部分Vue/ElementUI+SpringBoot前后端分离开发 P2.3.1系统架构 从本节开始正式开发"为华直购”网上商城的商品管理系统，用Vue+ElementUI作为前端界面开 发的框架，用SpringBoot+MyBatis整合的JavaEE作为后端开发框架，后端程序按JavaEE企业级应用 标准分层开发，经MyBatis访问MySQL数据库，前后端之间通过HTTP请求中间件Axios进行交互, 整个系统的架构如图P2.ll所示。这是目前普遍釆用的互联网应用管理后台开发模式，便于团队协作 开发大型系统。 fflP2.11前后端分离的JavaEE系统架构 要制作出一个基于Web页面的商品信息表单，实现网上商城商家在后台对商品信息的增加、修改、 删除、查询等管理功能，页面的基本样式如图P2.12所示。 商品广告（与仑挽） 图P2.12商品管理页面基本样式 P2.3.2开发工具 在前面第1部分开发环境的基础上，添加安装Vue相关的开发工具。 1 .安装 Node.js Vue框架的运行离不开Node.js的支持，故安装Vue之前要先安装Node.js。 （1） 访问Node.js官网ht^）s:///zh-cn/,打开Node.js的下载页面，有"长期支持版"和"当 前发布版”，一般选择"长期支持版”，下载文件名为node-vl4.15.l-x64.msi。 （2） 双击启动安装向导，如图P2.13所示。按照向导提示完成安装。如果想节省时间，可取消如 图P2.14所示选项的勾选，不安装附加组件。 图P2.13 Node.js安装向导 图P2.14可取消安装附加组件 （3）验证安装是否成功。 安装Node.js的时候会同时安装一个名为npm的组件，它在前端开发中很重要，基本上安装任何 MySQL MySQL实用春程(新伟家?实州從频*'新)(第4版) 实习2 Spring Boot+MyBatis/MySQL幵或&实例 间上髙儀育品管理 第三方组件都离不开它。打开Widows命令行窗口，验证它们是否安装成功。 验证Node.js是否安装成功，执行： node -v 验证npm组件是否安装成功，执行： npm -v 如果分别显示两者的版本号，就表示以上安装都没有问题，如图P2.15所示。 ■命令提示符 - □ X Microsoft Windows [版本 10.0.18363.1198] (c) 2019 Microsoft Corporation.保权利. C:\Users\b0202>node -v vl4.15.1 Node.js 安装成功！ C:\Users\b0202>npm -v ? 叩m安装成功！ C:\Users\b0202|npm -g install npm|-? 更新npm C:\Users\b0202\AppData\Koaming\npm\npm -> C:\Users\b0202\AppData\Roaming\npm\node_modules\npm\bin\npm-cli. js C:\Users\b0202\AppData\Roaming\npm\npx -> C:\Users\b0202\AppData\Roaming\npn\node_modu1es\npm\bin\npx~c1i. js * npm€6. 14.9 added 435 packages from 887 contributors in 37. 298s C:\Users\b0202>npm ~v 6.14.9 C:\Users\b0202>. 图P2.15验证Node.j s及npm的安装 更新 npm。 验证成功后，执行如下命令将npm在线升级至最新版本： npm -g install npm 可再次用npm -v命令查看npm升级后的版本。 更新npm后，在C:\Users\v用户名:>\AppData\Roaming下就有了 npm和npm-cache目录，之后安 装的各个组件都会在npm\node_modules下生成对应的目录，如图P2.16所示。由于目前只有一个npm 组件，尚未安装其他组件，故只能看到npm这一个目录。 KAM > OS (Q > ffiP > b0202 > AppDau Roamtng 此％IS > OS(C:) > b0202 > AppData > Roaming > npm > ns sn A 各你 修改日购 ft? 5 Adobr 2