first commit
This commit is contained in:
callmeyan
parent
91ded0ad02
commit
d9eef0cc88
10
README.md
10
README.md
@ -4,17 +4,25 @@
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
Runs the app in the development mode.<br>
|
||||
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
|
||||
|
||||
The page will reload if you make edits.<br>
|
||||
You will also see any lint errors in the console.
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
Builds the app for production to the `build` folder.<br>
|
||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
||||
|
||||
The build is minified and the filenames include the hashes.<br>
|
||||
Your app is ready to be deployed!
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
|
||||
101
package-lock.json
generated
101
package-lock.json
generated
@ -1719,6 +1719,14 @@
|
||||
"integrity": "sha1-ePrtjD0HSrgfIrTphdeehzj3IPg=",
|
||||
"dev": true
|
||||
},
|
||||
"async-validator": {
|
||||
"version": "1.8.5",
|
||||
"resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
|
||||
"integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
|
||||
"requires": {
|
||||
"babel-runtime": "6.x"
|
||||
}
|
||||
},
|
||||
"asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "http://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
|
||||
@ -1862,8 +1870,7 @@
|
||||
"babel-helper-vue-jsx-merge-props": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "http://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
|
||||
"integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY=",
|
||||
"dev": true
|
||||
"integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
|
||||
},
|
||||
"babel-loader": {
|
||||
"version": "8.0.5",
|
||||
@ -1895,6 +1902,22 @@
|
||||
"esutils": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"babel-runtime": {
|
||||
"version": "6.26.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
|
||||
"integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
|
||||
"requires": {
|
||||
"core-js": "^2.4.0",
|
||||
"regenerator-runtime": "^0.11.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"regenerator-runtime": {
|
||||
"version": "0.11.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
|
||||
"integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "http://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
|
||||
@ -2054,6 +2077,12 @@
|
||||
"resolved": "http://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true
|
||||
},
|
||||
"qs": {
|
||||
"version": "6.5.2",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
|
||||
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -2980,8 +3009,7 @@
|
||||
"core-js": {
|
||||
"version": "2.6.1",
|
||||
"resolved": "http://registry.npm.taobao.org/core-js/download/core-js-2.6.1.tgz",
|
||||
"integrity": "sha1-h0Fq6BfelXo/JJs7XKR11KrtYEI=",
|
||||
"dev": true
|
||||
"integrity": "sha1-h0Fq6BfelXo/JJs7XKR11KrtYEI="
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
@ -3392,8 +3420,7 @@
|
||||
"deepmerge": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "http://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
|
||||
"integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
|
||||
"dev": true
|
||||
"integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
|
||||
},
|
||||
"default-gateway": {
|
||||
"version": "2.7.2",
|
||||
@ -3732,6 +3759,19 @@
|
||||
"integrity": "sha1-iZ+wiN7yEK7muDikdlW7spkZDhM=",
|
||||
"dev": true
|
||||
},
|
||||
"element-ui": {
|
||||
"version": "2.4.11",
|
||||
"resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.4.11.tgz",
|
||||
"integrity": "sha512-RtgK0t840NAFTajGMWvylzZRSX1EkZ7V4YgAoBxhv4TtkeMscLuk/IdYOzPdlQq6IN0byx1YVBxCX+u4yYkGvw==",
|
||||
"requires": {
|
||||
"async-validator": "~1.8.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||
"deepmerge": "^1.2.0",
|
||||
"normalize-wheel": "^1.0.1",
|
||||
"resize-observer-polyfill": "^1.5.0",
|
||||
"throttle-debounce": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"elliptic": {
|
||||
"version": "6.4.1",
|
||||
"resolved": "http://registry.npm.taobao.org/elliptic/download/elliptic-6.4.1.tgz",
|
||||
@ -4334,6 +4374,12 @@
|
||||
"resolved": "http://registry.npm.taobao.org/ms/download/ms-2.0.0.tgz",
|
||||
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
|
||||
"dev": true
|
||||
},
|
||||
"qs": {
|
||||
"version": "6.5.2",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
|
||||
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -4853,14 +4899,12 @@
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
@ -4880,8 +4924,7 @@
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true
|
||||
"dev": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
@ -5029,7 +5072,6 @@
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
@ -7297,6 +7339,11 @@
|
||||
"integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
|
||||
"dev": true
|
||||
},
|
||||
"normalize-wheel": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
|
||||
"integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
|
||||
},
|
||||
"npm-run-path": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "http://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
|
||||
@ -8504,10 +8551,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"qs": {
|
||||
"version": "6.5.2",
|
||||
"resolved": "http://registry.npm.taobao.org/qs/download/qs-6.5.2.tgz",
|
||||
"integrity": "sha1-yzroBuh0BERYTvFUzo7pjUA/PjY=",
|
||||
"dev": true
|
||||
"version": "6.6.0",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.6.0.tgz",
|
||||
"integrity": "sha512-KIJqT9jQJDQx5h5uAVPimw6yVg2SekOKu959OCtktD3FjzbpvaPr8i4zzg07DOMz+igA4W/aNM7OV8H37pFYfA=="
|
||||
},
|
||||
"querystring": {
|
||||
"version": "0.2.0",
|
||||
@ -8797,6 +8843,14 @@
|
||||
"tough-cookie": "~2.4.3",
|
||||
"tunnel-agent": "^0.6.0",
|
||||
"uuid": "^3.3.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"qs": {
|
||||
"version": "6.5.2",
|
||||
"resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",
|
||||
"integrity": "sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"request-promise-core": {
|
||||
@ -8853,6 +8907,11 @@
|
||||
"integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
|
||||
"dev": true
|
||||
},
|
||||
"resize-observer-polyfill": {
|
||||
"version": "1.5.1",
|
||||
"resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
|
||||
"integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "http://registry.npm.taobao.org/resolve/download/resolve-1.9.0.tgz",
|
||||
@ -9971,6 +10030,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"throttle-debounce": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
|
||||
"integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
|
||||
},
|
||||
"through": {
|
||||
"version": "2.3.8",
|
||||
"resolved": "http://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
|
||||
@ -10593,6 +10657,11 @@
|
||||
"integrity": "sha1-3EJpcTMwLOMBdSQ1amxht7abShg=",
|
||||
"dev": true
|
||||
},
|
||||
"vuex": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
|
||||
"integrity": "sha512-wLoqz0B7DSZtgbWL1ShIBBCjv22GV5U+vcBFox658g6V0s4wZV9P4YjCNyoHSyIBpj1f29JBoNQIqD82cR4O3w=="
|
||||
},
|
||||
"watchpack": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "http://registry.npm.taobao.org/watchpack/download/watchpack-1.6.0.tgz",
|
||||
|
||||
@ -8,8 +8,11 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-ui": "^2.4.11",
|
||||
"qs": "^6.6.0",
|
||||
"vue": "^2.5.21",
|
||||
"vue-router": "^3.0.1"
|
||||
"vue-router": "^3.0.1",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.0.3",
|
||||
|
||||
39
src/App.vue
39
src/App.vue
@ -1,29 +1,28 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</div>
|
||||
<router-view/>
|
||||
</div>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="less">
|
||||
#app {
|
||||
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
#nav {
|
||||
padding: 30px;
|
||||
a {
|
||||
font-weight: bold;
|
||||
font-family: "Avenir", Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped lang="less">
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
27
src/components/Store.js
Normal file
27
src/components/Store.js
Normal file
@ -0,0 +1,27 @@
|
||||
import Vue from 'vue';
|
||||
import Vuex from 'vuex';
|
||||
Vue.use(Vuex);
|
||||
|
||||
const store = new Vuex.Store({
|
||||
state: {
|
||||
user: {
|
||||
userId: 0,
|
||||
userName: null,
|
||||
email: null
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
login(state,user) {
|
||||
state.user.userId = user.userId;
|
||||
state.user.userName = user.userName;
|
||||
state.user.email = user.email;
|
||||
},
|
||||
logout(state) {
|
||||
state.user.userId = 0;
|
||||
state.user.userName = null;
|
||||
state.user.email = null;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default store
|
||||
39
src/components/http.js
Normal file
39
src/components/http.js
Normal file
@ -0,0 +1,39 @@
|
||||
import qs from 'qs';
|
||||
import { async } from 'q';
|
||||
|
||||
const baseUri = "http://127.0.0.1:8080/api";
|
||||
const processResponse = (promise)=>{
|
||||
return new Promise((resolve,reject)=>{
|
||||
promise.then(ret=>{
|
||||
if(typeof(ret['errcode']) != 'undefined'){
|
||||
if(ret.errcode != 0){
|
||||
reject(ret.message);
|
||||
return;
|
||||
}
|
||||
}
|
||||
resolve(ret);
|
||||
}).catch(err=>{
|
||||
reject(err);
|
||||
})
|
||||
})
|
||||
}
|
||||
const http = {
|
||||
$getUrl(url) {
|
||||
return baseUri + url;
|
||||
},
|
||||
async get(url) {
|
||||
const resp = await fetch(this.$getUrl(url));
|
||||
return processResponse(resp.json());
|
||||
},
|
||||
async post(url, data) {
|
||||
const resp = await fetch(this.$getUrl(url), {
|
||||
body: qs.stringify(data),
|
||||
method: 'post',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded'
|
||||
}
|
||||
});
|
||||
return processResponse(resp.json());
|
||||
}
|
||||
}
|
||||
export default http;
|
||||
@ -1,8 +1,11 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import ElementUI from "element-ui"
|
||||
import router from './router'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(ElementUI)
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
|
||||
@ -1,23 +1,32 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
import Home from './views/Home.vue'
|
||||
import Vuex from 'vuex'
|
||||
import store from './components/Store'
|
||||
|
||||
Vue.use(Vuex)
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
const router = new Router({
|
||||
routes: [{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: Home
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import( /* webpackChunkName: "about" */ './views/Login.vue')
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
router.beforeEach((to,from,next)=>{
|
||||
if(to.path != '/login'){
|
||||
if(store.state.user.userId < 1){
|
||||
next({path:'/login'});
|
||||
return;
|
||||
}
|
||||
}
|
||||
next();
|
||||
});
|
||||
|
||||
export default router;
|
||||
@ -1,5 +0,0 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,18 +1,88 @@
|
||||
<style lang="less">
|
||||
.home {
|
||||
width: 1000px;
|
||||
margin: 50px auto;
|
||||
.page-container{
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="home">
|
||||
<div class="home" v-loading="loading">
|
||||
<img alt="Vue logo" src="../assets/logo.png">
|
||||
<HelloWorld msg="Welcome to Your Vue.js App"/>
|
||||
</div>
|
||||
|
||||
<el-table :data="userList" style="width: 100%" border>
|
||||
<el-table-column prop="userId" label="用户编号" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="userName" label="用户名" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="email" label="邮箱">
|
||||
</el-table-column>
|
||||
<el-table-column prop="salt" label="加密盐" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click.native.prevent="resetPwd(scope.$index)" type="text" size="small">
|
||||
重置密码
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="page-container">
|
||||
<el-pagination layout="prev, pager, next" @current-change="onPageChange" :total="total" :page-size="pageSize"></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
import HelloWorld from '@/components/HelloWorld.vue'
|
||||
import http from '../components/http';
|
||||
|
||||
export default {
|
||||
name: 'home',
|
||||
components: {
|
||||
HelloWorld
|
||||
}
|
||||
}
|
||||
name: "home",
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
userList: [],
|
||||
total: 0,
|
||||
pageSize: 15
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
document.title = "用户列表";
|
||||
this.loadData(1);
|
||||
},
|
||||
|
||||
methods: {
|
||||
onPageChange(page){
|
||||
this.loadData(page);
|
||||
},
|
||||
loadData(page) {
|
||||
this.loading = true;
|
||||
http.get('/user/all?page=' + page).then(data => {
|
||||
this.loading = false;
|
||||
this.userList = data.list;
|
||||
this.total = data.total;
|
||||
this.pageSize = data.page_size;
|
||||
}).catch(err => {
|
||||
this.loading = false;
|
||||
this.$message.error({
|
||||
title: err
|
||||
});
|
||||
})
|
||||
},
|
||||
resetPwd(index) {
|
||||
this.loading = true;
|
||||
const user = this.userList[index];
|
||||
setTimeout(() => {
|
||||
this.loading = false;
|
||||
this.$notify({
|
||||
title: '提示',
|
||||
message: user.userName + '的密码重置成功'
|
||||
});
|
||||
}, Math.ceil(Math.random() * 500) + 500);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
93
src/views/Login.vue
Normal file
93
src/views/Login.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<style lang="less">
|
||||
.login {
|
||||
width: 400px;
|
||||
margin: 50px auto 0;
|
||||
|
||||
.display-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-notice {
|
||||
color: #f56c6c;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<div class="login">
|
||||
<el-form :model="loginForm" status-icon :rules="loginRule" ref="loginForm" label-width="0px" class="demo-ruleForm">
|
||||
<el-form-item prop="userName">
|
||||
<el-input type="text" placeholder="请输入用户名" @keyup.enter.native="submitForm('loginForm')" v-model="loginForm.userName" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input type="password" placeholder="请输入密码" @keyup.enter.native="submitForm('loginForm')" v-model="loginForm.password" autocomplete="off"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="display-block" :loading="loging" type="primary" @click="submitForm('loginForm')">提交</el-button>
|
||||
</el-form-item>
|
||||
<div class="error-notice">{{errorMessage}}</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import http from "../components/http";
|
||||
import store from '../components/Store';
|
||||
|
||||
export default {
|
||||
mounted() {
|
||||
document.title = "登录";
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loginForm: {
|
||||
userName: "",
|
||||
password: "",
|
||||
valicode: "m8k2"
|
||||
},
|
||||
errorMessage: "",
|
||||
loging: false,
|
||||
loginRule: {
|
||||
userName: [{
|
||||
required: true,
|
||||
message: "请输入登录用户名",
|
||||
trigger: "blur"
|
||||
}],
|
||||
password: [{
|
||||
required: true,
|
||||
message: "请输入登录密码",
|
||||
trigger: "blur"
|
||||
}]
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
this.$refs.loginForm.validate(valid => {
|
||||
if (valid) {
|
||||
this.loging = true;
|
||||
http
|
||||
.post("/user/login", this.loginForm)
|
||||
.then(ret => {
|
||||
store.commit('login', ret);
|
||||
this.$router.push('/');
|
||||
})
|
||||
.catch(err => {
|
||||
this.loging = false;
|
||||
this.errorMessage = err;
|
||||
console.log(err);
|
||||
});
|
||||
} else {
|
||||
console.log("表单填写错误");
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
resetForm() {}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
6
vue.config.js
Normal file
6
vue.config.js
Normal file
@ -0,0 +1,6 @@
|
||||
// vue.config.js
|
||||
module.exports = {
|
||||
devServer:{
|
||||
port:3000
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user