因为Abp vNext没找到Vue的模板,网上也没找到相关vNext的例子,只能自己试着写写,asp.net core abp vue都是刚学不久,所以很粗糙也可能有错误的地方,如果您看到请指正,谢谢
一、新建Vue项目,为了方便我是用vue ui方式建的,增加了element(样式),axios(ajax提交),router(路由),vuex(状态管理,暂时不会),代码尽量已经把注释写入
二、main.js中引入相关包
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' //引入element样式包 import './plugins/element.js' //引入Axios ajax交互用 import Axios from "axios"; Vue.config.productionTip = false //Axios设置为全局变量 Vue.prototype.$axios = Axios; //提交header中包含cookies,Abp vNext必须 Axios.defaults.withCredentials= true; new Vue({ router, store, render: h => h(App) }).$mount('#app')
三、修改App.vue文件为以下代码
<template> <div id="app">
<!--增加两个链接-->
<router-link to="/">Login</router-link>
<router-link to="About"> | About</router-link> <router-view/> </div> </template> <script> export default { name: 'app' } </script> <style> </style>
四、创建Login.vue登录页
<template> <div> <!-- element ui表单 详细信息请查看 https://element.faas.ele.me/#/zh-CN/component/form --> <el-row> <el-col :span="5"> <el-form :model="form" label-width="100px"> <el-form-item label="用户名"> <el-input v-model="form.userNameOrEmailAddress"></el-input> </el-form-item> <el-form-item label="密码"> <el-input type="password" v-model="form.password" autocomplete="off"></el-input> </el-form-item> <el-form-item> <el-checkbox v-model="form.rememberMe">记住我</el-checkbox> </el-form-item> <el-form-item> <el-button type="primary" @click="submit" style="width: 100%">提交</el-button> </el-form-item> </el-form> </el-col> </el-row> </div> </template> <script> //引入路由 import router from "../router"; export default { name: 'Login', data() { return { //表单名 form: { userNameOrEmailAddress: '', password: '', rememberMe: true } }; }, methods: { submit() { this.$axios.post('https://localhost:44327/api/account/login', this.form) .then(res => { if (res.data.result == 1) { //登录成功提示 this.$message({ message: '登录成功', type: 'success' }); //登录成功后跳转页面 router.push('About') } else if (res.data.result == 2) { //登录失败提示 this.$message({ message: '登录失败! ' + res.data.description, type: 'error' }); } } ) .catch(() => { this.$message({ message: '未知错误', type: 'error' }); } ) } } } </script>
登录成功与失败提示
五、登录成功后测试查询用户
<template> <div> <el-button @click="btnGetUser">查询用户</el-button> <el-button @click="btnExit">退出登录</el-button> <hr/> {{userInfo}} </div> </template> <script> export default { data(){ return{ userInfo:[] } }, methods: { btnGetUser: function () { this.$axios.get('https://localhost:44327/api/identity/users') .then(response => { this.userInfo = response.data.items; }) .catch(() => { this.$message({ message: '登录失败或权限不足', type: 'error' }); }) }, btnExit: function () { this.$axios.get('https://localhost:44327/api/account/logout') .then(() => { this.$message({ message: '退出成功', type: 'success' }); }) } } } </script>
查询成功
如果没有权限或没有登录,查询失败提示