vue
首先引用样式，引用组件库，放到你的目录下，也可以在官网复制
在这里我们也引入elementui组件库，在这里没有用到，但是以后会有机会用到，所以就一块引入了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue.js"></script>
<script src="../js/vuex.js"></script>
<script src="../js/vue-router.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/qs.js"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
body里面写个容器，选择器为id选择器
let vm = new Vue({
el: ‘#app’,
data: {
},
methods: {
},
// 注册路由
router
})
创建一个vue实例，拿el绑定刚刚设置的id选择器 下面注册路由 下面展示一些 `内联代码片`。
let qs = Qs;
let login = {
data() {
return {
loginData: {}
}
},
template: `
<div>
<h1>欢迎登陆</h1>
用户名：<input type="text" v-model="loginData.username">
密码：<input type="text" v-model="loginData.password">
<button @click="loginHandler">登录</button>
</div>
`,
methods: {
loginHandler() {
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios({
url: 'http://47.94.46.113:8888/user/login',
method: 'post',
data: JSON.stringify(this.loginData)
}).then(res => {
sessionStorage.setItem('token', res.data.data.token)
// 登录成功，跳转至首页
this.$router.push({ path: '/index' })
})
}
}
}
在这里我们写登录页面，创建login实例
data() {
return {
loginData: {}
}
},用来判断用户名和密码对不对
template: 里面存放html代码片段作为模板，v-model用来设置双向数据绑定，给登录设置鼠标点击事件
axios.defaults.headers.post[‘Content-Type’] = ‘application/json’;
用来设置请求头，用到的是post方法，因为在数据后台拿到的是json数据类型，所以我们要把他转换为字符串类型
sessionStorage.setItem(‘token’, res.data.data.token)
这个方法是将token存储在浏览器中
登录成功后把路由指向为/index
然后会出现这样的问题，我们可以通过改网址路径从而访问，就达不到账号密码只有对才能登录的情况，所以我们要设置拦截
let router = new VueRouter({
routes: [
{ path: ‘/’, redirect: ‘/login’ },
把/重定向为/login，这样刚进来就是登陆页面而不是空白页
{ path: ‘/login’, component: login },
{ path: ‘/index’, component: index },
]
})
// 设置路由全局前置守卫
router.beforeEach((to, from, next) => {
let token = sessionStorage.getItem(‘token’);
if (to.path != ‘/login’ && !token) {
alert(‘请先登录！’);
next(’/login’)
}
next();
})
