百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

如何使用JS写服务端代码,完成Mysql的CRUD。由JS实现的后台功能

ccwgpt 2024-10-12 02:43 19 浏览 0 评论

在大多数人的认识中,前端工程师的工作就是写一写HTML、CSS、JavaScript等前端页面,并不会涉及到后端开发。其实这是不准确的。用JavaScript也可以实现后端开发,搭建服务端。对数据库进行操作,增删查改完全不在话下。那么该如何实现用JavaScript进行后端开发呢?

其实想要实现也不难,我们只要借助工具nodejs即可。首先简单介绍一下nodejs:

Node.js是一个开源与跨平台的 JavaScript 运行时环境。它是一个可用于几乎任何项目的流行工具!

Node.js 在浏览器外运行 V8 JavaScript 引擎(Google Chrome 的内核)。

这使 Node.js 可以在一台服务器上处理数千个并发连接,而无需引入管理线程并发的负担。

Node.js 具有独特的优势,因为为浏览器编写 JavaScript代码的前端开发者,现在除了客户端代码之外还可以编写服务器端代码,而无需学习完全不同的语言。

除了使用nodejs之外,我们还要借助一个node的框架“egg.js”。这个框架是为企业级框架和应用而生的。

Egg有以下特性特性

  • 提供基于 Egg 定制上层框架的能力
  • 高度可扩展的插件机制
  • 内置多进程管理
  • 基于 Koa 开发,性能优异
  • 框架稳定,测试覆盖率高
  • 渐进式开发

我们如何搭建一个Egg的后台服务端呢?

首先我们可以通过脚手架生成一个简单的框架模型

$ mkdir egg-example && cd egg-example
$ npm init egg --type=simple
$ npm install

创建项目成功后,我们就可以启动项目了。

$ npm run dev

启动成功后,直接浏览器打开http://localhost:7001即可访问到我们新建的项目

创建的项目目录结构如下:

egg-project
├── package.json
├── app.js (可选)
├── agent.js (可选)
├── app
|   ├── router.js
│   ├── controller
│   |   └── home.js
│   ├── service (可选)
│   |   └── user.js
│   ├── middleware (可选)
│   |   └── response_time.js
│   ├── schedule (可选)
│   |   └── my_task.js
│   ├── public (可选)
│   |   └── reset.css
│   ├── view (可选)
│   |   └── home.tpl
│   └── extend (可选)
│       ├── helper.js (可选)
│       ├── request.js (可选)
│       ├── response.js (可选)
│       ├── context.js (可选)
│       ├── application.js (可选)
│       └── agent.js (可选)
├── config
|   ├── plugin.js
|   ├── config.default.js
│   ├── config.prod.js
|   ├── config.test.js (可选)
|   ├── config.local.js (可选)
|   └── config.unittest.js (可选)
└── test
    ├── middleware
    |   └── response_time.test.js
    └── controller
        └── home.test.js

如上,由框架约定的目录:

  • app/router.js 用于配置 URL 路由规则,具体参见 Router。
  • app/controller/** 用于解析用户的输入,处理后返回相应的结果,具体参见 Controller。
  • app/service/** 用于编写业务逻辑层,可选,建议使用,具体参见 Service。
  • app/middleware/** 用于编写中间件,可选,具体参见 Middleware。
  • app/public/** 用于放置静态资源,可选,具体参见内置插件 egg-static。
  • app/extend/** 用于框架的扩展,可选,具体参见框架扩展。
  • config/config.{env}.js 用于编写配置文件,具体参见配置。
  • config/plugin.js 用于配置需要加载的插件,具体参见插件。
  • test/** 用于单元测试,具体参见单元测试。
  • app.jsagent.js 用于自定义启动时的初始化工作,可选,具体参见启动自定义。关于agent.js的作用参见Agent机制。

由内置插件约定的目录:

  • app/public/** 用于放置静态资源,可选,具体参见内置插件 egg-static。
  • app/schedule/** 用于定时任务,可选,具体参见定时任务。
  • app/view/** 用于放置模板文件,可选,由模板插件约定,具体参见模板渲染。
  • app/model/** 用于放置领域模型,可选,由领域类相关插件约定,如 egg-sequelize。

在Egg框架内,我们直接引用egg-mysql 插件来访问 MySQL 数据库。这个插件既可以访问普通的 MySQL 数据库,也可以访问基于 MySQL 协议的在线数据库服务。

安装对应的插件 egg-mysql :

$ npm i --save egg-mysql

开启插件:

// config/plugin.js
exports.mysql = {
  enable: true,
  package: 'egg-mysql',
};

config/config.default.js 配置各个环境的数据库连接信息。

// config/config.${env}.js
exports.mysql = {
  // 单数据库信息配置
  client: {
    // host
    host: 'mysql.com',
    // 端口号
    port: '3306',
    // 用户名
    user: 'test_user',
    // 密码
    password: 'test_password',
    // 数据库名
    database: 'test',
  },
  // 是否加载到 app 上,默认开启
  app: true,
  // 是否加载到 agent 上,默认关闭
  agent: false,
};

数据库配置完成后我们就可以通过以下方式访问数据库:

await app.mysql.query(sql, values); // 单实例可以直接通过 app.mysql 访问

路由(Router)

在app/router.js中配置项目的路由规则,配置好路由后。前端页面便可以通过http的方式访问到该路由,实现前后端的数据通信。

控制器(Controller)

Controller 负责解析用户的输入,处理后返回相应的结果。所有的 Controller 文件都必须放在 app/controller 目录下,可以支持多级目录,访问的时候可以通过目录名级联访问。

服务(Service)

Service 就是在复杂业务场景下用于做业务逻辑封装的一个抽象层,提供这个抽象有以下几个好处:

  • 保持 Controller 中的逻辑更加简洁。
  • 保持业务逻辑的独立性,抽象出来的 Service 可以被多个 Controller 重复调用。
  • 将逻辑和展现分离,更容易编写测试用例。

基本的开发要素我们已经实现的,那么我们就可以直接根据业务需求进行代码的编写了。实现了前端的全栈开发,从前端到后端都可实现。

本次分享暂时告一段落。请各位抬起你们发财的小手,点个赞呗。

下回和大家分享后台服务端的代码编写。

相关推荐

MFC、Qt、WPF?该用哪个?(mfc和wpf区别)

MFC、Qt和WPF都是流行的框架和工具,用于开发图形用户界面(GUI)应用程序。选择哪个框架取决于你的具体需求和偏好。MFC(MicrosoftFoundationClass)是微软提供的框架,...

一款WPF开发的通讯调试神器(支持Modbus RTU、MQTT调试)

我们致力于探索、分享和推荐最新的实用技术栈、开源项目、框架和实用工具。每天都有新鲜的开源资讯等待你的发现!项目介绍Wu.CommTool是一个基于C#、WPF、Prism、MaterialDesign...

关于面试资深C#、WPF开发工程师的面试流程和问题

一、开场(2-3分钟)1.欢迎应聘者,简单介绍公司和面试流程。2.询问应聘者是否对公司或岗位有初步的问题。二、项目经验与技术应用(10-20分钟)1.让应聘者详细介绍几个他参与过的C#、...

C# WPF MVVM模式Prism框架下事件发布与订阅

01—前言处理同模块不同窗体之间的通信和不同模块之间不同窗体的通信,Prism提供了一种事件机制,可以在应用程序中低耦合的模块之间进行通信,该机制基于事件聚合器服务,允许发布者和订阅者之间通过事件进行...

WPF 机械类组件动画制作流程简述(wps上怎么画机械结构简图)

WPF机械类组件动画制作流程简述独立观察员2025年3月4日一、创建组件创建组件用户控件,将组件的各部分“零件”(图片)拼装在一起,形成组件的默认状态:二、给运动部分加上Rend...

C#上位机WinForm和WPF选哪个?工控老油条的"血泪史"

作为一个从互联网卷进工控坑的"跨界难民",在这会摸鱼的时间咱就扯一下上位机开发选框架这档子破事。当年我抱着WPF的酷炫动画一头扎进车间,结果被产线老师傅一句"你这花里胡哨的玩意...

【一文扫盲】WPF、Winform、Electron有什么区别?

近年来,随着软件开发的不断发展,开发人员面临着选择适合他们项目的各种框架和工具的挑战。在桌面应用程序开发领域,WPF、Winform和Electron是三个备受关注的技术。本文将介绍这三者的区别,帮助...

一个开源、免费、强大且美观的WPF控件库

我们致力于探索、分享和推荐最新的实用技术栈、开源项目、框架和实用工具。每天都有新鲜的开源资讯等待你的发现!项目介绍HandyControl是一套基于WPF(WindowsPresentationF...

WPF 根据系统主题自动切换浅色与深色模式

WPF根据系统主题自动切换浅色与深色模式控件名:Resources作者:WPFDevelopersOrg-驚鏵原文链接[1]:https://github.com/WPFDevelopers...

WPF与WinForm的本质区别(wpf与maui)

在Windows应用程序开发中,WinForm和WPF是两种主要的技术框架。它们各自有不同的设计理念、渲染机制和开发模式。本文将详细探讨WPF与WinForm的本质区别,并通过示例进行说明。渲染机制W...

Win10/Win11效率神器再进化:微软发布PowerToys 0.90.0版本

IT之家4月1日消息,微软今天(4月1日)更新PowerToys,在最新发布的0.90.0版本中,修复多个BUG之外,引入多项功能更新,为Windows10、Windows...

一款非常漂亮的WPF管理系统(wpf架构及特性)

我们致力于探索、分享和推荐最新的实用技术栈、开源项目、框架和实用工具。每天都有新鲜的开源资讯等待你的发现!WPFManager项目介绍该项目是一款WPF开发的管理系统,数据库采用的MSSqlserv...

WPF 实现描点导航(wpf按钮的点击事件)

WPF实现描点导航控件名:NavScrollPanel作者:WPFDevelopersOrg-驚鏵原文链接[1]:https://github.com/WPFDevelopersOrg/WPF...

微软更新基于Win11的Validation OS 2504:增强 .NET与WPF

IT之家5月1日消息,科技媒体NeoWin今天(5月1日)发布博文,报道称微软公司更新基于Windows11的ValidationOS,增强支持.NET和WPF,并优...

WPF的技术架构与优势(wpf的前景)

WindowsPresentationFoundation(WPF)是一个现代化的用户界面框架,专为构建Windows应用程序而设计。它通过分层的技术架构和丰富的功能集,提供了全面的应用程...

取消回复欢迎 发表评论: