JS项目实战

一、项目实现功能要求

• 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("")

四、项目总结

问题分析

这是第一次做的较为完整的页面，体量较大，在获取数据和将数据渲染至网页中，极其容易导致文本错乱。需要极规整的思路和部署，更主要的是需要大量练习，来强化思维和技能。