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

$.ajax({

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

type:‘get’,

data:{_id:recipient},

success:function(res){

console.log(res);

if(res.code==1){ // {code:1,msg:‘删除成功’}

// 关闭模态框

modal.modal(‘hide’);

//刷新当前页面

// window.location.href=‘/’

location.reload()

}

}

})

})

})

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)

}

})

})

//搜索

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

var keyword=req.query.keyword;

var reg=new RegExp(keyword,‘i’);

Student.find({user:reg},function(err,datas){

if(!err){

req.obj.code=1;

req.obj.msg=‘搜索成功’

req.obj.data=datas;

res.json(req.obj)

}

})

})

module.exports = router;

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

le.exports = router;

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

[外链图片转存中…(img-RRzgkvKT-1725996847972)]

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

[外链图片转存中…(img-QOFMGxEz-1725996847973)]

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。