站点构建课程报告

一、站点的策划和构思

在接到这个作业的时候，我想做一个偏功能化的网站，这个学期学习了wordpress之后，发现搭建个人站点经过一代又一代奇人的开源创新之后，变得愈来愈方便简单。但是我结合了上个学期学习的.Net开发以及自学的Javaweb开发后，打算自己搭站点。于是便有了这个可以帮助大家找回失踪东西的小网站。（这个小网站叫做失物招领平台）

网站由官网主页、信息发布、商城、最新活动、关于我们和我的空间六大功能模块组成。

二、构建软件的比较和选用

由于站点是自行构建的，wordpress没有怎么用，所以下面我就大概阐述下自己编写网页过程中的用的一些小技术。
我是在网上寻找模板时，看到了Amaze UI框架。。。而且之前有学长提过这东西。自己看了看，和之前做的Spring Mvc较为类似，所以用了该框架。

利用Amaze UI框架来编写网页，兼容移动端和PC端。用于开发网页-移动端与网页-PC端，给予用户良好的视觉体验。
Amaze UI是中国首个开源HTML5跨屏前端框架。Amaze UI JQuery版整合的空间、组建比较丰富，Amaze UI从2.0开始，Amaze UI JavaScript组建从Zepto.js转向基于jQuery.js 使兼容、交互更好。Amaze UI React版式基于React.js开发的web组件，可减少DOM操作，有效提高性能。
其优点如下：
1、语义化：Amaze UI开发遵循语义化原则，意图通过类名（class）等信息直观传达元素的功能角色，同时关注结构、样式、行为分离，降低各部分的耦合程度，提高开发效率和可维护性。
2、移动优先，跨屏适配：遵循 “移动优先（Mobile First）”、“渐进增强（Progressive enhancement）”的理念，可先从移动设备开始开发网站，逐步在扩展的更大屏幕的设备上，专注于最重要的内容和交互，适应移动互联潮流。轻松创建跨屏适配的网页。
3、模块化，按需定制：AMUI使用LESS编写样式，结构良好，易扩展，易维护；使用Seajs模块化开发、组织 JavaScript，自然、优雅。
4、专注于HTML5：AMUI 基于轻量的Zepto.js开发，有效减少为兼容旧浏览器的臃肿代码；基于 CSS3 的交互效果，平滑、高效。AMUI专注于现代浏览器（支持HTML5），不再为过时的浏览器耗费资源，为更有价值的用户提高更好的体验。
5、本地化支持：相比国外的前端框架，Amaze UI专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果；针对国内主流浏览器及App内置浏览器提供更好的兼容性支持，节省大量兼容性调试时间。

三、云服务器的构建步骤

服务器是在腾讯云买的学生优惠1元主机，装的是Ubuntu系统。

下面我讲一下服务器配置。大部分内容来自于网上博客。

1. java安装
   64位的ubuntu系统的下载，所以选择的是这个
   

   这里写图片描述
   下载完之后，用winscp登录服务器，主机名是你服务器的公网ip地址，端口是22，然后用root账户登录
   

   这里写图片描述
   登陆之后，进到home/ubuntu目录，新建一个Java文件夹，把刚下的jdk放到java文件夹里面
   

   这里写图片描述
   然后用putty登录服务器，hostname是自己的公网ip，port是22，ssh登录，然后点击open
   

   这里写图片描述
   然后会打开命令行界面，root账户登录
   

   这里写图片描述
   依次输入以下指令来到自己的java文件夹下，并解压安装包
   cd /home/ubuntu/java 回车
   tar –zvxf jdk-8u121-linux-x64.tar.gz 回车

这里写图片描述

然后修改配置，设置java环境变量，用winscp进入etc目录，修改profile文件

这里写图片描述

把下面三行插入底部，并保存
export JAVA_HOME=/home/ubuntu/java/jdk1.8.0_121
export CLASSPATH=/home/ubuntu/java/jdk1.8.0_121/lib
export PATH=$JAVA_HOME/bin:$PATH

这里写图片描述

用putty输入以下指令，使配置生效
source /etc/profile 回车

然后输入以下指令来检验配置是否成功
java -version

这里写图片描述

java配置成功

2. mysql安装
   安装mysql，这个比较简单，只要用putty登录输入几条指令就好了
   sudo apt-get install mysql-server 回车

这里写图片描述

按下【Y】，回车，然后会自行下载并让你输入mysql 数据库的密码，自己设定就好了

这里写图片描述

等他下载完毕，会自行解压安装

这里写图片描述

sudo apt-get install mysql-client 回车sudo apt-get install libmysqlclient-dev 回车

安装完毕，用以下指令检验是否成功
sudo netstat -tap | grep mysql 回车

如果看到有mysql 的socket处于 listen 状态则表示安装成功

这里写图片描述

接下来配置mysql的 外网访问
mysql -u root -p

这里写图片描述

1. 第一个代表数据库名；第二个代表表名。这里的意思是所有数据库里的所有表都授权给用户
2. root：授予root账号，也可以是其他用户。
3. “%”：表示授权的用户IP可以指定，这里代表任意的IP地址都能访问MySQL数据库。
4. “password”：分配账号对应的密码，注意，这里输入的密码是你要连接数据库时输入的密码。
5. 刷新权限：flush privileges;让我们所做设置立即生效。
   use mysql
   GRANT ALL PRIVILEGES ON . TO 'root'@'%' IDENTIFIED BY 'password（这里输入你自己的密码）' WITH GRANT OPTION; 回车
   flush privileges; 回车

这里写图片描述

然后输入【exit】退出mysql操作，继续，用winscp打开，找到mysql的配置文件，我的在etc/mysql/mysql.conf.d/mysqld.cnf里面

这里写图片描述

没有的话，也有可能在etc/mysql/my.cnf里面

这里写图片描述

找到bind-address = 127.0.0.1

这里写图片描述

注释掉这一行，即改为：#bind-address = 127.0.0.1，或者将其改为：bind-address = 0.0.0.0，允许任意IP访问。或者自己指定一个IP地址修改并且在【mysqlid】

下面添加如下几行
lower_case_table_names=1
skip-name-resolve

这里写图片描述

保存，然后putty输入以下指令
sudo service mysql restart 回车

这里写图片描述

然后输入以下代码看看3306端口是否被限制
netstat -anpt|grep 3306

这里写图片描述

3306前面是0，说明正常，任意ip都可以访问现在可以本地用navicat检验是否成功，连接名随便起，主机名就是公网ip，密码是刚刚安装数据库时候设置的密码

这里写图片描述

3. tomcat安装
   

   先把tomcat下载过来，选择tar.gz格式，下载地址在文章开头
   

   这里写图片描述
   用winscp先在/home/ubuntu新建tomcat目录，然后把安装包上传上去
   

   这里写图片描述

   用putty解压文件
   cd /home/ubuntu/tomcat 回车
   tar –zvxf apache-tomcat-8.5.12.tar.gz 回车

这里写图片描述

这里写图片描述

然后为了方便操作，可以用winscp将文件名改为tomcat

这里写图片描述

修改tomcat目录下conf中的server.xml中的节点信息

这里写图片描述

找到：Connector
节点port属性

这里写图片描述

将原来带的8080修改成80，并加上这个URIEncoding="utf-8"

这里写图片描述

然后保存即可，接着用putty启动看看
cd /home/ubuntu/tomcat/tomcat/bin 回车（进入bin目录）
./shutdown.sh 回车（先关闭）
./startup.sh 回车（启动）

这里写图片描述

（Tips：同样的，安全组开放80端口

这里写图片描述

）

四、域名的申请、备案和设置

域名的申请，首先按照步骤，登录万网，查找自己需要的域名是否被注册。
很难受，自己的名字lsq已经被注册了，只能lsq001。
选好自己的域名，便去支付购买，购买方式选择了马云爸爸下面的支付宝。。。强大的支付宝。
.com的有点贵，精打细算买了一个.cn，虽然事后被室友嘲讽.cn是多么的不好。。。

购买成功后进行实名认证。

3.png

接着去解析自己的域名，包括修改Dns。

4.png

5.png

然后等了一天，自己的域名终于连上了自己的空间。

五、网站的构建，即插件的选用和配置，或者自编代码的开发调试过程

1.主要内容

1.jpg

如上所示首页示意图为未注册用户第一次进入网站的第一视感，由介绍、失物招领、联系我们、注册登录四个模块组成。
在介绍模块，简洁明了的平台介绍让用户快速了解失物即寻平台的功能，熟悉失物归还的方式。在失物招领模块，用户可以查看失物信息，寻找有无自己丢失物品的信息。在联系我们模块，用户可以把在使用网站过程中的任何问题都反馈给平台后台，我们会根据实际情况与现实需要进行改进。在注册登录模块，用户填写简单基础的信息即可完成注册，然后登陆账号。

2.jpg

完成登陆后，用户可以看到网站由官网主页、信息发布、商城、最新活动、关于我们和我的空间六大功能模块组成。

2.插件的选用

首先，这个网页我用了模板。。。。。UI设计方面基本与源模板无差。插件方面，我特别想提的一点是，我加入了一个粒子特效，背景动画会随着光标的移动而移动。

6.png

这个插件感觉起来特别炫。

3.自编代码见附件

六、百度站长工具的使用和站点的运营情况说明

我使用的是使用百度站长工具CNAME进行认证

7.png

添加了一个别名。