前端开发 =》Vue进阶打怪升级
stormMoonlet
共 7063字,需浏览 15分钟
·
2021-08-04 15:01
vue开源项目
项目推荐
github地址
https://github.com/PanJiaChen
目录解构
快速启动
//安装依赖
npm install
//启动项目
npm run dev
修改登录
修改配置
找到src/store/user.js,把里面的登录、获取用户信息、登出从后端获取的信息都先自定义
// 登录
Login({ commit }, userInfo) {
const data = {"token":"admin"}
setToken(data.token)
commit('SET_TOKEN', data.token)
},
// 获取用户信息
GetInfo({ commit, state }) {
const data = {"roles":"admin","name":"admin","avatar":"https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"}
if (data.roles && data.roles.length > 0) { // 验证返回的roles是否是一个非空数组
commit('SET_ROLES', data.roles)
} else {
reject('getInfo: roles must be a non-null array !')
}
commit('SET_NAME', data.name)
commit('SET_AVATAR', data.avatar)
},
// 登出
LogOut({ commit, state }) {
commit('SET_TOKEN', '')
commit('SET_ROLES', [])
removeToken()
},
// 前端 登出
FedLogOut({ commit }) {
commit('SET_TOKEN', '')
removeToken()
resolve()
}
项目开发流程
定义路由
src/router/index.js
{
path: '/test',
component: Layout,
redirect: '/test/list',
name: '测试管理',
meta: { title: '测试管理', icon: 'example' },
children: [
{
path: 'list',
name: '测试列表',
component: () => import('@/views/test/list'), //使用具体组件
meta: { title: '测试列表', icon: 'table' }
}
]
},
定义api模快
src/api/index.js
import request from '@/utils/request'
export default{
getList(current,limit,searchObj){
return request({
url: `/admin/xxx/xxxx/findList/${current}/${limit}`,
method: 'post',
data: searchObj //使用json
})
}
}
定义页面脚本
src/views/test
<script>
import hospset from '@/api/hospset'
export default{
data(){
return{
current:1,
limit:10,
searchObj:{},
list:[],
total : 0,
multipleSelection: []
}
},
created () {
this.getList();
},
methods: {
getList(page = 1){
this.current = page;
hospset.getHospSetList(this.current,this.limit,this.searchObj)
.then(response =>{
console.log(response);
this.list = response.data.records
this.total = response.data.total
})
.catch(error =>{
console.log(error);
})
},
removeDataById(id){
this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
hospset.deleteHospSet(id)
.then(response =>{
this.$message({
type: 'success',
message: '删除成功!'
});
this.getList(1);
})
.catch(error =>{
console.log(error);
})
})
}
}
}
</script>
定义页面组件模板
src/views/test
具体使用参考https://element.eleme.cn/#/zh-CN/component/table
<template>
<div class="app-container">
<!-- banner列表 -->
<el-table
:data="list"
stripe
style="width: 100%">
<el-table-column type="index" width="50"/>
<el-table-column prop="hosname" label="医院名称"/>
<el-table-column prop="hoscode" label="医院编号"/>
<el-table-column prop="apiUrl" label="api基础路径"width="200"/>
<el-table-column prop="contactsName" label="联系人姓名"/>
<el-table-column prop="contactsPhone" label="联系人手机"/>
<el-table-column label="状态" width="80">
<template slot-scope="scope">
{{ scope.row.status === 1 ? '可用' : '不可用' }}
</template>
</el-table-column>
</el-table>
</div>
</template>
评论