vue.js+nodejs的MVVM笔记

最新推荐文章于 2022-09-15 15:15:00 发布

roller2jmeter

最新推荐文章于 2022-09-15 15:15:00 发布

阅读量1k

点赞数 1

本文链接：https://blog.csdn.net/rol2er/article/details/75043366

版权

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