作品展示网站

目录
- 网站的用途
- 作品思路
- 开发语言
- 前端分块
- 具体实现
总结

自己所在的工作室需要一个答辩展示的网站，要把成员的寒暑假答辩作品由网页的方式展现出来，更加直观展现。这应该是我做的第一个项目，当然这个网站不是我一个人写的，还有一个同学（大佬）一起完成的作品。我负责前端，实现前后端分离。整个项目是用IDEA开发的，IDEA是这个暑假接触到的新的开发环境，感觉比eclipse好用一点。

作品思路

简单大气是对于网站的要求（但是感觉自己没有实现）；
前端页面功能模块化，展示，个人中心，后台；
前后端分离，利用ajax和js（后面有代码展示）；
实现转换markdown的 .md文件为html页面展示；
增加点赞分享等功能，增强用户体验感；

开发语言

前端是看了许多模板之后找的一个模板，不适合，需要修改，发现修改是一个漫长的过程，后面就自己手写页面。
开发语言：HTML CSS JS
开发环境：IDEA
前端呈现：templates使用html
前端框架：bootstrap（因为现在只会bootstrap）

前端分块

自己也是在课余时间学习的前端，做的不好，颜色搭配不理想。

首页：轮播图，最新作品，推荐作品。
作品列表页面：ajax分页，js动态加载。
作品详情页面：model从后台传数据到前端。
个人中心：答辩作品管理，账号管理（更多功能有待添加）。
后台管理页面：目录,表格，模态框。
以下是一些图片：（自己感觉不好看，有待改进，不喜勿喷）

具体实现

这应该是整篇博客的精华了（虽然这篇博客不咋地）hhhhh。

ajax封装代码，发送请求。

$.ajax({"url": "/testBoot/workThing",//后台接口type: 'POST',//POST请求方法dataType: 'json',//数据格式jsoncontentType: 'application/json',success: function (list2) {//list2后台传过来的数据var ulbody=document.getElementById('newworkbody');for(var i=list2.length-1;i>list2.length-10&&i>=0;i--){var div=getDataDiv(list2[i]);ulbody.appendChild(div);//这是js动态加载的函数}goodWork();},error: function (XMLHttpRequest, textStatus, errorThrown) {console.log('XMLHttpRequest:');console.log(XMLHttpRequest);alert('网络异常！尝试刷新网页解决问题')}});

通过接口与后台数据库连接，加载数据。
这个是基本的ajax请求模板。

js动态加载，生成文档元素

function getDataDiv(h) {var div1=document.createElement('div');div1.setAttribute('class','col-md-4');//图片var div2=document.createElement('div');div2.setAttribute('class','thumbnail');var img=document.createElement('img');var picture=h.work.picturePath;var picture1=picture.substring(14);console.log("图片名称"+picture1);img.src="/Path/"+picture1;img.style.width="100%";img.style.height="200px";div2.appendChild(img);//文字var word=document.createElement('div');word.setAttribute('class','caption');//文字->主题var Title=document.createElement('a');Title.setAttribute('name','title');Title.setAttribute('class','title');Title.setAttribute('href','/testBoot/findWorkDto?id='+h.work.id);Title.innerText=h.work.title;Title.style.fontSize="20px";word.appendChild(Title);div2.appendChild(word);//分割线var para1=document.createElement('p');// para1.setAttribute('class','list-group-item-text');para1.setAttribute('class','para1');div2.appendChild(para1);var author=document.createElement('span');author.setAttribute('class','author');//1.这里要改author.innerHTML=h.userName;para1.appendChild(author);//创建时间//发布时间var time=document.createElement('span');time.setAttribute('class','time');time.innerHTML=h.work.creatTime;para1.appendChild(time);div1.appendChild(div2);return div1;}

经过这次的项目之后发现js是真的强大，以前没有认真学习，这次领教了！原来document里面的元素也可以js动态生成。但是自己的代码还是有缺点的，就是每次访问一个页面加载都要用到后台访问数据库，对于整个项目都有影响，还是要减少对于数据库的访问，保存数据。这些代码比较基础，相信大家都能看得懂。

加载本地的图片，直接写src绝对路径是加载不出来的，需要给自己文件夹设置一个路径。
在java源代码中添加一个类去设置。

@Configuration
public class WebAppConfigurer extends WebMvcConfigurerAdapter {@Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {//        D:/FileCenter/这个是你本地文件的路径，在html中就可以用/Path/代替registry.addResourceHandler("/Path/**").addResourceLocations("file:D:/FileCenter/");super.addResourceHandlers(registry);}
}

给大家推荐一个比较好用的分页的插件（依赖，不清楚hhhhh）
先在 pom.xml中导入依赖

      <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>4.1.6</version></dependency>

创建一个类PageHelperConfig(直接放在源代码包里面就可以，最好再建一个package把这些工具放进去)

import com.github.pagehelper.PageHelper;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import java.util.Properties;
@Configuration
public class PageHelperConfig {@Beanpublic PageHelper pageHelper() {PageHelper pageHelper = new PageHelper();Properties p = new Properties();p.setProperty("offsetAsPageNum", "true");p.setProperty("rowBoundsWithCount", "true");//resonable范围p.setProperty("reasonable", "true");pageHelper.setProperties(p);return pageHelper;}
}

最后一步就是使用了！！！
在controller层使用，将得到的数据分页展示：实例
controller层

@RequestMapping("/listUser")
//    开始页面默认值为0，页面数据大小默认值为5，这些值都是根据自己的需要可以更改的。public String listUser(Model model, @RequestParam(name = "start", defaultValue = "0")int start, @RequestParam(name = "size", defaultValue = "5") int size){//pageHelper可以直接使用， id ASC按照id降序排列PageHelper.startPage(start, size, "id ASC");List<User> list1 = userLowService.findTrueUser();//把获取到的信息放在pageInfo中，转发model域PageInfo<User> page1 = new PageInfo<>(list1);model.addAttribute("page", page1);//page在目标页面可以直接使用return "usertable";}

由于自己也是初学，写了一些注释，和我一样的小白可以看一下哦!
html页面使用

 <div style="margin-top:15px;display: inline-block;"><a th:href="@{/manage/listUser(start=0)}">[首  页]</a><a th:href="@{/manage/listUser(start=${page.pageNum-1})}">[上一页]</a><a th:href="@{/manage/listUser(start=${page.pageNum+1})}">[下一页]</a><a th:href="@{/manage/listUser(start=${page.pages})}">[末  页]</a></div>

上面用到了thymeleaf
在html里面添加就可以用th***获取值

<html xmlns:th="http://www.thymeleaf.org">

用thyme leaf在html中获取session的值也非常方便吧
5. .md文件转换为html展示
给大家推荐两个博客，用插件完成，如果想要代码，评论区回复。
链接?:.md转换为html
链接?:Markdown编辑器editor.md的使用
6. 分享插件share.js，真的很方便，但是自己一些细节没有实现
一样还是分享博客，想要代码，评论区回复
链接?：一键分享工具share.js
链接?：share.js分享 JQ第三方分享插件可自定义链接、标题

总结

总结一下自己做的项目虽然自己只负责前端部分，但是感觉还是学习到了许多知识。这个暑假也算是没有荒废，要感谢工作室学长学姐的帮忙，还有大佬们帮忙改bug，过程挺开心的。
现在这个项目还有许多要改的地方，后续还要修改，部署到服务器上，投入使用。
如果发现博客里面的问题，希望在评论区指出，over。

作品展示网站——2019暑假答辩相关推荐

springboot vue婚纱摄影师作品展示网站系统javaweb项目
摄影师爱好者交流平台是一个为摄影师爱好者提供帮助和交流的一个平台,这个平台协助摄影师互相交流,很多摄影师爱好者可以互相交流意见,平台里的每个人可以互相展示优秀的摄影作品,还可以在线讨论,可以让摄影爱好 ...
15个使用 CSS3 制作的漂亮作品展示网站
今天分享的作品集网站有些特别,因为他们都是使用 CSS3 技术制作的.对于设计师来说,为了吸引注意力,作品集必须展示出你的能力,这有点像制作简历,要让人们看到你所擅长的,突出的部分,这是一次推销自己的 ...
设计作品展示类网站，设计提升调性必不可少
作品展示类平台绝对是设计师最熟悉的类别之一,不仅仅是实际需求多,而且对设计师而言,展示作品也是常见需求. 这也是更多设计师选择集设的原因,给你一个平台让你的原创设计作品展示给世界. 集设作为设计师的 ...
莫安迪2019平面设计作品展示
莫安迪2019平面设计作品展示
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se
200套工作室设计行业响应式Html5模板HTML5+CSS3设计网站模板简洁设计师作品展示响应式模板整洁扁平宽屏CSS3网站模板html5网页静态模板Bootstrap扁平化网站源码css3手机se ...
游戏原画设计HTML5模板是一款适合网页游戏原画设计作品展示的HTML5网站模板。
游戏原画设计HTML5模板是一款适合网页游戏原画设计作品展示的HTML5网站模板.不仅仅是首页,二级页面,三级页面,登陆,购物车等,页面齐全功能齐全 js+css+html (img,字体均有), ...
HTML期末作业~个人信息展示网站响应式模板(HTML+CSS+JavaScript)
项目:雷神个人信息展示项目作品描述:个人信息展示网站响应式模板HTML+CSS+JavaScript.主要包括的页面有HOME,ABOUT,MOVIE,SPORTS,TRAVEL,SINGLE,CO ...
【读书笔记《Bootstrap 实战》】2.作品展示站点
假设我们已经想好了要给自己的作品弄一个在线站点.一如既往,时间紧迫.我们需要快一点,但作品展示效果又必须专业.当然,站点还得是响应式的,能够在各种设备上正常浏览,因为这是我们向目标客户推销时的卖点.这 ...
虚拟鼠标代替安卓触屏_美术学院18级虚拟空间设计专业数字图像程序基础课程优秀结课成果展示优秀学生王雨禾作品展示...
学生代表:STUDENT REPRESENTATIVE |2018级虚拟空间设计专业王雨禾此次编程课程的学习,让我受益匪浅,短短八周的时间,使我进一步加深了对自身专业的了解,也启发了我,提供给 ...

作品展示网站——2019暑假答辩

作品展示网站

目录

网站的用途

作品思路

开发语言

前端分块

具体实现

总结

作品展示网站——2019暑假答辩相关推荐

最新文章

热门文章