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

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

开发环境:

IDE:WebStorm

DB:MySQL

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

添加完毕,如下提示

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

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

11、最终实现的效果

【客户信息列表页面】

【客户新增页面】

【客户修改页面】

 【根据条件查询】

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

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

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

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

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

13、路由规划

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

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

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

14、最终的工程结构

 

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

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

 

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

posted @ 2016-12-30 16:12  {name:"代码屠夫"}  阅读(2518)  评论(1编辑  收藏  举报