前端VUEVUE前端登陆-DEMO案例
Takake1.搭建VUE环境
1.1.安装vue脚手架
环境准备:nodejs
创建vue项目
进入项目创建命令选择界面,选择自定义选择
选中图中选项(空格选择,回车确认)
选择2.x版本
输入n,不使用历史路由模式
选择less,简约css
保存到package.json文件中
选择n,不存储为本地的项目
运行脚手架
显示启动,并访问成功
1.2.安装element-ui 脚手架
进入element-ui官网
根据手册安装,在项目文件夹运行一下命令
安装完成后需要引入element-ui,在main.js中写入一下内容
1 2 3 4
| import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
|
可在home文件中写element-ui组件测试是否引入成功
1.3.安装axios
1 2
| $ npm install axios --save $ npm install vue-axios --save
|
在main.js中添加如下代码
1 2 3
| import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
|
2.编写登陆demo
2.1.初始化登陆页面
在views文件夹下创建Login.vue文件
1 2 3 4 5 6 7 8 9 10 11 12
| <template> <div> 登陆页面 </div> </template>
<script> export default { name: 'Login',
} </script>
|
在router中注册路由
1 2 3 4 5 6
| import Login from '../views/Login.vue' { path: '/Login', name: 'login', component: Login },
|
最终Login.vue代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| <template> <body id="poster"> <el-form class="login-container" label-position="left" label-width="0px"> <h3 class="login_title"> 系统登陆 <el-button @click="toRegister()">点我注册</el-button> </h3> <el-form-item label=""> <el-input type="text" v-model="loginForm.username" autocomplete="off" placeholder="账号"></el-input> </el-form-item> <el-form-item label=""> <el-input type="password" v-model="loginForm.password" autocomplete="off" placeholder="密码"></el-input> </el-form-item> <el-form-item style="width: 100%;"> <el-button type="primary" style="width: 100%;background: #505458;border: none;" @click="toLogin">登陆</el-button> </el-form-item> </el-form> </body> </template>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
| <script> export default { name: 'Login', data() { return { loginForm: { username: '', password: '', code: '7', uuid: '4cf996517148477a8a249e6efafcf2e0' } } }, methods: { toLogin() { console.log('toLogin!', this.loginForm); this.axios.post('http://localhost:8088/login', this.loginForm).then((resp) =>{ let data = resp.data; if(data.code==200){ this.loginForm = {}; this.$message({ message: '成功发送登陆请求', type:'success' }); this.$router.push({path:'/Home'}) } else{ this.$message({ message: '登陆失败', type:'error' }); } })
}, toRegister() { this.$router.push({path:'/Register'}) console.log('toRegister!'); } } } </script>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| <style> #poster{ background-position: center; height: 100%; width: 100%; background-size: cover; position: fixed; } body{ margin: 0px; padding: 0px; } .login-container{ border-radius: 15px; background-clip: padding-box; margin: 90px auto; width: 350px; padding: 35px 35px 15px 35px; background: #fff; border: 1px solid #eaeaea; box-shadow: 0 0 25px #cac6c6; } .login_title{ margin: 0px auto 40px auto; text-align: center; color: #505458; } </style>
|
最终页面