【原】无脑操作:express + MySQL 实现CRUD

时间:2022-09-02 15:25:24

基于node.js的web开发框架express简单方便,很多项目中都在使用。这里结合MySQL数据库,实现最简单的CRUD操作。

【原】无脑操作:express + MySQL 实现CRUD

开发环境:

IDE:WebStorm

DB:MySQL

-------------------------------------------------------------------------------------------

1、使用WebStorm创建node.js express应用程序,express框架可以根据使用者的爱好设置页面引擎,默认为jade,我比较喜欢ejs,这里设置时选择Template为EJS即可

这里WebStorm实际使用了express-generator这个生成器为我们生成了express应用程序

【原】无脑操作:express + MySQL 实现CRUD

2、创建结束时,可以看到express工程结构如图

【原】无脑操作:express + MySQL 实现CRUD

3、执行调试的设置(不设置也可以,只不过执行或调试时看的有些奇怪而已)

【原】无脑操作:express + MySQL 实现CRUD

修改一下Name的内容为工程名称

注意:express工程中的bin目录下有一个www文件,它用来设置express工程的一些配置,比如express引用程序的端口(默认:3000)等

【原】无脑操作:express + MySQL 实现CRUD

4、配置好后就可以执行(alt+F10)或调试(alt+F9)了

【原】无脑操作:express + MySQL 实现CRUD

5、试着访问一下,在浏览器的地址栏中输入localhost:3000,可以看到下图,说明express框架的应用程序已经搭建好了

【原】无脑操作:express + MySQL 实现CRUD

-------------------------------------------------------------------------------------------

6、express-generator生成器生成的代码中有users相关内容,我们不需要的,所以删除之。先在app.js这个文件中删除相关内容,下图中的第9行和第26行都删除掉

【原】无脑操作:express + MySQL 实现CRUD

7、另外,路由目录routes中的users.js文件也删除掉

【原】无脑操作:express + MySQL 实现CRUD

-------------------------------------------------------------------------------------------

8、接着添加MySQL数据库驱动,在package.json文件中添加"mysql" : "latest",意思是不知道mysql对应的驱动是什么版本,使用latest表示获取最新的mysql数据库驱动

【原】无脑操作:express + MySQL 实现CRUD

9、观察一下工程目录中的node_modules目录,现在是没有mysql驱动的

【原】无脑操作:express + MySQL 实现CRUD

10、在命令行窗口中当前工程路径下使用指令:npm install,这样就可以依据package.json文件中写的依赖添加mysql驱动了

【原】无脑操作:express + MySQL 实现CRUD

添加完毕,如下提示

【原】无脑操作:express + MySQL 实现CRUD

再次观察node_modules目录,这时有mysql驱动了

【原】无脑操作:express + MySQL 实现CRUD

-------------------------------------------------------------------------------------------

11、最终实现的效果

【客户信息列表页面】

【原】无脑操作:express + MySQL 实现CRUD

【客户新增页面】

【原】无脑操作:express + MySQL 实现CRUD

【客户修改页面】

【原】无脑操作:express + MySQL 实现CRUD

【根据条件查询】

【原】无脑操作:express + MySQL 实现CRUD

【原】无脑操作:express + MySQL 实现CRUD

-------------------------------------------------------------------------------------------

12、创建数据访问层,在express工程中创建db目录,在其中创建两个文件dbconfig.js 和 customersql.js文件,dbconfig.js文件是MySQL数据库连接配置信息模块文件,customersql.js文件记录客户管理功能模块要用到的sql语句,当然都以JavaScript对象的形式,以node.js中模块的结构组织。

【原】无脑操作:express + MySQL 实现CRUD

对于数据库连接配置模块,还是那些连接信息:服务器名称啦、连接用户名称啦、连接用户密码啦、数据库名称啦、端口号啦

而具体业务模块的数据库操作对象模块说白了就是对SQL语句进行了JavaScript对象方式的封装,调用时获取对象的CRUD相应的属性值(也就是相应的SQL语句)

-------------------------------------------------------------------------------------------

13、路由规划

默认index.js文件如下,只有对默认路径(即http://localhost这样)形式访问的路由处理

【原】无脑操作:express + MySQL 实现CRUD

添加自定义的路由规划,包括路由对应的处理器函数,无非是对应页面的CRUD操作,设置get、post方式的处理器函数

【原】无脑操作:express + MySQL 实现CRUD

-------------------------------------------------------------------------------------------

14、最终的工程结构

【原】无脑操作:express + MySQL 实现CRUD

看到这里,是不是感觉到特别无脑操作、特别简单呀?

后续有空,再写一个更好一些的版本(涉及:分页、多表连接、Ajax等)

整个工程代码:https://github.com/temptation/watermalon_v1

【原】无脑操作:express + MySQL 实现CRUD的更多相关文章

  1. 【原】无脑操作:IDEA + maven + Shiro + SpringBoot + JPA + Thymeleaf实现基础认证权限

    开发环境搭建参见<[原]无脑操作:IDEA + maven + SpringBoot + JPA + Thymeleaf实现CRUD及分页> 需求: ① 除了登录页面,在地址栏直接访问其他 ...

  2. 【原】无脑操作:IDEA &plus; maven &plus; Shiro &plus; SpringBoot &plus; JPA &plus; Thymeleaf实现基础授权权限

    上一篇<[原]无脑操作:IDEA + maven + Shiro + SpringBoot + JPA + Thymeleaf实现基础认证权限>介绍了实现Shiro的基础认证.本篇谈谈实现 ...

  3. 【原】无脑操作:EasyUI Tree实现左键只选择叶子节点、右键浮动菜单实现增删改

    Easyui中的Tree组件使用频率颇高,经常遇到的需求如下: 1.在树形结构上,只有叶子节点才能被选中,其他节点不能被选中: 2.在叶子节点上右键出现浮动菜单实现新增.删除.修改操作: 3.在非叶子 ...

  4. 【原】无脑操作:eclipse &plus; maven搭建SSM框架

    网上看到一些Spring + Spring MVC + MyBatis框架的搭建教程,不是很详细或是时间久远了,自己动手整一个简单无脑的! 0.系统环境 1)Windows 10 企业版 2)JDK ...

  5. 【原】无脑操作:ElasticSearch学习笔记(01)

    开篇来自于经典的“保安的哲学三问”(你是谁,在哪儿,要干嘛) 问题一.ElasticSearch是什么?有什么用处? 答:截至2018年12月28日,从ElasticSearch官网(https:// ...

  6. 【原】无脑操作:Windows 10 &plus; MySQL 5&period;5 安装使用及免安装使用

    本文介绍Windows 10环境下, MySQL 5.5的安装使用及免安装使用 资源下载: MySQL安装文件:http://download.csdn.net/detail/lf19820717/9 ...

  7. 【原】无脑操作:IDEA &plus; maven &plus; SpringBoot &plus; JPA &plus; Thymeleaf实现CRUD及分页

    一.开发环境: 1.windows 7 企业版 2.IDEA 14 3.JDK 1.8 4.Maven 3.5.2 5.MariaDB 6.SQLYog 二.Maven设置: Maven目录下的con ...

  8. 【原】无脑操作:IDEA &plus; maven &plus; SpringBoot &plus; JPA &plus; EasyUI实现CRUD及分页

    背景:上一篇文章的界面太丑.没有条件查询功能.所以做一些改进,整合EasyUI做实现.(仅以此文纪念表格中出现的这些朋友工作六周年,祭奠一下逝去的青春^_^) 一.开发环境(参照上一篇文章) 补充:E ...

  9. MySQL轻量版使用,无需安装,无脑操作

    不知道是否有想我一样的,开始用的都是安装版的,特别费事,卸载后注册表很难删除 下面介绍一下MySQL轻量级的如下 首先打开一个网址:www.oracle.com没错就是强大的Oracle官网 也可以直 ...

随机推荐

  1. Instantaneous Transference--POJ3592Tarjan缩点&plus;搜索

    Instantaneous Transference Time Limit: 5000MS Memory Limit: 65536K Description It was long ago when ...

  2. DIV&plus;CSS实现左侧带三角形的提示框

    实现效果

  3. vmware tools安装程序无法继续&comma;Microsoft Runtime DLL安装程序未能完成安装。的解决方法

    vmware tools安装程序无法继续,Microsoft Runtime DLL安装程序未能完成安装.的解决方法_华英雄_新浪博客 http://blog.sina.com.cn/s/blog_5 ...

  4. 剑指offer 数字在排序数组中出现的次数

    因为有序 所以用二分法,分别找到第一个k和最后一个k的下标.时间O(logN) class Solution { public: int GetNumberOfK(vector<int> ...

  5. Caused by&colon; org&period;apache&period;catalina&period;LifecycleException&colon; A child container failed during start

    错误提示: 严重: A child container failed during start java.util.concurrent.ExecutionException: org.apache. ...

  6. table-cell实现未知宽高图片,文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

  7. Python 爬虫三 beautifulsoup模块

    beautifulsoup模块 BeautifulSoup模块 BeautifulSoup是一个模块,该模块用于接收一个HTML或XML字符串,然后将其进行格式化,之后遍可以使用他提供的方法进行快速查 ...

  8. (转)C&num;连接OleDBConnection数据库的操作

    对于不同的.net数据提供者,ADO.NET采用不同的Connection对象连接数据库.这些Connection对我们屏蔽了具体的实现细节,并提供了一种统一的实现方法. Connection类有四种 ...

  9. 15&period;3&period;14 DP练习2

    拦截导弹 题目 某国为了防御敌国的导弹突击,发展出一种导弹拦截系统. 可是这样的导弹拦截系统有一个缺陷:尽管它的第一发炮弹可以到达随意的高度.可是以后每一发炮弹都不能高于前一发的高度. 某天,雷达捕捉 ...

  10. JSONP -- 跨域数据交互协议

    一.概念 ①传统Ajax:交互的数据格式——自定义字符串或XML描述: 跨域——通过服务器端代理解决. ②如今最优方案:使用JSON格式来传输数据,使用JSONP来跨域. ③JSON:一种数据交换格式 ...