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

目录

1. 网站用途
2. 作品思路
3. 开发语言
4. 前端分块
5. 具体实现

网站的用途

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

作品思路

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

开发语言

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

前端分块

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

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

具体实现

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

1. ajax封装代码，发送请求。

$.ajax({
				"url": "/testBoot/workThing",//后台接口
				type: 'POST',//POST请求方法
				dataType: 'json',//数据格式json
				contentType: '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请求模板。

2. 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动态生成。但是自己的代码还是有缺点的，就是每次访问一个页面加载都要用到后台访问数据库，对于整个项目都有影响，还是要减少对于数据库的访问，保存数据。这些代码比较基础，相信大家都能看得懂。

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

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

4. 给大家推荐一个比较好用的分页的插件（依赖，不清楚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 {
  @Bean
  public 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。