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>
密 码：<input type="password" name="password">
</p>
<p>
年 龄：<input type="text" name="yearold" onkeyup='this.value=this.value.replace(/[^0-9$]/g,"")'>
</p>
<p>
爱 好：<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本身自带的功能,如列表作为 ...
随机推荐
- 移动端 Retina屏border实现0.5px
首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...
- UVA806-Spatial Structures(四分树)
Problem UVA806-Spatial Structures Accept:329 Submit:2778 Time Limit: 3000 mSec Problem Description ...
- 有时间研究一下Spark的HashPartitioner和RangePartitioner
有时间研究一下Spark的HashPartitioner和RangePartitioner有时间研究一下Spark的HashPartitioner和RangePartitioner有时间研究一下Spa ...
- Ros使用Arduino 1安装Arduino IDE
安装Arsuino IDE sudo apt-get install arduino 设置库文件路径 在使用ROS的库文件时,必须在代码的开头包括: #include <ros.h> 接下 ...
- 安卓开发 1配置环境 （JDK+Andriod stiuio）
配置JDK+Andriod stiuio 所需要用到的JDK和AS 链接:https://pan.baidu.com/s/1smHCD1z密码:rxh2 1 JAVA_SDK 1.1 下载 htt ...
- 怎样使用CSS3媒体查询(Media Queries)制作响应式网站
自本周开始博主将开始同大家一起研究响应式web设计,CSS3 Media Queries是入门,本周更新,博主将给大家分享media queries的一些常用的用法及注意事项. Media Queri ...
- 安装webpack和webpack打包（此文转自Henery）
Henery博客地址为:http://blog.csdn.net/henery_002 写的很详细,可以做参考 最近要做项目优化了,尤其是前端这块,许多js需要模块化管理和相应的优化 1.输入如下地址 ...
- android ActionBarSherlock使用说明
源代码地址:https://github.com/JakeWharton/ActionBarSherlock 1.添加项目依赖包 2.修改AndroidManifest.xml中的主题(或者继承该主题 ...
- JS-JS变量命名规则
原则 变量名区分大小写,允许包含字母.数字.美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号. 禁止使用JavaScript关键词.保留字全名. 变量命名长度应该尽可能的 ...
- （8）学习笔记 ） ASP.NET CORE微服务 Micro-Service ---- Ocelot网关（Api GateWay）
说到现在现有微服务的几点不足: 1) 对于在微服务体系中.和 Consul 通讯的微服务来讲,使用服务名即可访问.但是对于手 机.web 端等外部访问者仍然需要和 N 多服务器交互,需要记忆他们的服务 ...