Giter VIP home page Giter VIP logo

music's Introduction

music

花了一个星期时间做的的基于SSH一个小型WEB项目，界面仿的是桌面版的网易云音乐，采用前后端分离，使用iframe将多个浏览界面整合到一个网页上了，主页和iframe里的网页之间的交互postMessage通过跨文档请求结合sessionStorage来实现，消息实时通知功能是通过webSocket来实现的。前端界面元素使用了bootstrap,图标是“阿里巴巴矢量图标库”里找的，设计的时候并没有进行响应式布局处理，主要用到了bootstrap里的栅格化布局和按钮，模态框，表格等元素。同时也用到了angularJs，angularJs的ng-repeat非常好用，我主要用它来控制歌曲列表和评论列表之类的显示，这比使用jquery直接操作dom要方便多了。前端和后端的交互是通过json和ajax来实现的，所以struts2的action基本都是用来返回json的。

这个项目我在自己的云服务器上已经部署:

   访问链接http://www.myfirstday.cn/music

主要的技术:

前端：html5,css3,javascript,jquery,bootstrap,angularJs
后端：java,struts2,hibernate4,spring4,webscoket 图标：阿里巴巴图标库，bootstrap自带图标

项目文件结构:

image

用例图:

image image

数据库类图：

image

部分功能界面展示：

1.首页 image

2.登录和注册 image  

3.点击听歌并且评论 image  

4.关注其他用户 image  

5.查看听歌记录 image  

6.管理评论 image  

music's People

Contributors

duckshell avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.