Home > Web Front-end > JS Tutorial > Express implements front-end and back-end communication to upload pictures to the storage database (mysql) fool-proof tutorial (2)_javascript skills

Express implements front-end and back-end communication to upload pictures to the storage database (mysql) fool-proof tutorial (2)_javascript skills

WBOY
Release: 2016-05-16 15:26:26
Original
2606 people have browsed it

In the last article, I introduced to you Express implements front-end and back-end communication to upload pictures to the storage database (mysql) fool tutorial (1)

The database is like the title, using open source mysql as the basis. I downloaded the decompressed version (I have it from Baidu, just download it from Baidu), the configuration process http://www.jb51.net/article/ 76206.htm, during the installation process, I have been looking for a tutorial on configuring the my.ini file for a long time, so I posted my my.ini file

[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 
Copy after login

You can see that my mysql is installed in the Mysql folder. You can modify it according to your own path.

Then run it in the bin folder

mysqld -install
Copy after login

Install the mysql service and then start the service.

net start mysql
Copy after login

The above tutorial link for configuring mysql includes the download address of navicat for mysql (a visual tool for mysql), as well as registration information. Students who do not want to type in the command line can download and use it, which is more convenient.

 Log in to the database for the first time

mysql -uroot -p
Copy after login

Just press Enter without password.

(ps: When I manually fill in the database during use, there will be garbled characters when entering Chinese. The solution is as follows: right-click a database, then select Database Properties, modify the character set to utf8 format, and select the first one. As shown in the picture:
)

Now we will use node to connect to the database. Dear readers, you can make a cup of tea and continue~.

Felixge/node-mysql is a MySQL client program implemented in pure nodejs using javascript. felixge/node-mysql encapsulates the basic operations of Nodejs on MySQL, 100% MIT public license.

Project address: https://github.com/felixge/node-mysql

Install node-mysql in the project, enter the myapp folder created yesterday, and run:

npm install mysql
Copy after login

Next, test, modify the example on the official website, put it into our project, modify routes/index.js, and restart 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;
Copy after login

After opening the page, the command display effect is as follows:

Test successful! ! , create a test database below

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='用户信息表';
Copy after login

This code can be run directly in Navicat, just click tools, console, paste, and press Enter.
Next, add a piece of data to the database and modify routes/index.js, as follows

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!');
 });
});
Copy after login

module.exports = router;

Restart express, refresh the page, the command prompt displays:

Database display:

Okay, now everyone can operate the database. For some basic operations, please refer to http://www.cnblogs.com/zhongweiv/p/nodejs_mysql.html#mysql_mod, and check for additions, deletions and modifications. All are introduced.

The following should introduce the image storage database that everyone uploaded, but we encountered some pitfalls before solving them. The most exciting part will be left for tomorrow~,
The main problem is routing. The homepage has requested a template. At this time, data cannot be sent to the front end, so express middleware will be used. Good night everyone~.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template