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




  今天继续昨天的教程,昨天已经完成了express的安装和图片的上传功能,相信各位看官收获颇丰,有什么问题的请直接指出,欢迎大家指正^_^。

  数据库如标题,使用开源的mysql为基础,我是下载的解压版本(自行百度就有,用百度下载的就行),配置过程http://blog.csdn.net/ccf19881030/article/details/9247235

  本人在安装过程中,对于配置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的中间件,大家晚安~。

  

时间: 2024-10-24 13:56:04

express实现前后端通信上传图片,存储数据库(mysql)傻瓜教程(二)的相关文章

web——前后端通信原理

前端向后台传输数据: 传输方法:post  get 区别: (1)get:用于从服务器获取数据,将参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到. post:用于向服务器提交数据,通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址.用户无法看到这个过程. (2)get:服务器端用Request.QueryString获取变量的值. post:服务器端用Request

【数据库之mysql】 mysql 入门教程(二)

目录 一.MySQL的相关概念介绍 二.Windows下MySQL的配置 配置步骤 MySQL服务的启动.停止与卸载 三.MySQL脚本的基本组成 四.MySQL中的数据类型 五.使用MySQL数据库 登录到MySQL 创建一个数据库 选择所要操作的数据库 创建数据库表 六.操作MySQL数据库 向表中插入数据 查询表中的数据 更新表中的数据 删除表中的数据 七.创建后的修改 添加列 修改列 删除列 重命名表 删除整张表 删除整个数据库 八.附录 修改 root 用户密码 可视化管理工具 MyS

express和数据库(MySQL)的交互(二)

一.安装express前面都讲了 1.express. cnpm || npm install express --save 2.中间件 a.cnpm || npm install body-parser --save     当post请求的时候,需要用这个中间件来处理参数 b.cnpm || npm install cookie-parser  处理cookie的中间件 c. cnpm || npm install multer  处理form表单中 的文件上传 3.安装MySQL 的数据库

数据库MYSQL学习系列二

一.MYSQL数据库对象与应用 2.1-MySQL数据类型 Number不止一种 · 整形 · 浮点型 整形 · INT · SMALLINT · MEDIUMINT · BIGINT type Storage Minumun Value Maximum Value (Bytes) (Signed/Unsigned) (Signed/Unsigned) TINYINT 1 -128 127 0 255 SMALLINT 2 -32768 32767 0 65535 MEDIUMINT 3 -83

数据库 Mysql内容补充二

多表查询 mysql支持的是SQL99标准的连接查询,并不支持oracle公司的外连接查询, 但是支持oracle等值查询,不等值查询,自连接查询,子查询(只要不是外连接(+)都支持) oracle也支持SQL99标准的连接查询 内连接 --等值查询 select e.empno,e.ename,e.sal,d.dname from emp e inner join dept d on e.deptno=d.deptno; --简单而言:就是将oracle多表查询语法中的逗号换成inner jo

数据库MySQL简单操作(二)

一.数据的增删改查 1.1 插入记录 1.1.1插入单条数据 INSERT INTO 表名 (字段名1,字段名2,--,字段名N) VALUES (字段1值,字段2值,--,字段N值); ①这是把所有的字段都带上 INSERT INTO student (id,`name`,pwd,age,flush_time,record)VALUES(1,'李荣','2212o1uwi2ui2',23,'2017-09-13 20:03:45','大家伙,你们好,我是李荣,毕业于城市学院1014班,我的爱好

Springboot第二篇:与前端fetch通信(关于传输数据上传文件等前后端的处理)

本章讲述的是关于前后端通信关于对应性,前端为react的View,会分传递不同值有不同的处理情况. 首先关于Springboot内的代码变更都是在IndexController.java内,以下是代码: package maven.example.controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.Requ

一个简单的前后端分离的方案

背景: 1.实现前后端绝对分离.项目迭代过程中,前端后端各自上线,互不影响互不依赖,解决前端逻辑的修改需要依赖后端同学发新包重新上线的问题. 2.保证页面文件的静态化,提高服务相应效率. 3....方案: 1.前后端通信——完全走ajax,使用服务器代理中转(如配置nginx)解决跨域2.file include *本地开发使用nodejs的express框架搭建服务端环境,ejs作为服务端的模板引擎,解决html页面无法使用include file的问题 *上线发布时,使用grunt的ejs任

第一步:类似前后端分离的基础框架思路

整个架构部署模式采用简单三段式实现:前端站点+后端服务站点+多构件服务支持,两个站点设计均支持内部调用或远程调用,同时支持反向代理与集群实现.由于是企业级互联网私有云应用,就没有考虑Vue.js+node.js来实现真的前后端分离,关键是考虑后期的二次开发及实施维护成本.但对于公有云部分则使用Vue.js+node.js来进行开发与部署. 前端:jquery+bootstrap+bootstrap-table+jquery组件+App.js(基于框架封装的交互类库,包含多个子类) 后端:ASP.