您的位置：首页 > 数据库 > MySQL

Mysql To Charts（六）--views文件

2016-03-28 21:54 639 查看

前面已经实现了后端的处理，现在我们实现前端的网页展示

routers中的定义了在views文件下的同名.ejs文件

不过让我们先看看两个其他的.ejs文件

index.ejs

这个在这个项目中定义为主页，其中代码为

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1> Windows  </h1>
<h2><a href="/EasiNote3">EasiNote3通用版</a></h2>
<h2><a href="/EasiNote5">EasiNote5</a></h2>
<h2><a href="/SeewoRemote">SeewoRemote</a>    
<a href="/EasiBroadcast">EasiBroadcast</a></h2>
<h2><a href="/EasiNet">EasiNet</a></h2>
<h2><a href="/jianjishi">剪辑师</a></h2>
<h2><a href="/EasiCamera">EasiCamera</a></h2>
<h2><a href="/ArmyShow">信息文化视窗</a></h2>
<h2><a href="/SeewoAir">无线传屏</a></h2>

<h1> Android/iOS</h1>
<h2><a href="/SeewoLink">SeewoLink</a>   
<a href="/shoukebao">授课宝</a>   
<a href="/EasiConnect">EasiConnect</a></h2>
<h2><a href="/SeewoOS">SeewoOS</a></h2>
<h2><a href="/SeewoCare">SeewoCare</a></h2>

<h1> Webs </h1>
<h2><a href="/SeewoAdmin">seewo-admin</a>   
<a href="/SeewoBBS">SeewoBBS</a>   
<a href="/UnifiedLanding">统一登陆平台</a>   
<a href="/EN5Admin">EN5</a></h2>
<h2><a href="/TeacherTraining">教师培训平台</a></h2>
<h2><a href="/SeewoClass">SeewoClass</a></h2>
<h2><a href="/EasiNote4Linux">EasiNote4Linux</a></h2>
</body>
</html>

在这里补充一下前面创建文件时，使用的命令为

express test --ejs

创建文件名为test，定义了前端的views文件的文件格式为.ejs

上面代码为HTML代码结构，其中head和body部分，具体的格式这里就不展开说明了。

在web端实现的效果为：

error.ejs

这个文件定义了请求错误时跳转的Web端页面信息

实现的代码较为简单，如下：

<h1><%= message %></h1>
<h2><%= error.status %></h2>
<pre><%= error.stack %></pre>

现在看看实现的各个项目的.ejs页面，因为各个项目的.ejs文件都差不多，就看看其中的SeewoRemote.ejs文件

SeewoRemote.ejs

先看看代码：

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<script type="text/javascript" src="/javascripts/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="http://www.ichartjs.com/ichart.latest.min.js"></script>
<script type="text/javascript" src="/javascripts/loadReport.js"></script>
<script type="text/javascript">
$(function(){
loadReport('SeewoRemote')
});
</script>
</head>
<body>
<h2><a href="/">Back</a></h2>
<div id='canvasDiv'></div>
</body>
<html>

其中，

<script type="text/javascript" src="/javascripts/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="http://www.ichartjs.com/ichart.latest.min.js"></script>
<script type="text/javascript" src="/javascripts/loadReport.js"></script>

相对路径声明引用jquery-2.2.2.min.js、ichart.latest.min.js、loadReport.js这3个.js文件

调用Mysql To Charts（四）–draw ichartjs中实现的图形绘制函数loadReport.js

$(function(){
loadReport('SeewoRemote')
});

前面我们说过，render参数为：图表渲染的HTML DOM的id，在前面draw ichartjs的绘制图片中，定义render的值为“canvasDiv”，故渲染在页面的body中渲染图片

<div id='canvasDiv'></div>

在页面的body中增加一个返回（Back）按钮，点击返回按钮，返回主界面“/”

代码如：

<h2><a href="/">Back</a></h2>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航