nodejs基礎教程-簡單blog（3）-vue

原創

久如云漂泊

2020-02-20 18:42

這節教程開始寫前端頁面邏輯用戶登錄註冊；
使用現在比較流行的vue。本教程深入淺出。以後如果有空再進一步中高級教程：vue單頁應用前端+nodejs後端–實現前後端分離。這節教程先不分離了。先將vue當做js引入到頁面。

第一步；去vue官網https://cn.vuejs.org/v2/guide/installation.html 下載vuejs的開發版本；
再下載jquery；放在public目錄下；

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/public/bg.css">

</head>
<body>
<div id="app2" v-cloak>

    <div v-if="page==0">
        用戶名：<input type="text" v-model="username">-${username}-{{page}}
        密碼： <input type="text" v-model="pwd" >
        <button @click="login">登錄</button>
    </div>
    <div v-if="page==1">
        <h1 style="color:red" class="bg">登錄成功！！</h1>

    </div>

</div>

</body>
<script src="/public/jquery-1.4.2.min.js"></script>
<script src="/public/vue.js"></script>
<script>
    new Vue({
        delimiters: ['${', '}'],
        el: '#app2',
        data:{
            username: '',
            pwd: '',
            page: 0,
        },
        mounted: function () {

        },
        methods:{
            login: function () {

            }
        }

    });

</script>
</html>

注意：vue.js與後臺模板引擎“雙花括號”會產生衝突，衝突時的解決辦法

delimiters: ['${', '}'],

例如：
上面的代碼你會發現{{page}}是渲染不出來的。改成${username}會被渲染成功；

我們再添加註冊頁面和其他邏輯，最終代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/public/bg.css">

</head>
<body>
<div id="app2" v-cloak>

    <div v-if="page==0">
        <h1>登錄</h1>

        用戶名：<input type="text" v-model="username">
        密碼： <input type="text" v-model="pwd">
        <button @click="login">登錄</button>
        <button @click="registerPage">馬上註冊</button>
    </div>
    <div v-if="page==1">
        <h1>註冊</h1>
        用戶名：<input type="text" v-model="username">
        密碼： <input type="text" v-model="pwd">
        確認密碼： <input type="text" v-model="pwd2">
        <button @click="register">註冊</button>
    </div>
    <div v-if="page==2">
        <h1 style="color:red" class="bg">${message}</h1>

    </div>

</div>

</body>
<script src="/public/jquery-1.4.2.min.js"></script>
<script src="/public/vue.js"></script>
<script>
  var vm=  new Vue({
        delimiters: ['${', '}'],
        el: '#app2',
        data: {
            username: '',
            pwd: '',
            pwd2: '',
            page: 0,
            message:"登錄成功"
        },
        mounted: function () {

        },
        methods: {
            login: function () {
                $.ajax({
                    type: 'post',
                    url: "/api/user/login",
                    dataType:'json',
                    data: {username: this.username, password: this.pwd},
                    success: function (result) {
                        vm.page = 2;

                    }
                });
            },
            registerPage:function () {
                this.page = 1;
                this.pwd=this.pwd2='';
            },
            register: function () {
                if(this.pwd!=this.pwd2){
                    alert("密碼不一致!")
                    this.pwd=this.pwd2=''
                    return;
                }
                this.page = 1;
                $.ajax({
                    type: 'post',
                    url: "/api/user/register",
                    dataType:'json',
                    data: {username: this.username, password: this.pwd},
                    success: function (result) {
                        vm.page = 0;
                    }
                });
            }
        }

    });
    //    var vm = Vue.extend({

    //    new vm().$mount('#app')
</script>
</html>

在 blog2\routers\api.js中代碼改成；

var express=require('express')
var router=express.Router();
router.post('/user/login',function (req,res,next) {
    console.log("login")
});

module.exports=router;

運行後。點擊登錄；

後臺已經給出反應：login