1.搭建后台
开发工具idea，直接初始化SpringBoot项目，然后点击下一步
填写组织名和项目名，然后点击下一步
选择web模块，然后点击下一步
填写项目名，以及项目的存放的位置，这个自己选定，点击完成
2.登陆页面的开发
注意我们的项目是前后台分离的，那么前后台的代码是分开部署的，问题来了，前后台是怎么进行数据交互的呢？
其实很简单前台的请求通过后台的Restful API进行json格式的数据交换，不同于jsp，后台不涉及前台页面的本身。
在开发完的是时候，前台可以通过Nginx进行部署，在nginx的配置文件中，配置与后台相互交互的端口，后台的代码直接java -jar运行即可，因为后台框架直接是SpringBoot，这样也可以直接简化开发的步骤。
- 前端页面开发
我的前台的开发的软件是vscode，大家直接可以去百度下载一个引进后项目如图所示，这里就可以看到我们之前介绍的vue的项目䣌结构了，若是还不是很清楚的话，就去看看前面的文章吧。引进项目的方法是 File->Open Folder 然后选择你要打开的项目即可
引进来之后在导航栏有一个Terminal（终端）-> New Terminal，然后在终端直接输入npm run dev然后再浏览器访问http://localhost:8080，出现如图所示的页面，就为成功。
接下来就开始撸代码了，首先开发我们的登陆页面，在src\components 文件上右击，New Folder先创建一个login文件夹，然后再文件夹下New File创建一个名字为Login.vue的文件，代码如下：
<template>
<div>
用户名:<input type="text" v-model="username" placeholder="请输入用户名"/>
<br><br>
密码： <input type="password" v-model="password" placeholder="请输入密码"/>
<br><br>
<button v-on:click="login">登录</button>
</div>
</template>
<script>
export default {
name: 'Login',
data () {
return {
username: '',
password: '',
responseResult: []
}
},
methods: {
login () {
this.$axios.post('/login', {
username: this.username,
password: this.password
}).then(successResponse => {
if (successResponse.data.code === 200) {
this.$router.replace({path: '/index'})
}
}).catch(failResponse => {
console.log('failResponse', failResponse)
})
}
}
}
</script>
这里直接就是一个form表单的提交，然后就是两个input标签输入框，输入框与vue中的data的数据进行绑定username和password，其中用了一个v-model的指令进行数据的双向绑定
- 首页的页面开发
在src下新建一个home文件夹，表示首页所在的位置，然后再文件夹下新建一个Index.vue,代码如下
<template>
<div class="hello">
<h1>欢迎来到首页</h1>
<h2>{{msg}}</h2>
</div>
</template>
<script>
export default {
name: 'Index',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
h1 {
font-weight: normal;
}
</style>
这个首页的代码就先这样吧，后面再做开发，先简陋着看看先，代码斗志直接从HelloWorld.vue中直接粘贴赋值过来的，HelloWorld真强大，这里有一个插值表达式{{msg}}这是vue里面的用法，就是直接可以把data中的数据再页面中进行展示。
- 前端相关的配置
修改/src/main.js，代码如下：
import Vue from 'vue'
import App from './App'
import router from './router'
// 设置反向代理，前端请求默认发送到 http://localhost:8081/demo
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8081/demo'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
他就会提示你，然后你就直接再终端输入npm install --save axios即可，因为项目依赖于这个模块，必须安装进来
Failed to compile with 1 errors 22:26:54
This dependency was not found:
* axios in ./src/main.js
To install it, you can run: npm install --save axios
- 配置页面路由
修改 src\router\index.js 代码如下
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
// 导入刚才编写的组件
import Login from '@/components/login/Login'
import Index from '@/components/home/Index'
//引入路由
Vue.use(Router)
export default new Router({
routes: [
//下面就是配置组件于路由的对应规则
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/index',
name: 'Index',
component: Index
}
]
})
- 跨域支持
为了让后端能够找打前端，需要进行跨域支持的配置。在 config\index.js 中，找到 proxyTable 位置，如下
proxyTable: {
'/demo': {
target: 'http://localhost:8081',
changeOrigin: true,
pathRewrite: {
'^/demo': ''
}
}
}
最后直接再终端直接运行命令npm run dev即可，然后再浏览器访问：localhost:8080/#/login，就可以看到如下页面
最后直接使用element-ui的快捷组建修改登陆页面，按一下步骤执行即可
- 在项目根目录执行命令：npm i element-ui -S进行安装
- 在main.js中引入element：
import Element from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’; - Vue.use(Element)
- 在组件中直接使用，最后登陆官网https://element.eleme.cn/#/zh-CN/component/installation只要粘贴你要用的组件的代码到你的项目中即可
最后粘贴出登陆的代码如下：
<template>
<body id="paper">
<el-form :model="loginForm" :rules="rules" class="login-container" label-position="left"
label-width="0px" v-loading="loading">
<h3 class="login_title">欢迎登录</h3>
<el-form-item prop="username">
<el-input type="text" v-model="username"
auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input type="password" v-model="password"
auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-checkbox class="login_remember" v-model="checked"
label-position="left"><span style="color: #505458">记住密码</span></el-checkbox>
<el-form-item style="width: 100%">
<el-button type="primary" style="width: 40%;background: #007bff;border: none" v-on:click="login">登录</el-button>
<router-link to="register"><el-button type="primary" style="width: 40%;background: #007bff;border: none">注册</el-button></router-link>
</el-form-item>
</el-form>
</body>
</template>
<script>
export default{
data () {
return {
rules: {
username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
},
checked: true,
username: '',
password: '',
loading: false
}
},
methods: {
login () {
this.$axios.post('/login', {
username: this.username,
password: this.password
}).then(resp => {
if (resp.data.code === 200) {
} else {
}
})
.catch(failResponse => {})
}
}
}
</script>
<style>
#paper {
background:url("../../assets/timg.jpg") no-repeat;
background-position: center;
height: 100%;
width: 100%;
background-size: cover;
position: fixed;
}
body{
margin: -5px 0px;
}
.login-container {
border-radius: 15px;
background-clip: padding-box;
margin: 190px auto;
width: 350px;
padding: 35px 35px 15px 35px;
background: #fff;
border: 1px solid #eaeaea;
box-shadow: 0 0 25px #cac6c6;
}
.login_title {
margin: 0px auto 40px auto;
text-align: center;
color: #505458;
}
.login_remember {
margin: 0px 0px 35px 0px;
text-align: left;
}
/*.login_button {*/
/*background: #505458;*/
/*}*/
/*el_checkbox {*/
/*background: #505458;*/
/*}*/
</style>
更多的教程请关注：非科班的科班
