目录
- 网站用途
- 作品思路
- 开发语言
- 前端分块
- 具体实现
网站的用途
自己所在的工作室需要一个答辩展示的网站,要把成员的寒暑假答辩作品由网页的方式展现出来,更加直观展现。这应该是我做的第一个项目,当然这个网站不是我一个人写的,还有一个同学(大佬)一起完成的作品。我负责前端,实现前后端分离。整个项目是用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',//数据格式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请求模板。
- 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 {
@Override
public 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 {
@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。