Node.js 连mysql,然后传数据到静态页面的教程

1. 安装node.js(电脑要连网才能实现下面的操作)

安装教程网址:https://www.cnblogs.com/hermit-gyqy/p/11731343.html
注意,第一次接触node的最好是默认安装到c盘,为了防止出错,path环境也一定要跟着教程安装。

2.打开编译器软件,可以用webstrom,IDEA,......等等软件(个人喜欢IDEA,不过显示的是webstrom界面,两者步骤都是一样的)

安装好node,我们准备开始

  • 创建项目名,在项目名里创建一个文件夹(我的文件夹名为public),这个文件夹用来存放我们的页面,以及一些素材;


    图片.png
  • 先确定node有没有安装好,打开cmd框,输入node -v,以及npm -v 如果两个都有,那就是安装好了,安装好了请走下一步,没安装好请查看上面的安装教程地址


    图片.png
  • 点击Terminal(在编译器的底部),在local里面输入npm init -y然后回车
    图片.png

    1.出现错误的提示,实行下面那一步,如果没有出现错误提示不需要看这一步
    打开设置,在Terminal里的Shell path 选择c盘 - Windows - system32 - cmd.exe 然后确定
    图片.png

    2.正确的看这一步,安装成功后刷新一下,你会发现你的文件夹下多了一个package.json文件
图片.png
  • 输入npm install express --save,你会发现你的文件夹里多了一个node_modules的文件夹

    图片.png

  • 在根目录下创建一个serverMsql.js


    图片.png
  • 打开数据库

创建数据库:
create database Demo;
打开数据库:
use Demo;
创建表:
create table user(
 id int not null primary key auto_increment,
 username varchar(255) not null ,
 password int(30) not null,
phone varchar(30) not null
 );
在表中插入数据:
 insert into user (username,password,phone) values
('zs',123456,'13112345678'),
('ls',654321,'13187654321');
图片.png
  • 在local 里输入npm install mysql --save,然后在serverMsql.js里写入
let express = require('express');
let app = express();
let mysql   = require('mysql');
let connection = mysql.createConnection({
    host   : 'localhost',
    user   : 'root', //数据库账号
    password : 'root', //数据库密码
    database : 'demo' //创建的数据库名
});
//下面是处理跨域问题,必须写
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
//创建数据库的连接
connection.connect();
//sql语句写这,我这是查询语句,err是代表错误信息,result是查询结果
connection.query('SELECT id,username,password,phone from user' , function (err, result) {
    if (err) throw err;
//我这是用get方法,不过我建议用 post,post安全一些,
//    '/user'是你给的url(前端用ajax连的地址是 http://localhost:3006/user,3006是你设置的端口号;
    app.get('/user', function(req, res) {
// 把从数据库里查询的结果发给前端;
        res.send(result);
    });
//这个是在控制台打印数据库里查询的结果,可写可不写
    console.log('--------------------------SELECT----------------------------');
    console.log(result);
    console.log('------------------------------------------------------------\n\n');
});

//数据连接结束
connection.end();

//端口号,是自己设置的,你也可以设置3004
app.listen(3005);

在local 里写 node serverMsql.js 执行语句,你会发现它打印出了你数据库的数据,(如果你想重新运行一下语句,可以快捷键ctrl+c,然后在输入npm ......)

图片.png

  • 创建一个index.html(注意一定要运行serverMsql.js文件 代码node serverMsql.js
//导入jquery文件
<script src="source/jquery/jquery-1.11.0.min.js"></script>
<script>
    $(function () {
        $.ajax({
            url:'http://localhost:3005/user', // url地址,serverMsql写的地址
            type:'get', // serverMsql写的方法
            success:function (result) {
                console.log(result);  //serverMsql传过来的数据

                for(var i = 0; i < result.length; i++){
                    console.log(result[i].username)
                    document.write(result[i].username+',')
                }


            },
            error:function (rel) {
                console.log('连接错误'+ rel)
            }
        })
    })
</script>

结果:


图片.png

图片.png

这是查询数据库的教程,修改和删除后续会发教程的;(送给正在为连数据而烦恼的LLT!)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354

推荐阅读更多精彩内容