软件接口设计方案_Java软件开发流程图

2024年 8月 29日下午11:26 • 激活谷笔记

14、WebGIS 从前端到后端：后台接口开发　　欢迎来到 WebGIS 入门系列的第十四篇文章！在本文中，我们将介绍如何利用 Node.js 来实现 WebGIS 系统开发时后台接口的开发知识，其中包括数据库初始化、数据表创建、后端接口程序初始化、Vue 项目中路由配置等。　　调整 Vue 项目路由配置　　调整 src 目录下 App.vue 组件中的代码，配置菜单跳转地址及 router-view 信息：　　在 src/views 目录下分别新建 MapView.vue 和 DataManageView.vue 组件：　　在 src/components 目录下新建 DataManage.vue 组件：　　优化调整 src/router 目录下的路由配置信息：　　界面预览如下所示：

Vue 项目路由配置　　优化 DataManage 组件　　在 src/components 目录下的 DataManage.vue 组件中拷贝下面代码，完善数据管理界面：　　界面预览如下：

DataManage 组件　　上述界面操作逻辑：左侧数据入库面板中依次填入相关信息后下方“提交”按钮，用户输入的信息数据会被提交到后台数据库中，此时右侧数据预览面板会更新，显示最新数据库中的数据。　　数据库初始化　　数据在前端界面被用户输入后，会经过后端接口程序，最终保存在数据库中，数据库可以安装部署在本地开发环境或远端服务器环境中。　　此系列文章中为了简化操作，在腾讯云租了一个 PostgreSQL 云数据库，所以省去了安装部署流程，如果想安装部署在本机或服务器的话，建议大家通过搜索引擎去寻找一些相关教程，无脑安装即可。　　数据库安装部署之后，接下来进行库表初始化。　　首先在 PostgreSQL 数据库管理面板中选择新建数据库，名称为“webgis”：

新建数据库　　然后选择新建的“webgis”数据库进入该数据库，在 public 模式下选择操作中的“新建表”，新建一份数据表，其结构如下：

新建数据表

数据表名称

数据表结构　　至此，一个名为“webgis”的数据库创建成功，里面又新建了一份名为“webgis_project_bilibili”的数据表，我们后续入库的数据就存放在此。　　后端接口程序初始化　　为了降低后端接口开发门槛，避免短时间内又学习一门新的开发语言，此系列的后端接口开发我们使用 Node.js，它是一个类似于浏览器的 JavaScript 运行环境，允许 JavaScript 语言编写的程序在浏览器环境之外可以运行，简单理解就是：Node.js 让 JavaScript 可以在浏览器之外运行成为了可能！　　Node.js 在使用之前必须要在本机安装部署，不过不用担心，我们已经安装部署过了，详见《6、快速上手：使用 Vue 3 创建您的第一个 WebGIS 地图》。　　在现有的项目根目录下新建 node 目录，然后通过 npm init 命令初始化一个后端接口程序目录，此时该目录下会出现一个 package.json 文件，里面包含当前后端程序的项目名称、版本号、作者信息等，以及后续我们安装的依赖包信息。　　运行命令 npm install express 安装 express 框架。　　新建 index.js 文件，将下述代码拷贝至此：　　通过上述操作，我们已经初始化了一个基础的后端接口程序，其中已经新建了一个路径为“/”的 get 类型接口，通过 node index 命令将其启动后，在浏览器地址栏中输入“http://localhost:3001/”，可以访问该接口：

Node.js 接口初始化　　GET 和 POST 接口开发　　GET 和 POST 接口逻辑中都涉及到从 PostgreSQL 数据库中数据和插入数据，所以后端接口程序中需要安装 pg 模块，通过命令 npm install pg 安装。　　在 node 目录下新建 routers 目录，然后该目录下新建 user.js 文件，在此文件中分别完成用户数据和插入接口：　　优化 node 目录下的 index.js 文件，在其中配置接口跨域、body数据解析、接口地址等信息：　　至此，接口开发工作已完成。　　DataManage 中数据插入和　　在 DataManage.vue 组件中，优化完善 onSubmit 方法：　　每次入库成功后，都需要重新一遍数据库中的最新数据，所以需要定义数据的方法 fetchData：　　界面预览如下：

数据入库及回显　　小作业：数据管理支持检索数据　　对于 WebGIS 系统中前端和后端开发流程全部介绍完毕，数据管理界面完成了数据插入和，但是在数据时并没有按条件去筛选，接下来继续优化 GET 接口，使其按接口传参来相应的数据，并在界面中增加条件筛选模块。　　结语　　通过本文的介绍，应该对如何使用 Node.js 开发 WebGIS 系统的后台接口有了基本的了解。从数据库的初始化到后端接口的创建，再到 Vue 项目中的路由配置，每一步都是构建一个高效、可靠的 WebGIS 系统不可或缺的部分。完成小作业可以帮助巩固所学知识，并将其应用到实际的项目开发中。

软件接口设计方案_Java软件开发流程图

相关推荐