版本控制
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%;
}
安装axios 插件
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即可。
},
}
}
发送登录axios请求 跳转到主页
给登录按钮添加登录方法
@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);
}
});
编写home组件 并配置路由
<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);
}
登录保存token值
目的:防止用户没登陆 通过url 直接来到home组件
在登录成功时 保存正确用户的token值
localStorage.setItem('toke',data.token) 存储到本地
localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value):将value存储到key字段