继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【手把手】JavaWeb 入门级项目实战 - 文章发布体系 (第一节)

黑能大佬
关注TA
已关注
手记 3
粉丝 0
获赞 2


312334546574820.jpg

最近揣摩着要写点东西,把根柢的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

 <welcome-file-list> <welcome-file>index.jspwelcome-file> welcome-file-list> web-app>

2.4 编写index.jsp

在WebContent目录下新建一个index.jsp

Paste_Image.png

代码:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title heretitle> head> <body> 祝贺,web项目现已建立结束。 body> html>

这便是咱们项目的主页。

2.5 用 tomcat 发布项目

我这边用的是tomcat7.0

Paste_Image.png

运转。

发动结束后,翻开浏览器,在地址栏输入

http://localhost:8080/Article/

(我这边的tomcat端口号为8080)

Paste_Image.png

然后能够清楚得看到,网页上出现了这么一行字:

祝贺,web项目现已建立结束。

这就阐明,web项目现已建立成功了!

3. 主页制作

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>主页title> <style> style> head> <body> <div class="header"> div> body> html>

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 ...

<div class="header"> <div class='logo'>原创文字div> </div>

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):

  1. 主页

  2. 原创故事

  3. 抢手专题

  4. 赏识美文

  5. 资助

<div class="header"> <div class='logo'>原创文字div> <ul> <li>主页li> <li>原创故事li> <li>抢手专题li> <li>赏识美文li> <li>资助li> ul> div>

一同,咱们把 li 的小圆点去掉:

ul li { list-style: none ;
}

Paste_Image.png

这个作用明显不是咱们想要的,咱们给logo加一个起浮。

Paste_Image.png

然后,给每一个 li 添加一个左起浮:

.header ul li { float: left ;
}

Paste_Image.png

接着,咱们把方位和色彩做一些调整:

<div class="header"> <div class='logo'>原创文字div> <ul> <li class='first'>主页li> <li>原创故事li> <li>抢手专题li> <li>赏识美文li> <li>资助li> ul> div>

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标签。

咱们将代码改一下:

<div class="header"> <div class='logo'>原创文字div> <ul> <li class='first'><a href="javascript:void(0)">主页a>li> <li><a href="javascript:void(0)">原创故事a>li> <li><a href="javascript:void(0)">抢手专题li> <li><a href="javascript:void(0)">赏识美文li> <li><a href="javascript:void(0)">资助a>li> ul> div>

由于默许的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 ;
}


打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP