express学生管理系统、前后端分离（十二）

性别

男

女

提交

Password

查询

姓名 性别 年龄 时间 操作

删除

×

您确定要删除吗？

关闭

确定

myself.js

$(function(){

//代码

// 添加

$(‘.btn_add’).click(function(event){

event.preventDefault();

var user=$(‘.user’).val();

var age=$(‘.age’).val();

var sex=$(‘.sex:checked’).val();

console.log(user,age,sex);

if(user==‘’||age==“”){

alert(‘不能为空’);

return;

}

$.ajax({

url:‘http://127.0.0.1:3000/api/add’,

type:‘post’,

data:{user:user,age:age,sex:sex},

success:function(res){

console.log(res);

if(res.code==1){

// 查询 如果添加成功看，需要请求查询接口。

find();

}

}

})

// return false;

})

// 搜索

$(‘.btn_search’).on(‘click’,function(event){

console.log(‘搜索’)

event.preventDefault();

var keyword=$(‘[name=keyword]’).val();

$.ajax({

url:‘http://127.0.0.1:3000/api/search’,

type:‘get’,

data:{keyword},

success:function(res){

console.log(res);

var str=‘’;

res.data.forEach(function(item,index){

var date=new Date(item.updatedAt)

var year=date.getFullYear();

var month=date.getMonth()+1;

var day=date.getDate();

str+=`

${item.user} ${item.sex} ${item.age} ${year+'-'+month+'-'+day}

删除

修改

`

})

$(‘.tbody’).html(str);

}

})

})

// 全局 也要请求查询接口

find();

function find(){

// 查询 如果添加成功看，需要请求查询接口。

$.ajax({

url:‘http://127.0.0.1:3000/api/find’,

type:‘get’,

data:{},

success:function(res){

console.log(res);

var str=‘’;

res.data.forEach(function(item,index){

// console.log(item)

var date=new Date(item.updatedAt)

var year=date.getFullYear();

var month=date.getMonth()+1;

var day=date.getDate();

console.log(year,month,day);

str+=`

${item.user} ${item.sex} ${item.age} ${year+'-'+month+'-'+day}

删除

修改

`

});

$(‘.tbody’).html(str);

}

})

}

})

2. 后端

app.js需要配置cors跨域请求

//设置允许跨域访问该服务. cors

app.all(‘*’, function (req, res, next) {

res.header(‘Access-Control-Allow-Origin’, ‘*’);

//Access-Control-Allow-Headers ,可根据浏览器的F12查看,把对应的粘贴在这里就行

res.header(‘Access-Control-Allow-Headers’, ‘Content-Type’);

res.header(‘Access-Control-Allow-Methods’, ‘*’);

res.header(‘Content-Type’, ‘application/json;charset=utf-8’);

next();

});

api.js

//创建路由

var express = require(‘express’);

var router = express.Router();

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

//写一个中间件，设置每次返回的json数据结构。（保证数据结构的一致性）

router.use(function(req,res,next){

req.obj={code:0,msg:‘’,data:[]};

next();// 放行

})

/* 查询 */

router.get(‘/find’,function(req,res,next){

Student.find({},function(err,datas){

if(!err){

req.obj.code=1;

req.obj.msg=‘查询成功’;

req.obj.data=datas;

res.json(req.obj);

}

})

})

/* 添加 */

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

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

if(!err){

console.log(‘写入成功’);

// res.redirect(‘/’) ajax 是异步操作，不可以用res.redirect()相应。

req.obj.code=1;

req.obj.msg=‘添加成功’

res.json(req.obj)

}

})

});

//删除

router.get(‘/del’,function(req,res,next){

Student.remove({_id:req.query._id},function(err){

if(!err){

req.obj.code=1;

req.obj.msg=‘删除成功’;

res.json(req.obj)

}

})

})

//搜索