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{

            width: 100%;

            height: 100%;

        }

        *{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

        }

        nav{

            width: 100%;

            height: 100px;

            background: #438eb9;

        }

        h1{

            color: white;

            padding: 30px 25px;

            float: left;

        }

        .fl{

            float: right;

            width: 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{

            width: 100%;

            height: 100%;

            display: flex;

            flex-direction: row;

        }

        .main-content{

            flex: 1;

        }

        .main-nav{

            width: 200px;

            height: 100%;

            border: 1px solid gray;

        }

        table{

            width: 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%;

            width: 100%;

        }

        input,p,form,button,h3{

            margin: 0;

            padding: 0;

        }

        input{

            width: 150px;

            height: 30px;

            outline:none;

            margin: 20px 0;

        }

        form{

            width: 500px;

            height: 400px;

            border: 1px solid gray;

            text-align: center;

            background: gray;

            margin: 0 auto;

        }

        button{

            border: none;

            width: 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系统。

OA实例的更多相关文章

OA项目实战（二）开发准备
上次的博文OA系统实践(一) 概述中,我们已经了解了OA的相关概念.从本次博文开始,我们做一个简单的OA实例. 在OA开发之前,有几个工作们需要提前做.一个是对需求进行分析,另一个是对开发环境进行选择 ...
最近学习工作流推荐一个activiti 的教程文档
全文地址:http://www.mossle.com/docs/activiti/ Activiti 5.15 用户手册 Table of Contents 1. 简介协议下载源码必要的软件 ...
流程开发Activiti 与SpringMVC整合实例
流程(Activiti) 流程是完成一系列有序动作的概述.每一个节点动作的结果将对后面的具体操作步骤产生影响.信息化系统中流程的功能完全等同于纸上办公的层级审批,尤其在oa系统中各类电子流提现较为明显 ...
完整记录一则Oracle 11.2.0.4单实例打PSU补丁的过程
本文记录了打PSU的全过程,意在体会数据库打PSU补丁的整个过程. 1.OPatch替换为最新版本2.数据库软件应用19121551补丁程序3.数据库应用补丁4.验证PSU补丁是否应用成功 1.OPa ...
【Java EE 学习 67 上】【OA项目练习】【JBPM工作流的使用】
OA项目中有极大可能性使用到JBPM框架解决流程控制问题,比如请假流程.报销流程等等. JBPM:JBoss Business Process Management,翻译过来就是业务流程管理.实际上就 ...
finereport与OA系统集成的完全方案
随着社会信息化高速发展,企业信息化也得到了一定提高,而如何提高办公效率已经成为企业一项重要而紧迫的任务,传统的纸质报表等档案不仅浪费纸张.不易存档.不易调阅.不易统计,如何更有效.更快速提升办公效率和 ...
Java学习-039-源码 jar 包的二次开发扩展实例（源码修改）
最近在使用已有的一些 jar 包时,发现有些 jar 包中的一些方法无法满足自己的一些需求,例如返回固定的格式,字符串处理等等,因而需要对原有 jar 文件中对应的 class 文件进行二次开发扩展, ...
HttpClient(4.3.3)实例讲解
HttpClient的作用强大,真的是十分强大. 本实例是基于v4.3.3写的,,作用是模拟登陆后进行上下班打卡,,,使用htmlparser进行解析返回的html文件关于HttpClient的一些 ...
使用SharePoint Designer定制开发专家库系统实例！
将近大半年都没有更新博客了,趁这段时间不忙,后续会继续分享一些技术和实际应用.对于Sharepoint的定制开发有很多种方式,对于一般的应用系统,可以使用Sharepoint本身自带的功能,如列表作为 ...

随机推荐

Android Studio 运行找不到夜神模拟器
夜神模拟器开着,Android studio 找不到模拟器解决方法:1.进入CMD,转到夜神安装目录 cd D:\Program Files (x86)\Nox\bin 2.执行命令:nox_adb ...
springboot+mybatis+springmvc整合实例
以往的ssm框架整合通常有两种形式,一种是xml形式,一种是注解形式,不管是xml还是注解,基本都会有一大堆xml标签配置,其中有很多重复性的.springboot带给我们的恰恰是“零配置”,&quo ...
[转]Python shutil 模块
转自: https://www.cnblogs.com/wuzhiblog/p/6535527.html https://www.cnblogs.com/caibao666/p/6433864.htm ...
ssh test
本文以以下需求为背景,介绍详细的做法: 需在同一台服务器同时部署两个不同的 Github 仓库(对 Bitbucket 等 git 服务同样适用) root 用户可在远程登录 SSH 后附上预期的 S ...
QT 字符串的使用技巧总结
QT 的字符串的使用的总结. 1.字符串截取函数的使用 QString str; QString csv = "forename,middlename,surname,phone" ...
lesson 4：凯撒密码问题
一·问题描述二·解决过程 1.设计思路 ①人机交互界面 ②加密函数(将字符串的每一个字符提取出来,通过对字符的阿斯克码值进行运算操作实现加密过程,特殊的特殊对待) ③解密函数(与加密函数算法类似) ...
three.js - 添加材质灯光阴影
看下运行效果: 源码解释: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
tab键设置为空4格和自动缩进
.打开vim配置文件~@vim etc/vim/vimrc 二 .设置tab和自动缩进即:添加如下内容 "set tab by charly!" softtabstop= (注意等 ...
Luogu2183 礼物 ExLucas、CRT
传送门证明自己学过exLucas 这题计算的是本质不相同的排列数量,不难得到答案是\(\frac{n!}{\prod\limits_{i=1}^m w_i! \times (n - \sum\lim ...
基于HTML5 Canvas的工控SCADA模拟飞机飞行
昨天看到一篇文章说是学习如何开飞机的,然后我就想,如果我也可以开飞机那就好玩了,每个人小时候都想做飞行员!中国飞行员太难当了,再说也不轻易让你开飞机!后来我就想如果能用 HT 开飞机那就是真的有趣了, ...

OA实例

OA实例的更多相关文章

随机推荐

热门专题