Vue项目手把手教你：一个vue项目和后端进行交换

我是跟着B栈上面一个老师学的，因为我也自己想学习的方向是后端嘛，想对前端有个更多的了解，然后就跟着再做一个项目，视频地址
git上拉取本项目：https://gitee.com/zgg/sprotplay.git

我们创建的项目如下

一、我们Vue项目执行流程

得到如下的一个格式有，渲染流程如下

首先我们的主要的页面就一个（public下面的index.html）
其实就我们的App.vue渲染到我们的index.html（我们的项目只有一个app的一个id）
整体上做如下修改（我们需要的资源在main.js里面导入）

总体的过程呢就是如下的

首先我们在components下面创建我们的组件然后在router下书写路由然后其他的就后面学习到了再总结 二、开发我们的登录组件 （一）开发一个组件的大致流程 在我们components下面创建login.vue【这里要注意的就是在template里面一定要注意的是要有div标签】
第二步做我们的路由【因为我们的登录页面是需要重定向的，所以各位可以参考】
在App.vue里面渲染

好啦到这里我们就OK了，解析来正式的开发我们的登录页面

（二）开发我们全局样式的流程

（三）接下俩开始开发正式的内容 1、编写登录表单 （1）编写我们的密码用户名框已经提交和重置按钮 首先打开这个地址

https://element.eleme.cn/#/zh-CN/component/form

选一个自己要开发的样式
复制框选内容
在登录组件里面写如下
提交按钮

（2）处理登录表单的数据绑定

在没有如下的数据绑定你是无法进行访问的

（3）iconfont引用 以下这个真的丑，那我们进行改进咯
去看官网然后跟着官网改变


那假设我又不想这个图标，怎么办


如果你还是不喜欢，那就有我们如下的：http://www.kaotop.com/file/tupian/20220528/logo.png" alt> </div> <!-- 表单区域 --> <el-form ref="loginFormRef" :model="loginForm" class="login_form" label-width="80px"> <!-- 用户名 --> <el-form-item label="活动名称"> <el-input v-model="loginForm.username" prefix-icon="el-icon-search"></el-input> </el-form-item> <!-- 密码 --> <el-form-item label="活动名称"> <el-input v-model="loginForm.password" prefix-icon="el-icon-search"></el-input> </el-form-item> <!--按钮--> <el-form-item class="btns"> <el-button type="primary" >提交</el-button> <el-button type="success" >重置</el-button> </el-form-item> </el-form> </div> </div> </template> <script> export default { //对数据进行绑定 data() { return { loginForm:{ username:"username", password:"password" } } } } </script> <style lang="less" scoped> .login_container{ background-color:#2b4b6b; height:100%; } .login_box { width: 450px; height: 300px; background-color: #fff; border-radius: 3px;// 圆角 position: absolute;// 绝对定位 left: 50%; top: 50%; transform: translate(-50%, -50%);// 根据自己位置 以自己为长度位移 // 头像框 .avatar_box { width: 130px; height: 130px; border: 1px solid #eee; border-radius: 50%; // 加圆角 padding: 10px; box-shadow: 0 0 10px #ddd;// 盒子阴影 position: absolute; left: 50%; transform: translate(-50%, -50%); background-color: #0ee; img { width: 100%; height: 100%; border-radius: 50%; // 加圆角 background-color: #eee; } } .btns { display: flex;// d性布局 justify-content: flex-end; // 尾部对齐 } .login_form { position: absolute; bottom: 0%; width: 100%; padding: 0 10px; box-sizing: border-box;// 设置边框 } } </style> （5）login效验

我们的用户名和密码是仅仅是个样式而已，并没有能进行效验的能力，所以现在要进行开发，有效验的规则。

理解一下Vue的双向绑定（就比如密码，我们在输入的时候，有问题它直接就给我们提示了，这是什么原因呢？）

答案就是Vue的双向绑定的原因（一系列的 *** 作就OK了，它内部直接进行验证）

（6）完成登录和重置事件

我们在点击登录或者重置按钮上面反应都没有，开发了什么哦，要想有反应就得必须axios登场了。

首先导入axios并挂在到http上
编写重置方法（也就是事件）

处理登录事件

上图记录调试一下的内容，然后在浏览器就可以



像我们的登录事件都是这样编写的，这里会有一个请求，然后我们把后端返回来的数据进行处理展示就OK了，大致是这样的逻辑。

比如再演示

（7）处理登录事件的详细处理

原因是我们的await【这个await关键字就是要对我们返回来的数据进行解析】关键字必须配合async关键字一起使用

写一个test测试一下【也要注意看其调试过程】


真正的登录逻辑应该如下开发


当然实际的开发不会是返回OK，而是返回一个状态码，你对状态码进行判读。
完成跳转（应该是跳转到home页面）


（8）开发到这里的一个总结

虽然咱Element ui这个组件官网上面都有，但是咱还是理解一下好一点。

我们实现网络：是根据axios进行，首先要配置前端和后端共同的端口号，前端配置如下：axios.defaults.baseURL = "http://localhost:8083"，而后端则要在application.yaml或者application.properties里面配置端口号，然后前端的请求就可以通过，如这样的$http.post("test")请求对后端要数据我们不同组件时间的跳转则要进行如下的设置：$router.push({path:"/home"});需要的组件都是去Element ui上面去找。 2、登录过程（JSON的使用）

经过上面的讲解，我们已经知道后端返回给咱们的是啥了，咱们可以拿到这个，如何现在可以做相应的处理了。

（1）登录过程对于我们后端的考虑

假设如下是咱们的登录路径test，然后返回给前端一个字符串类型，是不行的，所以咱们得思考，用Http常用的编码，200表示成功，404表示错误什么的，现在这样思考。其实在我们后端开发人员看来这个是很好处理的，就应该返回一个JSON格式的对象，给前端。所以安排如下

后端导入需要使用JSON的依赖

<dependency>
     <groupId>com.alibaba</groupId>
     <artifactId>fastjson</artifactId>
     <version>1.2.28</version>
 </dependency>

看咱们后台的Controller层和DAO层（这里没有分更多的层）


（2）然后修改前端

（3）测试

为什么能展示就是因为我们有了await关键字给我解析了
各位有什么不懂的，可以私信我。

三、安全与路由

既然后端把user的信息反给我们了，那我就做一个保存，然后那样的话，在后面的什么主页面上都有很多 *** 作。

它相当于在全局就有了我们的这个user的数据了

1、安排退出的逻辑的时间

为什么有window.router.clear()方法，那是因为我要是下登录的话，那我们浏览器的cookie也要消除。

2、编一个路由

四、主页面的编写

现在咱们的主页面里面太丑了，接下来着手开发。

（一）header头处理 1、在Element-ui里面寻找 （1）拷贝代码

<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">Aside</el-aside>
    <el-main>Main</el-main>
  </el-container>
</el-container>

（2）对之前的Home页面做修改

在这个里面不用提供div标签

<template>
    <!-- 引入container布局 -->
    <el-container>
        <!-- 头部 -->
        <el-header>
            <el-button type="info" @click="logout()">退出登录</el-button>
        </el-header>
        <!-- 主体 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">Aside</el-aside>
            <!-- 主体内容 -->
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>

可以先复制我们的样式，到后面我再细入的开发

<template>
    <!-- 引入container布局 -->
    <el-container class="home-container">
        <!-- 头部 -->
        <el-header>
            <el-button type="info" @click="logout()">退出登录</el-button>
        </el-header>
        <!-- 主体 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">Aside</el-aside>
            <!-- 主体内容 -->
            <el-main>Main</el-main>
        </el-container>
    </el-container>
</template>

<script>
 export default {
     methods: {
         logout(){
            window.sessionStorage.clear();
            this.$router.push({path:"/login"});

         }
     }
 }
 </script>

 <style scoped>
.el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between; /**左右贴边 */
    padding-left: 0%; /*左边界 */
    color: #fff;
    font-size: 20px;
    >div{
        isplay: flex;
        align-items: center;
        span{
            margin-left: 15px;
        }
    }
}
.el-aside {
  background-color: #333744;
  .el-menu{
    border-right: none;/*// 对其右边框 */
  }
}
.el-main {
  background-color: #eaedf1;
}
.home-container {
  height: 100%;
}
.logo_img {
  width: 20%;
  height: 100%;
}
.iconfont{
  margin-right: 10px;
}
.toggle-button{
  background-color:#4A5064;
  font-size: 10px;
  line-height: 24px;
  color:#fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;/* 显示鼠标指针为：小手 */
}
 </style>

分析一下我们还差什么

首先差一个图标我们还差一个健康管理平台的一个项目名称样式表现在就是着手开发

完成图标的设置




虽然说是很丑，但是咱要理解它的业务逻辑就OK了

（二）侧边栏处理 1、去代码里面找

<el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">导航四</span>
      </el-menu-item>
</el-menu>

本项目呢不要那么层侧边栏，所以我只要二级目路的话，就可以如下

由于项目中的这些分组和导航栏部分的内容，不会手动的去写，而是从数据库里面进行查询出来的结果，然后进行展示给用户观看，所以咱们现在去开发去我们的数据库展示的方法去

2、编写侧边栏展示的方法 （1）方法使用 需要有如下

为什么不是我们的直接在methods里面编写一个方法呢，而在created里面编写，最后展示出来。
既然有咱们的数据，那么就必须有data了总要这些
编写方法测试方法

接下俩去后端找侧边栏的数据进行展示了

3、去后端请求数据 （1）看后端代码的编写

这个MainMenu是我们的主侧边栏（导航）

这个Submenu是我们的次侧边栏（分组）

咱们先看后台数据库

select mainmenu.*,submenu.id as sid,submenu.title as stitle,submenu.path as spath
from mainmenu ,submenu
where mainmenu.id = submenu.mid;

由于我们前端展示出来这样肯定不行的，所以我们必须进行一对多的关系映射进行展示

然后同样的去编写控制器（和上面的登录的处理是一样的逻辑）
（2）前端请求

编写请求方法

进行数据回填

进行循环遍历展示

这个item不是随便写的，而是和我们数据库里面一一对应了的


同样的这个item.slist也不是随便写的，而是我们在查询中的XXXMapper.xml文件里面写的


这个时候我们发现我们一点权限管理，下面的运动平台一样的跟着展示给我们看了，再次进行修改

为什么是xx加上‘’呢？因为我这里要求是字符串类型

修改样式

（三）编写伸缩处理

这个侧边栏我想弄成可伸缩的

1、在什么时候能缩进去呢？

只要我们的collapse属性为false的时候，它就是显示为缩进去了

显然上面的属性不能手动的去绑定，而应该是动态的进行绑定。

2、编写控制的方法

只要你伸我就是缩，否则翻过来

3、让我们的控制栏|||一起跟着缩

同样的也进行数据绑定

4、循环修改图标

但是这种写法是把它写死，后期再从数据库里面查找。

（四）main页面重定向

这个main页面是什么都没有有的，而应该是我们点击了那个页面后，然后跳转到对应的页面去的，而这个一个面应该又是咱们一个个的新的XXX.vue文件，获得文件然后就进行展示。

但是我们总有个默认的吧，不可能进行就展示一个空白页面给用户，所以咱们来进行开发。

1、编写欢迎页面

因为我这时候的重定向，应该定位到我们页面的子组件上面去，所以就要这样子路径上面去了

2、点击侧边栏进行调整

此时不管我们怎么点，都是会显示的路径是到welcome页面

创建我们的页面



我这个是101好像不行，应该是咱们数据里面的path路径才可以。

3、路径保存 看问题描述：

当我们处于第一个用户列表的时候，如果我们点击刷新，会发现了我们的页面会收缩为如下的样式了，我应该是把它保存下来，再怎么刷新都是还是保存着之前的样子【这个问题不太好描述】
（1）测试说明问题

这个user路径是我们的路由哦，不是什么随便写的。

不管怎么刷新都是保存在user这个页面了，但是我们肯定是要动态的进行处理，而不是这样死板的的设置。

（2）解决问题

我们要进行动态的绑定，肯定又要定义一个属性data的返回值了

（3）保存路径的方法

首先编写我们的方法

然后获取参数并且设置参数

然后就OK了
五、正式开发我们的用户组件 （一）User组件 1、整体样式

首先看一下我的思路，我每一张表格上肯定都要写一个导航栏，可以回到首页，还有权限管理，还有运动平台的导航。这个效果就要交给面包屑来处理

（1）编写面包屑

修改样式

（2）添加搜索栏 第一步整外围

添加样式【这样式要在全局编写】

后面个important的原因是为了提高优先级

第二步添加搜索

上面的样子太丑了，所以我们要进行变动



（3）获取用户列表

首先我想要在我们加载页面就会获取我们的用户数据，所以肯定要在created里面添加东西。

2、后台逻辑 （1）dao层

（2）Controller层

3、获取用户数据信息（细入的编写前端请求方法） （1）编写数据和方法

测试一下
（2）渲染数据

肯定不可能这样展示，这样太丑了，用户不喜欢看。

编写 *** 作槽和状态槽

（3）分页功能

正常情况下我们在下面都是能够有分页的功能，下一页，和上一页，然后定位到某一页的情况，所以这里来大概实现这一个功能。

首先打开我们的element-ui官网

<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>

size-change：每页最大的一个数量

current-change：当前页面变化数

layout：功能组件



效果是有了，现在点来点去是没什么时间触发的，所有现在去编写我们的方法

现在就OK了

梳理一下过程

首先第一步 当你点开我们的user页面后，这个页面的请求就会被触发，然后会去后端请求数据，封装在我们的res里面，然后获得了numbers里面第二步就是当你点击了我们的上一页或者下一页的时候，就会对更新一下数据，就会触发我们的getUserlist方法对后台数据进行刷新。 4、状态栏的修改

这个就算你是点击了，然后你重新刷新，后天没有被修改，所以是没有完成的功能，这里就来修改一下。

首先看controller
看dao层
修改前台

5、搜索栏的搜索

6、添加用户 （1）后天处理

（2）前端处理