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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
js 获取子节点函数 (兼容FF与IE)
Apr 18 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
jquery JSON的解析方式示例介绍
Jul 27 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 Javascript
详解vue express启动数据服务
Jul 05 Javascript
详解操作虚拟dom模拟react视图渲染
Jul 25 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
JavaScript的console命令使用实例
Dec 03 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垃圾回收机制对内存泄露的处理
2013/06/14 PHP
解析PHP提交后跳转
2013/06/23 PHP
php字符串截取的简单方法
2013/07/04 PHP
10款实用的PHP开源工具
2015/10/23 PHP
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
NodeJS和BootStrap分页效果的实现代码
2016/11/07 NodeJs
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
基于Vue实现拖拽效果
2018/04/27 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
Node.js log4js日志管理详解
2018/07/31 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
Python贪心算法实例小结
2018/04/22 Python
Python实现全排列的打印
2018/08/18 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python生成器实现简单"生产者消费者"模型代码实例
2020/03/27 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
HTML5使用Audio标签实现歌词同步的效果
2016/03/17 HTML / CSS
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
英国顶级足球鞋的领先零售商:Lovell Soccer
2019/08/27 全球购物
幼儿园教师节活动方案
2014/02/02 职场文书
物业总经理岗位职责
2014/02/28 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
2014年食堂工作总结
2014/11/20 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
python 如何用terminal输入参数
2021/05/25 Python
微信小程序 WeUI扩展组件库的入门教程
2022/04/21 Javascript
Apache自带的ab压力测试工具的实现
2022/07/23 Servers