前后端项目的搭建

2.1 项目调用流程图

2.2 后端项目创建

2.2.1 创建项目

2.2.2 编辑pom.xml文件

 <!--mybatis依赖包-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.0</version>
        </dependency>

        <!--jdbc依赖包-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <!--添加lombok的包-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

 

2.2.3 按照规则下载项目

说明: 根据码云中的代码, 粘贴复制pom.xml 和src文件 即可

2.2.4 代码启动测试

2.2 搭建前端项目

2.2.1 检查node.js是否正确

2.2.2 安装vue客户端工具

命令: npm install -g @vue/cli --force

2.2.3 启动客户端工具

命令: vue ui

 

浏览器效果:

2.2.4 前端项目导入

1.去码云中下载指定的前端项目

2. 在IDEA的工作目录中解压

3. 利用UI工具导入项目

4. 项目启动

2.3 关于脚手架目录结构说明

2.3.1 关于VUE知识讲解

目录结构说明:
1.assets 引入第三方js/css
2.components 组件定义的目录 组件: 将html/css/js统一封装到一起,可以提高前端代码的扩展性.
3. plugins 引入elementUI.js的文件
4. router 代表路由
5. App.vue 代表整个项目的根组件
6. main.js 项目中核心JS文件

 

2.3.2 使用Axios的说明

1. 定义共同 的请求前缀

   	/* 设定axios的请求根目录 */
   	axios.defaults.baseURL = 'http://localhost:8091/'
   

2. 父子组件之间参数传递

   /* 向vue对象中添加全局对象 以后发送ajax请求使用$http对象 */
   /* 父组件将参数传递给子组件 需要声明 prototype.key= xxx */
   Vue.prototype.$http = axios
   

   

   2.4 关于Vue 路由说明 

	//使用路由机制
	Vue.use(VueRouter)
	const routes = [
	  {path: '/', redirect: '/login'},
	  {path: '/login', component: Login},
	  {path: '/elementUI', component: ElementUI}
	]

 

3. 用户登录实现

3.1 表设计

1.表结构定义

2.编辑POJO

package com.jt.pojo;

import lombok.Data;
import lombok.experimental.Accessors;

/**
 * @author 刘昱江
 * 时间 2021/2/2
 */
@Data
@Accessors(chain = true)
public class User extends BasePojo{
    private Integer id;
    private String username;
    private String password;
    private String phone;
    private String email;
    private Boolean status;     //true 正常 false 停用
}

 3.2 业务接口文档
请求路径: /user/login
请求方式: POST

请求参数

参数名称	参数说明	备注
username	用户名	不能为空
password	密码	不能为空

响应数据 SysResult对象

参数名称	参数说明	备注
status	状态信息	200表示服务器请求成功 201表示服务器异常
msg	服务器返回的提示信息	可以为null
data	服务器返回的业务数据	返回密钥token信息

返回值格式如下:

	{"status":200,"msg":"服务器调用成功!","data":"1e893a97634847b3a8b499b173bea620"}
	

3.3 创建SysResult对象

说明: 前端与后端进行业务交互.需要有一个统一的返回数据的结构,而这种负责前后端交互的媒介.称之为vo对象.

package com.jt.vo;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;

import java.io.Serializable;

@Data
@Accessors(chain = true)
@NoArgsConstructor
@AllArgsConstructor
public class SysResult implements Serializable {
    private Integer status; //200成功  201失败
    private String  msg;    //提示信息
    private Object  data;   //服务器返回值数据

    public static SysResult fail(){

        return new SysResult(201,"业务调用失败!!",null);
    }

    public static SysResult success(){

        return new SysResult(200,"业务调用成功!!",null);
    }

    public static SysResult success(Object data){

        return new SysResult(200,"业务调用成功!!",data);
    }

    public static SysResult success(String msg,Object data){

        return new SysResult(200,msg,data);
    }
}