# news-h5-page

**Repository Path**: yuJunOk/news-h5-page

## Basic Information

- **Project Name**: news-h5-page
- **Description**: 【用途】本名为N站的新闻网站门户前端网页设计本是用于期末新闻网站项目的开发。
【内容】具有门户新闻展示模块、新闻作者的新闻管理模块、个人信息及数据管理模块等。
【技术】主要采用了layui去搭建页面，Echart展示图表，以及layui集成的富文本编辑器。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2022-07-31
- **Last Updated**: 2025-05-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

@[TOC](【网页设计】基于LayUI的N站新闻门户页面)
# 一、背景
起于期末的新闻网站项目开发，在开发中我负责非系统管理用户的门户模块的前后端开发。在此次开发过程中，后端采用的技术主要是原生的JavaWeb和servlet技术，而前端采用的是**LayUI**进行开发的，并引入了**Echart图表和LayUI集成的富文本编辑器**。项目主要功能设计如下：



![请添加图片描述](doc/images/功能设计.png)

N站门户的前端页面具体的模块设计，我主要参考了以下网站

* [有穹网](https://www.youqiong.net/)
* [澎拜新闻网](https://www.thepaper.cn/)
* [CSDN博客网](https://www.csdn.net/)
* [bilibili](https://www.bilibili.com/)

接下来主要贴一下我所写的页面图片。

# 二、N站页面
## （一）游客门户
### 1. index 首页

路径：新闻网站门户\index.html

![在这里插入图片描述](doc/images/首页1.png)
![在这里插入图片描述](doc/images/首页2.png)


### 2. N站——新闻查看
路径：新闻网站门户\pages\newsContent.html

![在这里插入图片描述](doc/images/新闻查看1.png)

![在这里插入图片描述](doc/images/新闻查看2.png)


### 3. N站——新闻发现
路径：新闻网站门户\pages\home\homeNews.html

![在这里插入图片描述](doc/images/新闻发现.png)

### 4. N站——新闻方
路径：新闻网站门户\pages\home\homePublisher.html

![在这里插入图片描述](doc/images/新闻发布方.png)
### 5. N站——新闻专栏
路径：新闻网站门户\pages\home\homeNewsType.html

![在这里插入图片描述](doc/images/新闻专栏.png)
### 6. N站——我的订阅
路径：新闻网站门户\pages\home\homeSubscribe.html

![在这里插入图片描述](D:\pengYuJun\Project\news-web-page-based-on-lay-ui\doc\images\我的订阅.png)
## （二）个人中心
### 1. 个人中心——资料设置
路径：新闻网站门户\pages\self\selfData.html

![在这里插入图片描述](doc/images/资料设置.png)
### 2.个人中心——我的收藏
路径：新闻网站门户\pages\self\selfCollect.html

![在这里插入图片描述](doc/images/我的收藏.png)
### 3.个人中心——我的投币
路径：新闻网站门户\pages\self\selfCoin.html

![在这里插入图片描述](doc/images/我的投币.png)
### 4.个人中心——我的点赞
路径：新闻网站门户\pages\self\selfLike.html

![在这里插入图片描述](doc/images/我的点赞.png)
### 5.个人中心——我的评论
路径：新闻网站门户\pages\self\selfComm.html

![在这里插入图片描述](doc/images/我的评论.png)
### 6.个人中心——我的足迹
路径：新闻网站门户\pages\self\selfWatch.html

![在这里插入图片描述](doc/images/我的足迹.png)

### 7.个人中心——我的订阅
路径：新闻网站门户\pages\self\selfSubscribe.html

![在这里插入图片描述](doc/images/我的订阅（个人中心）.png)
### 8.个人中心——修改密码
路径：新闻网站门户\pages\self\selfPwd.html

![在这里插入图片描述](doc/images/修改密码.png)

## （三）新闻管理
### 1.发布中心——新闻创作
路径：新闻网站门户\pages\publish\publishWrite.html

![在这里插入图片描述](doc/images/新闻创作.png)


### 2.发布中心——新闻管理
路径：新闻网站门户\pages\publish\publishNews.html
![在这里插入图片描述](doc/images/新闻管理.png)

### 3.发布中心——评论管理
路径：新闻网站门户\pages\publish\publishComm.html

![在这里插入图片描述](doc/images/评论管理.png)
### 4.发布中心——作品数据
路径：新闻网站门户\pages\publish\publishData.html

![在这里插入图片描述](doc/images/作品数据.png)

### 5.发布中心——修改新闻
路径：新闻网站门户\pages\publish\publishEdit.html

![在这里插入图片描述](doc/images/修改新闻.png)
### 6.发布中心——发布成功
路径：新闻网站门户\pages\publish\publishReact.html
![在这里插入图片描述](doc/images/发布成功.png)

## （四）登录注册
![在这里插入图片描述](doc/images/登录注册.png)
![在这里插入图片描述](doc/images/注册页面.png)