赞
踩
版本控制
1 git init ->.git 创建.git隐藏文件
2 git status 查看状态
3 git add . 监控工作区的状态树 会把工作时的所有变化提交到暂存区
4 git commit -m '注释'
5 在代码托管平台(github)新建远程仓库
6 git remote add origin https://gitee.com/renghonhai/webqianduan.git 关联仓库
7 git push -u origin master 推送到远程仓库master分支 之后 再push 直接git push
1 新建分支 —— 专门写登录功能
git branch —— 查看当前有什么分支
git checkout -b 分支名 ————新建分支 并切换到新建分支
新建组件
<template>
<div>
<p>登录</p>
</div>
</template>
<script>
export default {
name:'Login'
}
</script>
<style scoped>
</style>
配置路由
const Login = () => import('@/views/login/Login.vue') 导入组件
{
path: '/login',
name: 'login',
component: Login
}
注意每完成一个小功能就提交一次 等写完整个功能再推送
但是推送操作要master去完成 并合并
在登录组件引入el-form
<el-form :label-position="labelPosition" label-width="80px" :model="formData">
<h2>用户登录</h2>
<el-form-item label="用户名">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="formData.region"></el-input>
</el-form-item>
<el-button type="primary">登录按钮</el-button>
</el-form>
需要data数据
data() {
return {
labelPosition: 'top', //可选值为 top、left,当设为 top 时标签会置于表单域的顶部
formData: {
name: '',
region: '',
type: ''
}
};
}
新建一个css文件初始化样式 存放公共样式 assets>css>reset.css
html,
body{
height: 100%;
padding: 0;
margin: 0;
}
在main.js引用
import '@/assets/css/reset.css'
2 ,在app.vue添加高度 因为 app.vue还有个盒子 而我们登录组件是在这个盒子内
#app {
height: 100%;
}
登录组件样式
.login-wrap{ /*dav样式*/ height: 100%; background-color: #324152; display: flex; /* 弹性盒子布局*/ justify-content: center; /* 水平居中*/ align-items: center; /* 上下居中*/ } .login-wrap .login-form { /* form表单样式*/ width: 500px; background-color: #fff; border-radius: 10px; /* 圆角的边框*/ padding: 30px; /* 内边距*/ } .login-wrap .login-btn {/* 按钮样式 */ width: 100%; }
npm install axios -save
将axios变成插件使用
1.新建目录 plugins 该目录放置自己定义的插件
2.在plugins目录下新建 http.js 文件
//插件模块
import axios from 'axios'
const MyHttpServer={}
MyHttpServer.install = (Vue) => {
axios.defaults.baseURL='http://localhost:8888/api/private/v1/' //配置基准地址
// 4. 添加实例方法
Vue.prototype.$http =axios
}
export default MyHttpServer
3,在main导入使用插件
import MyHttpServer from '@/plugins/http.js'
Vue.use(MyHttpServer);
proxyTable: {
'/api': {
target:'http://127.0.0.1:8888/api/private/v1/', // 你请求的第三方接口
changeOrigin:true, // 在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite:{ // 路径重写,
'^/api': '' // 替换target中的请求地址,也就是说以后你在请求http://api.douban.com/v2/XXXXX这个地址的时候直接写成/api即可。
},
}
}
给登录按钮添加登录方法
@click.prevent="handleLogin()"
在methods:{}编写登录请求方法 handleLogin(){ this.$http.post('/api/login',this.formData).then((res)=>{ console.log(res) const { data,meta:{msg,status} } = res.data //登录成功 if(status===200) { //1.跳转home this.$router.push({name:'Home'}) //2.提示成功 this.$message.success(msg); }else{ //不成功 //1.提示消息 this.$message.error(msg); } });
<template> <div> home </div> </template> <script> export default { name:'Home' } </script> <style scoped> </style>
配置路由
const Home = () => import('@/views/home/Home.vue')
{
path: '/',
name: 'Home',
component: Home
}
需求 希望异步操作的代码 看起来像同步代码
ES7 async +await
/* 需求 希望异步操作的代码 看起来像同步代码 async +await 1.找到异步操作 有结果的代码 前面加上 await 同时接受异步操作的结果res 2.找到距离异步操作有结果的最近的方法 加上async */ async handleLogin(){ const res =await this.$http.post('/api/login',this.formData) const { data,meta:{msg,status} } = res.data //登录成功 if(status===200) { //1.跳转home this.$router.push({name:'Home'}) //2.提示成功 this.$message.success(msg); }else{ //不成功 //1.提示消息 this.$message.error(msg); }
目的:防止用户没登陆 通过url 直接来到home组件
在登录成功时 保存正确用户的token值
localStorage.setItem('toke',data.token) 存储到本地
localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value):将value存储到key字段
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。