这篇文章开始我们正式开始项目的搭建。首先我们来看一下搭建项目需要准备些什么？
- 前端搭建
- 前端我们使用的是vue框架（需要有Node.js）
- 使用vue CLI搭建vue项目
- 后端搭建
- 后端使用的是springBoot作为开发
- 数据库使用的是MySQL数据库
- 使用mybatis框架对数据库进行操作
一、准备工作
前端
Node.js的安装我就不过多的赘述了，网上有很多的教程。大家自行进行安装。
这里给大家一篇作为参考：
Node.js安装
https://blog.csdn.net/WHF__/article/details/129362462安装好Node.js之后我们选择使用vueCLI进行vue项目的搭建（步骤如下）
1. 使用如下命令进行安装
npm install -g @vue/cli哈哈哈哈哈，我当时学vue的时候，不知道需要安装Node.js。因此废了很长时间
好了，接下来我们来进行前端的搭建
2. 执行vue create xxx 命令，创建项目名称为xxx的vue项目
vue create one-project在命令行输入上述命令后出现以下页面
这里我们选择最后一项
终于安装好了，哈哈哈哈哈时间可真是太长了，请大家耐心等待，
出现以下情况就说明创建好了。
接下来根据提示的两条命令就可以将新建的vue项目进行启动了。
访问效果如下：
让我们来看一下新创建项目的目录结构
后端
springBoot项目的搭建很简单，这里我也是给大家放一篇我之前的文章进行参考
第一个springBoot项目的创建https://blog.csdn.net/weixin_54083834/article/details/130775653到这里简单的准备工作就做好了。接下来我们就开始项目的编写
二、代码实现
登录功能
前端
登录页面
登录功能主要就是实现用户的登录其实就是一个form表单，这里我们使用elementUI来进行前端页面的布局，对于elementUI不熟悉的小伙伴可以去element的官方网址看一下，其实还是蛮好用的。（）
由于我们在vue中使用了element所以我们需要在vue中对其进行引入。引入方法如下：
npm install element-ui -S如果出现了以下报错，不要慌张，都是小问题。
解决方法：
将上面的语句中的-s改为-force即可
npm install element-ui -force然后就是漫长的等待过程了。。。。。。。
安装完成后我们还需要在vue项目中修改一些东西才可以使用。
在main.js添加以下内容：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)具体添加位置如下：
接下来我们就开始登录模块的正式编写了。
首先我们在components这个文件夹下新建一个名为demo的文件夹，在demo文件夹下新建我们的登录模块Login.vue
这里我把本地的一张图片作为了背景（我把图片放在这里了需要的可以自取）
具体操作为：将该图片报错至assets文件夹下，并重命名为：eva.jpg即可。
<template>
<div id="poster">
<el-form class="login-container" label-position="left" label-width="0px">
<h3 class="login_title">登录</h3>
<el-form-item>
<el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
</el-form-item>
<el-form-item>
<el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
</el-form-item>
<el-form-item style="width: 100%">
<el-button type="primary" style="width: 100%;background: #505458;border: none" v-on:click="login">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<style>
</style>
<script>
export default {
name: 'Login',
data () {
return {
loginForm: {
username: '',
password: ''
},
responseResult: []
}
},
methods: {
login () {
const _this = this
this.$axios.post('/login', {
username: this.loginForm.username,
password: this.loginForm.password
}).then(successResponse => {
if (successResponse.data.code === 200) {
this.$router.push({ path: path === '/' || path === undefined ? '/home' : path })
}
}).catch(failResponse => {
})
}
}
}
</script>
<style>
.login-container {
border-radius: 15px;
background-clip: padding-box;
margin: 90px 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;
}
#poster{
background: url('@/assets/eva.jpg');
background-position: center;
height: 100%;
width: 100%;
background-size: cover;
position: fixed;
}
body{
margin: 0px;
}
</style>
并且demo下面新建一个名为home的文件夹里面写一个简单的AppIndex.vue模块使得登录后可以跳转过去证明登录成功了
<template>
<div>
首页
</div>
</template>
<script>
export default {
name: 'AppIndex'
}
</script>
<style>
</style>
这样登录模块的前端代码就编写完成了
那么如何将其展现在网页上呢？我们都知道，vue项目中的App.vue相当于是程序的入口，那么我们就需要将这个组件放进去，那么如何放进去呢？这里我们可以使用vue中的路由即vue-router
以下是使用的方法：
编写router目录下的index.js文件
import Vue from 'vue'
import VueRouter from 'vue-router'
import login from '@/components/demo/Login.vue'
import AppIndex from '@/components/demo/home/AppIndex.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'login',
component: login
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/index',
name: 'AppIndex',
component: AppIndex
}
]
// 解决跳转到当前路由报错问题
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return originalPush.call(this, location).catch((err) => err)
}
const router = new VueRouter({
mode: 'history',
routes
})
export default router
并且在app.vue中保留 <router-view/> 标签
到这里前端的部分就已经简单进行实现了接下来就该后端内容的编写了。
这样当我们访问 “ / “或者 ” /login “时页面就会显示为登录页面 我们输入账号密码后，页面就会跳转到我们刚刚编写的首页的位置。
后端
在Login.vue组件中前端向后端发送数据的代码为：
this.$axios.post('/login', {
username: this.loginForm.username,
password: this.loginForm.password
})我们根据这个来编写我们的实体类（User）
User实体类的编写
package com.element.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
private int id;
private String username;
private String password;
}
在这里我使用了Lombok插件，当然也可以选择自己编写构造方法和get，set等方法。
如果要使用Lombok插件，则需要在maven中引入相应的依赖。
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>Result类
这个类主要是为了构建respon，主要就是响应码的返回，代码如下：
package com.element.utils.model;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
private int code;
}
控制层
控制层主要是对前端传输过来的数据进行处理并且返回给前端反馈的，在这里我们先用简单的逻辑来判断用户的账号和密码是否正确，这里我们假设用户账号为18203561217，密码为：123456。将前端接收的数据与其进行对比，当然这里只是暂时的这样实现，后期我们会连接到数据库，并且使用shior作为登录认证的工具进行校验
package com.element.controller;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.element.pojo.User;
import com.element.utils.model.Result;
import org.springframework.web.bind.annotation.*;
import com.element.service.phoneLoginService;
import org.springframework.web.util.HtmlUtils;
import java.util.Objects;
@RestController
public class phoneLoginController {
@CrossOrigin
@PostMapping("/login")
public Result login(@RequestBody User user){
//此处后续需要连接数据库使用
String phone = user.getUsername();
String password = user.getPassword();
System.out.println(phone+password);
if (!Objects.equals("18203561217",phone) || !Objects.equals("123456",password)){
String message = "账号密码错误";
System.out.println(message);
return new Result(400);
}else {
System.out.println("手机号:"+phone+"密码:"+password);
return new Result(200);
}
}
}
在这里 @CrossOrigin 这个注解是为了解决跨域问题。
那么这里简单介绍一下是什么是跨域问题：
简单来说跨域问题就是在前后端分离的项目中，前端调用后端提供的API来获取数据，这样相比于之前的单应用来说就会产生跨域的问题。我是这样理解的：前端在一台服务器上运行，而后端在另一台服务器上运行，这时候前端访问后端就会产生跨域问题。
三、总结
这样一个简单的前后端分离的登录功能就实现了，可能已经有小伙伴发现了问题，这样的应用当我们直接在地址栏对首页进行访问的时候，会发现即使不用登录也可以找到首页，这样在实际生活中是绝对不可以的，那么下一篇文章我们将解决这个问题。并且完善一下登录认证，即将用户信息存在数据库中，到时候可以和数据库中数据进行比较。OK，今天就到这里吧！！告辞
下一篇：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
