一、项目实现功能要求
- 1.1作品简介
该项目要求类似于公司介绍网站,要求要有该公司的一些产品的介绍和一些实质性的新闻,让客户对该公司有一个清晰的了解,并设置公司内部人员的登录方式,方便内部人原维护更新网站内容。
二、概要设计
- 2.1总体设计
偏向于个人主页和公司首页的结合
- 2.2技术框架:
该项目主要以前端为主,大量使用json-server来模拟和后端的交互,在一定程度上为项目接口提供了快捷的方式,在团队合作过程中能够前后端同步开发,减少了时间的浪费。
- 模块设计
分为几部分:介绍页面、登录页面、管理主页面、新闻报道页面
三 详细设计
3.1介绍页面
主要由导航栏和产品轮播图构成,多数操作是由bootscript的插件构成,后进行修改,导航栏不同区域对应不同的网站跳转。
3.2登录页面:
- 关键代码:
主要用fetch获取自定义数据,接着进行匹配,成功则跳转至新的页面
$('#loginform').on('submit',async function(evt){
loginwarning.style.display="none";
evt.preventDefault();
//console.log(Password.value);
let res=await fetch(`http://localhost:5000/users?username=${username.value}&password=${Password.value}`).then(res=>res.json())
if(res.length>0){
localStorage.setItem("token",JSON.stringify({
...res[0],
password:"***"
}));
location.href="http://127.0.0.1:5500/code/admin/views/home/index.html"
}else{
console.log("失败");
loginwarning.style.display="block";
}
})
3.3管理主页面
分为两大部分:侧边栏和页面内容
3.3-1. 主页面:
渲染自制数据,将不同用户的登录状态显示出来
import {load,isLogin} from "/code/admin/util/loadView.js"
load();
let user=JSON.parse(isLogin());
document.querySelector(".userprofile").innerHTML=`<img src="${user.photo}" style="width:100px;"/>
<div>
<div>${user.username}</div>
<div><pre>${user.introdouction}</pre></div>
</div>`
3.3-2 用户管理:
该部分主要时针对公司内部人员通过公司给予的账号密码进行登录、维护,大部分情况下人员都会有调动,所以该部分可以清晰知晓管理人员名单
import {load} from "/code/admin/util/loadView.js"
load()
let photo=""
addUserform.onsubmit=async function(evt){
//消除默认的效果
evt.preventDefault();
//获取数据
await fetch("http://localhost:5000/users",{
method:"post",
headers:{
"content-type":"application/json"
},
body:JSON.stringify({
username:username.value,
password:Password.value,
introduction:introduction.value,
photo
})
}).then(res=>res.json());
location.href="/code/admin/views/user-manage/userlist/index.html"
}
//导入并显示图片
photofile.onchange=function(evt){
let reader=new FileReader()
reader.readAsDataURL(evt.target.files[0])
reader.onload=function(e){
photo=e.target.result
}
}
- 3.3-3新闻内容的维护(新闻管理)
主要解决公司每天的一些重大新闻的更新,让内部及客户有更快的知晓。
功能的实现利用wangeditor.com的富文本插件,通过获取填写的信息,提交给自己构建的.db.json数据文件中达到类似于更新数据库的效果
- 核心代码
import {load,isLogin} from "/code/admin/util/loadView.js"
load()
let content=""
let cover=""
const { createEditor, createToolbar } = window.wangEditor
const editorConfig = {
placeholder: 'Type here...',
onChange(editor) {
const html = editor.getHtml()
console.log('editor content', html)
// 也可以同步到 <textarea>
content=html
}
}
const editor = createEditor({
selector: '#editor-container',
html: '<p><br></p>',
config: editorConfig,
mode: 'default', // or 'simple'
})
const toolbarConfig = {}
const toolbar = createToolbar({
editor,
selector: '#toolbar-container',
config: toolbarConfig,
mode: 'default', // or 'simple'
})
coverfile.onchange=function(evt){
let reader=new FileReader()
reader.readAsDataURL(evt.target.files[0])
reader.onload=function(e){
cover=e.target.result
}
}
//将数据渲染成表单的形式
addNewsForm.onsubmit=async function(evt){
evt.preventDefault()
await fetch("http://localhost:5000/news",{
headers:{
"content-type":"application/json"
},
method:"post",
body:JSON.stringify({
title:title.value,
content,
category:category.value,
cover,
author:JSON.parse(isLogin()).username
})
}).then(res=>res.json())
//
location.href="/code/admin/views/news-manage/newslist/index.html"
}
- 3.3-4新闻列表
主要实现的功能是让后台管理人员更加简单的管理新闻的更新,并查看效果
核心思想和用户管理列表一致,利用bootscript的Modol插件对三个按钮重新绑定事件效果达到预览、编辑、删除的效果
4.新闻报道页面
4.1搜索框
首先导入搜索框的插件,对插件中隐藏、显示的关键字匹配框进行模糊查询,将模糊查询的数据渲染生成列表。
- 核心代码:
function render(){
renderList()
renderTab()
}
async function renderList(){
list = await fetch("http://localhost:5000/news").then(res=>res.json())
list.reverse()
let cardcontainer=document.querySelector(".cardContainer")
cardcontainer.innerHTML=list.slice(0,4).map(item=>`
<div class="card" data-id="${item.id}">
<div style="background-image:url(${item.cover});" class="imgcover">
<div class="card-body">
<h5 class="card-title" style="font-size:16px">${item.title}</h5>
<p class="card-text">${item.author}</p>
</div>
</div>
</div>
`).join("")
//迭代器
for (let item of document.querySelectorAll(".card")){
location.href=`/code/admin/web/detail/index.html?id=${item.dataset.id}`
}
}
function renderTab(){
}
render()
4.2 新闻显示栏
该部分主要显示的是新闻部分内容,让客户能够一眼看到并有想要进一步了解的欲望,生成这四个显示的新闻,采用对之前后台管理系统添加的内容,获取并进行渲染至网页中,形成新闻块。每个块都有详细新闻的链接,点击即可查看。
- 核心代码
async function renderList(){
//请求数据,将新闻的图片、标题、作者放入新生成的块中达到目的。
list = await fetch("http://localhost:5000/news").then(res=>res.json())
list.reverse()
let cardcontainer=document.querySelector(".cardContainer")
cardcontainer.innerHTML=list.slice(0,4).map(item=>`
<div class="card" data-id="${item.id}">
<div style="background-image:url(${item.cover});" class="imgcover">
<div class="card-body">
<h5 class="card-title" style="font-size:16px">${item.title}</h5>
<p class="card-text">${item.author}</p>
</div>
</div>
</div>
`).join("")
四、项目总结
问题分析
这是第一次做的较为完整的页面,体量较大,在获取数据和将数据渲染至网页中,极其容易导致文本错乱。需要极规整的思路和部署,更主要的是需要大量练习,来强化思维和技能。