Vue+Perl的Mojolicious+Mysql数据库+JSON通信接口设计简单的信息系统

最近主要研究DBI和perl的网站开发框架Mojolicious。希望用Mojo做一套支持日常网络运维管理的信息系统。

作为信息系统，网站前端的动态操作同样重要。于是在闲暇之余，对JavaScript也进行了学习。近日在访问开源中国的时候，有篇文章提到Python和Vue.js做一套社区论坛（https://www.oschina.net/p/icarus）。于是查询了一下Vue.js框架，看着Vue做出来的绚烂界面，我决定尝试研究把Vue.js和Mojolicious框架进行结合。

刚开始JavaScript没看明白，看Vue框架的确很吃力。前日，大脑突然开窍了，发现Vue.js的语法确实够傻瓜，对于我这种JavaScript仅限于了解皮毛的人来说，实现点基本的前端动态功能是没有问题。而Perl这边，毕竟CGI时代已经过去，国内perl的书籍资料要么老的掉牙，要么仅仅是语法方面的，木有多少实际应用类的材料（也就《使用Perl实现系统管理自动化》里面的代码，绝地是可以照搬照抄用在实际生产中的），更不要说Mojolicious这类的网页框架了。Mojolicous在国内像样的实例都没有，只能硬着头皮看官方文档。前面在学习Mojolicious期间，就做过一次实践——用Mojolicious+Net::Telnet::Cisco模块摸索着做了一个查询交换机端口状态的静态网站，通过这种动手实践算是对Mojo加深了些理解。

这次，研究JavaScript的框架Vue.js和Perl的web框架Mojolicous做组合开发（研究两个框架间的通信），顺便实践一下全栈开发。做一个城市信息查询功能，主要用到的东西如下：

Vue.js：JavaScript的web框架，框架可大（做web全栈）可小（做前端渲染），由于后端已经用了Mojolicious，所有Vue拿来做前端动态渲染的。

Mojolicious::Lite：Lite是Mojolicous的轻型框架，可以在一个文件中开发一整套的后端。Lite逻辑简单而功能丰富，可以说开发效率绝地快的恐怖，加之perl本身就是“最少的代码实现最丰富的功能”，拿来做个功能开发最合适不过了。

Mojo::mysql：Mojolicious框架中的数据库连接模块，相较于DBD::mysql和DBIx::Simple和DBIx::Class，它本就是为Mojolicous框架开发，代码兼容性没的说，而且该模块自带异步。

MySQL：数据库，没啥可说的。

首先，用Mojo::mysql造一个数据库实例，首先在这里感谢博客园提供的数据库实例（https://www.cnblogs.com/knowledgesea/p/5638603.html）：

现在Mysql里面创建一个数据库，名称countryinfo，创建单表如下：

CREATE TABLE region(
id int not null,
name varchar(40) null,
parentid int null,
shortname varchar(40) null,
leveltype int null,
citycode varchar(20) null,
zipcode varchar(20) null,
mergername varchar(100) null,
lng float null,
lat float null,
pinyin varchar(100) null,
primary key (id)
);

然后把上面的数据处理一下，复制到txt中，把table分隔符替换为“：”分割：

之后用perl脚本导入mysql中，Mojo::mysql可以单独使用，所以我没有调用DBI：

use Mojo::mysql;
use strict;


my $mysql = Mojo::mysql->strict_mode('mysql://root:aaaaaaa@localhost/countryinfo'); #连接数据库，格式为mysql://用户名:密码@数据库地址/数据库名称
open my $TEXT,'<',"regioninfo.txt" or die "Unable to open datafile:$!\n"; #regioninfo.txt简单处理过的数据库内容

my $db = $mysql->db;

eval{
  my $tx = $db->begin;
   #while(<$TEXT>){
   #  chomp;                  不推荐如此读取文件句柄的每行，如果你的程序比较大，多次用到chomp，由于chomp函数默认会处理全局变量而出现报错
   while (my $line = <$TEXT>){
     chomp $line;
	 my ($id,$name,$parentid,$shortname,$leveltype,$citycode,$zipcode,$mergername,$lng,$lat,$pinyin)=split(/:/,$line);
	 $db->query('insert into region (id,name,parentid,shortname,leveltype,citycode,zipcode,mergername,lng,lat,pinyin) values (?,?,?,?,?,?,?,?,?,?,?)',$id,$name,$parentid,$shortname,$leveltype,$citycode,$zipcode,$mergername,$lng,$lat,$pinyin);
  }
  $tx->commit;
};
say $@ if $@;

导入完毕后，我就有了一个单表的数据库。可以开发Mojolicious功能了。当然，你可以提前验证一下将要放入Mojolicous中的数据库查询功能，修改上面的代码即可：

use Mojo::mysql;
use strict;
use utf8::all;

my $mysql = Mojo::mysql->strict_mode('mysql://root:aaaaaaaa@localhost/countryinfo');
#open my $TEXT,'<',"regioninfo.txt" or die "Unable to open datafile:$!\n";

my $db = $mysql->db;

#eval{
#  my $tx = $db->begin;
#   while (my $line = <$TEXT>){
#     chomp $line;
#	 my ($id,$name,$parentid,$shortname,$leveltype,$citycode,$zipcode,$mergername,$lng,$lat,$pinyin)=split(/:/,$line);
#	 $db->query('insert into region (id,name,parentid,shortname,leveltype,citycode,zipcode,mergername,lng,lat,pinyin) values (?,?,?,?,?,?,?,?,?,?,?)',$id,$name,$parentid,$shortname,$leveltype,$citycode,$zipcode,$mergername,$lng,$lat,$pinyin);
#  }
#  $tx->commit;
#};
#say $@ if $@;


#close $TEXT;
my $shortname = '朝阳';
my $results = $db->query('select * from region where shortname = ?', $shortname);
while (my $next = $results->hash) {
  print $next->{name},"\n";
};

如果你在windows CMD中，上述脚本返回的信息是乱码，但是查询功能是成功的。放在Mojolicious中，框架自动编码为Utf8，会显示正常的。

下面先生成一个Lite应用：

d:\perl>mojo generate lite_app
  [exist] D:\perl
  [write] D:\perl\myapp.pl
  [chmod] D:\perl\myapp.pl 744

#!/usr/bin/env perl
use Mojolicious::Lite;

# Documentation browser under "/perldoc"
plugin 'PODRenderer';

get '/' => sub {
  my $c = shift;
  $c->render(template => 'index');
};

app->start;
#下面为html.ep文件（ep即为嵌入式perl）下面我们会把文件导出为独立文件。并删除下面的代码
__DATA__

@@ index.html.ep
% layout 'default';
% title 'Welcome';
<h1>Welcome to the Mojolicious real-time web framework!</h1>
To learn more, you can browse through the documentation
<%= link_to 'here' => '/perldoc' %>.

@@ layouts/default.html.ep
<!DOCTYPE html>
<html>
  <head><title><%= title %></title></head>
  <body><%= content %></body>
</html>

将html.ep文件从lite_app中导出：

myapp.pl inflate

会在当前文件夹下出现如下目录：

之后再当前目录创建public文件用于存放.css、.html和.js文件：

vue.js是我们本次要用的框架文件，jquery.js多余的可忽略不计。重点在于axios.js，Vue框架本身是不支持ajax的，官方推荐使用axios.js来支持ajax应用。我之所以用axios是为了与后端Mojolicous，通过JSON接口进行通信。

之所以选用JSON，是因为perl的散列类型本身与JSON格式是相近，而且Mojolicous框架仅需要一句

$c->render(json=> $hash); #$hash可以是数组或散列的引用

便可以直接把mojo::mysql查询的数组或散列无需额外处理便可直接作为JSON发送给客户端，十分方便。

下面，我要对myapp.pl代码进行修改，实现后端功能：

#!/usr/bin/env perl
use Mojolicious::Lite;
use Mojo::mysql;

helper mysql => sub {state $mysql => Mojo::mysql->strict_mode('mysql://root:aaaaaaaaa@localhost/countryinfo')}; #Mojo::mysql本身是以插件的形式嵌入到mojolicious中的，具体请查询官方文档。


# Documentation browser under "/perldoc"
plugin 'PODRenderer';

get '/' => sub {
  my $c = shift;

#下面是添加的代码，目的是网页中事件进行判断，如果get不带参数，那么返回初始的网页，
#如果带参数，返回查询结果的JSON信息。
  if($c->param('shortname')){
    my $shortname = $c->param('shortname');
	my $db = $c->mysql->db;
    my $results = $db->query('select * from region where shortname = ?', $shortname);
	return $c->render(json=> $results->hashes);
  }
  
  $c->render(template => 'index');
};

app->start;

下面修改index.html.ep。html.ep文件是嵌入perl的html文档，Mojolicous框架会首先处理嵌入的perl表达式转化为计算结果，然后再发送给客户端。也就是说不仅可以在html中嵌入perl，也可以在vue代码中嵌入perl（因为vue是在客户端运行的，而嵌入perl是在服务端运行的，客户端接收到的网页是嵌入perl计算后的结果，不影响vue的运行）。具体代码如下：

//本文档是<body></body>中的内容，完整的html在layouts目录下的default.html.ep文件中，
//稍后贴出
% layout 'default'; 
% title 'Welcome';
<h1>地理信息查询测试</h1>
<h2>前端Vue.js+JSON通信+后端perl的Mojolicious框架+MySQL数据库</h2>
To learn more, you can browse through the documentation
<%= link_to 'here' => '/perldoc' %>.
<br><br><br>
//粘贴的vue官方文档第一条代码
<div id="app">
  {{ message }}
</div>
//数据库查询功能的实现：
<div id="app2">
<form action="">
<label for="">城市简称<input v-model="shortname" type="text" name="" id="" value=""/></label>
<input v-on:click="dj" type="button" value="提交"/>
</form>
<br>结果<br>
<li v-for="inf in info">
  地域简称：{{ inf.shortname }}城市电话：{{inf.citycode}}归属地：{{inf.mergername}}
</li>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
var app2 = new Vue({
    el:'#app2',
    data:{
        shortname:"",
		info:null
         },
    methods:{
       dj:function(){ //调用axios方法，参考的https://www.cnblogs.com/nns4/p/6955603.html
           axios.get('/?shortname='+this.shortname)
		   .then(response=>{
		         if (response.data[0]){
				    this.info = response.data
				 }else{
				    this.info = '无此城市' //这段代码无效，因为昨天刚研究的vue，实在仅了解皮毛，查阅网络资料照葫芦画瓢的。
				 }
		   })
		   .catch(function(error){
		      console.log(error);
		   });
        }
    }
});
</script>

下面是default.html.ep文件，vue和axios的调用均添加在此：

<!DOCTYPE html>
<html>
//下面的title和content为嵌入式perl，具体请查询Mojolicous官方文档
  <head><title><%= title %></title></head>
  <script type="text/javascript" src="vue.js"></script>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="axios.js"></script>
  <body><%= content %></body>
</html>

下面启动网页

D:\perlweblab>morbo myapp.pl
Server available at http://127.0.0.1:3000

 

完成

Mojolicous虽然学了一段时间，但也就基本功能上手些，还需要继续深入。而Vue仅仅昨天看了一天的文档，略知皮毛。而这个功能，也是为了验证两个框架间组合开发的可能性。

我文笔不好，有些东西写的不详尽或者无法理解，欢迎留言。