Vue,SpringBoot基础上自己搭建前后端分离应用平台

成为一个小菜鸟架构师是我的理想,一路向菜鸟级架构师前进哈哈哈

有些东西记了忘,忘了又记.自少自己觉得记忆力极差,什么AOP IOC的.要是现在有人问AOP有几种通知,好像5种吧,什么before，after,around什么玩意呀哈哈哈。shiro#24#24#24安全验证????

cookie,session,token啊啊啊啊啊啊啊,忘了呀,session存在服务器的是吧?要反问面试官了.

JDK代理,CGLIB代理?????SqlSessionFactory??????一万个问号,只能说时曾相识,他可能还认识我,反正我快不认识了.51一星期时间,将系统的整理边。写篇含金量挺高，很高，超级高的博文，至少对于我这种菜鸟级别的来说哈.51.每天更新

前端:

通过Vue脚手架创建Vue项目(需要安装Nodejs)

命令创建项目

Vue项目已经创建好了.其中的一些命令解释:

 用Vscode打开项目

 接下来,我们开始对原始的Vue项目进行改造,这里使用的UI为Element-UI

查看EelementUI官网 Element - The world's most popular Vue UI framework

npm install element-ui

因为项目里用到了less 

如果已经安装less和less-loader

这个是因为版本不兼容问题导致的,不断的报错中总结以下经验，首先去除掉之前的依赖

npm uninstall --save sass-loader

npm uninstall --save less-loader

npm uninstall --save less

然后严格控制版本下载依赖，

如果没有安装less直接用

npm install less-loader@4.1.0 --save-dev

npm install less@3.9.0 --save-dev
 

因为要向后端发送请求安装axios依赖:npm install axios

其实axios和ajax的区别可以简单理解成ajax的升级版

接下来,需要修改main.js和路由index.js,都做了解释,我需要将首页改为登录页面

 完整的Login.vue

<!-- 定义模版对象 -->
<template>
    <div class="login_container">
      <div class="login_box">
        <!-- 头像区域
        <div class="avatar_box">
          <img src="../assets/logo.png" alt="VUE图片" />
        </div> -->

        <!-- 登陆表单区域
              ref代表当前表单引用对象
             :model 是表格中封装的对象
             :rules 属性绑定
             prop="username"指明需要校验的属性
        -->
        <el-form ref="loginFormRef" label-width="0" class="login_form" :model="loginForm" :rules="rules" >
          <el-form-item prop="username">
            <el-input  prefix-icon="iconfont iconuser" v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input  prefix-icon="iconfont iconsuo" type="password" v-model="loginForm.password"></el-input>
          </el-form-item>
          <el-form-item class="btns">
             <el-button type="primary" @click="login">登录</el-button>
              <el-button type="info" @click="resetBtn">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<!-- 定义JS变量 -->
<script>
export default {
  name: 'Login',
  //定义组件属性
  data(){
    return {
      //如果是form表单提交 一般都会采用对象封装
      loginForm: {
        username: '',
        password: ''
      },
      //定义表单的验证规则(命名与上面:rules='xxx'绑定就行  随便取名)
      rules: {
         //定义校验用户名
         username: [
           //required:true 必填项 message:信息提示    trigger:'触发时间' burl失去焦点
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max:30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
         ],
         //定义校验密码
         password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max:30, message: '长度在 3 到 30 个字符', trigger: 'blur' }
         ]
      }
    }
  },
  methods: {
    resetBtn(){
      //this.loginForm.username=''
      //this.loginForm.password=''
      //this对象代表当前组件对象
      console.log(this)
      //实现数据重置(上面ref="loginFormRef"代表表单的引用对象)
      //this代表当前组件(component).$refs.loginFormRef所有引用中的loginFormRef    resetFields()是Element ui表单的清空方法
      this.$refs.loginFormRef.resetFields()
    },
    login(){
      //获取表单对象之后进行数据校验
      //valid 表示校验的结果 true表示通过  false表示失败
      //validate()是表单提交的一个回调函数,会首先校验表单验证规则的有效性  返回true or false
      // this.$refs.loginFormRef.validate(function(flag){
      //    console.log(flag)
      // })
      this.$refs.loginFormRef.validate(async valid => {//箭头函数
         //如果没有完成校验则直接返回
         if(!valid) return

         //如果校验成功,则发起ajax请求
        // this.$http.post('/user/login',this.loginForm).then(function(result){
        //   console.log(result.data)
        // })
        const {data: result} = await this.$http.post('/user/login',this.loginForm)
        if(result.status !== 200) return this.$message.error("用户登录失败")
        this.$message.success("用户登陆成功")

        //获取用户token信息(提前保存token)
        let token = result.data
        window.sessionStorage.setItem("token",token)//window.sessionStorage意思存到session里 setItem指存的是元素

        //用户登录成功之后,跳转到home页面
        this.$router.push("/home")//需要配置下router  index.js文件 跳转后(是重定向:服务器发送过来的token就没了 要提前保存)
      })
    }
  }
}
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
.login_container{
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 300px;
  background-color: #FFFFFF;
  /* 设定圆弧角*/
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #EEEEEE;
    border-radius: 50%;
    padding: 10px;
    box-shadow: 0 0 10px #DDDDDD; /* 添加阴影*/
    position: absolute;           /* 绝对定位*/
    left: 50%;                    /* 距离左侧50%*/
    transform: translate(-50%,-50%);   /*回调50%*/
    background-color: #FFFFFF;
    img {
      height: 100%;
      width: 100%;
      border-radius: 50%;
      background-color: #EEEEEE;
    }
  }

  .btns {
    display: flex;
    justify-content: flex-end;

  }

  .login_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }
}
</style>

启动下,Vue首页登录页面做好了

 现在开始搭建我们的后台SpringBoot

创建SpringBoot项目方式很多,常见的:

1.用Spring插件

2.直接创建Maven项目导入jar包和yml文件

这里用第二种方式:创建聚合工程,父子依赖

 现在也是大部分公司里搭建的项目,基本都是父子依赖,主要是在pom.xml里引入依赖,然后可以将src删除

项目结构

 父级工程引入的依赖项

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.test</groupId>
    <artifactId>boottest</artifactId>
    <version>1.0-SNAPSHOT</version>
    <modules>
        <module>test_common</module>
    </modules>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>
    <!--指定打包方式 jar/war/pom(聚合工程)-->
    <packaging>pom</packaging>

    <!--引入父级工程-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.5</version>
        <relativePath/>
    </parent>


<!--    <properties>-->
<!--        <java.version>1.8</java.version>-->
<!--        &lt;!&ndash;跳过测试类加载 &ndash;&gt;-->
<!--        <skipTests>true</skipTests>-->
<!--    </properties>-->

    <dependencies>
        <!--SpringMVCjar包文件-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- 引入aop支持 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>

        <!--热部署工具-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <!--lombok插件-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!--测试包-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!--引入jdbc包-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

        <!--引入数据库驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!--spring整合mybatis-plus -->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.2</version>
        </dependency>

        <!--spring整合redis -->
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.data</groupId>
            <artifactId>spring-data-redis</artifactId>
        </dependency>


        <!--自己测试swagger-->
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger2</artifactId>
            <version>2.9.2</version>
        </dependency>
        <dependency>
            <groupId>io.springfox</groupId>
            <artifactId>springfox-swagger-ui</artifactId>
            <version>2.9.2</version>
        </dependency>

        <!--父级工程是一种结构,没有java代码,不需要执行运行,因此不需要build标签-->

    </dependencies>
</project>

创建自己工具API

 子集会自动依赖父级

工具API可以写比较常用的比如POJO的基类,任何数据的插入相信创建时间,更新时间是少不了的,还有用户,角色,公用返回类等等可以放在工具API里 

然后创建个具体业务系统 这里取名test_manage

 在test_manage的pom.xml文件里我们需要添加依赖,依赖于工具API

然后创建个SpringBoot的启动文件,和yml文件配置端口和 数据库,注意SpringBoot启动文件要放在所有包文件之前,比如说com.test.XX.XX,那么启动文件要放在com或com.test下,不然无法扫描到某些类

大概就先这样配置完成,写个Controller测试下启动

 OK的,写了半天以为自己写错了.还算顺利边写边发文,一下快4点了