nodejs基础教程-简单blog（3）-vue

最新推荐文章于 2023-08-24 19:55:01 发布

久如云漂泊

最新推荐文章于 2023-08-24 19:55:01 发布

阅读量631

点赞数

本文链接：https://blog.csdn.net/u012123026/article/details/78871148

版权

html5 同时被 3 个专栏收录

44 篇文章 2 订阅

订阅专栏

vue

26 篇文章 0 订阅

订阅专栏

node

21 篇文章 0 订阅

订阅专栏

这节教程开始写前端页面逻辑用户登录注册；
使用现在比较流行的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

久如云漂泊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
nodejs基础教程-简单blog（3）-vue

这节教程开始写前端页面逻辑用户登录注册；使用现在比较流行的vue。本教程深入浅出。以后如果有空再进一步中高级教程：vue单页应用前端+nodejs后端–实现前后端分离。这节教程先不分离了。先将vue当做js引入到页面。第一步；去vue官网https://cn.vuejs.org/v2/guide/installation.html 下载vuejs的开发版本；再下载jquery；放在publi
复制链接

扫一扫