node.js如何实现学生档案管理(node.js,开发技术)

时间:2024-05-05 09:42:02 作者 : 石家庄SEO 分类 : 开发技术
  • TAG :

学生档案管理

目标:模板引擎应用,强化node.js项目制作流程

知识点:http请求响应、数据库、模板引擎、静态资源访问

node.js如何实现学生档案管理

制作流程

1、建立项目文件夹并生成项目描述文件

2、创建网站服务器实现客户端和服务器端通信

3、连接数据库并根据需求设计学员信息表

4、创建路由并实现页面模板呈递

5、实现静态资源访问

6、实现学生信息添加功能

1).在模板的表单中指定请求地址与请求方式
2).为每一个表单项添加name属性
3).添加实现学生信息功能路由
4).接收客户端传递过来的学生信息
5).将学生信息添加到数据库中
6).将页面重定向到学生信息列表页面

7、实现学生信息展示功能

1).从数据库中将所有的学生信息查询出来
2).通过模板引擎将学生信忠和HTML模板进行拼接
3).将拼接好的HTML模板响应给客户端

目录结构

node.js如何实现学生档案管理

connect.js

constmongoose=require('mongoose');//连接数据库mongoose.connect('mongodb://localhost/playground',{useNewUrlParser:true}).then(()=>console.log('连接数据库成功')).catch(()=>console.log('连接数据库失败'))

user.js

constmongoose=require('mongoose');//创建学生集合规则conststudentsSchema=newmongoose.Schema({name:{type:String,required:true,minlength:2,maxlength:10},age:{type:Number,min:10,max:25},sex:{type:String},email:String,hobbies:[String],collage:String,enterDate:{type:Date,default:Date.now}});//创建学生学习集合constStudent=mongoose.model('Student',studentsSchema);//将学生学习集合进行导出module.exports=Student;

list.css

body{padding:0;margin:0;}table{border-collapse:collapse;}table,td,th{text-align:center;line-height:30px;border:1pxsolid#CCC;}caption{font-weight:bold;font-size:24px;margin-bottom:10px;}table{width:960px;margin:50pxauto;}a{text-decoration:none;color:#333;}a:hover{text-decoration:underline;color:#000;}

main.css

body{margin:0;padding:0040px;background-color:#F7F7F7;font-family:'微软雅黑';}form{max-width:640px;width:100%;margin:24pxauto;font-size:28px;}label{display:block;margin:10px10px15px;font-size:24px;}.normal{display:block;width:100%;height:40px;font-size:22px;margin-top:10px;padding:6px10px;color:#333;border:1pxsolid#CCC;box-sizing:border-box;}.btn{margin-top:30px;}.btninput{color:#FFF;background-color:green;border:0none;outline:none;cursor:pointer;}input[type="file"]{/*opacity:0;*/width:120px;position:absolute;right:0;z-index:9;}.import{height:40px;position:relative;}

index.js

//引入router模块constgetRouter=require('router');//获取路由对象constrouter=getRouter();//引入模板引擎consttemplate=require('art-template');//学生学习集合constStudent=require('../model/user');//引入querystringconstquerystring=require('querystring');//呈递学生档案信息页面router.get('/add',(req,res)=>{lethtml=template('index.art',{})res.end(html);});//呈递学生档案信息列表页面router.get('/list',async(req,res)=>{//查询学生信息letstudents=awaitStudent.find();console.log(students);lethtml=template('list.art',{students:students})res.end(html);});//实现学生信息添加路由功能router.post('/add',(req,res)=>{//接受post请求参数letformData='';req.on('data',param=>{formData+=param;});req.on('end',async()=>{awaitStudent.create(querystring.parse(formData));res.writeHead(301,{Location:'/list'})res.end();})})module.exports=router;

index.art

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1,user-scalable=no"><title>学生档案</title><linkrel="stylesheet"href="./css/main.css"></head><body><formaction="/add"method="post"><fieldset><legend>学生档案</legend><label>姓名:<inputclass="normal"type="text"autofocusplaceholder="请输入姓名"name="name"></label><label>年龄:<inputclass="normal"type="text"placeholder="请输入年龄"name="age"></label><label>性别:<inputtype="radio"value="0"name="sex">男<inputtype="radio"value="1"name="sex">女</label><label>邮箱地址:<inputclass="normal"type="text"placeholder="请输入邮箱地址"name="email"></label><label>爱好:<inputtype="checkbox"value="敲代码"name="hobbies">敲代码<inputtype="checkbox"value="打篮球"name="hobbies">打篮球<inputtype="checkbox"value="睡觉"name="hobbies">睡觉</label><label>所属学院:<selectclass="normal"name="collage"><optionvalue="前端与移动开发">前端与移动开发</option><optionvalue="PHP">PHP</option><optionvalue="JAVA">JAVA</option><optionvalue="Android">Android</option><optionvalue="IOS">IOS</option><optionvalue="UI设计">UI设计</option><optionvalue="C++">C++</option></select></label><label>入学日期:<inputtype="date"class="normal"name="enterDate"></label><labelclass="btn"><inputtype="submit"value="提交"class="normal"></label></fieldset></form></body></html>

list.art

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>学员信息</title><linkrel="stylesheet"href="./css/list.css"></head><body><table><caption>学员信息</caption><tr><th>姓名</th><th>年龄</th><th>性别</th><th>邮箱地址</th><th>爱好</th><th>所属学院</th><th>入学时间</th></tr>{{eachstudents}}<tr><th>{{$value.name}}</th><th>{{$value.age}}</th><th>{{$value.sex=='0'?'男':'女'}}</th><th>{{$value.email}}</th><th>{{each$value.hobbies}}<span>{{$value}}</span>{{/each}}</th><th>{{$value.collage}}</th><th>{{dateformat($value.enterDate,'yyyy-mm-dd')}}</th></tr>{{/each}}</table></body></html>

app.js

//引入http模块consthttp=require('http');//引入模板引擎consttemplate=require('art-template');//引入path模块constpath=require('path');//引入静态资源访问模块constserveStatic=require('serve-static');//引入处理日期的第三方模块constdateformat=require('dateformat');//引入routerconstrouter=require('./route/index')//实现静态资源访问服务constserve=serveStatic(path.join(__dirname,'public'));//配置模板的根目录template.defaults.root=path.join(__dirname,'views');//处理日期格式的方法template.defaults.imports.dateformat=dateformat;//数据库连接require('./model/connect');//创建网站服务器constapp=http.createServer();//当客户端访问服务器的时候app.on('request',(req,res)=>{//启用路由功能router(req,res,()=>{})//启用静态资源访问服务功能serve(req,res,()=>{})});app.listen(3000,()=>{console.log('服务器创建成功');});

package.json(需要提前下载第三方模块)

{"name":"14.students","version":"1.0.0","description":"","main":"app.js","scripts":{"test":"echo\"Error:notestspecified\"&&exit1"},"keywords":[],"author":"","license":"ISC","dependencies":{"art-template":"^4.13.2","dateformat":"^3.0.3","mongoose":"^5.9.18","router":"^1.3.5","serve-static":"^1.14.1"}}//art-template、dateformat、mongoose、router、serve-static
 </div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">
本文:node.js如何实现学生档案管理的详细内容,希望对您有所帮助,信息来源于网络。
上一篇: python中的元类metaclass怎么使用下一篇:

16 人围观 / 0 条评论 ↓快速评论↓

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18