Ionic项目实战 (7)教学课件

1、企业级卓越人才培养（信息类专业集群） 01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标 学习目标学习目标010203了解Ionic程序和后台交互的流程学习Postman、Express、MonogoDB的安装及使用掌握MonogoDB的使用学习目标 通过Ionic服务器模拟环境搭建的学习，了解Ionic程序和后台交互的流程，学习Ionic服务器中P o s t m a n 、 E x p r e s s 、MonogoDB的安装及使用，掌握MonogoDB的使用，具有搭建Ionic服务器环境的能力。04具有搭建Ionic

2、服务器环境的能力企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径 学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01 情境导入 02 功能描述03 基本框架 04 开发环境 任务描述任务描述企业级卓越人才培养（信息类专业集群） 情境导入情境导入至此，以舞蹈为背景的Dancer时代界面设计大体完成。但项目负责人小李和他的开发团队并不满意界面内容固定。因此，在本模块中介绍了调用服务器后端的API接口。通过API接口与数据库相连，及时更改数据，做到界面内容实时更新，极大的程度吸引用户。本模块主要通过实现Dancer时代与后台数据交互了解MongoD

3、B数据库安装与测试。企业级卓越人才培养（信息类专业集群） 功能描述功能描述使用AJAX实现接口的调用 01 02 03使用AJAX实现接口的调用使用Mongodb进行数据的存储企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能01020304任务技能Postman安装与使用示例使用Express初始化创建API示例MongoDB安装与测试使用Mongoose完善数据持久化使用案例05简介1安装2使用说明3一般来说，所有的HTTP Request都分成URL、 method、headers和body4个部分。而Postman针对这几部分都有针对性的工具界面。第一步：打开官网（htt

4、ps:/）下载postman插件 第二步：点击打开下载好的Postman 第三步：在Postman里面输入需要测试的接口地址 Postman安装与使用示例安装与使用示例（1）发送一个GET请求：比如向百度发送一个搜索请求。进入到postman界面中，选择GET请求，把百度网址在输入框中输入。输入完成之后，然后进行点击send。（2）发送POST请求：POST表单提交，设置了请求方法、URL、参数，但没有设置请求头。企业级卓越人才培养（信息类专业集群）安装1工程结构2工作原理3第一步：安装express。 第二步：使用命令新建项目，项目名称为bloo。第三步：进入项目并安装相关依赖。 第四步：启

5、动express。第五步：在浏览器中输入http:/localhost:3000/，并查看输出结果。app.js：启动文件。package.json：存储着工程的信息及模块依赖。node_modules：存放 package.json 中安装的模块。public：存放 image、CSS、JS 等文件。routes：存放路由文件。views：存放视图、模版文件。bin：存放可执行文件 使用使用Express初始化创建初始化创建API示例示例Express的工作原理是routes中存放路由文件，views中存放视图文件,而 index.ejs 文件中的 是 ejs 模板引擎的语句，可以将后台传递

6、来的 title 数据在页面中显示。使用Express大大减少了代码函数，而且逻辑更为简洁，所以使用Express可以提高开发效率并降低工程维护成本。企业级卓越人才培养（信息类专业集群）简介1安装和服务的启动2数据库管理3MongoDB 数据库旨在为 Web应用提供可扩展的高性能数据存储解决方案，它在多种场景下可用于替代传统关系型数据库的键/值存储方式。具有高性能、易部署、易使用、易存储等特点。第一步：下载msi 文件。第二步：下载后双击该文件进行安装。第三步：指定一个文件夹存放数据。第四步：配置Mongo服务端。第五步：在命令提示符输入 mongo命令。第六步：在浏览器输入http:/loc

7、alhost:27017/ MongoDB安装与测试安装与测试（1）数据库操作：创建数据库、添加数据库、删除数据库、查看数据库、查看数据库名。（2）集合操作：创建集合、查看数据库里的集合、删除items集合。（3）文档操作：文档具有增、删、改、查等操作。企业级卓越人才培养（信息类专业集群）1Mongoose是一款易于使用的Web服务器，它可以嵌入其它应用程序中，为其提供Web接口，是一个将JavaScript对象与数据库产生联系的框架。使用Mongoose可以新建数据库、新建集合、对集合内的文档进行CRUD操作，其提供了Schema、Model和Document对象，使操作更加方便。使用使用M

8、ongoose完善数据持久化完善数据持久化数据持久化企业级卓越人才培养（信息类专业集群）1第一步：安装Mongoose第二步：修改 app.js第三步：定义一个Schema 使用案例使用案例使用案例企业级卓越人才培养（信息类专业集群）05 05 任务实施任务实施输入标题第一步：创建node项目，编写验证手机号是否存在的接口、注册接口第二步：创建注册界面并制作，添加ajax进行数据的交互第三步：编写登录接口第四步：在登录界面添加ajax进行登录接口的调用点击输入说明文字 任务实施任务实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务总结任务总结任务描述任务描述 本项目通过Dancer时代前端和后台的数据交互的实现，对Ionic程序和后台交互的流程具有初步的了解，并详细了解Ionic服务器中Postman、Express、MonogoDB的安装及使用，具有了搭建Ionic服务器环境的能力 任务总结任务总结企业级卓越人