西瓜新闻发布管理系统,该项目是个练习javaweb相关技术的练手项目,可以进行二次升级和完善。
前端页面设计模仿完美校园制作进行制作,
后端编写前端接口实现页面相关功能,仅供学习交流。
该项目仅基于Javaweb阶段的简单设计,可以用来参考和学习。
技术栈包括:
HTML/CSS/JavaScript:这些是前端开发的基础,用于构建用户界面。HTML 负责定义网页内容结构,CSS 负责样式设计,JavaScript 负责网页交互和动态效果。
Servlet:Servlet 是基于 Java 的服务器端组件,可接收和处理客户端请求,并生成响应。通过使用 Servlet,可以处理表单提交、验证用户身份、执行业务逻辑等操作。
JSP(JavaServer Pages):JSP 允许在 HTML 页面中嵌入 Java 代码,实现动态内容生成。它类似于 Servlet,但更加便捷,提供了更高级的标签库和表达语言。
JDBC(Java Database Connectivity):JDBC 提供了与数据库进行连接和交互的一组 API。通过 JDBC,可以执行数据库的查询、插入、更新和删除操作,并处理数据库事务。
MVC 设计模式:MVC(Model-View-Controller)是一种常用的软件架构模式,用于分离业务逻辑、用户界面和数据模型。在 JavaWeb 开发中,通常使用 MVC 模式来组织代码,提高可维护性和可扩展性。
Ajax(Asynchronous JavaScript and XML)是一种使用 JavaScript 创建异步网络请求的技术。通过 Ajax,可以在不刷新整个页面的情况下,向服务器发送请求并接收响应。它使得网页能够动态地更新部分内容,提升用户体验。Ajax 使用 XMLHttpRequest 对象来与服务器进行通信,可以发送各种类型的数据,如文本、XML、JSON 等,并在接收到响应后执行相应的操作。
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。它使用易于阅读和编写的文本格式,表示结构化的数据。JSON 的数据格式是键值对,其中键是字符串,值可以是字符串、数字、布尔值、数组或对象。JSON 可以与多种编程语言兼容,包括 JavaScript、Python、Java 等。在前端和后端之间进行数据传输时,JSON 常用于将数据从服务器发送给客户端,或者将数据从客户端发送给服务器。
数据库:
MySQL是当下应用最广泛的关系型开源数据库,由于其关系型数据库设计的特点和内部数据存储方式使其具有较好的灵活性,因此成为当下流行的数据库之一。其主要具有源代码可移植性、磁盘空间占用少、运行速度快等优势,可被用于中小型网站的Web后台数据信息查询、增删、修改操作
开发平台:
IDEA(IntelliJ IDEA)是一种集成开发环境(Integrated Development Environment),由JetBrains公司开发。它主要用于Java语言的程序开发,但也支持其他编程语言如Kotlin、Groovy和Scala等。IDEA提供了丰富的功能,包括代码编辑、调试、版本控制、自动完成、代码重构等,使开发者能够高效地编写、测试和调试代码。
页面展示效果:
首页展示:
爆料我知道界面:
文章详情:
关于我们界面:
加入我们:
联系我们:
后台管理界面:
(1)登录
(2)首页
(3)用户管理-用户类别
(注:本系统更能较为简单,并未完善搜索功能,可以根据自己需求进行添加或者注销该功能,添加修改删除功能均正常。)
(4)用户管理-用户列表
用户信息修改界面:
(5)新闻管理-新闻列表
(5)新闻管理-校园成长
(6)设置界面
管理员密码修改界面:
相关技术分享:
1分页:
前端分页部分代码:
<div class="box-footer">
<div class="box-tools pull-right">
<ul class="pagination">
<li><a href="${pageContext.request.contextPath}/adminNewsServlet/upPageServlet?action=listPages&pageNum=1" aria-label="Previous">首页</a></li>
<li><a href="${pageContext.request.contextPath}/adminNewsServlet/upPageServlet?action=listPages&pageNum=${page.pageNum-1}">上一页</a></li>
<c:forEach begin="1" end="${page.pageCount}" var="s">
<li><a href="${pageContext.request.contextPath}/adminNewsServlet/upPageServlet?action=listPages&pageNum=${s}">${s}</a></li>
</c:forEach>
<li><a href="${pageContext.request.contextPath}/adminNewsServlet/upPageServlet?action=listPages&pageNum=${page.pageNum+1}">下一页</a></li>
<li><a href="${pageContext.request.contextPath}/adminNewsServlet/upPageServlet?action=listPages&pageNum=${page.pageCount}" aria-label="Next">尾页</a></li>
</ul>
</div>
</div>
page类
/**
* 分页工具类,该工具类就可以实现所有的表的分页操作
* 现在没有用到第三方工具,只能是自己编写分页的工具类
*
* 分页: limit
* 分页的公式: 获取当前索引公式=(当前页码-1) * 每页显示的条数
*
*/
public class Page<T> {
private int pageNum; // 当前页码
private int pageSize; // 每页显示条数
private int startIndex; // 查询的开始下标
private int count; // 数据总条数
private int pageCount; // 总页数
// 定义一个集合,来保持分页后查询的数据集合
// 每页显示的数据,都在该list集合中
private List<T> list = new ArrayList<>();
public Page(int pageNum, int pageSize, int count) {
this.pageSize = pageSize;
this.count = count;
// 计算总页数
this.pageCount = (count%pageSize==0)?(count/pageSize):(count/pageSize+1);
// 判断pageNum的合法性
if(pageNum>this.pageCount){
pageNum=this.pageCount;
}
if(pageNum<=0){
pageNum=1;
}
this.pageNum = pageNum;
// 计算开始下标
this.startIndex = (this.pageNum-1)*this.pageSize;
}
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getStartIndex() {
return startIndex;
}
public void setStartIndex(int startIndex) {
this.startIndex = startIndex;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public int getPageCount() {
return pageCount;
}
public void setPageCount(int pageCount) {
this.pageCount = pageCount;
}
public List<T> getList() {
return list;
}
public void setList(List<T> list) {
this.list = list;
}
}
分页servlet:
public void upPageServlet(HttpServletRequest request,HttpServletResponse response) throws Exception {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
System.out.println("进入到==>整合的======pagenewsServlet");
try {
// 创建 allNewsService 对象
AllNewsService allNewsService=new AllNewsServiceImpl();
// 获取新闻数据列表
List<News> newsList = allNewsService.SelectAllNews();
int count = newsList.size();
// 定义每页显示的条数
int pageSize = 10;
// 获取页码参数
String pageNumStr = request.getParameter("pageNum");
int pageNum = 1; // 默认第一页
if (pageNumStr != null && !pageNumStr.isEmpty()) {
pageNum = Integer.parseInt(pageNumStr);
}
// 创建 Page 对象并进行初始化
Page<News> page = new Page<>(pageNum, pageSize, count);
int startIndex = page.getStartIndex();
//根据前端页面传来的当前页码,来对查询出来的新闻列表的集合进行分割,根据page类计算的当前页面应该展示的需要来进行截取该页面应该显示的新闻。
List<News> displayedTypes = newsList.subList(startIndex, Math.min(startIndex + pageSize, count));
page.setList(displayedTypes);
// 将 Page 对象存储在请求属性中
request.setAttribute("page", page);
request.setAttribute("adminnewsList",displayedTypes);
// 转发到 user-list.jsp 页面进行渲染
request.getRequestDispatcher("/pages/news/list.jsp").forward(request, response);
} catch (Exception e) {
e.printStackTrace();
}
}
文件上传:
因为设计文件上传的表单会设置
enctype="multipart/form-data"标签属性
enctype="multipart/form-data"
是 HTML 表单元素的一个属性,用于指定在提交表单数据时所使用的编码类型。这个属性通常与<form>
元素一起使用。
multipart/form-data
编码类型适用于当表单中包含文件上传时。它会将表单数据和文件一起进行编码,以便可以在服务器端接收和处理这些数据。当使用
enctype="multipart/form-data"
时,浏览器会使用多部分 MIME 编码格式来将表单数据进行封装。这种编码方式允许同时传输文本数据和二进制文件数据。以下是
enctype="multipart/form-data"
的一些特点:
支持文件上传:通过该编码类型,可以将文件数据附加到表单中,并在提交时一起发送到服务器。
大小限制:由于文件可能较大,因此可能需要在服务器端设置合适的大小限制,以防止超出服务器的容量或造成性能问题。
安全性:使用
multipart/form-data
可以确保表单数据在传输过程中的安全性,因为它会将数据进行编码。服务器处理:在服务器端,需要使用相应的框架或库来解析
multipart/form-data
编码的请求,以获取表单字段和文件数据。要使用
enctype="multipart/form-data"
,只需在<form>
元素中添加该属性即可:html
<form action="upload.php" method="post" enctype="multipart/form-data"> <!-- 表单内容 --> </form>
需要注意的是,在处理包含文件上传的表单时,服务器端的代码也需要进行相应的处理,以接收和保存上传的文件数据。具体的实现方式将取决于所使用的后端语言和框架。
接收并处理
enctype="multipart/form-data"
编码类型的表单时,需要注意以下几点:
文件上传验证:在服务器端接收文件之前,首先要进行文件上传验证。检查文件是否存在、大小是否符合要求,并确保只接受允许的文件类型。这可以通过后端框架或库提供的功能来完成。
文件保存路径:指定一个安全的文件存储路径,确保文件存储在适当的位置,并防止恶意用户通过文件上传漏洞访问服务器文件系统。最好将上传的文件保存在专门的目录中,并使用生成的唯一文件名。
文件处理和解析:根据后端框架或库的文档,了解如何正确解析
multipart/form-data
编码类型的请求并提取表单字段和文件数据。通常会提供一些API或方法来轻松地处理这些数据。内存消耗和性能考虑:由于大文件可能占用大量内存,必要时需要调整服务器配置以处理大文件上传。可以设置最大内存限制,并考虑分块上传或流式传输方式,以降低内存消耗并提高性能。
文件重复性和命名冲突:考虑到多个用户同时上传文件的情况,需要处理文件重复性和命名冲突的问题。可以在保存文件之前检查文件名是否已存在,并采取适当的策略来避免冲突,例如在文件名中添加随机字符串或时间戳。
错误处理和异常情况:捕获并处理可能发生的错误和异常情况,例如文件上传失败、请求超时、无效的文件等。向用户提供有用的错误消息,并及时响应并解决问题,以确保良好的用户体验。
安全性考虑:确保对接收到的上传文件进行适当的安全性检查和过滤,以防止潜在的安全漏洞,如恶意文件、文件包含漏洞等。
根据具体的后端语言和框架,可以参考相应的文档和指南,了解如何安全地接收和处理文件上传。同时,及时更新和维护所使用的框架和库,以获得最新的安全修复和功能改进。
文件上传的表单在Servlet中接收并解析封装的工具类(自己封装的工具类,可以继续优化)
下文中String【】参数是存放的表单中需要接收的字段(例如name,password,age等)前端页面中接收该表单相关数据时,不可以直接通过request.getParameter()的方式接受,应为表单各式为enctype="multipart/form-data"是一种编码的方式上传,直接使用
request.getParameter()接收到的数据为null。下方的工具类可以接受和处理需要文件上传的表单,除了可以文件上传还来可以接收表单中的普通项并封装到map中放回,读者也可以根据自己的需要进行修改。
public class fileupLoad2 {
public static Map<String,String> fileupload(HttpServletRequest request,String[] str) throws FileUploadException, IOException {
request.setCharacterEncoding("UTF-8");
String fileSave=null;
Map<String,String> map=new LinkedHashMap<>();
int x=0;
// 1.使用DiskFileItemFactory创建FileItemFactory工场对象
DiskFileItemFactory fileItemFactory=new DiskFileItemFactory();
// 2.创建servletUpload对象并将工程对象传入
ServletFileUpload fileUpload=new ServletFileUpload(fileItemFactory);
// 3.使用servletUpload对象解析请求获取FileItem对象集合
List<FileItem> fileItems = fileUpload.parseRequest(request);
// 4.遍历集合判断FileItem类型
for (FileItem fileItem : fileItems) {
// 5.使用FileItem对象获取输入流方法获取上传文件保存位置的输入流
if (fileItem.isFormField()) {
// 处理普通项
// 获取字段的名称
String fieldName = fileItem.getFieldName();
// 根据字段名称判断需要获取的字段
// if (fieldName.equals("email")){System.out.println("zhaodaoemail"+fileItem.getString("UTF-8"));}
for (String fieldname:str) {
if (fieldName.equals(fieldname)){
String fieldValue = fileItem.getString("UTF-8"); // 使用 UTF-8 解码
map.put(fieldName, fieldValue);
x=1;
continue;
}
if (x==1){x=0;continue;}
}
} else {
// 文件上传项
// 获取文件的名称带后缀名的 mi.png
if (fileItem.getName()==null || fileItem.getName().isEmpty()){
//如果没有重新上传新图片,则依旧保存原图片的信息
System.out.println("没有上传新文件");
System.out.println("map.get(oimg)=="+map.get("oimg"));
map.put("fileSave",map.get("oimg"));;
}else {
String fileName = fileItem.getName();
System.out.println("fileName=="+fileName);
String fileType = FilenameUtils.getExtension(fileName);// 获取文件的类型
String baseName = FilenameUtils.getBaseName(fileName);
System.out.println("getbaseName=="+baseName);
// 新生成的文件名称
String uuidFileName = UUID.randomUUID().toString().replace("-", "");
fileName = uuidFileName+baseName+"." + fileType;
System.out.println(fileName);
InputStream is = fileItem.getInputStream();
ServletContext servletContext = request.getServletContext();
String realPath = servletContext.getRealPath("/upload/");
File file = new File(realPath);
if (!file.exists()) {
file.mkdir();
System.out.println("url+++"+request.getRequestURI());
}
fileSave = file+"/" + fileName;//文件真实保存的路径
// FileOutputStream os = new FileOutputStream(new File(file, fileName));
FileOutputStream os = new FileOutputStream(new File(fileSave));
// 一读一写,完成文件的上传操作
IOUtils.copy(is, os);
os.close();
is.close();
fileSave=fileSave.substring(fileSave.indexOf("upload")+7);
map.put("fileSave",fileSave);
}
}
}
return map;//返回文件保存的路径
}
}
。。。。。
完整项目:
==》JavaWeb: JavaWeb练习小项目(西瓜新闻),前端仿照完美校园的页面。
西瓜新闻发布管理系统,该项目是个练习javaweb相关技术的练手项目,可以进行二次升级和完善。
前端页面设计模仿完美校园制作进行制作,
后端编写前端接口实现页面相关功能,仅供学习交流。
该项目仅基于Javaweb阶段的简单设计,可以用来参考和学习。
相关技术与工具技术包括:
HTML/CSS/JavaScript、 Servlet、 JSP、 JDBC、MVC、Ajax、JSON、MySQL
注:自己需要会导入和配置项目(推荐使用Idea)