参加了两次 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:
- <%=d ata[i].col1 %>
- </span>
- <span>
- yearID:
- <%=d ata[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 等.
来源: http://www.jianshu.com/p/4e9c60bc09ab