JS原生管理系统

需求分析

1.1目标用户

• 面向大众的新闻创作，科普资料上传

1.2应用市场

• 用于媒体发布新闻
• 用户阅览以及查询兴趣内容

核心功能

1.完善的后台信息系统，实现了多账号登录，多账号编辑增删改查功能，并对系统安全进行保护
核心代码：
登录保护

//登录页面
if(res.length>0){
                localStorage.setItem("token",JSON.stringify({
                    ...res[0]
                    password:"***"//避免密码放在本地被窃取
                }))
                location.href="/admin/views/home/index.html"
            }else{
                console.log('失败')
                loginwarning.style.display="block"
            }

用户管理

import {load} from "/code/admin/util/loadView.js"
load()
let photo=""
addUserform.οnsubmit=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.οnchange=function(evt){
    let reader=new FileReader()
    reader.readAsDataURL(evt.target.files[0])
    reader.οnlοad=function(e){
       
        photo=e.target.result
    }
}

新闻管理

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.οnchange=function(evt){
    let reader=new FileReader()
    reader.readAsDataURL(evt.target.files[0])
    reader.οnlοad=function(e){
       
        cover=e.target.result
    }
}
//将数据渲染成表单的形式
addNewsForm.οnsubmit=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.1前端三大基础
html，css，javascript
实现页面样式布局以及美化

3.2 bootstrap，Echarts
引入模板，可视化数据

3.3 json server模糊查询的接口
名称_like=要查询的

项目总结

4.1面对困难

1.json-server配置环境变量出现了大的困难
2.多层文件的叠加使用容易出现错误

4.2后续规划

在后续学习中效仿这种这种多层文件交互的形式，是自己的demo更完善更具有逻辑性

4.3整体总结

1.对新的工具bootstrap，node.js熟练度欠佳
2.缺少实战经验
3.代码敲击准确度有待提高，减少因为小错浪费时间的情况