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引用

• 以下这个真的丑，那我们进行改进咯
• 去看官网然后跟着官网改变
• 那假设我又不想这个图标，怎么办
• 如果你还是不喜欢，那就有我们如下的：https://www.iconfont.cn/，注册自己的账号。如果有自己喜欢的就下载，然后将它添加到项目【你可以多添加两个】 解压下载下来的文件到指定目录 需要怎么使用呢？就是把你下载下来的文件导入到你的项目中指定位置，然后再在你main.js里面导入，然后开发 欧克了

（4）login样式

• 当我引入样式的时候，页面报错了 原因是lessLoader版本过高导致的，降低版本就OK了：降低到7npm install [email protected] --save-dev，如果还是不行，那就：npm install [email protected]
• 然后同样的要进行其他的样式处理
• 然后看样式（下面代码给各位，想试一下的就弄）

<template><div class='login_container'><!-- 登录快 --><div class="login_box"><!-- 头像div --><div class="avatar_box"><img src="../assets/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:0010px #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;// 弹性布局
    justify-content: flex-end;// 尾部对齐}.login_form {
    position: absolute;
    bottom:0%;
    width:100%;
    padding:010px;
    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）前端处理