user 启动 ava out input bst cti 获取 我们
使用vue-resource请求接口非常方便,在使用前需安装vue-resource依赖并在入口文件main.js中声明。
本实例只有简单的两个模块:登录和注册,主要演示如何用vue-resource请求接口以及后期逻辑书写。各个功能如下所示:
登录模块
登录-用户不存在
登录-密码错误
登录-成功
注销登录
注册模块
在创建项目之前,我们先理一下整个项目的功能模块。
登录模块
1.用户输入用户名及密码,调用接口
??1.1用户名未找到,提示用户“用户名不存在”
??1.2用户名找到,但密码不匹配,提示用户“密码输入错误”
??1.3用户名和密码都匹配,登录成功并跳转到主页,同时将用户名存为cookie
2.加载主页获取cookie
??2.1cookie不存在,跳转到登录页
??2.2cookie存在,显示用户名
??2.3点击注销,删除cookie并跳转到登录页
3.管理员登录
??3.1输入管理员用户名及密码,跳转到管理页
注册模块
1.用户输入用户名及密码,调用接口
??1.1注册成功直接跳转到登录页
项目整体文件结构如下
cookie.js为公共方法,用于cookie的存储、获取及删除
home.vue为用户登录成功之后的主页
login.vue为登录注册页
main.vue为后台管理页
用vue-cli创建一个新项目,创建好后,因为我们要用到接口请求,所以第一步先安装vue-resource,打开cmd进入文件所在目录,输入npm install vue-resource,安装完成后在入口文件main.js中引入
- import VueResource from ‘vue-resource‘
- Vue.use(VueResource)
在src中新建views/login/login.vue
- <template>
- <div>
- <div class="login-wrap" v-show="showLogin">
- <h3>登录</h3>
- <p v-show="showTishi">{{tishi}}</p>
- <input type="text" placeholder="请输入用户名" v-model="username">
- <input type="password" placeholder="请输入密码" v-model="password">
- <button v-on:click="login">登录</button>
- <span v-on:click="ToRegister">没有账号?马上注册</span>
- </div>
- <div class="register-wrap" v-show="showRegister">
- <h3>注册</h3>
- <p v-show="showTishi">{{tishi}}</p>
- <input type="text" placeholder="请输入用户名" v-model="newUsername">
- <input type="password" placeholder="请输入密码" v-model="newPassword">
- <button v-on:click="register">注册</button>
- <span v-on:click="ToLogin">已有账号?马上登录</span>
- </div>
- </div>
- </template>
- <style>
- .login-wrap{text-align:center;}
- input{display:block; width:250px; height:40px; line-height:40px; margin:0 auto; margin-bottom: 10px; outline:none; border:1px solid #888; padding:10px; box-sizing:border-box;}
- p{color:red;}
- button{display:block; width:250px; height:40px; line-height: 40px; margin:0 auto; border:none; background-color:#41b883; color:#fff; font-size:16px; margin-bottom:5px;}
- span{cursor:pointer;}
- span:hover{color:#41b883;}
- </style>
- <script>
- export default{
- data(){
- return{
- showLogin: true,
- showRegister: false,
- showTishi: false,
- tishi: ‘‘,
- username: ‘‘,
- password: ‘‘,
- newUsername: ‘‘,
- newPassword: ‘‘
- }
- }
- }
- </script>
编辑/src/router/router.js
- import Vue from‘vue‘import Router from‘vue - router‘
- /*引入页面*/
- import Login from‘@ / views / login / login.vue‘import Main from‘@ / views / main / main.vue‘import Home from‘@ / views / home / home.vue‘
- Vue.use(Router)
- /*配置路由*/
- export
- default new Router({
- routes:
- [{
- path:
- ‘ / ‘,
- name: ‘Login‘,
- component: Login
- },
- {
- path: ‘ / main‘,
- name: ‘Main‘,
- component: Main
- },
- {
- path: ‘ / home‘,
- name: ‘Home‘,
- component: Home
- }]
- })
在cmd输入npm run dev启动项目,在浏览器看效果
点击登录按钮,触发login事件,登录成功会保存cookie,所以我们先把公共方法写好。新建src/assets/js/cookie.js
- /*用export把方法暴露出来*/
- /*设置cookie*/
- export function setCookie(c_name,value,expire) {
- var date=new Date()
- date.setSeconds(date.getSeconds()+expire)
- document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString()
- console.log(document.cookie)
- }
- /*获取cookie*/
- export function getCookie(c_name){
- if (document.cookie.length>0){
- let c_start=document.cookie.indexOf(c_name + "=")
- if (c_start!=-1){
- c_start=c_start + c_name.length+1
- let c_end=document.cookie.indexOf(";",c_start)
- if (c_end==-1) c_end=document.cookie.length
- return unescape(document.cookie.substring(c_start,c_end))
- }
- }
- return ""
- }
- /*删除cookie*/
- export function delCookie(c_name){
- setCookie(c_name, "", -1)
- }
login.vue页面先引用该公共方法
- <script>
- import {
- setCookie,
- getCookie
- }
- from‘.. / .. / assets / js / cookie.js‘export
- default {
- mounted() {
- /*页面挂载获取cookie,如果存在username的cookie,则跳转到主页,不需登录*/
- if (getCookie(‘username‘)) {
- this.$router.push(‘ / home‘)
- }
- },
- methods: {
- login() {
- if (this.username == "" || this.password == "") {
- alert("请输入用户名或密码")
- } else {
- let data = {‘username‘: this.username,
- ‘password‘: this.password
- }
- /*接口请求*/
- this.$http.post(‘http: //localhost/vueapi/index.php/Home/user/login‘,data).then((res)=>{
- console.log(res)
- /*接口的传值是(-1,该用户不存在),(0,密码错误),同时还会检测管理员账号的值*/
- if (res.data == -1) {
- this.tishi = "该用户不存在"this.showTishi = true
- } else if (res.data == 0) {
- this.tishi = "密码输入错误"this.showTishi = true
- } else if (res.data == ‘admin‘) {
- /*路由跳转this.$router.push*/
- this.$router.push(‘ / main‘)
- } else {
- this.tishi = "登录成功"this.showTishi = true setCookie(‘username‘, this.username, 1000 * 60) setTimeout(function() {
- this.$router.push(‘ / home‘)
- }.bind(this), 1000)
- }
- })
- }
- }
- }
- }
- </script>
同时新建登录成功跳转到的主页 src/views/home/home.vue
- <template>
- <div>
- <h3>欢迎 {{name}}</h3>
- <a href="#" @click="quit">注销登录</a>
- </div>
- </template>
- <script>
- /*引入公共方法*/
- import { setCookie,getCookie,delCookie } from ‘../../assets/js/cookie.js‘
- export default{
- data(){
- return{
- name: ‘‘
- }
- },
- mounted(){
- /*页面挂载获取保存的cookie值,渲染到页面上*/
- let uname = getCookie(‘username‘)
- this.name = uname
- /*如果cookie不存在,则跳转到登录页*/
- if(uname == ""){
- this.$router.push(‘/‘)
- }
- },
- methods:{
- quit(){
- /*删除cookie*/
- delCookie(‘username‘)
- }
- }
- }
- </script>
现在我们来检测一下,接口是我用php写在本地上的,服务器环境用的xampp,我们先打开xampp的phpMyadmin数据库管理页看一下我们的user表
然后我们来试试刚刚写的登录功能
输入用户名“张三”,密码“123”,可以看到提示区域显示“该用户不存在”,接口返回的值是-1
输入用户名“刘德华”,密码“123456”,可以看到提示区域显示“密码错误”,接口返回的值是0
输入用户名“刘德华”,密码“123”,可以看到提示区域显示“登录成功”,间隔1秒自动跳转到了主页,url地址栏可以看到路由的变化,接口返回值为1,打印cookie可以看到已经存在username的cookie
刚刚我们已经登录成功了,并且已经保存了username的cookie,现在我们在该浏览器中新建一个标签页,输入路由localhost:8080/#/可以看到路由自动跳转到了home。这个意思就是用户登录成功之后,在cookie有效期内是可以免登录直接跳转主页的。
注销登录其实就是删除cookie,可以看到打印出的cookie里面已经没有了username
此时我们已经删除了cookie,再新建一个标签页,输入主页的路由,可以看到又自动跳回登录页了
前面我们登录功能主要用到的是vue-resource的post请求,接下来我们写一个get请求,其实两者都差不多,格式都为this.$http.post/get(url,data).then((res)=>{成功返回},(res)=>{失败返回})
我们新建一个管理页src/views/main/main.vue,用get请求返回所有注册的用户
- <template>
- <div>
- <h3>
- 所有注册用户
- </h3>
- <ul>
- <li v-for="item in list">
- {{item.username}}
- </li>
- </ul>
- </div>
- </template>
- <style>
- ul{padding: 0;} ul li{list-style: none;}
- </style>
- <script>
- export
- default {
- data() {
- return {
- list:
- ‘‘
- }
- },
- mounted() {
- this.$http.get(‘http: //localhost/vueapi/index.php/Home/user/index‘).then((res)=>{
- this.list = res.data console.log(res)
- })
- }
- }
- </script>
前面创建登录页login.vue时,我们做的判断是当用户名和密码都为admin时,认为它是管理员账号,跳转到管理页main.vue
打开登录页,输入用户名“admin”,密码“admin”,可以看到路由直接跳转到main,打印出的是接口的返回值
前面我们在login.vue里已经写好了登录和注册两个区域,并且我们默认的是显示登录页(即showRegister 为false,showLogin 为true),现在我们要增加切换显示的方法ToRegister和ToLogin,方法很简单,写在login.vue下script标签的methods内部即可
- ToRegister(){
- this.showRegister = true
- this.showLogin = false
- },
- ToLogin(){
- this.showRegister = false
- this.showLogin = true
- }
查看切换效果
点击“注册”按钮,触发register事件,在该事件中将用户输入的用户名和密码传至接口
- register(){
- if(this.newUsername == "" || this.newPassword == ""){
- alert("请输入用户名或密码")
- }else{
- let data = {‘username‘:this.newUsername,‘password‘:this.newPassword}
- this.$http.post(‘http://localhost/vueapi/index.php/Home/user/register‘,data).then((res)=>{
- console.log(res)
- if(res.data == "ok"){
- this.tishi = "注册成功"
- this.showTishi = true
- this.username = ‘‘
- this.password = ‘‘
- /*注册成功之后再跳回登录页*/
- setTimeout(function(){
- this.showRegister = false
- this.showLogin = true
- this.showTishi = false
- }.bind(this),1000)
- }
- })
- }
- }
好了,到这里我们已经基本实现了一个有cookie功能的简单的登录注册小实例,主要是了解一下vue-resource接口请求的用法
vue-cli——vue-resource登录注册实例
来源: http://www.bubuko.com/infodetail-2402801.html