第7课编写留言板页面 2021年10月20日 17:56 阅读(308)

先把前台的页布局完成。我们需要使用 html + bootstrap 来做留言板的列表和提交留言。能学到基本的html和bootstrap知识。后面会慢慢了解这个 html 语言、css 样式表、bootstrap。

第1步，创建一个新的 controller ，命名为 IndexController

创建方法可以参考前面课程：如何创建 controller

创建后的controller 如下图所示：

第2步，IndexController 添加调用index.jsp 的方法

我们还没有创建 index.jsp ，可以先写上方法。该方法和hello 中的一样，直接复制过来。

如下图所示：

完整的代码如下：

package cn.qcwl.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/")
public class IndexController {
	
	@RequestMapping("")
	public String index() {
		return "index";
	}
}

第3步，添加 index.jsp 页面

前面已添加过 jsp 页面，可以参考以前的课程：添加 jsp 页面

添加后如下图所示：

添加 jquery 和 bootstrap 的引用。

添加后如下图所示：

就是复制 hello.jsp 中的代码，然后粘贴到 index.jsp 中

第4步，根据留言板页面添加html代码

这里就不做详细的说明了。具体添加过程在视频中会详细介绍。

最终效果如下图所示：

完整的代码如下：

<div class="container">
	 <div class="row">
	 	<h1 class="bg-danger text-center">我的留言板</h1>
	 </div>
	 <div class="row bg-primary">
	 	<div class="col-sm-2"><p >标题</p></div>
	 	<div class="col-sm-6"><p>内容</p></div>
	 	<div class="col-sm-2"><p>留言人</p></div>
	 	<div class="col-sm-2"><p>留言时间</p></div>
	 </div>
	 
	 <div class="row">
	 	<div class="col-sm-2"><p>这里查程序入门吗</p></div>
	 	<div class="col-sm-6"><p>请问这里可以零基础学习编程 开发吗</p></div>
	 	<div class="col-sm-2"><p>李大海</p></div>
	 	<div class="col-sm-2"><p>2021-9-27 10:12:00</p></div>
	 </div>
	 <div class="row">
	 	<div class="col-sm-2"><p>从这里能学到什么</p></div>
	 	<div class="col-sm-6"><p>我想知道从这里能学到什么</p></div>
	 	<div class="col-sm-2"><p>张天天</p></div>
	 	<div class="col-sm-2"><p>2021-9-28 10:12:00</p></div>
	 </div>
	 <div class="row">
	 	<div class="col-sm-2"><p>编程开发能挣多少钱</p></div>
	 	<div class="col-sm-6"><p>听说编程开发挺挣钱的，是吗</p></div>
	 	<div class="col-sm-2"><p>刘思思</p></div>
	 	<div class="col-sm-2"><p>2021-9-27 09:12:00</p></div>
	 </div>
 </div>
  <br>
  <br>
  <br>
  <div class="container">
  	<div class="row">
  	
  	<div class="panel  panel-default">
		<div class="panel-heading">添加留言</div>
		<div class="panel-body">
		  	<form>
		  		<div class="form-group">
			    	<label for="ly_title">标题</label>
			    	<input type="text" class="form-control" id="ly_title" name="ly_title" placeholder="标题">
				</div>
				<div class="form-group">
					<label for="ly_content">内容</label>
					<input type="text" class="form-control" id="ly_content" placeholder="内容">
				</div>
				<div class="form-group">
					<label for="ly_author">留言人</label>
					<input type="text" class="form-control" id="ly_author" placeholder="留言人">
				</div>
				<div>
					<button class="button">提交留言 </button>
				</div>

		  	</form>
	  	</div>
  	</div>
  	</div>
  	
</div>

这里留言板的主页面完成。后面开始操作数据库了，在操作数据库前要先连接到数据库。下节课我们将连接到数据库

本次课程的代码下载地址

请使用百度云盘下载

链接：https://pan.baidu.com/s/1mytybWhycI4YvQzdZ2SZrQ

提取码：bpai

原创文章，转载请注明本文链接地址(违者必究): 第7课编写留言板页面

打赏作者很喜欢这篇文章，打赏犒劳下作者，以此激励作者创作更多