Vue登录页
前言继上个文章新建项目后,我们准备来个由登录到首页先在src目录下来个文件夹view,然后新加两个由js为基础的vue页面,一个叫Login,一个叫Home在这之前我们得先引入路由1)回到npm的cmd命令里面,输入npm install vue-router --save 安装路由2)再到src目录下添加一个router.js的文件(用来写路由配置的)3)打开ro...
·
前言
继上个文章新建项目后,我们准备来个由登录到首页
先在src目录下来个文件夹view,然后新加两个由js为基础的vue页面,一个叫Login,一个叫Home
在这之前我们得先引入路由
1)回到npm的cmd命令里面,输入npm install vue-router --save 安装路由
2)再到src目录下添加一个router.js的文件(用来写路由配置的)
3)打开router.js写下如下代码
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // 注册vue-router
const router = new VueRouter({
//mode: 'history',
//base: '/Page/',
routes: [
{
path: '/',
name: 'Login',
component: (resolve) => require(['@/viewsGS/Login.vue'], resolve),
meta: { requireAuth: false },
},
{
path: '/Home',
name: 'Home',
component: (resolve) => require(['@/viewsGS/Home.vue'], resolve),
meta: { requireAuth: false },
//children: [{ path: '/Home/Material', component: (resolve) => require(['@/views/Material.vue'], resolve) },]
}]
});
export default router;//输出定义router参数啥的
4)到main.js里面再去引用你写的router.js,并挂载到全局,如下
import Vue from 'vue';
import App from './App.vue';
import router from '@/router' // 引入你写的路由配置--------这里
Vue.config.productionTip = true;
new Vue({
render: h => h(App),
router//挂载全局--------这里
}).$mount('#app');
一、登录页简单跳转
先简单写个登录页面,代码附上,Login.vue
点登录实现路由跳转到Home.vue
<template>
<div class="loginPage">
<input type="number" v-model="phone" placeholder="输入账号" />
<input type="password" v-model="pwd" placeholder="输入密码" />
<input type="button" @click="login" value="登录" />
</div>
</template>
<script>
export default {
data() {//页面定义字段
return {
phone:"",
pwd:"",
}
},
mounted() {//页面加载
},
methods: {//页面方法
login() {
if (this.phone == "" || this.pwd == "") {
alert("Not NULL");
} else {
this.$router.push({
path:"/Home"
});//利用路由跳转页面,path为你定义的路由配置中要跳转页面的path
}
}
}
}
</script>
<style scoped>
.loginPage {
width:200px;
height:200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top:-50px;
text-align:center;
}
.loginPage input{
margin:10px;
padding:6px 10px;
border-radius:5px;
border:1px solid #ccc;
}
</style>
二,实现http验证成功再跳转
先引入reqwest(http请求用的方法):npm install reqwest -g
然后在Login.vue中js块引入组件:import reqwest from 'reqwest';
修改登录方法,如下
login() {
if (this.phone == "" || this.pwd == "") {
alert("Not NULL");
} else {
var sentData = {
Phone:this.phone,
Password:this.pwd,
}
reqwest({
url: "https//xxxxxxx",
method: "POST",
headers:{//不同接口不同配置,以下仅供参考
'Accept': "application/json",
'Content-Type': "application/json",
},
data: JSON.stringify(sentData),
error: (error) => {
//错误处理
},
success: (res) => {
//成功跳转
this.$router.push({
path: "/Home"
});//利用路由跳转页面,path为你定义的路由配置中要跳转页面的path
}
});
}
}
好了登录结束,下期来讲讲我们使用的AntDesignVue样式组件,是个不错的好东西,蚂蚁金服滴,可以去瞅瞅
附链接:
更多推荐
已为社区贡献7条内容
所有评论(0)