vue.js+nodejs的MVVM笔记

来源：互联网发布：什么叫it行业编辑：程序博客网时间：2024/05/16 17:11

1、页面引入vue.js

    <script src="/static/js/vue.js"></script>    <script src="/static/js/vue-resource.js"></script>

2、在<head>中编写js代码

$(function () {    var vm = new Vue({        el: '#vm',        data: {            email: '',            password: '',            birth: '',            gender: 's',            language: ['zh'],            city: 'bj',            introduction: '',            subscribe: true        },        methods: {            register: function () {                //$('#modal-data').text(JSON.stringify(this.$data, null, '    '));                //$('#modal').modal();                               // TODO: post JSON data to server...                //alert(JSON.stringify(this.$data, null, '    '));                //$('#code').val('');                var vm = this;                                 alert(JSON.stringify(this.$data, null, '  '));                //Vue.http.options.emulateJSON = true;                //var p ={name:"zhangsan",id:"aaaa"}                 vm.$http.post('/register',this.$data,{emulateJSON:true}).then((response) => {                                    //vm.$set('gridData', response.data)    \                  alert(JSON.stringify(response.body, null, '  '));                  $('#code').text(JSON.stringify(response.body, null, '  '));                });                        //$('#code').text(JSON.stringify(this.$data, null, '  '));            }        }    });    window.vm = vm;});

3、服务端nodejs代码

const Koa = require('koa');const bodyParser = require('koa-bodyparser');const router = require('koa-router')();const app = new Koa();const isProduction = process.env.NODE_ENV === 'production';// log request URL:app.use(async (ctx, next) => {    console.log(`Process ${ctx.request.method} ${ctx.request.url}...`);    console.log('----------1--------->');    var        start = new Date().getTime(),        execTime;    await next();    execTime = new Date().getTime() - start;    ctx.response.set('X-Response-Time', `${execTime}ms`);});// parse request body:app.use(bodyParser());router.post('/register', async (ctx, next) => {  console.log('-----------2-------->');    var body = ctx.request.body;    console.log('----------3--------->' + body.introduction);    //body.introduction='from node server.';    ctx.response.body = body;});router.get('/', async (ctx, next) => {  console.log('-----------4-------->' + ctx.request.path);    ctx.response.redirect('/static/index.html');});// static file support:let staticFiles = require('./static-files');app.use(staticFiles('/static/', __dirname + '/static'));// redirect to /static/index.html://app.use(async (ctx, next) => {//  console.log('-----------4-------->');//    ctx.response.redirect('/static/index.html');//});// add router middleware:app.use(router.routes());app.listen(3000);console.log('app started at port 3000...');

4、参考连接

http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00147574857851718682c42639f466a934ad9d4f485d1f2000

阅读全文

0 0