在打这篇博客的时候,发现从0做个简单动态网页的漫漫长路,总算走的差不多了,过程痛苦,结局开森。
一:Apache
-
介绍:
Apache是世界使用排名第一的Web服务器软件,做外部能访问的网页,需要一个服务器软件,so,当初啥都不懂的我,跟着教程,用了它,之后听说,似乎由于树莓派的性能不高,可以选用个更轻量级的服务器软件。忘了名字了,不过我觉得我的4b运行起来还是,ganggang的。 -
安装
转命令行界面:
apt-get install apache2
-
测试
访问自己的IP,这时候应该能显示Apache的应用界面
ps:Apache默认访问的是pi的/var/www/index.html的文件,需要他显示自己做的页面时,需要把自己的网页文件放入index的同级目录,然后打上地址,like this:
二:PHP
-
介绍:
写web的语言,可以链接数据库,反正没他联动不了数据库,就不能动态网页了。嗯。他很厉害。 -
安装
转命令行界面:
apt-get install php5 php5-mysql
//咦,怎么感觉都这么方便,我自己做的时候,咋感觉,特别痛苦。
-
测试
新建test文件:nano test.php
<?
echo "Hello, world!\n";
?>
运行test文件:php test.php
输出: hello,world 即安装成功
三:Echarts
1、去官网下载echarts.min.js
的文件,放在html文件的同级目录
2、加载Echarts的js包
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
3、官网示例:
//可以把这示例放在自己的html文件里,感受下这个js包的强大。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['数量']
},
xAxis: {
data: ["贵阳市","遵义市","凯里市","六盘水市","都匀市","毕节市"]
},
yAxis: {},
series: [{
name: '数量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
四、jquery
和上面的一样 都是,js包,但是 这里也可以用用另个方法,我觉得 很方便。
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
五:尾
似乎,没啥了,感谢观看。
哦,对,照例感谢大佬们。
https://blog.csdn.net/marksinoberg/article/details/52875610
https://blog.csdn.net/eastmount/article/details/72847067#
https://blog.csdn.net/Lzq_soc/article/details/75909642?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-5
https://blog.csdn.net/weixin_43494237/article/details/102330325?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-23.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-23.nonecase