zoukankan      html  css  js  c++  java
  • nodejs+express+mongodb写api接口的简单尝试

    1:启动mongodb服务

    我的mongoDB的安装目录:E:mongoDBin,版本: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{
                     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{
                     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>

    请求的详细信息:

  • 相关阅读:
    海思HI3516A开发板顺利上线
    android WIFI信息获取
    五------Jsp九大内置对象。
    在Windows下搭建Apacheserver
    基于ContentObserver来动态取消或加入屏幕超时任务
    使用Intent的Flag设置启动參数
    IntelliJ IDEA像Eclipse一样打开多个项目
    怎样让IE支持自己定义协议
    《TCP/IP具体解释卷2:实现》笔记--协议控制块
    POJ2029:Get Many Persimmon Trees(二维树状数组)
  • 原文地址:https://www.cnblogs.com/sk-3/p/8671237.html
Copyright © 2011-2022 走看看