首页 > > 网页制作 > Javascript >

nodejs+express+mongodb写api接口的简单尝试

2018-06-24 01:47:58来源：未知阅读 ()

1：启动mongodb服务

我的mongoDB的安装目录：E:\mongoDB\bin，版本：3.4.9

打开cmd -> e:(进入e盘) -> cd mongoDB/bin(进入mongoDB下的bin文件夹下) -> mongod.exe(先启动mongod) -> mongo(再启动mongo)

2: 启动mongoDB的可视化工具adminMongo

adminMongo的安装目录E:\adminMongo，执行目录下的app.js文件，启动服务

文件的目录树：

├── mongodb
│ └── db.js
├── router
│ └── list.js 
├── app.js

db.js

let dbData = {
    selectall: function(name, callback){
        let mongoose = require('mongoose');
        let database_name     = 'mongodb://localhost:27017/abc';
        mongoose.connect(database_name, (err, db) => {
            let collection = db.collection(name);
            collection.find({
                links: {
                    $gt: 10000　　　　　　　　//筛选links值大于10000的数据
                }
            }).toArray((err, result) => {
                if(err){
                    console.log('error:' + err);
                    return;
                }
                callback(result);
            })
        });
    }
}

module.exports = dbData;

list.js

const express = require('express')
const router = express()
const dbData=require('../mongodb/db.js');

router.post('/', (req, res, next) => {
    dbData.selectall('movie', function(result){
        console.log(result, 111111)
        res.send(result);
    })
})

module.exports = router

app.js

const express = require("express");
const app = express();

// 跨域设置
app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Credentials", true);
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

// 获取内容
app.use("/list", require("./router/list"));

　app.get('/', (req, res) => {
　　 res.send('api');
});

const port = process.env.PORT || 3001;

app.listen(port, () => {
    console.log('Express server listening on port ' + port);
});

module.exports = app;

mongodb的数据库文件结构：

表movie里的数据：

在app.js文件夹下执行 node app.js，启动node服务

项目文件中进行数据请求：

　　最近在使用vue，通过axios进行的数据请求

　　请求文件login.vue

<template>
    <div class="login">
        <header-title text="登录" @back="back"></header-title>

        <!--<mt-navbar v-model="selected">
            <mt-tab-item id="1">登录</mt-tab-item>
            <mt-tab-item id="2">注册</mt-tab-item>
        </mt-navbar>


        <mt-tab-container v-model="selected">

            <mt-tab-container-item id="1" class="login-wrapper">
                <mt-field label="用户名" placeholder="请输入用户名" v-model="login_username"></mt-field>
                <mt-field label="密码" placeholder="请输入密码" type="password" v-model="login_password"></mt-field>

                <mt-button type="primary" size="large" @click.native="login">登录</mt-button>
            </mt-tab-container-item>


            <mt-tab-container-item id="2" class="register-wrapper">
                <mt-field label="用户名" placeholder="请输入用户名" v-model="register_username"></mt-field>
                <mt-field label="邮箱" placeholder="请输入邮箱" type="email" v-model="register_email"></mt-field>
                <mt-field label="密码" placeholder="请输入密码" type="password" v-model="register_password1"></mt-field>
                <mt-field label="确认密码" placeholder="请确认密码" type="password" v-model="register_password2"></mt-field>

                <mt-button type="primary" size="large" @click.native="register">注册</mt-button>
            </mt-tab-container-item>
        </mt-tab-container>
        -->
        <div class="main">
            <mt-field label="用户名" placeholder="请输入手机号" type="tel" v-model="login_username"></mt-field>
            <mt-field label="密码" placeholder="请输入密码" type="password" v-model="login_password"></mt-field>

            <!--<mt-button type="primary" size="large" @click.native="login">登录</mt-button>

            <mt-button type="primary" size="large" @click.native="register">注册</mt-button>-->

            <div class="login_1 active" @click="login">登录</div>

            <div class="register" @click="register">注册</div>

            <div class="forgetPassword" @click="forgetPassword">忘记密码?</div>
        </div>

        <tab-bar></tab-bar>
    </div>
</template>

<script type="text/ecmascript-6">
    import TabBar            from '@/components/base/tab-bar/tab-bar'
    import HeaderTitle       from '@/components/base/header-bar/header-title'
    import HeaderBar         from '@/components/base/header-bar/header-bar'
    import axios             from 'axios'
    import qs                from 'qs'
    export default {
        components: {
            TabBar,
            HeaderTitle,
            HeaderBar
        },
        data () {
            return {
                selected: '1',
                login_username: '',
                login_password: '',
                register_username: '',
                register_email: '',
                register_password1: '',
                register_password2: '',
            }
        },
        props: {},
        watch: {},
        methods: {
            back () {
                this.$router.push({
                    path: '/mine'
                })
            },
            login () {　　　　　　　　　　　　// 在这里进行的模拟请求
                axios.post('http://localhost:3001/list', {}, {headers:{'Content-Type':'application/x-www-form-urlencoded'}})
                    .then(function(res){
                        console.log(res)
                    })
                    .catch(function(err){
                        console.log(err)
                    });
             
               
            },
            register () {
                this.$router.push({
                    path: '/register'
                })
            },
            forgetPassword () {
                this.$router.push({
                    path: '/forgetPassword'
                })
            }
        },
        filters: {},
        computed: {},
        created () {

        },
        mounted () {},
        destroyed () {}
    }
</script>

<style lang="less" scoped>
    .login {
        color: #333;
        margin-top: 40px;
        background-color: #fff;
        overflow: visible;
        .main{
            padding: 10px;
            .forget-password{
                background-color: transparent;
                font-size: 12px;
                color: #000;
            }
            .login_1,.register{
                width: 100%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                font-size: 18px;
                color: #3598fe;
                border: 1px solid #3598fe;
                border-radius: 20px;
                margin-top: 20px;
            }
            .active{
                background-color: #3598fe;
                color: #fff;
            }
            .forgetPassword{
                width: 100%;
                height: 30px;
                line-height: 30px;
                text-align: center;
                font-size: 12px;
                margin-top: 10px;
            }
        }
        .login-wrapper {
            margin-top: 20px;
            overflow: hidden;
            .mint-button {
                margin-top: 30px;
            }
        }
        .register-wrapper {
            margin-top: 20px;
            overflow: hidden;
            .mint-button {
                margin-top: 30px;
            }
        }
    }
</style>