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 相关文章推荐
让getElementsByName适应IE和firefox的方法
Sep 24 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
js获取页面description的方法
May 21 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
JS如何判断浏览器类型和详细区分IE各版本浏览器
Mar 04 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
React如何利用相对于根目录进行引用组件详解
Oct 09 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
windows xp下安装pear
2006/12/02 PHP
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
jquery控制listbox中项的移动并排序的实现代码
2010/09/28 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
js调用图片隐藏&显示实现代码
2013/09/13 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JavaScript中setMonth()方法的使用详解
2015/06/11 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
webpack开发跨域问题解决办法
2017/08/03 Javascript
nodejs中密码加密处理操作详解
2018/03/20 NodeJs
js实现轮播图的完整代码
2020/10/26 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
python设置检查点简单实现代码
2014/07/01 Python
Python日期的加减等操作的示例
2017/08/15 Python
python实现树形打印目录结构
2018/03/29 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
Python退火算法在高次方程的应用
2018/07/26 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
python使用列表的最佳方案
2020/08/12 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
室内设计专业学生的自我评价分享
2013/11/27 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
2015年班干部工作总结
2015/04/29 职场文书
学生通报表扬范文
2015/05/04 职场文书
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
详解Python flask的前后端交互
2022/03/31 Python