基于node.js开发的文章生成器(六、网页版本的文章生成器--工整优化篇)

简介: # 引言前面我们已经学完了基于express框架下服务器的启动,get请求的接收与处理还有post请求的接收与处理。同时我们使用接口测试工具完成了接口的测试,响应值和接受值返回值都是正常的。那么为什么还有这一章节呢?# 问题的提出原来我们之前对于get请求和Post请求的接受与处理,虽然可以实现其功能,但是整体代码都是写在一个js文件中的,这就导致我们js文件很臃肿,很难看,维护和开发成本都会大大的提高。那么我们有没有一种方法,让我们的代码工整性和复用性都大大提高呢?# 解决的思路我的解决方案是:抽成模块,进行模块化开发。# 实例还是拿我们之前的cs.js作为讲解。

引言

前面我们已经学完了基于express框架下服务器的启动,get请求的接收与处理还有post请求的接收与处理。同时我们使用接口测试工具完成了接口的测试,响应值和接受值返回值都是正常的。那么为什么还有这一章节呢?

问题的提出

原来我们之前对于get请求和Post请求的接受与处理,虽然可以实现其功能,但是整体代码都是写在一个js文件中的,这就导致我们js文件很臃肿,很难看,维护和开发成本都会大大的提高。

那么我们有没有一种方法,让我们的代码工整性和复用性都大大提高呢?

解决的思路

我的解决方案是:抽成模块,进行模块化开发。

实例

还是拿我们之前的cs.js作为讲解。

原本的cs.js中的代码

import express from 'express';

const app = express();
app.use(express.urlencoded({extended:false}));
app.get('/getmethod',(req,resp)=>{
    console.log('get')
    resp.send("这是一个get请求");
})

app.post('/postmethod',(req,resp)=>{
    console.log('post')
    resp.send("这是一个post请求");
})

app.post('/postcs',(req,resp)=>{
    const result = req.body;
    console.log(result);
    resp.send('成功了');
})

app.listen(6666,()=>{
    console.log('serve is running at http://localhost:6666');
})

当然上面我们的代码还是不够多,当一个复杂的业务出现时,如果把所有的请求都挂在一个js文件中,就会导致文件变得非常臃肿。而且代码的复用性很差。

这里我们采取模块化的开发方法。

在目录下创建 router文件夹和router_handle这两个文件夹。

接下来我们利用到下面几个知识点完成模块的抽出

Router

express中的Router作用就是为了方便我们更好的根据路由去分模块。避免将所有路由都写在入口文件中。

使用之前我们通过const router = express.Router();完成创建router

router文件夹

我们在router文件夹下创建ceshi.js文件,然后首先导入'express'模块

import express from 'express';
const router = express.Router();

...//暂时省略的部分

export default router;

完成上述代码后,我们就已经成功将router下的ceshi.js抽成了一个module并导出了。

router_handle文件夹

该目录下同样创建一个ceshi.js,这里用来写代码层面上的真正的功能上的实现。

function postMethod(req,resp){
    const result = req.body;
    console.log(result.ceshi);
    resp.send('post method success');
}
export {postMethod};

最后的整合及测试

router和router_handle的整合

接下来我们来整合router文件夹和router_handle文件夹,上面说过,中间router文件夹中省略了一部分代码,省略的这部分代码就是import router_handle中的实现的代码 并use上。

import express from 'express';
const router = express.Router();

import {postMethod} from '../router_handle/ceshi.js';

router.post('/postMethodCeshi',postMethod);

export default router;

上述就是router目录下的ceshi.js全部代码,先是常规的 ES Moudle标准的导入所需的模块,然后创建router,然后导入写好的实现文件---即:router_handle目录下的ceshi.js文件。

接下来将引入的router_handle挂载到router.post()下,最后作为modle导出。

整合到cs.js中使用

上面说到,这次我们的主入口是cs.js文件,接下来我们要在cs.js中使用这个模块。

import express from 'express';

import router from './router/ceshi.js'
const app = express();
app.use(express.urlencoded({extended:false}));

app.use(router);

app.listen(6666,()=>{
    console.log('serve is running at http://localhost:6666');
})

接下来我们打开接口测试工具,按照之前测试接口,发现没有问题。优化完成。

相关文章
|
1天前
|
Web App开发 监控 JavaScript
破解动态网页:如何用JavaScript获取自动消失的联想词
【6月更文挑战第2天】在获取动态加载的联想词时,遇到问题:输入搜索词后弹出的联想词框在失去焦点时消失,使得直接定位HTML元素困难。解决方案包括: 1. 查找DOM节点:在弹框出现时记录其类名或ID,然后通过JavaScript获取元素HTML内容。但由于元素加载有延迟,需在输入框获取焦点后延迟执行,例如使用`setTimeout`。 2. 使用`MutationObserver`监视DOM变化:创建观察者监听特定类的元素出现,当元素加载时打印其HTML。为避免获取旧内容,回调函数中使用`setTimeout`确保DOM完全渲染。
13 3
|
8天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的二手交易平台设计与开发附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的二手交易平台设计与开发附带文章和源代码部署视频讲解等
17 0
|
8天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的文化遗产的保护与旅游开发附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的文化遗产的保护与旅游开发附带文章和源代码部署视频讲解等
12 1
|
8天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的旅游网页附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的旅游网页附带文章和源代码部署视频讲解等
12 2
基于ssm+vue.js+uniapp小程序的旅游网页附带文章和源代码部署视频讲解等
|
9天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的布卡维纳红酒网页附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的布卡维纳红酒网页附带文章和源代码部署视频讲解等
118 8
|
9天前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
|
11天前
|
JavaScript 开发者 前端开发
浅谈Vue.js与原生开发
Vue.js 是一款流行的前端框架,以其独特的模板语法简化了动态视图创建,通过指令和表达式便捷处理数据。与原生开发相比,Vue.js 提供了Vue Router进行高效路由管理,Vuex进行状态集中管理,以及丰富的生态系统和工具链如Vue CLI。Vue组件化开发、响应式数据绑定和单文件组件提高了代码复用和可维护性,但原生开发在性能和直接操作DOM方面可能更具优势。
|
13天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的校园二手交易平台的设计与开发附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的校园二手交易平台的设计与开发附带文章和源代码设计说明文档ppt
38 2
|
13天前
|
存储 JavaScript 前端开发
Vue.js表单开发宝藏工具集,让构建表单变得轻松又酷炫!
Vue Tiny Validate 是最小的验证库,如果你只需要最基本的功能,它可以帮你减轻负担。
18 3
|
13天前
|
JavaScript Java 测试技术
基于ssm+vue.js的网页小游戏交流论坛附带文章和源代码设计说明文档ppt
基于ssm+vue.js的网页小游戏交流论坛附带文章和源代码设计说明文档ppt
13 0