代码拉取完成,页面将自动刷新
演示地址: https://taylorchen709.github.io/vue-admin/
npm install # 安装依赖
npm run dev # 启动项目
- 创建 src/views/Login.vue 文件
- src\router\index.js配置路由
{
path: '/login',
component: page('Login'),
name: '',
hidden: true
},
3.在src\api\api.js 定义发送请求函数
export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data); };
4.在src/views/Login.vue发送post请求
//1、导入方法
import { requestLogin } from '../api/api';
//2、直接使用导入的方法即可
var loginParams = { username: this.ruleForm2.account, password: this.ruleForm2.checkPass };
requestLogin(loginParams).then(data => {
this.logining = false;
let { msg, code, user } = data;
if (code !== 200) {
this.$message({
message: msg,
type: 'error'
});
} else {
sessionStorage.setItem('user', JSON.stringify(user));
this.$router.push({ path: '/' });
}
});
1.创建 src/views/User.vue 文件
2.src\router\index.js配置路由
{
path: '/',
component: Home,
name: '导航一',
iconCls: 'el-icon-message',//图标样式class
children: [
{ path: '/user', component: page('nav1/User'), name: '用户' },
]
},
3.在src\api\api.js 定义发送请求函数
export const getUserList = params => { return axios.get(`${base}/user/list`, { params: params }); };
4.在src/views/User.vue发送get请求
//1、导入方法
import { getUserList } from '../../api/api';
//2、直接使用导入的方法即可
getUser: function () {
let para = {
name: this.filters.name
};
this.loading = true;
getUserList(para).then((res) => {
this.users = res.data.users;
this.loading = false;
});
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。