【手把手】JavaWeb 入门级项目实战 - 文章发布系统 （第一节）

时间  2019-11-16
标签 手把手 javaweb 入门 项目 实战 文章 发布 系统 一节 栏目 Java 繁體版
原文   原文链接

312334546574820.jpg

序

最近琢磨着要写点东西，把基本的Java Web开发流程完整地走一遍，最后决定，干脆就写一个小小的项目实战吧。这个小项目做为一个JavaWeb的入门例子，从前台页面到项目发布，把整个流程走通。所谓麻雀虽小，五脏俱全。难度不是很高，正好能够做为入门使用。javascript

接下来就是作什么的问题了，首先不能太简单，那样的话就没意思了。也不能太复杂，由于个人确也没那么多时间，思前想后，我打算写一个小型的文章发布系统。css

老实说，我也不知道最终会作成什么样子，可是基本的CRUD确定少不了的。前台页面的话，我会尽量作得好看一点，毕竟我也不是专门作前端的。html

至于知识点，固然是尽量丰富，把我用过的，而且理解的东西，一步一步地集成进去。前端

嗯，这个系列一旦开始，之后基本上就围绕着这个小项目写文了。个人意思是，其余文章都不更了，在这个小项目写完以前，我会把其余的文章都放下，全心全意地编写这个系列。java

终于开始了，想一想还有点小激动呢。mysql

1. 项目的大体规划

开发工具仍是用eclipse，数据库采用mysql。MVC框架的话，我就不用框架了，纯粹用JSP来写，实际开发确定不会这么作，不过，这毕竟仍是有意义的。固然，你也能够把它换成框架版的。为何用JSP？由于JSP比较简单，做为一个入门级的web项目，并且我是一边开发一边写文，我就懒得用MVC框架了。web

为何我要一边开发一边写，由于我以为，若是所有开发好了，再让我从头开始，把开发流程写出来，那是很庞大的工做量，也不现实。并且，一边开发一边写还有个好处，那就是能够帮助读者看到整个项目的开发流程。sql

并且，包括我本身也不知道最终会写成什么样子，也可能本文结束后就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

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">

 <!-- 欢迎页面 -->
 <welcome-file-list>
   <welcome-file>index.jsp</welcome-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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</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"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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

接下来，绘制 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 ;
}

3.gif

这样就好看多了吧。

时间差很少了，今天就到这里。至于更新频率的话，不必定，不过周更是确定会有的。

这个系列也是个人一次尝试，但愿你们喜欢。

网盘地址 http://pan.baidu.com/s/1mhN754s#list/path=%2F

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程