# spring boot + vue 登录界面
## 创建 Vue 应用

- 先创建 vue 项目，输入 vue create power-vue 回车，这里我项目取名是：power-vue，

```
vue create power-vue
```
![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/01/18/kuangstudyb844774e-31f8-4feb-a0e6-957f81628671.png)

- 选择默认的创建方式
![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/01/18/kuangstudy548029a5-11cb-43c2-be6f-588bed7d3085.png)

- 创建完成后，可以访问一下项目
![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/01/18/kuangstudy56f3e1b5-9c19-4bcf-ad53-91646cf13388.png)
- 输入  http://localhost:8080/ 进行访问
![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/01/18/kuangstudy17670a2c-c4d2-4a0e-a67b-6ceab9792aee.png)
- 访问成功，表示 vue 项目创建成功
![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/01/18/kuangstudyba600f57-7aab-4c5a-b117-689c9948aa67.png)

## 导入刚创建好的项目

- 我本人用idea，安装vue插件即可

- 配置启动项目（不想配置，可以通过cmd命令运行）
![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/01/18/kuangstudy2284dfd1-bb10-46e0-b010-b41abc2b983b.png)

##  添加项目依赖

```
  -- 进入到项目根目录
  -- 安装 element-UI
  npm i element-ui -S
  -- 安装 axios(相当于ajax)
  npm i axios -S
  -- 安装 Vuex
  npm i vuex -S
   -- 安装 路由 vue 页面跳转
  npm i vue-router -S
  ```

- 打开package.json 文件，就能看到刚刚导入的依赖

![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/01/18/kuangstudyc5f69830-49e3-4900-8f48-c4e49550cee6.png)

> 开始创建登录页面

1. 添加目录

```
   -- 路由配置
   router
   -- 视图
   views
   ```

- 如图所示

![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/01/18/kuangstudy6139a10f-779c-4740-ba75-8659130756af.png)

- > 在viwes创建Login.vue文件

- ```html
  <template>
      <div class="login-container">
          <h3 class="login-title">用户登录</h3>
          <el-form ref="ruleForm" :rules="rules" :model="loginForm" class="login-form">
              <el-form-item prop="username">
                  <el-input prop="username"
                            prefix-icon="el-icon-user"
                            placeholder="用户名"
                            v-model="loginForm.username"
                  ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                  <el-input
                          prefix-icon="el-icon-lock"
                          placeholder="密码"
                          type="password"
                          v-model="loginForm.password"
                  ></el-input>
              </el-form-item>
              <el-form-item class="btn-r">
                  <el-button type="primary" style="" @click="submitForm('ruleForm')">登录</el-button>
              </el-form-item>
          </el-form>
      </div>
  </template>
  
  <script>
      export default {
          name: "Login",
          data() {
              return {
                  rules: {
                      username: [
                          { required: true, message: '不能为空', trigger: 'blur' }
                      ],
                      password: [
                          { required: true, message: '不能为空', trigger: 'blur' },
                          { min: 5, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' }
                      ]
                  },
                  loginForm: {
                      username: 'admin',
                      password: 'admin',
                  },
              }
          },
          methods: {
              submitForm (formName) {
                  this.$refs[formName].validate(async (valid) => {
                      if (valid) {
                          const { data: res } = await this.$http.post('/login', { params: this.loginForm })
                          if (res.code !== '200') {
                              return this.$message.error(res.msg)
                          }
                          this.$message.success(res.msg)
                          // 路由跳转
                          await this.$router.push('/home')
                      }else{
                          this.$message.error("表单验证不通过")
                          return false;
                      }
                  })
              }
          }
      }
  </script>
  
  <style scoped>
      .login-container{
          border-radius: 15px;
          background-clip: padding-box;
          margin: 180px auto;
          width: 350px;
          padding: 15px 35px;
          background: #FFf;
          border: 1px solid #eeeeee;
          box-shadow:2px 2px 5px #000;
      }
      .login-title{
          text-align: center;
      }
      .btn-r button {
          width: 100%;
      }
  </style>
  ```

- > 添加Home.vue文件

```
  <template>
      <div>
          Home
      </div>
  </template>
  
  <script>
      export default {
          name: "Home"
      }
  </script>
  
  <style scoped>
  
  </style>
  ```

> 配置路由

router/index.js

```
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  import Login from "../viwes/Login";
  import Home from "../viwes/Home";
  
  Vue.use(VueRouter)
  const routes = [
      { path: '/', component: Login },
      { path: '/home', component: Home }
  ]
  const router = new VueRouter({
      routes
  })
  
  export default router
  ```

> 配置router，axios，ElementUI
 
``` 
  import Vue from 'vue'
  import App from './App.vue'
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  import router from './router'
  import axios from 'axios'
  // 访问API Url
  axios.defaults.baseURL = 'http://localhost:8081'
  Vue.use(ElementUI);
  Vue.prototype.$http = axios
  // 是否开启开发环境
  Vue.config.productionTip = false
  
  new Vue({
    router,
    render: h => h(App),
  }).$mount('#app')
  
  ```

-- > 到这里，前端部分完成

## springboot 开发

- 后台接收判断值，这里只是简单处理一下，引用web模块和 fastjson 
![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/01/19/kuangstudyb23e12ce-9f08-4ce3-a8ac-8bbe62fe1e60.png)
- 创建一个Controller，接收前端传过来的值
![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/01/19/kuangstudya9871523-20f9-435d-b713-1642fdfcee0a.png)
```
	@RestController
	public class LoginController {
		@RequestMapping(value = "/login", method = RequestMethod.POST)
		public Object login(@RequestBody JSONObject jsonParam){
			JSONObject resJson = new JSONObject();
			String msg = "登录失败";
			String code = "500";
			if(jsonParam.getString("username").equals("admin") && jsonParam.getString("password").equals("123456")){
				msg = "登录成功";
				code = "200";
			}
			resJson.put("msg",msg);
			resJson.put("code",code);
			return resJson;
		}
	}
```
- 修改后端端口
![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/01/19/kuangstudyc203360a-930c-4f4b-833f-f4c4363cdb10.png)
- 配置前端访问跨域
![](https://kuangstudy.oss-cn-beijing.aliyuncs.com/bbs/2021/01/19/kuangstudyb1c6cfb9-e7ce-45ac-98c5-1d644dcf3173.png)
```
@Configuration
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1,允许任何来源
        corsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));
        //2,允许任何请求头
        corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);
        //3,允许任何方法
        corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);
        //4,允许凭证
        corsConfiguration.setAllowCredentials(true);

UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);
    }
}
```
----> 到些简单的前后端分离就做好了!!

spring boot + vue登录界面

总共已有 0 条评论