前后端分离纯手写

前后端分离

前后端分离就是将一个应用的前端和后端代码分开写，如果不使用前后端分离方案，开发效率极低，后期维护复杂。
分离之前

分离之后

在Node.js搭建完毕情况下创建项目
Vue搭建
搭建完毕后如图所示

初识vue



以上三张图片来源于网络😸;

这里我遇到了axios使用不了的问题

第一步：下载axios

npm install axios --save

第二步：使用axios，但是我这里报错，

第三步：解决这个问题

第四步：成功跳转

后端解决跨域问题

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","POST","PUT","DELETE")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

注意

得到数据

引入Element

npm i element-ui -S

elementui官网

复制一下模板后

main.js中缺少引用

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

Element UI常用标签（管理系统）

el-container:构建整个页面的标签
el-aside:构建左侧菜单
el-menu:左侧菜单内容，常见属性
:default-openeds:默认展开的菜单，通过菜单的index值来关联
:default-active:默认选中的菜单，通过菜单的index值来关联
el-submenu:可展开的菜单
index:菜单的下标，文本类型，不能是数值类型
templeate:对应el-submenu的菜单名
i:设置菜单图标，通过class属性设置
el-icon-messae
el-icon-menu
el-icon-setting
el-menu-item:菜单的子节点，不可再展开，
index:菜单的下标，文本类型，不能是数值类型。
vue内嵌页面问题

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
            <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
            <el-menu-item v-for="(item2,index2) in item.children" :index2="idnex2+''">{{item2.name}}</el-menu-item>
          </el-submenu>
        </el-menu>
    </el-aside>

      <el-main>
        <router-view></router-view>
      </el-main>
  </el-container>
</template>

需要打开路由

<router-view></router-view>

打开路由之后可能会有一个逻辑问题，页面重叠

因为index.js路由中默认 path:’/’，component:‘App’,然后在<el-main> <router-view></router-view> </el-main>中嵌套了自己，所以重叠，我们新添加一个path:’/’,component:‘index’，并且在App.vue中只留一个路由<el-main> <router-view></router-view> </el-main>不在留其他菜单，这样即可解决重叠问题
逻辑

App.vue中路由跳index.vue,index.vue中的路由跳其他页面

Vue点击实现页面跳转

标签添加router属性
在页面中添加标签，它是一个容器动态渲染router
标签index值就是要跳转的router

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu router :default-openeds="['0','1']">
          <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
            <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
            <el-menu-item v-for="(item2,index2) in item.children" :index="item2.path" :class="$route.path==item2.path?'is-active':''">{{item2.name}}</el-menu-item>
          </el-submenu>
        </el-menu>
    </el-aside>

      <el-main>
        <router-view></router-view>
      </el-main>
  </el-container>
</template>

在index.js路由中可以实现当我们来到这个页面时自动跳转到指定页面

加入分页：

<el-pagination
      background
      layout="prev, pager, next"
      pagesize="8"
      :total="50"
      @current-change="page">
</el-pagination>

注意：在<template></template>只允许有一个主标签存在写一个<div></div>把他们都包含进去

后端分页：
使用了mybatis中的分页插件PageHelper
第一步，导入依赖

<!--分页-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.2.0</version>
        </dependency>
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-autoconfigure</artifactId>
            <version>1.3.0</version>
        </dependency>
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper-spring-boot-starter</artifactId>
            <version>1.3.0</version>
        </dependency>

第二部，application中写配置：

server.port=8081
mybatis.config-location=classpath:mybatis/mybatis-config.xml
mybatis.mapper-locations=classpath:mybatis/mapper/*.xml
#配置pagehelper分页插件
pagehelper.helperDialect=mysql
pagehelper.reasonable=true
pagehelper.supportMethodsArguments=true
pagehelper.params=count=countSql

第三步，出现异常：
查百度，查博客，查知乎，查01010101，还是灭有我想要的解决办法，后来才发现，在引入pom依赖时一定要注意版本之间的照应

按照我这个不会错
第四步：书写顺序
PageHelper.startPage一定要书写在查询条件之前，

@ResponseBody
    @RequestMapping("/getvue/{page}/{pagesize}")
    public PageInfo<Employee> getEmp(@PathVariable ("page") Integer page, @PathVariable("pagesize") Integer pagesize){
        PageHelper.startPage(page,pagesize);
        List<Employee> employees = employeeService.dateQuery(new Employee());
        PageInfo pageInfo = new PageInfo(employees);
        return pageInfo;
    }

第五步：成功分页

分页的总结

提醒：分页不成功可能还有其他原因导致，但是大多数百度即可解决，不好解决的就是版本依赖问题，难以发现漏洞所在，所以多尝试，多操作吧

vue分页一系列操作

模板

数据关联

成功响应