昨天一直找不到状态,脑子昏昏沉沉的。今天好好睡了一觉,整个人感觉都不一样,早睡早起真的挺好的。
感谢这位大佬的启发
搭建好Vue项目后是这个样子的
可以理解所有的页面其实都是一个页面App.vue上面动态显示
然后就是最关键的页面跳转
都是在这个文件配置
index.js
import Vue from 'vue'
import Router from 'vue-router'
import AdminLogin from '@/components/manage/AdminLogin.vue'
import AdminIndex from '@/components/home/AdminIndex.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/index',
name: '首页',
component: AdminIndex
},
{
path: '/manage',
redirect: '/login'
},
{
path: '/login',
name: '登录',
component: AdminLogin
}
]
})
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引用axios,并设置基础URL为后端服务api地址
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8081'
// 将API方法绑定到全局
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
config下的indx.js
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
主要是这个位置
主要是配置了后端程序的地址
现在就是前端传值最重要的axios(目前的理解就是ajax功能差不多)
<template>
<div>
<hr/>
<div>
用户名:<input type="text" v-model="loginInfoVo.uname" placeholder="请输入用户名" />
<br/>
密码:<input type="password" v-model="loginInfoVo.upass" placeholder="请输入密码" />
<br/>
<button v-on:click="login">登录</button>
<br/>
登录验证情况:<textarea cols="30" rows="10" v-model="responseResult"></textarea>
</div>
<hr/>
</div>
</template>
<script>
export default {
name: 'AdminLogin',
data () {
return {
loginInfoVo: { uname: '', upass: '' },
responseResult: []
}
},
methods: {
login () {
this.$axios
.post('/login', {
username: this.loginInfoVo.uname,
password: this.loginInfoVo.upass
})
.then(successResponse => {
this.responseResult = JSON.stringify(successResponse)
if (successResponse.data.success === true) {
this.$router.replace({path: '/index'})
}
})
.catch(failResponse => {})
}
}
}
</script>
axios分为是get,post,http三种传参方式。
而post相对比get安全。