前端路线--Nodejs（day11）--前后端分离

笔记

//前后端分离

//1.新建controller文件夹-->user_controller.js
//controller控制器--主要处理业务逻辑
exports.UserList = (req, res) => {
    res.send('ok');
}
//2.user_router.js文件:
//路由主要用来分发页面，不做业务处理。
// 先引入
let userController = require('../../controller/user_controller');
//再写接口
router.get('/userlist', userController.UserList); //userController是对象 UserList对象的属性


//接口响应成JSON数据
//用户列表业务逻辑
exports.UserList = async (req, res) => {
    let { page = 1, size = 8 } = req.query
    let result = await Users.find().skip((page - 1) * size).limit(size) //查询所有数据
    let count = await Users.find().count() //查询数据总数
    let pages = Math.ceil(count / size) //计算总的页数

    //res.json()    给前端响应json格式的数据
    res.json({
        status: 200,
        msg: '成功',
        count,
        page: Number(page),
        size: Number(size),
        data: result
    });
};

//关于解析POST形式提交的数据
//新版本的express集成了body-parser
//用来解析post提交的表单
app.use(express.urlencoded({ extended: false }));
app.use(express.json());


//上传图片配置路径的新方法
/* 
1.引入path模块
    //设置上传路径
    path.join('a','b','c') =>  a/b/c
2.上传路径
form.uploadDir = path.join(__dirname, '../', 'public', 'uploads');
3.重命名用的
let pathUrl = path.join(__dirname, '../', 'public');
*/



//封装的ajax
// ajax的执行流程
// ajax的全称  async javascript and xml（异步的JavaScript和xml），可以实现网页的局部刷新
// 第一步：创建一个ajax对象
// 第二步：open() 连接服务器
// 第三步：send() 发送数据
// 第四步：onreadystatechange 接收返回值

// var xhr = new XMLHttpRequest()  //有兼容性问题，不兼容IE6
// 针对ie6浏览器，微软公司推出了一个新的对象
// var xhr = new ActiveXObject("Microsoft.XMLHTTP") //主要用于兼容IE6
// 将对象{page:1,size:10}  page=1&size=10

//将{page:1,size:10}=>page=1&size=10
function queryString(obj) {
    var str = '';
    for (var attr in obj) {
        // console.log(attr);  page  size
        str += attr + '=' + obj[attr] + '&';
    }
    return str.slice(0, -1); //将最后多出的&截取掉
}
queryString({ page: 1, size: 10 }); //page=1&size=10

//封装ajax
function ajax({ url, method = 'get', data, success, error }) {
    // 第一步：创建一个ajax对象
    var xhr = null;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        //否则就是IE6
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // 第二步：open() 连接服务器
    if (method == 'get' && data) {
        url += '?' + queryString(data);
    }
    xhr.open(method, url, true);
    if (method == 'get') {
        xhr.send(null);
    } else {
        //post形式
        xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
        xhr.send(queryString(data));
    }

    // 第四步：onreadystatechange 接收返回值
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                if (success) {
                    success(xhr.responseText);
                }
            } else {
                if (error) {
                    success(xhr.status);
                }
            }
        }
    }
}

//调用
// ajax({
//     url: 'http://localhost:3000/api/userlist',
//     method: 'get',
//     data: {
//         page: 1,
//         size: 10
//     },
//     success: function(res) {
//         console.log(res);
//     },
//     error: function() {

//     }
// });

完整代码

前后端分离