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>
請求的詳細信息: