Mysql To Charts(六)--views文件

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

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>&nbsp;&nbsp;&nbsp;&nbsp;
        <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>&nbsp;&nbsp;&nbsp;
        <a href="/shoukebao">授课宝</a>&nbsp;&nbsp;&nbsp;
        <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>&nbsp;&nbsp;&nbsp;
        <a href="/SeewoBBS">SeewoBBS</a>&nbsp;&nbsp;&nbsp;
        <a href="/UnifiedLanding">统一登陆平台</a>&nbsp;&nbsp;&nbsp;
        <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>

你可能感兴趣的:(mysql,前端)