Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)


Posted in Javascript onDecember 10, 2015

在上篇文章给大家介绍了express实现前端后端通信上传图片之存储数据库(mysql)傻瓜教程(一)

数据库如标题,使用开源的mysql为基础,我是下载的解压版本(自行百度就有,用百度下载的就行),配置过程https://3water.com/article/76206.htm,本人在安装过程中,对于配置my.ini文件着实找了好久的教程,所以贴上本人的my.ini文件

[mysqld]
basedir="D:/MySql" 
datadir="D:/MySql/data" 
port = 3306
socket = "/tmp/mysql.sock"
[client] 
password = 
port = 3306
socket = "/tmp/mysql.sock"
default-character-set = utf8

可以看到我的mysql是安装在Mysql文件夹下的,大家可以按照自己的路径进行修改。

然后在bin文件夹下运行

mysqld -install

安装mysql服务,然后启动服务。

net start mysql

上面的配置mysql教程链接中有navicat for mysql的下载地址(是mysql的可视化工具),还有注册的信息,不想打命令行的同学可以下载使用,更加方便些。

第一次登陆数据库

mysql -uroot -p

直接回车,没有密码。

(ps:我在使用中手动填写数据库时,输入中文时会有乱码问题,解决方案如下:右键一个数据库,然后选择数据库属性,修改字符集为utf8格式,整理选择第一个就行,如图:
        )

下面就要使用node连接数据库了。各位看官可以泡杯茶继续~。

felixge/node-mysql是一个纯nodejs的用javascript实现的一个MySQL客户端程序。felixge/node-mysql封装了Nodejs对MySQL的基本操作,100% MIT公共许可证。

项目地址:https://github.com/felixge/node-mysql

在项目中安装node-mysql,进入昨天建立好的myapp文件夹,运行:

npm install mysql

接下来进行测试,把官网的例子修改下,放到咱们的项目里面,修改routes/index.js,重启express

var express = require('express');
var router = express.Router();var mysql = require('mysql'); //调用MySQL模块
router.get('/', function(req, res) {
 res.render('index', {
 title: '孟星魂'
 });
 //创建一个connection
 var connection = mysql.createConnection({
 host: '127.0.0.1', //主机
 user: 'root', //MySQL认证用户名
 password: '111', //MySQL认证用户密码,没有测试没有密码时为空是否能登陆,不能的话设置下登陆密码
 port: '3306', //端口号
 database: 'nodesample'
 });
 //创建一个connection
 connection.connect(function(err) {
 if (err) {
 console.log('[query] - :' + err);
 return;
 }
 console.log('[connection connect] succeed!');
 });
 //执行SQL语句
 connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {
 if (err) {
 console.log('[query] - :' + err);
 return;
 }
 console.log('The solution is: ', rows[0].solution);
 });
 //关闭connection
 connection.end(function(err) {
 if (err) {
 return;
 }
 console.log('[connection end] succeed!');
 });
});
module.exports = router;

 打开页面后,命令符显示效果如下:

 测试成功!!,下面建立测试数据库

CREATE DATABASE IF NOT EXISTS nodesample CHARACTER SET UTF8;
USE nodesample;
SET FOREIGN_KEY_CHECKS=0;
DROP TABLE IF EXISTS `userinfo`;
CREATE TABLE `userinfo` (
 `Id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
 `UserName` varchar(64) NOT NULL COMMENT '用户名',
 `UserPass` varchar(64) NOT NULL COMMENT '用户密码',
 PRIMARY KEY (`Id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='用户信息表';

这段代码可以直接在navicat里面运行,点击工具,console,粘贴,回车就好了。

接下来往数据库中添加一条数据,修改routes/index.js,如下

var express = require('express');
var router = express.Router();
var mysql = require('mysql'); //调用MySQL模块
router.get('/', function(req, res) {
 res.render('index', {
 title: '孟星魂'
 });
 //创建一个connection
 var connection = mysql.createConnection({
 host: '127.0.0.1', //主机
 user: 'root', //MySQL认证用户名
 password: '111', //MySQL认证用户密码
 port: '3306', //端口号
 database: 'nodesample'
 });
 //创建一个connection
 connection.connect(function(err) {
 if (err) {
 console.log('[query] - :' + err);
 return;
 }
 console.log('[connection connect] succeed!');
 });
 //执行SQL语句
 var userAddSql = 'INSERT INTO userinfo(Id,UserName,UserPass) VALUES(0,?,?)';
 var userAddSql_Params = ['Wilson', 'abcd'];
 //增
 connection.query(userAddSql, userAddSql_Params, function(err, result) {
 if (err) {
 console.log('[INSERT ERROR] - ', err.message);
 return;
 }
 console.log('--------------------------INSERT----------------------------');
 //console.log('INSERT ID:',result.insertId); 
 console.log('INSERT ID:', result);
 console.log('-----------------------------------------------------------------\n\n');
 });
 //关闭connection
 connection.end(function(err) {
 if (err) {
 return;
 }
 console.log('[connection end] succeed!');
 });
});

module.exports = router;

重启express,刷新页面,命令符显示:

数据库显示:

好了,现在大家已经可以操作数据库了,基本的一些操作请参考http://www.cnblogs.com/zhongweiv/p/nodejs_mysql.html#mysql_mod,增删改查里面都有介绍。

 

后面应该是介绍大家上传的图片存储数据库的,但遇到了一些坑,才解决,最精彩的留在明天~,

主要是路由的问题,主页请求了模板,这个时候是无法在往前端发送数据的,所以会用到express的中间件,大家晚安~。

Javascript 相关文章推荐
一个js控制的导航菜单实例代码
Dec 03 Javascript
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
深入浅出 jQuery中的事件机制
Aug 23 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
js移动焦点到最后位置的简单方法
Nov 25 Javascript
清除输入框内的空格
Dec 21 Javascript
深入理解Angular中的依赖注入
Jun 26 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
Express的路由详解
Dec 10 #Javascript
在 Express 中使用模板引擎
Dec 10 #Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 #Javascript
基于jQuery实现复选框是否选中进行答题提示
Dec 10 #Javascript
日常收集整理的JavaScript常用函数方法
Dec 10 #Javascript
详解AngularJS中module模块的导入导出
Dec 10 #Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 #Javascript
You might like
聊天室php&mysql(六)
2006/10/09 PHP
php中文字母数字验证码实现代码
2008/04/25 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
PHP图片上传代码
2013/11/04 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
Jquery使用each函数实现遍历及数组处理
2020/07/14 jQuery
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
python列表的增删改查实例代码
2018/01/30 Python
python构建基础的爬虫教学
2018/12/23 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
python破解同事的压缩包密码
2020/10/14 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
2014学年自我鉴定
2014/02/23 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
现场施工员岗位职责
2015/04/11 职场文书
雨中的树观后感
2015/06/03 职场文书
结婚纪念日感言
2015/08/01 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS