您要想的功能都开发好了！｜工学一体化《网站开发综合项目》学生作品作品展示

课程：综合项目

展示班级：202117

   指导老师：周明明 

《网站开发综合项目》课程是技师学院计算机网络技术专业的专业技能课，是一门理论与实践并重的课程。通过本课程的学习，要求学生掌握ThinkPHP5.0、数据库操作、JavaScript、Ajax等基础知识；并结合BootStrap、vue、Jquery等框架，开发出符合Web标准的中小型网站。通过项目的开发实施，强化了学生网站设计与制作技能，积累了网站开发经验，激发了学生学习兴趣，提升了学生自主学习的能力，培养了学生的效率观念、诚实守信意识、乐观健康意识，以及良好的敬业精神、协作精神、创新精神等。 

 ✦ 

简易商城小程序

项目成员：202117 郑泽渐

项目介绍：本项目使用FastAdmin开发后台接口，前台为一个微信小程序，前端访问接口，渲染数据，实现了前后端分离。前台功能主要是各类商品展示、加入购物车、支付订单等；后台则实现了对每个模块信息的综合管理。

详情

界面设计与实现：

（一）首页

显示轮播图，商品类别、商品列表

（二）商品详情页

左右滑动，查看更多···

1. 可以查看商品详情。2. 点击加入购物车，弹出层显示可以选择规格和数量添加至购物车，已添加过该商品则会修改。3. 点击立即抢购，弹出层显示选择完规格和数量，跳转至确认订单页。（三） 确认订单页

左右滑动，查看更多···

1. 查看已选规格，数量，价格，选择地址。

2. 点击地址跳转至选择地址页面可以选择地址（点击地址）和设置默认地址（点击单框）。

3. 点击选择地址页面 + 图标跳转至地址添加页面 可以添加地址。

点击立即支付提交订单，跳转至提示页面。

（四）提示页面

1. 点击返回首页跳转至首页。

2. 点击查看订单跳转至订单详情页。

（五） 订单详情页

（六） 分类页面

（七） 注册、登录页面

商城后台

（一）商品分类管理

1. 可以增，删，查，改商品分类。

（二）商品管理

1. 可以增，删，查，改商品。

（三）商品规格管理

1. 可以增，删，查，改商品规格。

（四）订单管理

左右滑动，查看更多···

1. 可对订单增，删，查，改。

2. 可查看订单详情。

3. 可对订单商品发货。

4. 可处理订单商品退款状态。

 简易商城小程序

 ✦ 

腾讯网

项目成员：202117 张棋宁

技术栈：HTML5、CSS3、Bootstrap、JavaScript、Ajax、Jsonp、Mysql、Jquery、FastAdmin、ThinkPhp5。

项目介绍：本项目重构了腾讯网，使用FastAdmin开发后台接口，前台用ajax访问接口，渲染数据，实现了前后端分离。前台功能主要是是各类新闻的展示、后台则实现了对每个模块信息的综合管理。

详情

界面设计与实现：

（一）腾讯网

1.首页

首页提供了新闻的分类展示以及搜索功能，效果如下：

（二）搜索展示页面

在首页搜索框中输入关键中，点击搜索就进入到该页面。该页面显示搜索的结果。

（三） 今日要闻页面

在首页菜单中点击要闻，进入今日要闻页面。该页面展示当日的最新资讯。右侧热点新闻栏的“换一换”功能，利用了ajax技术，实现了新闻的无刷新切换。

（四）新闻详情页面

点击相应的新闻标题进入新闻详情页。

前台登录页面

（一）界面设计

用户输入相关信息进行登录操作，登录跳转到个人信息页，点击首页按钮跳转到首页。

用户输入相关信息进行注册操作，注册成功进行登录，登录即可进行评论发表，问题反馈等功能。

（二） 问题反馈页面

后台

腾讯网后台管理系统主要采用fastadmin框架来完成。并利用ajax技术实现各个模块的无刷新增、删、改、查功能。

（一） 配置管理页面

（二）新闻管理

该模块提供新闻的增、删、改、查，包含热点榜、轮播图、今日热播三大模块，根据新闻id、新闻标题进行搜索功能、拖拽排序，并关联新闻分类、新闻标签。

（三）新闻添加

填写页面相关内容，然后发布新闻，新闻发布成功，支持图文、视频新闻的发布。

（四）新闻修改

填写页面相关内容，然后修改新闻，新闻修改成功，支持图文、视频新闻的修改。

（五）用户管理界面

用户管理模块也提供了增、删、改、查功能、分组功能。小屏模式下也可以使用。

（六）用户管理界面

该模板主要提供新闻的标签，新闻管理模块对其关联操作。

（七）新闻分类

该模板主要提供新闻的分类以及跳转的前台地址，新闻管理模块对其关联操作。

（八）问题反馈管理

用户通过前台的反馈入口，将问题提交到后台，管理员对问题进行相关的处理。

 腾讯网

 ✦ 

实时新闻网

项目成员：202117 何东航

项目介绍：本项目基于MVC框架，利用think php5、bootstrap、Vue、JQuery、ajax等技术，开发了一个综合新闻网站。前台主要模块有时尚，新闻，体育，文娱，创意，财经等，后台则实现了对每个模块信息的综合管理。

详情

界面设计与实现：

（一）前台首页

前台页面主要采用bootstrap框架完成。浏览新闻是所有用户都具有的最基本的权限，为了方便用户对新闻的快捷浏览，首页提供了新闻的分类浏览功能,新闻的类别、轮播图片等数据都是从数据库中动态产生。效果如下：

（二）专题新闻页面

点击菜单栏的专题，进入到专题页面。该页面分页展示专题类的所有信息。

（三） 前台新闻详情页面

点击上图中的新闻标题或图片，进入到新闻详情页面。

（四）搜索新闻展示页面

点击上图中的新闻标题或图片，进入到新闻详情页面。

（一）界面设计

登录页面主要采用Vue框架完成。登录验证包括两个方面，一是验证用户输入的值是否符合格式要求，二是验证用户名、密码和验证码是否正确。项目利用ThinkPHP的验证器，创建类文件定义字段的验证规则。编写Auth类专门负责与用户相关的验证、授权等功能。用户名和密码验证成功后，使用PHP中的Session机制保存登录状态。

新闻管理后台

（一） 后台首页

新闻后台主要采用Thinkphp5.0框架完成，实现了对用户、管理员、权限规则、新闻内容、网站配置的综合管理。

（二） 用户管理模块

该模块有用户的增，删，改，查等功能，使用Ajax技术实现了无刷新增删改，增加和修改功能使用了模态框。

（三）轮播管理

轮播管理页面主要是对前台首页的轮播图进行控制，可以增，删，改。图片的增加、修改功能都借助了uploadify插件。

文章管理

（一文章列表

文章列表页是对新闻内容的管理， 可以增、删、改、查。新闻添加功模块中，使用了ueditor插件。

（二）栏目列表

栏目列表功能使用无限分类技术，最高级别分类开始，每个子分类都可以分出自己的若干个子分类，可以一直分下去。数据表中增加一个pid字段，记录自己的分类即可，然后用递归或引用算法来实现。

（三）作者列表

作者列表模块，实现了对作者的增、删、改、查功能。

（四）配置管理

配置管理模块，实现了对本网站的常规配置的增、删、改、查功能。

 实时新闻网

 ✦ 

大美江西

项目成员：202117 侯仁烨

项目介绍：该项目用think php5，bootstrap框架，Javascript，jQuery，ajax等完成了大美江西网站。该网站基于mvc框架，分前台，后台两大平台。前台有首页，文化，美食，景区以及酒店等页面。后台包含管理员管理，轮播管理,内容管理以及配置管理等模块。

详情

界面设计与实现：

（一）前台首页

浏览网站是所有用户都具有的最基本的权限，为了方便用户对网站的快捷浏览，首页提供了江西的特色文化，美食，景区以及有名的酒店供大家浏览，页面效果如下：

该前台首页的顶部的左侧的分类是根据后台的栏目管理的多表连接来进行显示的，并且每个分类都有两个模块，为文字介绍和图片展示。这两个页面都是根据后台的管理模块进行实时更新显示的。右侧的登录实现一个跳转到登陆页面的功能。

该页面的左侧轮播图是根据后台的轮播管理来进行轮播实现的，可以自动播放，也可以鼠标点击图标进行图片变换，右侧的图片有个遮罩层的效果。

左侧的精选根据后台数据的id的大小来显示，最新的先显示出来，左侧的热门是根据点击率来显示点击最多的几个，右侧还有一个实现日历显示的案例，是根据javascript和html来实现的。

该页面的左侧是热门推荐，根据后台数据库的文章表的id的大小来显示的，显示的有标题，

内容，游客，栏目名称以及时间，点击图片可以进入详情页面，下面的更多内容可以跳转到所有内容的页面，右侧有游客和最新消息，点击更多游客跳转到所有游客的页面去，最新消息也是根据后台数据库的文章这个表的修改时间来显示的。

（二）文字介绍页面

该页面是根据后台的内容管理模块来显示的，分别由标题，所属栏目名称，作者，概叙，发布时间以及主要内容，底部还做了一个分页功能。

（三）图片展示页面

该页面也是根据后台的内容管理模块来显示的，分别由标题，所属栏目名称，作者发布时间以及主要内容，主要内容太多就做了一个多余部分隐藏变为省略号的功能。底部也做了一个分页功能，首页顶部分类的其他三个跟这一个一样，就是显示的内容和图片不同。

（四）更多内容页面

该页面根据后台的文章表来显示的，显示所有的内容，底部还有一个分页的效果。

（五） 更多游客页面

该页面根据后台的数据库的游客这个表来显示的，有头像，名字，职业，爱好和个人名言，头像是根据Ajax来实现的图片上传，底部有一个分页功能。

后台

（一） 登录页面

登录验证包括两个方面，一是验证用户输入的值是否符合格式要求，二是验证用户名、密码和验证码是否正确。项目利用ThinkPHP的验证器，创建类文件定义字段的验证规则。编写Auth类专门负责与用户相关的验证、授权等功能。用户名和密码验证成功后，使用PHP中的Session机制保存登录状态，登陆页面的验证码点击图片就能刷新。

（二）后台首页

（三）管理员页面

该页面提供管理员的增、删、改、查。

（四）权限管理页面

（五）规则管理页面

（六）轮播图管理页面

（七）栏目管理页面

（八）内容管理页面

上述页面都支持添加，修改，删除和查询功能。其中管理员管理模块还利用ajax技术，实现了管理员的无刷新修改、添加。

 大美江西

 ✦ 

惠州市技师学院网站

项目成员：202117 吕盛安

项目介绍：本项目基于think php5、bootstrap、Jquery、ajax等技术，重构了学院网站。前台首页主要分为四个部分，分别是导航栏部分、侧边栏部分、主体内容部分和尾部部分，导航栏和侧边栏用于分类学院和各系部的新闻资讯，主体内容部分展示了专项专栏新闻、热门新闻，尾部部分展示了学院的一些相关信息例如学院的招生热线、学院地址、学院公众号、二维码等，后台则实现了对管理员、管理员权限、轮播图等信息进行增删查改的管理功能。

详情

界面设计与实现：

（一）前台首页

所有用户都可以浏览新闻，而且为了方便用户对新闻的便捷浏览，首页采用了新闻分类展示功能。

顶部菜单模块、轮播模块、专题模块、热门新闻模块的数据从数据库中动态生成。热门新闻展示最新发布的新闻，点击对应文字或着图片便可查看对应新闻详情内容，点击更多新闻便可查看所有最新上传的各系部的新闻。

（二）更多新闻页面

更多新闻页面分页展示该类别新闻。点击新闻标题便可跳转新闻详细信息页面，可查看新闻的作者发布时间，新闻的标题、内容、图片等 详情页面如下：

新闻的详情页面可以查看新闻详情也都包含导航栏、侧边栏、尾部，有一个跟着页面移动的学院二维码，以及有个回到顶部的按钮，点击侧边栏也可以跳转相应的新闻页面。

学院新闻后台管理

（一） 后台登录页面

管理员输入正确的账号、密码、验证码，通过验证才可以登录后台，登陆成功跳转到后台首页。

（二）后台首页

登录成功跳转到后台首页，首页统计了各系部上传新闻的占比，以及文件占电脑内存的比例，右下方会实时更新当前时间。

（三） 管理员页面

管理员页面可以对新闻管理员账号进行增删查改功能，也可以选择管理员的账号状态，正常就可以使用账号，禁用就无法使用账号。

（四） 权限管理页面

基于Auth权限管理原理，数据库中添加规则表、用户组表、用户表、用户与用户组关联表，用户所具备的功能其实就是对应一个url路径，规则表则记录url路径，通过url来实现权限管理。权限管理页面可以对各类管理员权限进行添加、修改、删除，操作成功后对应的管理员账号会解锁相对应的权限。

（五） 导航栏栏目界面

管理员点击导航栏栏目管理页面，可以对首页顶部导航栏进行增删查改，归类新闻类别，设置顶部栏目下的子栏目，设置成功后，前台导航栏随着改变。

（六）轮播图管理页面

轮播图管理页面可以对前台轮播图进行增删查改功能管理，后台设置成功，前台轮播图会跟着变化。

（七）新闻管理页面

新闻管理页面可以对学院和各系部的新闻内容、图片、作者等进行增删查改功能管理，后台修改成功后，前台相对应的新闻会跟着修改。

（三）新闻作者管理页面

新闻作者管理页面可以管理新闻作者的头像和名称，修改过后相对应新闻的作者名称也会跟着改变，管理员在后台可以对新闻的作者进行增删查改管理。

（四）配置管理页面

配置管理页面可以对网站名称、log、关键字、描述等信息进行管理。

 惠州市技师学院网站

 ✦ 

爱宠物

项目成员：202117叶旺高

项目介绍：本项目基于think php5、ajax、JQuery等技术，实现了爱宠物网站。前台主要模块有文章推荐，宠物种类，热点精选，作者简介等，后台则实现了对每个模块信息的综合管理。

详情

界面设计与实现：

（一）前台首页

查看宠物文章是所有用户都具有的最基本的权限，为了方便用户对文章的快捷浏览，首页提供了文章的分类浏览功能：

网站首页

文章推荐

全部文章

登录页面

（一）界面设计

登录验证验证用户名、密码和验证码是否正确。用户名和密码验证成功后，使用PHP中的Session机制保存登录状态。

爱宠物后台管理

（一）后台首页

（二）管理员管理模块

该模块提供管理员的增、删、改、查入口。对管理员权限进行增加和。

管理员列表界面

权限管理界面

（三）轮播发布

利用弹出框的方式添加轮播图片，实现无刷新添加轮播图片，即可将轮播图片发布出去。在前台进行同步

（四） 文章管理

文章管理页面

文章修改页面

（五）配置管理界面

配置管理模块提了增、删、改功能。

 爱宠物

 ✦ 

阿里百秀及黑马页面

项目成员：202117 张泽锋、何卓霖

项目介绍：本项目基于 html+css、bootstrap、thinkphp5.1等技术，实现了自适应的阿里百秀首页及黑马网站首页。阿里百秀首页主要模块有文章，24小时快讯，话题分类，热搜，搜索框等。黑马首页主要模块有黑马页面，就业指导，移动端学习

详情

界面设计与实现：

（一）阿里百秀首页

PC端及手机端的页面效果如下：

（二）黑马首页

 阿里百秀及黑马页面

 ✦ 

END

编辑：曾思燕

审核：欧阳林  周明明

复核：黄学文

核发：周林卫