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 相关文章推荐
一端时间轮换的广告
Jun 26 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
Jan 10 Javascript
JavaScript获取数组最小值和最大值的方法
Jun 09 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
ajax实现动态下拉框示例
Jan 10 Javascript
iscroll-probe实现下拉刷新和下拉加载效果
Jun 28 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
Vue中自定义全局组件的实现方法
Dec 08 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
vue-router的HTML5 History 模式设置
Sep 08 Javascript
vue组件通信传值操作示例
Jan 08 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页面静态化
2018/02/05 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
2013/03/18 Javascript
js左侧三级菜单导航实例代码
2013/09/13 Javascript
Jquery模仿Baidu、Google搜索时自动补充搜索结果提示
2013/12/26 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
详解JavaScript中Date.UTC()方法的使用
2015/06/12 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
[02:31]2014DOTA2国际邀请赛2009专访:干爹表现出乎意料 看好DK杀回决赛
2014/07/20 DOTA
Django 实现下载文件功能的示例
2018/03/06 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
python两个list[]相加的实现方法
2020/09/23 Python
python+selenium自动化实战携带cookies模拟登陆微博
2021/01/19 Python
HTML5 MiranaVideo播放器 (代码开源)
2010/06/11 HTML / CSS
50岁生日感言
2014/01/23 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
领导干部作风建设总结
2014/10/23 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
大学班干部竞选稿
2015/11/20 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书