- 技术博客
- 电商系统前后端开发（Vue+Springboot）(13) - webpack-Vue 项目
1 新建 webpack 项目
安装依赖
1.1 配置路由
App.vue 中创建路由视图
启动项目
2 登录页面制作
main.js
import Vue
from 'vue'
import App
from './App'
import VueRouter
from 'vue-router'
import ElementUI
from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios
from 'axios'
import VueAxios
from "vue-axios";
import router
from './router'
Vue
.use(VueRouter
)
Vue
.use(ElementUI
)
Vue
.use(VueAxios
,axios
)
Vue
.config
.productionTip
= false
new Vue({
el
: '#app',
router
,
components
: { App
},
template
: '<App/>'
})
Login.vue
<template>
<div class="login-box">
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<h3 class="login-title">欢迎登录
</h3>
<el-form-item label="用户名" prop="name">
<el-input v-model="form.name" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit('form')">登录
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "Login",
data() {
return {
form: {
name: '',
password: '',
},
rules: {
name: [
{required: true, message: '请输入用户名', trigger: 'blur'},
{min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
],
password: [
{required: true, message: '请输入密码', trigger: 'blur'},
{min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
],
}
}
},
methods: {
onSubmit(formName) {
this.$refs[formName].validate((valid) => {
var vm = this;
if (valid) {
this.axios({
method: 'get',
url: 'http://localhost:8081/login?username='+vm.form.name+'&password='+vm.form.password,
data: {
username: this.name,
password: this.password,
}
}).then(resp => {
console.log(resp)
if(resp.data === "success"){
vm.$router.push("/Home")
}
})
} else {
vm.$message.error('用户名或者密码格式错误')
return false;
}
})
}
}
}
</script>
<style scoped>
.login-box {
width: 500px;
height: 300px;
border: 1px solid blueviolet;
margin: 150px auto;
padding: 20px 50px 20px 30px;
border-radius: 20px;
box-shadow: 0px 0px 20px aquamarine;
}
.login-title {
text-align: center;
margin-bottom: 40px;
}
</style>
后端接口
package com
.tzb
.webshop
.controller
;
import org
.springframework
.web
.bind
.annotation
.*
;
@RestController
public class UserController {
@GetMapping("/login")
@CrossOrigin
public String
login(String username
,String password
){
System
.out
.println(username
);
System
.out
.println(password
);
if("Mike".equals(username
) && "123".equals(password
)){
return "success";
}
return "error";
}
}
