express学生管理系统、前后端不分离(十一)

<% for(var item in list){ %>

<%= list[item].user %> <%= list[item].sex %> <%= list[item].age %> <%= list[item].updatedAt.toLocaleString() %>

删除

修改

<% } %>

  1. 后台接口的定义
  • app.js

var apiRouter = require(‘./routes/api’);

app.use(‘/api’,apiRouter);

  • app.js 连接数据库服务器。

var mongoose =require(‘mongoose’);

mongoose.connect(‘mongodb://localhost:27017/1909system’,function(err){

if(!err){

console.log(‘数据库服务器连接成功!’)

}

})

  • 数据库设计 schema模型、model模型

创建schema目录,创建student.js文件如下:

var mongoose = require(‘mongoose’);

//实例化Schema ,创建文档模型

module.exports=new mongoose.Schema({

user:String,

age:‘number’,

sex:String

},{timestamps:true});

创建model目录。创建Student.js文件如下:

var mongoose = require(‘mongoose’);

var myschema = require(‘…/schema/student’);

// 创建model 集合模型。参数一:集合名(数据库中会变成复数形式。)

module.exports = mongoose.model(‘student’,myschema);

  • routes 创建 api.js

var express = require(‘express’);

var router = express.Router();

var Student = require(‘…/model/Student’)

/* 添加 */

router.post(‘/add’, function(req, res, next) {

//首先接受数据 post —> req.body

console.log(req.body);

//写入数据库。下载mongoose中间件,连接数据库服务器,创建模型设计数据库(schema,model)

Student.create({user:req.body.user,age:req.body.age,sex:req.body.sex},function(err){

if(!err){

console.log(‘写入成功’)

res

  • 16
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这是一个比较大的课题,需要涉及到前端、后端、数据库等多个领域。下面给出一个简单的前后端分离的学生信息管理系统的源码示例,供你参考。 前端代码: ``` // index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学生信息管理系统</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script> </head> <body> <div id="app"> <h1>学生信息管理系统</h1> <table> <thead> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr v-for="(student, index) in students" :key="index"> <td>{{ student.id }}</td> <td>{{ student.name }}</td> <td>{{ student.age }}</td> <td>{{ student.gender }}</td> </tr> </tbody> </table> </div> <script src="js/app.js"></script> </body> </html> // app.js var app = new Vue({ el: '#app', data: { students: [] }, mounted: function() { axios.get('/api/students').then(response => { this.students = response.data; }); } }); ``` 后端代码: ``` // server.js const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); const students = [ { id: '001', name: '张三', age: 18, gender: '男' }, { id: '002', name: '李四', age: 19, gender: '女' }, { id: '003', name: '王五', age: 20, gender: '男' } ]; app.get('/api/students', (req, res) => { res.send(students); }); const port = process.env.PORT || 3000; app.listen(port, () => console.log(`Listening on port ${port}...`)); ``` 前端代码使用了Vue.js框架和Axios库,从后端API获取学生信息并呈现在页面上。后端代码使用了Express框架和BodyParser库,提供了获取学生信息的API接口。前后端通过API接口进行数据交互,实现了前后端分离。需要注意的是,这里的后端代码仅仅是一个简单的示例,实际项目中需要更加完整和健壮的后端实现。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值