您的位置：首页 > Web前端 > Node.js

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

2017-12-22 11:12 357 查看

这节教程开始写前端页面逻辑用户登录注册；

使用现在比较流行的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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： nodejs vue

相关文章推荐

新的分享

章节导航