nodejs+express+mongodb寫api接口的簡單嘗試

1:啓動mongodb服務vue

個人mongoDB的安裝目錄:E:\mongoDB\bin,版本:3.4.9node

打開cmd  -> e:(進入e盤) -> cd mongoDB/bin(進入mongoDB下的bin文件夾下) -> mongod.exe(先啓動mongod) -> mongo(再啓動mongo)ios

 

2: 啓動mongoDB的可視化工具adminMongomongodb

adminMongo的安裝目錄E:\adminMongo,執行目錄下的app.js文件,啓動服務數據庫

 

文件的目錄樹:express

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

db.jsjson

複製代碼
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.jsaxios

複製代碼
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.jsapi

複製代碼
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>
複製代碼

請求的詳細信息:

相關文章
相關標籤/搜索