OA实例

let express = require('express');
let consolidate = require('consolidate');
let bodyParser = require('body-parser');
let cookieSession = require('cookie-session');
let db = require('./db');
let app = express();
app.use(express.static(__dirname+'/views'));

app.use(bodyParser.urlencoded({
    extended:true
}));
app.use(bodyParser.json());
app.set('views',__dirname+'/template');
app.set('view engine','html');
app.engine('html',consolidate.ejs);
app.post('/login',(req,res)=>{
    //全部用户  遍历用户数组  
    //判断当前进入的用户是否存在于这个 表中 
    if(!db.list.length){
        db.add(req.body);
        res.redirect('./');
        // res.end('haha');
    }else{
        let flag = mapData();
        if(flag){
            let len = db.list.length;
            let sj = db.list;
            res.render('OA',{ len:len,sj:sj });//跳转OA页面并渲染OA页面
        }else{
            res.redirect('./') //未登录
        }
        function mapData(){
            for(let i = 0;i< db.list.length;i++){
                let uObj = db.list[i];  
                //登录
                if(uObj.username === req.body.username && uObj.password === req.body.password&&uObj.yearold === req.body.yearold && uObj.like === req.body.like){
                    return true;
                }
            }  
            //注册
            db.add(req.body);
            return false;
        }
        
    }
});
app.listen(3000,()=>{
    console.log('start');
});

server.js 服务器

db.js 数据的增删改查

let date = require('./db.json');
let fs = require('fs');
module.exports = {
    //写数据
    story(){
        fs.writeFileSync(__dirname+'/db.json',JSON.stringify(date));
    },
    add(user){
        date.push(user);
        this.story();
    },
    del(index){
        date[index].isShow = false;
        this.story();
    },
    update(index,nDate){
        date[index] = nDate;
        this.story();
    },
    get list(){
        let arr =[];
        for(let i = 0; i< date.length;i++){
                if(date[i].isShow==='true'){
                    arr.push(date[i]);
                }
        };
        return  arr;
    }
}

数据格式 db.json

[{"username":"xiaobai","password":"111","yearold":"18","like":"象棋","isShow":"true"}

OA.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>OA管理系统</title>
    <style>
        body,html{
             100%;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        nav{
             100%;
            height: 100px;
            background: #438eb9;
        }
        h1{
            color: white;
            padding: 30px 25px;
            float: left;
        }
        .fl{
            float: right;
             150px;
            height: 100%;
        }
        a{
            text-decoration: none;
            color: white;
            font-size: 18px;
            float: left;
            margin-top: 35px;
        }
        .fl span{
            float: right;
            margin-top: 35px;
            margin-right: 20px;
            color: white;
            font-size: 18px;
        }
        .main{
             100%;
            height: 100%;
            display: flex;
            flex-direction: row;
        }
        .main-content{
            flex: 1;
        }
        .main-nav{
             200px;
            height: 100%;
            border: 1px solid gray;
        }
        table{
             100%;
            height: 100%;
            border: 1px solid gray;
            text-align: center;
            table-layout:fixed;
        }
        tr,td{
            border: 1px solid gray;
            height: 30px;
        }
        table tr{
            height: 30px;
        }
    </style>
</head>
<body>
    <nav>
        <h1>OA</h1>
        <div class="fl">
            <a href="#">Login</a>
            <span>Edit</span>
        </div>
    </nav>
    <div class="main">
        <div class="main-nav">
            <ul>
                <% for(let i = 1;i<= len;i++){%>
                      <li><%=i%></li>  
                <%}%>
            </ul>
        </div>
        <div class="main-content">
            <table>
                <thead>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>爱好</td>
                </thead>
                <tbody>
                        <% for(let i = 0;i< len;i++){%>
                            <tr>
                                <td><%= sj[i].username %></td>
                                <td><%= sj[i].yearold %></td>
                                <td><%= sj[i].like %></td>
                            </tr>
                        <%}%>
                </tbody>
            </table>
        </div>
    </div>
</body>
<script>
</script>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
             100%;
        }
        input,p,form,button,h3{
            margin: 0;
            padding: 0;
        }
        input{
             150px;
            height: 30px;
            outline:none;
            margin: 20px 0;
        }
        form{
             500px;
            height: 400px;
            border: 1px solid gray;
            text-align: center;
            background: gray;
            margin: 0 auto;
        }
        button{
            border: none;
             200px;
            height: 30px;
            background: yellowgreen;
            margin: 3px 0;
        }
        h3{
            color:navy;
        }
    </style>
</head>
<body>
    <form action="./login"  method="POST"  enctype="application/x-www-form-urlencoded">
        <h3>登录页</h3>
        <p>
            用户名：<input type="text" name="username" id="">
        </p>
        <p>
            密&nbsp;&nbsp; 码：<input type="password" name="password">
        </p>
        <p>
            年&nbsp;&nbsp; 龄：<input type="text" name="yearold" onkeyup='this.value=this.value.replace(/[^0-9$]/g,"")'>
        </p>
        <p>
            爱&nbsp;&nbsp; 好：<input type="text" name="like">
        </p>
        <p>
            <input type="text" name="isShow" hidden="hidden" value="true">
        </p>
        <button>点击提交</button>
    </form>
</body>
</html>

能码的尽量不写字，这就是码农吧。使用node 做一个最基础的OA系统。