一、站点的策划和构思
在接到这个作业的时候,我想做一个偏功能化的网站,这个学期学习了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系统。
下面我讲一下服务器配置。大部分内容来自于网上博客。
- java安装
64位的ubuntu系统的下载,所以选择的是这个
cd /home/ubuntu/java 回车
tar –zvxf jdk-8u121-linux-x64.tar.gz 回车
把下面三行插入底部,并保存
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配置成功
- mysql安装
安装mysql,这个比较简单,只要用putty登录输入几条指令就好了
sudo apt-get install mysql-server 回车
sudo apt-get install mysql-client 回车sudo apt-get install libmysqlclient-dev 回车
安装完毕,用以下指令检验是否成功
sudo netstat -tap | grep mysql 回车
如果看到有mysql 的socket处于 listen 状态则表示安装成功
mysql -u root -p
- 第一个代表数据库名;第二个代表表名。这里的意思是所有数据库里的所有表都授权给用户
- root:授予root账号,也可以是其他用户。
- “%”:表示授权的用户IP可以指定,这里代表任意的IP地址都能访问MySQL数据库。
- “password”:分配账号对应的密码,注意,这里输入的密码是你要连接数据库时输入的密码。
- 刷新权限:flush privileges;让我们所做设置立即生效。
use mysql
GRANT ALL PRIVILEGES ON . TO 'root'@'%' IDENTIFIED BY 'password(这里输入你自己的密码)' WITH GRANT OPTION; 回车
flush privileges; 回车
下面添加如下几行
lower_case_table_names=1
skip-name-resolve
保存,然后putty输入以下指令
sudo service mysql restart 回车
然后输入以下代码看看3306端口是否被限制
netstat -anpt|grep 3306
-
tomcat安装
先把tomcat下载过来,选择tar.gz格式,下载地址在文章开头
用putty解压文件
cd /home/ubuntu/tomcat 回车
tar –zvxf apache-tomcat-8.5.12.tar.gz 回车
节点port属性
将原来带的8080修改成80,并加上这个URIEncoding="utf-8"
cd /home/ubuntu/tomcat/tomcat/bin 回车(进入bin目录)
./shutdown.sh 回车(先关闭)
./startup.sh 回车(启动)
)
四、域名的申请、备案和设置
域名的申请,首先按照步骤,登录万网,查找自己需要的域名是否被注册。
很难受,自己的名字lsq已经被注册了,只能lsq001。
选好自己的域名,便去支付购买,购买方式选择了马云爸爸下面的支付宝。。。强大的支付宝。
.com的有点贵,精打细算买了一个.cn,虽然事后被室友嘲讽.cn是多么的不好。。。
购买成功后进行实名认证。
接着去解析自己的域名,包括修改Dns。
然后等了一天,自己的域名终于连上了自己的空间。
五、网站的构建,即插件的选用和配置,或者自编代码的开发调试过程
1.主要内容
如上所示首页示意图为未注册用户第一次进入网站的第一视感,由介绍、失物招领、联系我们、注册登录四个模块组成。
在介绍模块,简洁明了的平台介绍让用户快速了解失物即寻平台的功能,熟悉失物归还的方式。在失物招领模块,用户可以查看失物信息,寻找有无自己丢失物品的信息。在联系我们模块,用户可以把在使用网站过程中的任何问题都反馈给平台后台,我们会根据实际情况与现实需要进行改进。在注册登录模块,用户填写简单基础的信息即可完成注册,然后登陆账号。
完成登陆后,用户可以看到网站由官网主页、信息发布、商城、最新活动、关于我们和我的空间六大功能模块组成。
2.插件的选用
首先,这个网页我用了模板。。。。。UI设计方面基本与源模板无差。插件方面,我特别想提的一点是,我加入了一个粒子特效,背景动画会随着光标的移动而移动。
这个插件感觉起来特别炫。
3.自编代码见附件
六、百度站长工具的使用和站点的运营情况说明
我使用的是使用百度站长工具CNAME进行认证
添加了一个别名。