…
“依赖”:{
:“vue ^ 2.5.2”,
:“vue-router ^ 3.0.1”,
:“element-ui ^ 2.0.7 ",//element-ui
:“axios ^ 0.17.1 "//http请求库
}
…
之后执行npm安装进行安装依赖,如果安装速度有点慢的话,可以试一下cnpm,具体安装和用法自行查找。
简单介绍下项目的目录结构:
├─构建//构建配置
├─配置//配置文件
├─src//vue开发源文件目录
├────资产//css/js文件
├────组件//vue组件
├────路由器//路由
├────应用。vue//启动组件
├────主要。js//入口文件
├─静态//静态文件目录
├─测试//测试目录
之后在项目根目录执行npm运行dev,打开浏览器输入http://localhost: 8080就可以查看了
。
目标
<李>登录页面,登录,退出功能李
<李>首页,调用接口渲染列表
<>强路由
路由使用的是vue-router,具体用法可参考官方文档
我们这里需要两个路由:
src/路由器/index.js
从“Vue”进口Vue
从“vue-router”进口路由器
从“@/组件/导入指数指数”
从“@/组件/导入登录登录”
Vue.use(路由器)
const路由器=new路由器({
路线:[
{
路径:/索引,
名称:“指数”,
组件:指数
},
{
路径:/登录,
名称:“登录”,
组件:登录
}
]
})
路由器。beforeEach(下),从=比;{
如果(to.name !=='登录',,! localStorage.getItem(令牌)){
next({路径:“登录”})
其他}{
next ()
}
})
出口的默认路由器
<>强登录页面
src/组件/Login.vue
& lt; template>
& lt; div类="登录"比;
& lt; el-form name=" aa ":内联=" true "标签位置=罢返摹眑abel-width=?0 px”比;
& lt; el-form-item标签="用户名”在
& lt; el-input v模型=" user.name "祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签="密码”比;
& lt; el-input类型=v模型“密码”=皍ser.password祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item标签=薄氨?
& lt; el-button类型=爸鳌盄click=暗锹?)”的在登录& lt;/el-button>
& lt;/el-form-item>
& lt;/el-form>
& lt;/div>
& lt;/template>
& lt; script>
进口从http美元“@/api/?
从“@/config”进口配置
出口默认{
数据(){
返回{
用户:{
名称:”,
密码:"
}
}
},
安装:函数(){
var牌=localStorage.getItem(令牌)
如果(令牌){
router.push美元。(“/指数”)
}
},
方法:{
登录:函数(){
var=https://www.yisu.com/zixun/{数据
grant_type:“密码”,
client_id: config.oauth_client_id,
client_secret: config.oauth_secret,
用户名:this.user.name,
密码:this.user.password
}
var _this=这
美元http.login(数据)。然后(函数(res) {
如果(res.status===200) {
http.setToken美元(res.data.access_token)
_this。美元消息({
showClose:假的,
消息:“登录成功”,
类型:“成功”
})
_this。router.push美元(/索引)
其他}{
_this。美元消息({
showClose:假的,
消息:“登录失败”,
类型:“错误”
})
}
})
}
}
}
& lt;/script>
& lt; style>
.login {
宽度:300 px;
保证金:100 px的汽车;
background - color: # ffffff;
填充:30 px 30 px 5 px;
border - radius: 5 px;
}
& lt;/style>
<强>首页
src/组件/Index.vue
& lt; template>
& lt; div类=爸饕北?
& lt; el-table
条纹
v-loading="加载"
element-loading-background=" # dddddd”
:数据=" https://www.yisu.com/zixun/tableData "
比;
& lt; el-table-column
支持=" id "
label=" ID "比;
& lt;/el-table-column>
& lt; el-table-column
支持="名称"
label="名称“比;
& lt;/el-table-column>
& lt;/el-table>
& lt; el-pagination
背景
布局="上一页,寻呼机,下一个”
:总=白堋?
类="页面"
@current-change=皃ageList”比;
& lt;/el-pagination>
& lt;/div>
& lt;/template>
& lt; script>
进口从http美元“@/api/?
出口默认{
数据(){
返回{
tableData: [],
总:0,
加载:假
}
},
安装:函数(){
this.getList ()
},
方法:{
pageList:函数(页面){
this.search。页面=this.getList ()
},
getList:函数(){
var _this=这
_this。加载=true
美元http.index ()。然后(函数(res) {
如果(res.status===200) {
_this。tableData=https://www.yisu.com/zixun/res.data.data.lists
_this。总=res.data.data.total
}
_this。加载=false
})
}
}
}
