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