day1:
加载过后端程序，连接了服务器，测试过接口后
开始项目：
1.webstorm打开项目
2.打开终端 git status 查看是否有On branch master
3.创建login分支 git checkout -b login
4.查看所有分支git branch
5.运行vue ui 点击tasks然后开始serve 点击open app
6.清理day01项目 清除App.vue、router下的index关于Home插件配置 删除Home、About
7.创建login组件，
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
17.加入输入框、按钮以及样式（包括加入icon）
18、用户名、密码绑定
现在el-form中:model=“loginForm” 然后在script下
data() {
return {
//这是登陆表单的数据绑定对象
loginForm:{
username:“admin”,
password:“zhangsan”
}
}
然后在每个itrm下绑定
19、表单验证绑定
el-form中绑定rules
在script的data中加入rules:{ name:[{},{}],require:[]}
loginFormRules:{
//验证用户名是否合法
username:[
{ required: true, message: ‘请输入用户名’, trigger: ‘blur’ },
{ min: 3, max: 10, message: ‘长度在 3 到 10 个字符’, trigger: ‘blur’ }
],
//验证密码是否合法
password:[
{ required: true, message: ‘请输入登陆密码’, trigger: ‘blur’ },
{ min: 6, max: 15, message: ‘长度在 6 到 15 个字符’, trigger: ‘blur’ }
]
}
对每个el-form-item利用prop=“name”
19、重置功能设置Ref
在el-form中添加ref属性
在重置button上click事件
<el-button type=“info” @click=“resetLoginForm”>重置
添加方法：
methods: {
//点击重置按钮，重置登陆表单
resetLoginForm() {
this.KaTeX parse error: Expected 'EOF', got '}' at position 40: …ields(); }̲ 20.实现登陆前表单数据的欲…refs.loginFormRef.validate(valid => {
if (!valid) return;
});
21、登陆要发送请求肯定要axious
首先引入import axious from ‘axios’
配置请求的根路径axious.defaults.baseURL = ‘http://127.0.0.1:8888/api/private/v1/’
然后Vue.prototype.KaTeX parse error: Expected '}', got 'EOF' at end of input: …{ this.refs.loginFormRef.validate(valid => {
if (!valid) return;
this.$http.post(‘login’,this.loginForm); //其中login是在根路径后的，this.loginForm是请求的数据
});
且打开后端接口 node.\app.js
login() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …t = await this.http.post(‘login’,this.loginForm);//第二步：发起请求，写上请求地址和请求参数
console.log(result)
});
第三个：其中如果没有await那么返回的result是一个Promise对象，加上await,其中await必须前面跟着async,这样就可以返回一个正常的对象
login() {
this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …} = await this.http.post(‘login’,this.loginForm);//发起请求
//服务器返回结果有六个数据，只有data有用所以用{data:res}解构data的信息，重新命名为res
if(res.meta.status !== 200) return console.log(“登陆失败”);
console.log(“登陆成功”)
});
23、登陆提示
引入element-ui的message
import {Button,Form,FormItem,Input,Message} from ‘element-ui’
Vue.prototype.
m
e
s
s
a
g
e
=
M
e
s
s
a
g
e
/
/
m
e
s
s
a
g
e
不
一
样
，
不
可
以
简
单
用
v
u
e
.
u
s
e
(
)
i
f
(
r
e
s
.
m
e
t
a
.
s
t
a
t
u
s
!
=
=
200
)
r
e
t
u
r
n
t
h
i
s
.
message = Message//message不一样，不可以简单用vue.use() if(res.meta.status !== 200) return this.
message=Message//message不一样，不可以简单用vue.use()if(res.meta.status!==200)returnthis.message.error(“登陆失败”)
this.$message.success("登陆成功")
24、完善登陆
// 1.将登陆陈宫之后的token,保存到客户端的sessionStorge中
// 1.1项目中除了登陆之外的其他API接口，必须在登陆之后才能够访问
console.log(res);
window.sessionStorage.setItem(‘token’,res.data.token)
// 1.2 token只应在当前网站打开期间生效，所以将token保存在sessionStroage中
// 2.通过编程式导航跳转转到后台主页，路由地址 /home
this.
r
o
u
t
e
r
.
p
u
s
h
(
′
/
h
o
m
e
′
)
在
浏
览
器
登
陆
成
功
之
后
可
以
c
t
r
l
+
I
之
后
看
A
p
p
l
i
c
a
t
i
o
n
的
S
t
r
o
a
g
e
中
的
S
e
s
s
i
o
n
S
t
o
r
a
g
e
查
看
k
e
y
和
v
a
l
u
e
，
就
可
以
看
到
t
o
k
e
n
和
对
应
的
值
完
善
跳
转
/
h
o
m
e
之
后
的
组
件
，
创
建
h
o
m
e
.
v
u
e
组
件
，
在
r
o
u
t
e
r
的
i
n
d
e
x
.
j
s
中
的
引
入
i
m
p
o
r
t
H
o
m
e
f
r
o
m
′
.
.
/
c
o
m
p
o
n
e
n
t
s
/
h
o
m
e
.
v
u
e
′
然
后
再
r
o
u
t
e
s
中
配
置
c
o
n
s
t
r
o
u
t
e
r
=
n
e
w
V
u
e
R
o
u
t
e
r
(
r
o
u
t
e
s
:
[
p
a
t
h
:
′
/
l
o
g
i
n
′
,
c
o
m
p
o
n
e
n
t
:
L
o
g
i
n
,
p
a
t
h
:
′
/
h
o
m
e
′
,
c
o
m
p
o
n
e
n
t
:
H
o
m
e
]
)
25
、
路
由
导
航
守
卫
控
制
访
问
权
限
/
/
为
路
由
对
象
，
添
加
b
e
f
o
r
e
E
a
c
h
导
航
首
位
r
o
u
t
e
.
b
e
f
o
r
e
E
a
c
h
(
(
t
o
,
f
r
o
m
,
n
e
x
t
)
=
>
/
/
t
o
代
表
将
要
访
问
的
页
面
，
f
r
o
m
代
表
从
哪
个
页
面
跳
转
而
来
，
n
e
x
t
代
表
将
要
放
行
的
函
数
/
/
n
e
x
t
(
)
代
表
放
行
n
e
x
t
(
′
/
l
o
g
i
n
′
)
强
制
跳
转
/
/
如
果
用
户
访
问
的
登
录
页
，
直
接
放
行
i
f
(
t
o
.
e
a
c
h
=
=
=
′
l
o
g
i
n
′
)
r
e
t
u
r
n
n
e
x
t
(
)
/
/
从
s
e
s
s
i
o
n
S
t
o
r
g
e
中
获
取
到
保
存
的
t
o
k
e
n
值
c
o
n
s
t
t
o
k
e
n
S
t
r
=
w
i
n
d
o
w
.
s
e
s
s
i
o
n
S
t
o
r
a
g
e
.
g
e
t
I
t
e
m
(
′
t
o
k
e
n
′
)
/
/
没
有
t
o
k
e
n
,
强
制
跳
转
到
登
录
页
i
f
(
!
t
o
k
e
n
S
t
r
)
r
e
t
u
r
n
n
e
x
t
(
′
/
l
o
g
i
n
′
)
n
e
x
t
(
)
)
e
x
p
o
r
t
d
e
f
a
u
l
t
r
o
u
t
e
r
/
/
别
忘
了
，
不
然
报
错
26
、
退
出
功
能
销
毁
本
地
的
t
o
k
e
n
即
可
，
后
续
的
请
求
就
不
会
携
带
t
o
k
e
n
，
必
须
重
新
登
陆
生
成
一
个
新
的
t
o
k
e
n
之
后
才
可
以
访
问
页
面
/
/
清
空
t
o
k
e
n
w
i
n
d
o
w
.
s
e
s
s
i
o
n
S
t
r
o
a
g
e
.
c
l
e
a
r
(
)
/
/
跳
转
到
登
录
页
t
h
i
s
.
router.push('/home') 在浏览器登陆成功之后可以ctrl+I之后看Application的Stroage中的SessionStorage查看key和value，就可以看到token和对应的值 完善跳转/home之后的组件，创建home.vue组件，在router的index.js中的引入 import Home from '../components/home.vue' 然后再routes中配置 const router = new VueRouter({ routes:[ {path:'/login',component:Login}, {path:'/home',component: Home} ] }) 25、路由导航守卫控制访问权限 //为路由对象，添加beforeEach导航首位 route.beforeEach((to,from,next) => { //to代表将要访问的页面，from代表从哪个页面跳转而来，next代表将要放行的函数 //next()代表放行 next('/login')强制跳转 //如果用户访问的登录页，直接放行 if(to.each === 'login') return next() //从sessionStorge中获取到保存的token值 const tokenStr = window.sessionStorage.getItem('token') //没有token,强制跳转到登录页 if(!tokenStr) return next('/login') next() }) export default router //别忘了，不然报错 26、退出功能 销毁本地的token即可，后续的请求就不会携带token，必须重新登陆生成一个新的token之后才可以访问页面 //清空token window.sessionStroage.clear() //跳转到登录页 this.
router.push(′/home′)在浏览器登陆成功之后可以ctrl+I之后看Application的Stroage中的SessionStorage查看key和value，就可以看到token和对应的值完善跳转/home之后的组件，创建home.vue组件，在router的index.js中的引入importHomefrom′../components/home.vue′然后再routes中配置constrouter=newVueRouter(routes:[path:′/login′,component:Login,path:′/home′,component:Home])25、路由导航守卫控制访问权限//为路由对象，添加beforeEach导航首位route.beforeEach((to,from,next)=>//to代表将要访问的页面，from代表从哪个页面跳转而来，next代表将要放行的函数//next()代表放行next(′/login′)强制跳转//如果用户访问的登录页，直接放行if(to.each===′login′)returnnext()//从sessionStorge中获取到保存的token值consttokenStr=window.sessionStorage.getItem(′token′)//没有token,强制跳转到登录页if(!tokenStr)returnnext(′/login′)next())exportdefaultrouter//别忘了，不然报错26、退出功能销毁本地的token即可，后续的请求就不会携带token，必须重新登陆生成一个新的token之后才可以访问页面//清空tokenwindow.sessionStroage.clear()//跳转到登录页this.router.push(’/login’)
27、将本地代码提交到码云中
git status看状态，会显示修改过的文件和没有修改过的
git add . 添加到本地中
git commit -m “完成了登陆” 提交，一定要关闭所有文档
git branch 显示*login 就说明此时我们都提交到了login分支
git checkout master 就可以把login合并到master，出现Switched to branch 'master’表示成功
git checkout login 返回login分支
git branch 可以看到在login分支
git push -u origin login因为是第一次建立login分支所以需要
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
