（3）从0开始搭建⼀个vue+springboot的前后端分离登陆案例⼀、前端（vue.js+iview）
1.新建⼀个vue项⽬，取名login
使⽤vue init webpack login初始化⼀个vue项⽬。
然后进⼊login⽬录
2.初始化包结构
3.安装iview
将刚才的项⽬停⽌（Ctrl+C，然后按Y确定），执⾏npm install --save iview
4.在项⽬中引⼊iview
使⽤vs-code打开项⽬，在main.js中加⼊以下代码
import iView from 'iview'
import 'iview/dist/styles/iview.css'
Vue.use(iView)
整体⽂件如下：
5.使⽤iview
⾸先，在components⽬录下创建Login.vue⽂件。然后在iview官⽹到Form表单组件。复制到Login.vue中。
Login.vue：
<Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
<FormItem prop="userName">
<Input type="text" v-model="formInline.userName" placeholder="Username">
<Icon type="ios-person-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem prop="password">
<Input type="password" v-model="formInline.password" placeholder="Password">            <Icon type="ios-lock-outline" slot="prepend"></Icon>
</Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formInline')">Signin</Button>
</FormItem>
</Form>
</template>
<script>
export default {
data() {
return {
formInline: {
userName: '',
password: ''
},
ruleInline: {
userName: [
{required: true, message: 'Please fill in the user name', trigger: 'blur'}
],
password: [
{required: true, message: 'Please fill in the password.', trigger: 'blur'},
{
type: 'string',
min: 6,
message: 'The password length cannot be less than 6 bits',
trigger: 'blur'
}
]
}
}
},
methods: {
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$('Fail!');
}
})
}
}
}
</script>
然后修改app.vue。
<div id="app">
<Login></Login>
</div>
</template>
<script>
import Login from './components/Login'
export default {
name: 'App',
components: {
'Login': Login
},
data() {
return {}
}
适合新手的spring boot
}
</script>
<style>
#app {
text-align: center;
margin-top:200px ;
}
</style>
⾄此，前端页⾯完成，再次运⾏项⽬，看看效果。
6.修改Login.vue和安装使⽤axios
在Login.vue组件中，有⼀个提交的⽅法，当校验通过时，会提⽰“Success!”，失败时会提⽰“Fail!”，所以我们可以在校验通过的时候提交表单到后台。
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$('Fail!');
}
})
}
vue官⽅推荐使⽤axios发送异步请求。所以这⾥我们先安装在使⽤axios
安装axios：npm install axios -S
安装完成后，在main.js加⼊以下代码
Import axios from ‘axios’
Vue.prototype.$axios = axios
接下来在表单验证的时候，提交⽤axios来做。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。