奥昇信息项目总结
奥昇项目总结信息
2017年10月24日晚上,通过一轮紧张刺激的答辩,我的项目大体上算是完成了,大概用去了将近一个月左右的时间。从刚开始的死数据,静态页面,到后来的数据随意更改,多样的页面效果。这其中所用到的知识点,了解到的知识点,都是非常之多,那段时间也是认识到了自己还需要努力。
这篇总结记录的是我从项目的开始到结束所接触到的一些我自己认为比较重要的知识点,以及一些至今为止都还有点不是很熟练的地方。所以,写这篇博客的初衷就是想以后能够没事就是看看,加深一下自己在某些重要知识点上的记忆。
1. Bootstrap框架
Bootstrap框架是我刚开始做项目是学习到的一种前端框架,其中所包含的用处有很多:网页布局,轮播图,动画,下拉导航栏,滚动监听,等等。学习Bootstrap框架解决了我很多代码上的问题,页面布局更加灵活,没有了当初的分辨率更改导致的布局混乱问题,再就是替代了js做出来的轮播图效果。我也用到了滚动监听,只不过网站首页整体内容并不多,所以效果并不是特别好。下面我会用图片的形式列出我使用的一些知识点。
-
Bootstrap轮播图
对于刚开始学习前端的我来说,JS是一个难点,然而Bootstrap框架的轮播图很好的帮我解决了这样一个大问题。相比于JS来说,Bootstrap框架的轮播图代码好理解好很多,只需要去引用就行了。当然前端学到后面,还是必须要对JS了解,毕竟JS能做的事情比Bootstrap还是要多的。
-
Bootstrap框架网格系统(页面布局)
网格系统最大作用就是能够适应大部分主流设备的分辨率大小。如果不使用Bootstrap框架,纯粹的用CSS样式来进行布局的话,会有很大的可能在设备分辨率变动的情况下,页面整体布局也会发生变动。
-
Bootstrap框架下拉列表
下拉列表也是很方便的,直接去套用就行了,当然你也可以更改Bootstrap.css文件里面的样式,使其页面效果变成你想要的。
-
Bootstrap框架滚动监听
滚动监听用到的代码比前几个会稍微麻烦一点,其中的href里面的值需要和前面的某些标签的id相互对应,也就是设置在什么地方,滚动监听的导航栏发生变化。
以上就是我在实现项目的时候用到的一些Bootstrap框架的知识点,当然还有很多没有用到的没列出来,我要一个一个列出来的话,那我的总结就变成教程了。
2. phpMyWind的使用
一个静态的页面往往是不能满足客户的需求的,没有后台,无法在后台更改数据,没有表单提交,不能登录,以及很多很多,少了这些东西,可是说这个网页只是一个空壳子,页面效果做的再好也只能看看,没有丝毫的实际用处。phpMyWind的作用就是能够让网页里面的所有数据都能在后台实时更新不需要你任何的代码知识,由此可见,phpMyWind的是多么有必要了。实现用phpMyWind改动页面数据对于前端工程师来说也是一项很简单的活,它所用到的代码大体上都是差不多的,只是看你是放在什么地方。
- 栏目架设
后台的添加第一步要做的就是添加栏目,你做的页面导航栏有几栏,就添加几个栏目,每个栏目对应的是你的每个页面。栏目可以多,但是绝对不能少。
- 信息添加
栏目架设完成之后就是信息添加,信息添加需要你设置添加在哪个栏目里面,什么标题,什么内容,能够设置的尽量设置,这样在页面显示更加多样,后台查找起来也比较容易。
- 导航栏设置
导航栏是任何页面不可或缺的一个部分,没有导航栏的页面就等同于人少了个心脏。导航栏前端效果需要你自己用代码去写,导航栏上面的每个栏目你可以在后台去改动。
在后台这边添加完毕之后你需要在代码中去调用你在后台的改动。用<?php echo Getnav(); ?>
来调用就行了
- 列表信息引用
信息添加之后肯定是需要在页面中调用出来的,不然你添加的再多,在页面中也是什么都不显示。下面的这是列表信息图片的调用方法。用Execute方法查询数据库符合条件的表格,表格的classid你可以在phpMyWind里面去查看,都是能找到的。查找到符合条件的表格之后再抽调你所需要的数据。<?php echo $gourl; ?>
这是输出连接地址的方法,可以跳转到你指定的页面。<?php echo $row['picurl']?>
这是输出你在phpMyWind里面添加的图片信息的方法。<?php echo $row['title']?>
最后这是输出标题信息的方法。要说的是,类似于title,picurl这类词,你都是可以再数据库里面的表格中去查找到的。
- 单条信息引用
单条和上面的多条信息查询唯一的不同的地方就是在查询语句那里,用的是GetOne,然后再就是后面稍稍有点不同,其他的地方基本上都是一样的。这种语句只会查询一条数据,具体是哪一条,你可以适当添加查询条件。后面我自己添加了一行<?php echo ReStrLen($row['description'],150); ?>
代码,这个代码的意思就是表格中的description这一列的内容限制显示150个字符,在某些地方,这行代码还是非常有用处的。
- 多表查询
当你发现你需要的两个数据并不在同一张表上面的时候,你就要用多表查询调用了。其实多表查询很简单,"SELECT * FROM `#@__info`,`#@__infoclass` WHERE `#@__info`.classid=`#@__infoclass`.id;"
查询两个表,条件就是两个表中数据相同的列名。查询到数据之后再调用出来即可。
3.CSS样式的使用
CSS的使用算是用尽了我毕生所学(其实我也没学多久………^0^)CSS代码较多,我会截取其中一些我自认为比较有意思的CSS样式来展示。
首先来预览一下我的网站各网页效果。
首页
解决方案
-
新闻资讯
-
案例展示
-
关于我们
-
加入奥昇
上面便是我合理使用CSS代码做出来的整体效果。其中用到了CSStransition动画效果。
这是导航栏的动画效果,当光标移上去的时候,导航栏列表背景颜色逐渐改变。
这是首页的关于我们导航部分,光标移上去,显示左右边框。
当然还有很多其他的CSS样式,我就没有一一列举了,毕竟太多,而且都是很常用的几种反复用过来用过去的。
这个网站花了我大概几个星期的时间,自己也没有全心思投入进去,就时不时的改进一下,能做到这样的一个效果,我自己已经比较满意了,毕竟第一个网站。