Java EE Web开发与项目实战_【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第一节)...
312334546574820.jpg
序
前一段时间有很多朋友来问我各种问题,比如java怎么学,c,c++,c#,java,还有php等等,到底学哪个好,哪个好就业?其中不乏刚毕业找不到工作的学生,我对此也是很有感触,回想当初那最最艰难的日子,我的确很了解这种焦急的心态。其实我个人感觉,编程语言都大同小异,无非是语法变一变,当然,如果你为了快速上手,我还是优先推荐java。
最近琢磨着要写点东西,把基本的Java Web开发流程完整地走一遍,最后决定,干脆就写一个小小的项目实战吧。这个小项目作为一个JavaWeb的入门例子,从前台页面到项目发布,把整个流程走通。所谓麻雀虽小,五脏俱全。难度不是很高,正好可以作为入门使用。
接下来就是做什么的问题了,首先不能太简单,那样的话就没意思了。也不能太复杂,因为我的确也没那么多时间,思前想后,我打算写一个小型的文章发布系统。
老实说,我也不知道最终会做成什么样子,但是基本的CRUD肯定少不了的。前台页面的话,我会尽可能做得好看一点,毕竟我也不是专门做前端的。
至于知识点,当然是尽可能丰富,把我用过的,并且理解的东西,一步一步地集成进去。
嗯,这个系列一旦开始,以后基本上就围绕着这个小项目写文了。我的意思是,其他文章都不更了,在这个小项目写完之前,我会把其他的文章都放下,全心全意地编写这个系列。
终于开始了,想想还有点小激动呢。
1. 项目的大致规划
开发工具还是用eclipse,数据库采用mysql。MVC框架的话,我就不用框架了,纯粹用JSP来写,实际开发肯定不会这么做,不过,这毕竟还是有意义的。当然,你也可以把它换成框架版的。为什么用JSP?因为JSP比较简单,作为一个入门级的web项目,而且我是一边开发一边写文,我就懒得用MVC框架了。
为什么我要一边开发一边写,因为我觉得,如果全部开发好了,再让我从头开始,把开发流程写出来,那是很庞大的工作量,也不现实。而且,一边开发一边写还有个好处,那就是可以帮助读者看到整个项目的开发流程。
而且,包括我自己也不知道最终会写成什么样子,也可能本文结束后就GG了。
不过不管怎么说,这样都会保留一点点新鲜感和乐趣。
如果你是初学者,并且希望完整地看一个小项目是如何做出来的,那么,这个系列也许会适合你。
可能写10篇文章就结束,也可能30篇,看情况了。
好了,正式开始吧。
2. 项目搭建
2.1 新建项目
新建一个 Dynamic Web Project,名字叫Article
Paste_Image.png
点击Finish
Paste_Image.png
将项目的编码改为 utf-8
Paste_Image.png
2.2 新建web.xml
Paste_Image.png
这是web项目的规范,一个web.xml文件可以对你的web项目进行基本的配置。
2.3 编写web.xml
index.jsp
2.4 编写index.jsp
在WebContent目录下新建一个index.jsp
Paste_Image.png
代码:
pageEncoding="UTF-8"%>
Insert title here
恭喜,web项目已经搭建完成。
这就是我们项目的首页。
2.5 用 tomcat 发布项目
我这边用的是tomcat7.0
Paste_Image.png
运行。
启动完毕后,打开浏览器,在地址栏输入
(我这边的tomcat端口号为8080)
Paste_Image.png
然后可以清楚得看到,网页上出现了这么一行字:
恭喜,web项目已经搭建完成。
这就说明,web项目已经搭建成功了!
3. 首页制作
pageEncoding="UTF-8"%>
首页
3.1 标题栏
我们在body区域画一个div,作为首页的标题栏。它的样式先全部在本页面写,也就是style块里面。
div是块级元素,所以,虽然我们没有给它设定宽度,它也默认就是父容器的宽度。所以,我们只需要给它一个高度就OK啦。
*{
padding: 0 ;
margin: 0 ;
}
.header {
height: 60px ;
background: #458fce ;
}
效果:
Paste_Image.png
3.2 画一个LOGO
接下来,绘制 logo,由于楼主的 PS水平比较渣,所以这个部分就用文字替代吧。当然,如果你是PS大神的话,也可以随便给我做一个logo,在下一节中我就放上去。
求 logo ...
css:
*{
padding: 0 ;
margin: 0 ;
font-family: "微软雅黑" ;
}
.header {
height: 72px ;
background: #458fce ;
}
.header .logo {
color: #fff ;
line-height: 72px ;
font-size: 30px ;
margin-left: 20px ;
display:inline-block ;
font-weight:500 ;
}
Paste_Image.png
3.3 导航栏
我随便想了几个导航按钮(其实就是 ul li):
首页
原创故事
热门专题
欣赏美文
赞助
- 首页
- 原创故事
- 热门专题
- 欣赏美文
- 赞助
同时,我们把 li 的小圆点去掉:
ul li {
list-style: none ;
}
Paste_Image.png
这个效果显然不是我们想要的,我们给logo加一个浮动。
Paste_Image.png
然后,给每一个 li 添加一个左浮动:
.header ul li {
float: left ;
}
Paste_Image.png
接着,我们把位置和颜色做一些调整:
- 首页
- 原创故事
- 热门专题
- 欣赏美文
- 赞助
css样式
.header ul li.first {
margin-left: 30px ;
}
.header ul li {
float: left ;
color: #fff ;
display: inline-block ;
width: 112px ;
height: 72px ;
text-align: center ;
line-height:72px ;
cursor: pointer ;
}
标题栏
cursor: pointer 的意思就是说,当我鼠标划上去的时候,让鼠标变成一个小手的模样。
因为实际使用的时候,我们点击导航按钮就自动跳转页面,所以,一般来说,每一个导航按钮都应该是一个a标签。
我们将代码改一下:
- 首页
- 原创故事
- 热门专题
- 欣赏美文
- 赞助
因为默认的a标签会有下划线,字体颜色是蓝色,为了美观,我们修改一下a标签的样式:
a {
color: #fff ;
text-decoration: none ;
}
3.5 给导航按钮添加hover事件
.header ul li :hover {
background:#74b0e2 ;
}
效果:
2.gif
奇怪了,li 的区域没有变色,而当我鼠标划到文字上的时候,会有一个小范围的变色,这是咋回事呢?
难道hover失效了?
当楼主写到这里的时候,我也确实纳闷了一会。。。
结果一查,发现:
Paste_Image.png
我擦,这里多了一个空格啊,有木有!
好吧,要细心一点。。
那么,我们去掉空格,就正常了。
.header ul li:hover {
background:#74b0e2 ;
}
3.gif
这样就好看多了吧。
时间差不多了,今天就到这里。至于更新频率的话,不一定,不过周更是肯定会有的。
这个系列也是我的一次尝试,希望大家喜欢。
您的支持是我写作的最大动力:
免责声明: 博客中所有的图片素材均来自百度搜索,仅供学习交流,如有问题请联系我,侵立删,谢谢。
Java EE Web开发与项目实战_【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第一节)...相关推荐
- java ee web高级,Java EE Web高级开发案例
核心提示:Java EE Web高级开发案例 内容简介:<Java EE Web高级开发案例>充分体现了高等职业教育的特点,突出了理论和实践的紧密结合,以充分掌握基本技术技能和必要的基本知 ...
- java ee web pdf_Java EE Web高级开发案例 PDF扫描版[69MB]
Java EE Web高级开发案例 内容简介: <Java EE Web高级开发案例>充分体现了高等职业教育的特点,突出了理论和实践的紧密结合,以充分掌握基本技术技能和必要的基本知识为出发 ...
- java ee开发环境_设置Java EE 6开发环境
java ee开发环境 本教程简要说明了如何设置典型的环境来开发基于Java EE 6的应用程序. 除了可以正常工作的Windows XP客户端具有足够的CPU能力和内存外,本教程没有其他先决条件. ...
- 设置Java EE 6开发环境
本教程简要说明了如何设置典型的环境来开发基于Java EE 6的应用程序. 除了可以正常工作的Windows XP客户端具有足够的CPU能力和内存外,本教程没有其他先决条件. 在教程中,我们将需要安装 ...
- 视频教程-大型Java项目视频教程_王勇老师DRP项目教程完整版292集-Java
大型Java项目视频教程_王勇老师DRP项目教程完整版292集 动力节点王勇老师,CCTV<影响力对话>栏目特约嘉宾,Java培训知名讲师,中国Java培训领军人物,北京动力节点创始人,董 ...
- 为什么做java的web开发我们会使用struts2,springMVC和spring这样的框架?
2019独角兽企业重金招聘Python工程师标准>>> 今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制 ...
- JavaWeb那些事儿(一)--为什么做java的web开发使用struts2,springMVC和spring这样的框架
今年我一直在思考web开发里的前后端分离的问题,到了现在也颇有点心得了,随着这个问题的深入,再加以现在公司很多web项目的控制层的技术框架由struts2迁移到springMVC,我突然有了一个新的疑 ...
- java计算机毕业设计web开发数码产品推荐平台系统设计与实现源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计web开发数码产品推荐平台系统设计与实现源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计web开发数码产品推荐平台系统设计与实现源码+mysql数据库+系统+ ...
- Java EE WEB工程师培训-JDBC+Servlet+JSP整合开发之14.Servlet请求头信息
–典型的请求头信息 –读取HTTP请求头 –使用表格显示所有请求头信息 –理解各种请求头的含义 –区分不同的浏览器类型 ##############Michael分割线################ ...
最新文章
- NSwagStudio for Swagger Api
- oracle rman 跨版本恢复 11.2.0.3- 11.2.0.4
- makefile中模式规则的引入和介绍------%:%.cpp
- Qt Creator linux下使用SVN
- 东华之旅vs第一次坐飞机经历2018-06-10
- java多线程---比较全的
- 计算机考研专业基础知识视频教程链接
- Python爬虫基础-01-带有请求参数的爬虫
- kaggle:Costa Rican Household Poverty Level Prediction(1)DEA
- Spring依赖注入@Autowired原理解析(一)之寻找需要注入的属性
- jeDate 日期控件
- 华为联运游戏或应用审核驳回:点击登录进入游戏,未显示欢迎栏
- css实现分割线功能,各种各样的分割线(附效果图)
- 《python语言程序设计》笔记
- java接收端怎么收不到_java后端为什么接受不到前端发送的数据
- web入门【Response ServletContext】
- 2021年如何通过网络赚钱
- java实现客户端 与服务端的对话_Socket实现单客户端与服务器对话功能
- 关于时隙、RB、RE、PRB等概念的笔记
- Grib数据转NC数据
热门文章
- 古典概型、几何概型与概率的区别与联系
- Autofac基础知识学习
- pyqt 服务器mysql_PyQt5 中调用MySql接口失败 ( QSqlDatabase 组件) 在Linux环境下如何修改...
- 神经网络隐含层节点数
- 简进祥==iOS 3DES加密解密
- mysql的repeat语句_mysql实例 repeat语句的用法
- python 中的 import
- PW系列 | 用windres 编译.rc 资源文件
- 2022 最新 Android 基础教程,从开发入门到项目实战【b站动脑学院】学习笔记——实战三:购物车
- PeckShield:图文拆解FCoin资产流向,其鼎盛时期便已显颓势?