image
参加了两次FCC线下活动，主题偏向于后端数据分析，后端大神们分享的如python、julia等，对于一枚前端开发猿来说，消化起来还是有点压力，好在有大神分享了一些工作上面的宝贵经验，最后总结一点：代码语言只是工具，最重要的是思维方式。例如：当拿到一批数据的时候，首先我们想的是怎么在现有已掌握的技术栈前提下把需要的数据提取出来，当然首选NodeJs+MySQL提取数据，之后再在前端显示出来。好，下面就来看看怎么实行的吧。
一.安装所需模块
想要Nodejs数据显示在前端，有两种方式：一是纯原生拼接HTML字符串，渲染到某个页面；二是使用模板引擎渲染。
- 安装NodeJs，点击官网下载安装即可。
- 安装MySQL数据库，点击官网下载安装即可。当然，为了更直观的可视化操作MySQL数据库，也可以选择安装SQLyog可视化工具。
- 安装Express框架，
npm install express --save，框架默认搭载ejs模板，当然也可以选择jade。- 安装ejs模板，
npm install ejs --save。- 安装Node的mysql数据库模块，
npm install mysql --save，--save是否本目录保存还是全局安装的区别。
依赖模块如package.json:
{
"dependencies": {
"ejs": "^2.5.8",
"express": "^4.16.2",
"mysql": "2.6.2"
}
}
二.连接MySQL数据库
新建settings.js文件，写入连接配置。
var settings = {};
settings.db = {
host: 'localhost',
user: 'root',
password: '123456',
database: 'datasname'
}
module.exports = settings;
二.NodeJs后台文件
新建contact.js文件，写入后台js配置。
//导入相应模块
var express = require('express');
var mysql = require('mysql');
var app = express();
var settings = require('./settings');
// 设置模板路径，默认为./views
app.set('views', __dirname + '/views'); //视图文件目录
app.set('view engine', 'ejs');
var connection = mysql.createConnection(settings.db);
//创建一个connection
connection.connect(function(err){
if(err) throw err;
console.log('-----------connection connect succeed!------------');
});
//执行SQL
var sql = 'SELECT col1,col2 from tablename';
arr = [];
connection.query(sql, function(err,result){
if(err) throw err;
//处理数据
for(var index in result){
arr.push(result[index]);
}
});
//设置根目录文件
app.get('/', function(req, res){
res.render('index',{title:'Express模板', data: arr});
});
//api接口 抛出数据
app.get('/pageApi', function(req, res){
res.send({page:1}); //发送响应数据
});
//输出值 ajax所在的请求页
app.get('/ajaxtest', function(req, res){
res.render('ajaxtest',{});
});
//关闭connection
connection.end(function(err){
if(err) throw err;
console.log('-----------connection end succeed!----------------');
});
//监听服务
app.listen(3000);
三.视图文件
由于上面文件配置，在项目目录下新建views。
- 新建
index.ejs。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>
<%=title%>
</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
span{
display: block;
width: 90px;
float: left;
}
li{
width: 330px;
float: left;
}
</style>
</head>
<body>
<ul>
<% for(var i in arr){ %>
<li>
<span>playerID：<%= data[i].col1 %></span>
<span>yearID：<%= data[i].col2 %></span>
</li>
<% } %>
</ul>
</body>
</html>
- 新建
pageApi.ejs，作为api的载体。
其实不需要写任何东西，实在过意不去就写个HTML5骨架吧。`
- 新建
ajaxtest.ejs，作为api数据显示页。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div><p>这是ajax渲染nodejs数据页面</p></div>
<div id="content">Page:<p></p></div>
</body>
</html>
$(function(){
$.ajax({
type: "GET",
url: 'http://localhost:3000/pageApi',
dataType: 'json',
success: function(data){
$("#content p").text(data.page);
console.log(data);
},
error: function(err){
console.log(err);
}
})
})
四.运行
cmd进入终端，cd到项目所在目录，
node contact.js运行启动服务成功。
在浏览器中输入localhost:3000，即可查看到首页效果。
在浏览器中输入localhost:3000/ajaxtest，即可查看到请求api数据显示效果，在控制台也把数据console.log()出来了。
最后小结一下，涉及知识：nodejs、npm、mysql、ajax、ejs、express等。
网友评论