前端微说集让前端飞Web前端之路

前端(Axios)后端(Koa)数据库(MongoDB)伪全栈通

2017-08-29  本文已影响426人  趁你还年轻233

今天是个特殊的日子,结束了第22次七夕单身狗生,开始第23次...  : (
一改往日啰嗦作风,直接上代码...                 : )

Browser

new Vue({
  el: '#app',
  render: h => h(App),
  mounted(){
    Axios({
      method: 'post',
      url: 'http://localhost:3000/about',
      data: {user:{username:"dog"}}
    }).then((response) => {
        console.log(response);
    })
  }
})

Back-End

/*前后端通信,跨域,解析,路由*/
console.log("服务器Koa3000端口已启动");
const Koa = require('koa');
const app = new Koa();
var insertData;
/*跨域*/
const cors = require('koa-cors');
app.use(cors());
/*解析request*/
const koaBody = require('koa-body');
app.use(koaBody());
/*路由*/
const about = ctx => {
  ctx.response.body = users;
  insertData = ctx.request.body;
  //console.log(insertData);
  db.collection('users').insertOne(insertData);
};
const main = ctx => {
  ctx.response.body = 'Hello World';
};
const route = require('koa-route');
app.use(route.post('/about', about));
app.use(route.get('/main', main));
/*启动3000端口服务*/
app.listen(3000);

DataBase

①数据库服务,增删改查

console.log("成功连接MongoDB27017端口");
var MongoClient = require('mongodb').MongoClient,
  co = require('co'),
  assert = require('assert');
co(function* () {
  var db = yield MongoClient.connect('mongodb://localhost:27017/myproject');
  console.log("Connected correctly to server");
  var col = db.collection('users');
  users = yield col.find({
    "user.username": "Frank"
  }).limit(2).toArray();
}).catch(function (err) {
  console.log(err.stack);
});

②数据模型,数据结构

var mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/myproject');
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function () {
  var userSchema = new mongoose.Schema({
    user: {
      username: String,
      password: String
    },
    contents: {
      title: String,
      poster: String,
      post: String,
      time: Date,
      imgs: [],
      comment: []
    }
  });
  var User = mongoose.model('user', userSchema);
  var Frank = new User({
    user: {
      username: 'Frank',
      password: '12345678'
    },
  });
  Frank.save(function (err) {
    console.log('保存成功');
  });
});

项目地址:https://github.com/FrankKai/Vue-Practice
欢迎大家加入我创建的SegmentFault技术圈:ES新规范语法糖
大前端学习交流群:660634678

期待和大家交流,共同进步。
努力成为优秀的大前端!

上一篇 下一篇

猜你喜欢

热点阅读