# springBoot+vue

**Repository Path**: yeshenyuewu/springboot-vue

## Basic Information

- **Project Name**: springBoot+vue
- **Description**: 利用springBoot+vue开发的增删改查 登录功能
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-09-01
- **Last Updated**: 2023-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 个人运动平台项目

项目地址：
个人运动平台项目地址：
		前端地址：https://gitee.com/naughtycat/vue_sport 

后台地址 ： https://gitee.com/naughtycat/java_sport.git 

## 1、项目概述

​		致力于做一款前后分离的个人健康平台，旨在配合热爱运动和健身的朋友们开发一款能够完成卡路里统计，运动计划编写，科学食物搭配，以及方便与其它朋友交流心得的平台。

### 1.1 需求分析

#### 1.1.1、痛点分析

​		健康平台中有需要许多的第三方数据，比如：运动卡路里的消耗、食品卡路里的提供、以及各种健身运动的卡路里消耗。需要调取大量的api接口，数据库设计考虑用户分级还有管理员权限设置。比如：普通用户和vip查看的内容区分以及功能区分。管理分为超级管理员和普通管理员。

​		页面层面使用vue+elementUI开发，分为前台管理员系统和后台业务模块。需要设计的内容有：登录、后台系统（权限管理、运动平台等）、前台业务（卡路里查询，个人计划制定，食品划分等）。

​		后台采用SpringBoot+Mybatis开发，需要提前编写各个模块的路由方便分发，创建关系型数据库。大致分为：用户、功能分支、运动列表，计划列表，卡路里列表等。

#### 1.1.2、项目架构

采取前后端分离开发，前端为vue后端为java。使用springBoot做跨域请求

![](C:\Users\dz_yk\Desktop\个人运动平台\images\基本架构.png)

前端将在vs code中的Tomcat下部署；后端将在IDEA中集成的Tomcat下部署。

## 2、框架搭建

搭建VUE+SpringBoot环境，并且使用一个登录模块来测试。

### 2.1、后台环境搭建

#### 2.1.1、创建SpringBoot 项目

使用IDEA快速搭建SpringBoot环境：File--New--Project--Spring Initializr--Next*2--选择模块【WEB（Spring WEB）&&SQL（JDBC API、MyBatis Framework，MySql Driver）】

![](C:\Users\dz_yk\Desktop\个人运动平台\images\创建springboot-1.png)

![](C:\Users\dz_yk\Desktop\个人运动平台\images\创建springboot-2.png)

![](C:\Users\dz_yk\Desktop\个人运动平台\images\springboot-3.png)

因为mybatis需要一个数据源，所以配置一个application.yml

```yaml
#配置数据库连接

spring:
  datasource:
    username: root
    password: xyp166166
    driver-class-name: com.mysql.jdbc.Driver
    #假如时区报错了 就增加一个时区的配置serverTimezone=UTC
    url: jdbc:mysql://localhost:3306/test?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
    type: com.alibaba.druid.pool.DruidDataSource
    #Spring Boot 默认是不注入这些属性值的，需要自己绑定
    #druid 数据源专有配置
    initialSize: 5
    minIdle: 5
    maxActive: 20
    maxWait: 60000
    timeBetweenEvictionRunsMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: SELECT 1 FROM DUAL
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true

    #配置监控统计拦截的filters，stat:监控统计、log4j：日志记录、wall：防御sql注入
    #如果允许时报错  java.lang.ClassNotFoundException: org.apache.log4j.Priority
    #则导入 log4j 依赖即可，Maven 地址：https://mvnrepository.com/artifact/log4j/log4j
    filters: stat,wall,log4j
    maxPoolPreparedStatementPerConnectionSize: 20
    useGlobalDataSourceStat: true
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500
```

启动项目：http://localhost:8088

#### 2.1.2、创建测试路由路径

编写测试Controller，注意返回值和路径映射

```java
@RestController
public class TestController {

    @RequestMapping("/test")
    public String test(){
        return "This is ok.";
    }
}
```

运行结果：

![](C:\Users\dz_yk\Desktop\个人运动平台\images\测试结果1.png)

#### 2.1.3、跨域配置

```java
@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080", "null")
                .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                .maxAge(3600)
                .allowCredentials(true);
    }
}
```

#### 2.1.4、创建logincontroller

```java
@Controller
public class LoginController {
    @Autowired
    private UserService userService;

    @CrossOrigin
    @RequestMapping("/login")
    @ResponseBody
    public String login(@RequestBody User user){//我们请求前端传过来数据 需要加@RequestBody才能把数据请求功
        System.out.println(user.getUsername());
        User user1 = userService.findUserNameAndPaw(user.getUsername(),user.getPassword());
        if(user1!=null){
            return "success";
        }
        return "error";
    }
}

```

#### 2.1.5、创建UserService

```java
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;
    @Override
    public User findUserNameAndPaw(String username, String password) {
        return userMapper.findUserNameAndPaw(username,password);
    }

    @Override
    public List<User> findAll() {
        return userMapper.findAll();
    }

    @Override
    public User findUserName(String username) {
        return userMapper.findUserName(username);
    }

    @Override
    public User findById(Integer id) {
        return userMapper.findById(id);
    }

    @Override
    public int addUser(User user) {
        return userMapper.addUser(user);
    }

    @Override
    public int editUser(User user) {
        return userMapper.editUser(user);
    }

    @Override
    public int deleteUser(Integer id) {
        return userMapper.deleteUser(id);
    }

    @Override
    public int updateState(Integer id, Boolean state) {
        return userMapper.updateState(id,state);
    }
}

```

#### 2.1.6、创建UserMapper.xml

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.xyp.mapper.UserMapper">
    <select id="findUserNameAndPaw" resultType="User">
       	SELECT * FROM easyUser
       	WHERE username=#{username} AND  password =#{password}
    </select>

    <select id="findAll" resultType="User">
       	SELECT * FROM easyUser
        <if test="username !=null ">
            WHERE username like #{username}
        </if>
        LIMIT #{pageStart},#{pageSize}
    </select>

    <select id="findUserName" resultType="User">
       	SELECT count(*) FROM `easyuser`
        <if test="username !=null ">
            WHERE username like #{username}
        </if>
    </select>

    <select id="findById" resultType="User">
        SELECT * FROM easyuser WHERE id = #{id}
    </select>

    <update id="updateState">
        UPDATE easyuser SET state = #{state} WHERE id = #{id}
    </update>

    <insert id="addUser">
        INSERT INTO easyuser
        (username,password,email,role,state)
        VALUE
        (#{username},#{password},#{email},#{role},#{state})
    </insert>

    <update id="editUser">
        UPDATE easyuser SET username = #{username} , password = #{password} ,
        email = #{email} WHERE id = #{id}
    </update>

    <delete id="deleteUser">
        DELETE FROM easyuser WHERE id = #{id}
    </delete>

</mapper>
```



### 2.2、前台开发

#### 2.2.1、创建vue项目

win+R输入cmd打开dos，运行命令：vue ui，进入：Vue 项目管理器

![](C:\Users\dz_yk\Desktop\个人运动平台\images\vue项目管理器.png)

创建项目：

![](C:\Users\dz_yk\Desktop\个人运动平台\images\创建vue项目.png)

手动创建配置，选择功能：Babel、Router、使用配置然后创建项目。添加插件`elementUI`

添加依赖：`axios`、`less-loader`、`less` 然后运行vue项目

![](C:\Users\dz_yk\Desktop\个人运动平台\images\运行vue.png)

![](C:\Users\dz_yk\Desktop\个人运动平台\images\vue项目默认首页.png)

#### 2.2.2、修改项目

App.vue 删除多余分支，删除About.vue和Home.vue文件，剔除index.js的分支。

```html
<template>
  <div id="app">
 	App 根组件
  </div>
</template>

<script>

</script>

<style>

</style>
```

```js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
]

const router = new VueRouter({
  routes
})

export default router
```

之后能正常运行。

#### 2.2.3、创建登录页面

创建Login.vue

```html
<template>
    <div>
        Login
    </div>
</template>
<style lang="less" scoped>

</style>
<script>
export default {
    
}
</script>
```

修改App.vue把app根组件换成`<router-view>`标签,自定义路由,重定向到login，也可以直接配置路径为"/"访问到login.vue

```js
  const routes = [
  {
    path: '/',
    redirect:'/login'
  },
  {
    path: '/login',
    component: Login
  },
```

添加全局样式：assets/css/global.css

```css
/* 全局式样 */
html,body,#app{
    height: 100%;
    margin: 0px;
    padding: 0px;
}
```

main.js里添加全局样式

```js
import './assets/css/global.css'// 添加全局样式
```

创建需要的icon文件夹 assets/font

```js
import './assets/font/iconfont.css'// 添加font-icon
```

修改login.vue

```html
<template>
  <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <!--头像-->
        <img src="../assets/logo.png" alt />
      </div>
      <!--添加表单-->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        class="login_form"
        label-width="0px"
      >
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" prefix-icon="iconfont icondenglu"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" prefix-icon="iconfont iconmima"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: "username",
        password: "password"
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 8, message: "长度在 5 到 8 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 8, message: "密码为 6~8 位", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return;
        // 调用get请求
        const {data :res} = await this.$http.post("login", this.loginForm);
         if (res == "ok" ) {
           this.$message.success("登陆成功！！！");
           this.$router.push({ path: "/home"});// 路由
         }else{
          this.$message.error("登录失败！！！");
         }
      });
    }
  }
};
</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;// 弹性布局
    justify-content: flex-end; // 尾部对齐
  }
  .login_form {
    position: absolute;
    bottom: 0%;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;// 设置边框
  }
}
</style>
```

#### 2.2.4、修改main.js

```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import './assets/css/global.css'
// 导入iconfront
import './assets/font/iconfont.css'
// 导入axios
import axios from 'axios'
// 挂载axios 到Vue的原型prototype的$http
Vue.prototype.$http = axios
// 设置请求的根路径
axios.defaults.baseURL = "http://localhost:9000/"
axios.interceptors.request.use(config => {
  console.log(config);
  // 请求头挂载信息
  config.headers.Authorization = window.sessionStorage.getItem("flag");
  // 在最后必须return config
  return config;
})
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

```

#### 2.2.5、创建Home页面

```html
<template>
    <div>
        Home
    </div>
</template>
<script>
 
</script>
<style lang="less" scoped>

</style>
```

添加home的路由后访问。

## 3、完善登录

### 3.1.后台开发

#### 3.1.1、创建user实体

| 名称     | 类型    | 描述     |
| -------- | ------- | -------- |
| id       | int     | 主键id   |
| username | String  | 用户名   |
| password | String  | 密码     |
| email    | String  | 邮箱     |
| role     | String  | 角色类型 |
| state    | boolean | 启用标识 |

#### 3.1.2、创建userService

会根据用户输入的`用户名`和`密码`来获取信息，方法名`getUserByMassage`

```java
@Repository
public int getUserByMassage(@Param("username") String username, @Param("password") String password);
```

#### 3.1.3、编写usermapper

mybatis的映射文件

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="">
     <select id="getUserByMassage" resultType="java.lang.Integer">
       	SELECT count(id) FROM easyUser
       	WHERE username=#{username} AND password=#{password} AND state = 1
    </select>
</mapper>
```

查询条件：`SELECT count(id) FROM easyUser WHERE username='xxx' AND password='xxx' AND state = 1`

#### 3.1.4、创建UserController

使用传递过来的username和password入参dao的`getUserByMassage`方法

```java
@RequestMapping("/login")
    public String userLogin(@RequestBody User user) {
        System.out.println("User : " + user);
        String str = "error";
        int count = userDao.getUserByMassage(user.getUsername(), user.getPassword());
        if (count > 0) {
            str = "ok";
        }
        return str;
    }
```

查询结果大于0后，证明查询有结果，登录就应该成功，之前我们页面的判断条件是结果返回是否为“ok”。

☆ 如果用户名做了去重这里的判断应该是等于1。

#### 3.1.5、路由守卫

首先登录成功后，希望设置一个保存信息。所以修改查询语句：

`SELECT * FROM easyUser WHERE username='admin' AND password='123456' AND state = 1`

修改返回值“ok”，创建map存放查询出的user和flag，转化json字符串，返回在pom.xml里添加json依赖,使用JSON.toJSONString转化对象为json

前台修改接收信息内容，获得登录的user，保存到客户端的 sessionStorage中。

```js
window.sessionStorage.setItem('flag','ok');
```

在index.js里创建路由导航

```js
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to:将要访问的路径
  // from:从哪里访问的路径
  // next:之后要做的任务，是一个函数
  //    next（）放行， next（'/URL'）强制跳转的路径。
  if (to.path == '/login') return next();// 访问路径为登录
  // 获取flag
  const flagStr = window.sessionStorage.getItem("flag");// session取值
  if (!flagStr) return next('/login');// 没登录去登录
  next();
})

// 出现问题的时候使用
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
```

#### 3.1.6、安全退出

添加安全退出按钮标签

```html
 <el-button type="info" @click="logout">安全退出</el-button>
```

添加安全退出方法

```js
    logout() {
      window.sessionStorage.clear();
      this.$router.push("/login");
    },
```

### 3.2.数据创建

 略

## 4、Home页开发

根据主页规划，修改Home。

![](C:\Users\dz_yk\Desktop\个人运动平台\images\Home主页.png)

### 4.1 引入container布局

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

添加背景

```css
.el-header {
  background-color: #373d41;
}
.el-aside {
  background-color: #333744;
}
.el-main {
  background-color: #eaedf1;
}
```

布局充满

```css
.home-container {
  height: 100%;
}
```

### 4.2 完善Header

```html
  <el-header>
      <div>
        <img src="../assets/logo.jpg" alt class="logo_img" />
        <span>运动管理平台</span>
      </div>
      <el-button type="info" @click="logout">安全退出</el-button>
    </el-header>
```

样式

```css
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;// 左右贴边
  padding-left: 0%;// 左边界
  align-items: center;// 水平
  color: #fff;
  font-size: 20px;
  > div { //左侧div加布局
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}

.logo_img{
  width: 55px;
  height: 55px;
}
```

### 4.3 左侧菜单布局

```html
     <el-aside :width="isCollapse ?'64px':'200px'">
        <!--伸缩按钮-->
        <div class="toggle-button" @click="toggleCollapase">|||</div>
        <!--侧边栏菜单区 unique-opened="true" 只保持一个菜单展开 router开启路由-->
        <el-menu background-color="#545c64" text-color="#fff" active-text-color="#409eff" 		unique-opened :collapse="isCollapse" :collapse-transition="false" :router="true">
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <i :class="iconsObject[item.id]"></i>
              <span>{{item.title}}</span>
            </template>
            <el-menu-item  :index="it.id+''" v-for="it in item.slist" :key="it.id">
              <template slot="title" >
                <i :class="iconsObject[it.id]"></i>
                <span>{{it.title}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
```

### 4.4 访问左侧菜单数据

#### 4.4.1 页面加载请求数据

```js
  // 类似onload
  created() {
      this.getMenuList();
  },
 methods里面     
  // 获取所有的导航菜单
    async getMenuList(){
      const {data:res} = await this.$http.get("menus");
      console.log(res.data);
      if( res.status != 200) return this.$message.error("操作失败！！！");
      this.menuList = res.data;
    },
```

#### 4.4.2 定义菜单列表对象

```js
// 左侧菜单
menuList: [],
iconsObject: {
   '100':'iconfont iconguanliyuan',
   '200':'iconfont iconsport',
   '101':'iconfont icondenglu',
   '102':'iconfont iconmima',
   '103':'iconfont iconsport',
   '104':'iconfont iconshangpin',
   '201':'iconfont iconshu',
   '202':'iconfont iconkaluli',
   '203':'iconfont iconshiwu',
   '204':'iconfont icondenglu',
},
```

#### 4.4.3 定义menu后台

bean实体

```java
@Data
@AllArgsConstructor
@NoArgsConstructor
public class SubMenu {
    private int id;
    private String title;
    private String path;
}
```

```java
@AllArgsConstructor
@NoArgsConstructor
public class MainMenu {
    private int id;
    private String title;
    private String path;
    List<SubMenu> list;
}
```

控制器

```java
@Controller
public class MenuController {
        @Autowired
        private MenuService menuService;
        @RequestMapping("/menus")
        @ResponseBody
        public Object getAllMenus(){
            HashMap<String, Object> data = new HashMap<>();
            List<MainMenu> mainMenus = menuService.getMainMenus();
            data.put("data",mainMenus);
            data.put("status",200);
            return data;
        }
}

```

mappser层接口类

```java
@Repository
public interface MenuDao {
    public List<MainMenu> getMainMenus();
}
```

映射文件

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.naughty.userlogin02.dao.MenuDao">
    <!--映射实体-->
    <resultMap id="menuMap" type="com.naughty.userlogin02.bean.MainMenu">
        <id column="id"  property="id"></id>
        <result column="title"  property="title"></result>
        <result column="path"  property="path"></result>
        <collection  property="slist" ofType="com.naughty.userlogin02.bean.SubMenu">
            <result column="sid"  property="id"></result>
            <result column="stitle"  property="title"></result>
            <result column="spath"  property="path"></result>
        </collection>
    </resultMap>

    <select id="getMainMenus" resultMap="menuMap">
        SELECT mm.*,sm.id as sid ,sm.title as stitle,sm.path as spath FROM mainmenu mm ,submenu sm WHERE mm.id = sm.mid;
    </select>
</mapper>
```

#### 4.4.4 消除对不齐的线

```java
.el-aside {
  background-color: #333744;
  .el-menu{
    border-right: none;// 对其右边框
  }
}
```

### 4.5 折叠按钮

添加折叠按钮

```html
<div class="toggle-button" @click="toggleCollapase">|||</div>
```

修改按钮样式

```css
.toggle-button{
  background-color:#4A5064;
  font-size: 10px;
  line-height: 24px;
  color:#fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;// 显示鼠标指针为：小手
}
```

定义按键方法

```js
// 切换菜单折叠与展开
 toggleCollapase(){
 this.isCollapse = !this.isCollapse;
},
```

添加一些属性

```html
<active-text-color="#409eff" unique-opened :collapse="isCollapse" 
          :collapse-transition="false"
```



修改侧边栏宽度

```html
 <el-aside :width="isCollapse ?'64px':'200px'">
```

### 4.6 路由重定向

#### 4.6.1 创建Welcome组价

```html
<template>
    <div class="main_welcome">
        <h3>Welcome!!!</h3>
    </div>
</template>
<style lang="less" scoped>

</style>
<script>
export default {
    
}
</script>
```

#### 4.6.2 配置重定向

```js
  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [
      { path:'/welcome', component: Welcome}
    ],
  },
```

#### 4.6.3 侧边栏路由链接

先在侧边栏加入路由属性

```html
 <el-menu background-color="#545c64" text-color="#fff" active-text-color="#409eff" unique-opened :collapse="isCollapse" :collapse-transition="false"  :router="true">
```

之后修改每一个次级菜单的路径

```html
<el-menu-item  :index="it.path+''" v-for="it in item.slist" :key="it.id">
```

## 5、admin组件开发

### 5.1 创建user组件

在components下新建admin文件夹，在admin文件夹下创建`user.vue`

```html
<template>
  <div>
  	userlist!!!
  </div>
</template>
<script>
</script>
<style lang="less" scoped>
</style>
```

### 5.2 添加新路由

index.js下home添加新的子组件

```js
  {
    path: '/home',
    component: Home,
    redirect: '/welcome',
    children: [
      { path:'/welcome', component: Welcome},{ path:'/user', component: User}
    ],
  },
```

### 5.3 路径高亮

home组件中添加一个新的属性default-active

```html
<el-menu background-color="#545c64" text-color="#fff" active-text-color="#409eff" unique-opened :collapse="isCollapse" :collapse-transition="false"  :router="true" default-active="/user">
```

创建`连接激活`事件

```html
<el-menu-item  :index="it.path+''" v-for="it in item.slist" :key="it.id"  @click="saveNavState(it.path+'')">
```

创建`连接激活`属性

```js
// 被激活的连接
activePath:'',
```

```html
<el-menu background-color="#545c64" text-color="#fff" active-text-color="#409eff" unique-opened :collapse="isCollapse" :collapse-transition="false"  :router="true" :default-active="activePath">
```



创建 `连接激活`方法

```js
saveNavState(activePath){
	 window.sessionStorage.setItem('activePath',activePath);// 存放点击的二级菜单
     this.activePath = activePath;// 给点击的菜单添加高亮
},
```

修改create方法

```js
  created() {
      this.getMenuList();
      this.activePath = window.sessionStorage.getItem('activePath');// 取出session里的访问路径
  },
```

![image-20200602152626482](C:\Users\dz_yk\AppData\Roaming\Typora\typora-user-images\image-20200602152626482.png)

## 6、用户列表组件开发

### 6.1 面包屑导航区

```html
 <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
```

`全局样式`表里修改样式

```css
/* 面包屑样式 */
.el-breadcrumb{
    margin-bottom: 15px;
    font-size: 12px;
}
```

### 6.2 卡片视图区

```html
 <!-- 卡片视图区 -->
<el-card>
</el-card>
```

全局card样式

```css
/* 卡片区域  !important 提高样式级别 */
.el-card{
    box-shadow: 0 1px 1px rgba(0, 8, 10, 0.15) !important;
}
```

添加搜索组件并且使用栅格

```html
 <!-- 卡片视图区 -->
    <el-card>
      <el-row :gutter="25"> 间隙
        <el-col :span="10"> 列宽
          <!-- 搜索添加 -->
          <el-input placeholder="请输入搜索内容" v-model="queryInfo.query" clearable @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>
```

## 7、用户数据获取

### 7.1、前台组件

create方法

```js
  created() {
    this.getUserList();
  },
```

获取用户方法

```js
 async getUserList() {
      // 调用post请求
      const { data: res } = await this.$http.get("allUser", {
        params: this.queryInfo
      });
      this.userlist = res.data; // 将返回数据赋值
      this.total = res.numbers; // 总个数
    },
```

封装查询方法

```js
 // 请求数据
queryInfo: {
  query: "",
  pageNum: 1,
  pageSize: 5
},
userlist: [],// 用户列表
total: 0, // 最大数据记录
```

### 7.2、用户列表后台

控制层

```java
   @RequestMapping("/allUser")
    public String getUserList(QueryInfo queryInfo){
        System.out.println(queryInfo);
        int numbers = userDao.getUserCounts("%"+queryInfo.getQuery()+"%");// 获取数据总数
        int pageStart = (queryInfo.getPageNum()-1)*queryInfo.getPageSize();
        List<User> users = userDao.getAllUser("%"+queryInfo.getQuery()+"%",pageStart,queryInfo.getPageSize());
        HashMap<String, Object> res = new HashMap<>();
        res.put("numbers",numbers);
        res.put("data",users);
        System.out.println("总条数："+numbers);
        String users_json = JSON.toJSONString(res);
        return users_json;
    }
```

dao层

```java
@Repository
public interface UserDao {
    public int getUserByMassage(@Param("username") String username, @Param("password") String password);
    public List<User> getAllUser(@Param("username") String username,@Param("pageStart") int pageStart, @Param("pageSize") int pageSize);
    public int getUserCounts(@Param("username") String username);
```

Mapper映射文件

```xml
    <select id="getAllUser" resultType="com.naughty.userlogin02.bean.User">
       	SELECT * FROM easyUser
        <if test="username !=null ">
            WHERE username like #{username}
        </if>
        LIMIT #{pageStart},#{pageSize}
    </select>

    <select id="getUserCounts" resultType="java.lang.Integer">
       	SELECT count(*) FROM `easyuser`
        <if test="username !=null ">
            WHERE username like #{username}
        </if>
    </select>
```

### 7.3、用户列表渲染

```html
<!-- 用户列表  border 边框 stripe 隔行变色 -->
<el-table :data="userlist" border stripe>
     <el-table-column type="index"></el-table-column><!--索引列-->
     <el-table-column label="姓名" prop="username"></el-table-column>
     <el-table-column label="邮箱" prop="email"></el-table-column>
     <el-table-column label="密码" prop="password"></el-table-column>
     <el-table-column label="角色" prop="role"></el-table-column>
     <el-table-column label="状态" prop="state">
     <!--作用域插槽 scope.row 存储了当前行的信息 -->
         <template slot-scope="scope"><!--数据模板-->
                <el-switch v-model="scope.row.state"></el-switch>
         </template>
     </el-table-column>
	 <!--自定义插槽-->
     <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteUser(scope.row.id)"></el-button>
            <!-- 权限 -->
            <el-tooltip effect="dark" content="分配权限" placement="top-start" :enterable="false"><!--文字提示 enterable 隐藏-->
              <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
            </el-tooltip>
          </template>
	</el-table-column>
</el-table>
```

## 8、分页组件

### 8.1、分页组件渲染

表格代码：

```vue
<template>
  <div>
    <!-- 面包屑导航 -->

    <!-- 卡片视图区 -->
    <el-card>
      <el-row :gutter="25">
        <el-col :span="10">
          <!-- 搜索添加 -->
          <el-input
            placeholder="请输入搜索内容"
            v-model="queryInfo.query"
            clearable
            @clear="getUserList"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getUserList"
            ></el-button>
          </el-input>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true"
            >添加用户</el-button
          >
        </el-col>
      </el-row>
      <!-- 用户列表 -->
      <el-table :data="userlist" border style="width: 100%">
    <el-table-column type="index"  width="60"></el-table-column>
    <el-table-column
      prop="username"
      label="姓名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="email"
      label="邮箱"
      width="120">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码"
      width="120">
    </el-table-column>
    <el-table-column
      prop="role"
      label="角色"
      width="120">
    </el-table-column>
    <el-table-column
      prop="state"
      label="状态"
      width="300">
    </el-table-column>
    <el-table-column label="操作">
          <template slot-scope="scope" class="cz">
            <!-- 修改 -->
            <el-button
              type="primary"
              style="width: 37px"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog()"
              >修改</el-button
            >
            <!-- 删除 -->
            <el-button
              type="danger"
              style="width: 37px"
              icon="el-icon-delete"
              size="mini"
              @click="deleteUser(scope.row.id)"
              >删除</el-button
            >
            <!-- 权限 -->
            <el-tooltip
              effect="dark"
              content="分配权限"
              placement="top-start"
              :enterable="false"
            >
              <el-button
                type="warning"
                style="width: 37px"
                icon="el-icon-setting"
                size="mini"
                >权限</el-button
              >
            </el-tooltip>
          </template>
        </el-table-column>
  </el-table>
      <!-- 分页 -->
      <el-pagination background 
        layout="total,sizes,prev, pager, next, jumper"
         :total="total" 
         page-size="5"  
        @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>

    <!-- 创建新用户对话框 -->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <!-- 内容主体区域 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
      >
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
      </el-form>
      <!-- 内容底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改用户对话框 -->
    <el-dialog
      title="修改用户信息"
      :visible.sync="editDialogVisible"
      width="50%"
      @colse="editDialogClosed"
    >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="70px"
      >
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="editForm.password"></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
```

### 8.2、相关方法

```java
return {
      // 请求数据,
      pageNum: 1,
      size:5,
      userlist: [], // 用户列表

      total: 0, // 最大数据记录
      addDialogVisible: false, // 对话框显示
      // 添加用户表单项
      addForm: {
        username: "",
        password: "",
        email: "",
      },
      // 控制修改用户对话框显示/隐藏
      editDialogVisible: false,
      // 修改用户信息
      editForm: {},
      // 验证规则
      addFormRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { min: 5, max: 15, message: "请输入正确邮箱地址", trigger: "blur" },
        ],
      },
      // 修改用户表单验证规则
      editFormRules: {
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 8, message: "长度在 6 到 8 个字符", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { min: 5, max: 15, message: "请输入正确邮箱地址", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    async getUserList() {
       //调用post请求
      const { data: res } = await this.$http.post("user/queryAll/" +this.pageNum+'/'+this.size);
      this.userlist = res.userList; // 将返回数据赋值
      this.total = res.total; // 总个数
    },
    // 监听pageSize改变的事件
    handleSizeChange(newSize) {
      this.size=newSize;
      this.getUserList(); // 数据发生改变重新申请数据
    },
    // 监听pageNum改变的事件
    handleCurrentChange(newSize) {
      // 调用post请求
      this.pageNum=newSize; // 将返回数据赋值
      this.getUserList(); // 数据发生改变重新申请数据
    },
```

## 9、用户状态修改

### 9.1、绑定change方法

```html
<!--作用域插槽 scope.row 存储了当前行的信息 -->
<template slot-scope="scope"><!--数据模板-->
	<el-switch v-model="scope.row.state" @change="userStateChanged(scope.row)"></el-switch>
</template>
```

### 9.2、创建changeState方法

```java
// 修改用户状态
async userStateChanged(userinfo) {
	const { data: res } = await this.$http.put(
        `userState?id=${userinfo.id}&state=${userinfo.state}`
    );
    if (res != "success") {
        userinfo.state = !userinfo.state;
        return this.$message.error("操作失败！！！");
      }
    this.$message.success("操作成功！！！");
},
```

### 9.3、修改状态后台

#### dao层编写接口

```java
@Repository
public interface UserDao {
    public int updateState(Integer id, Boolean state);
}
```

#### dao的映射文件

```xml
<update id="updateState">
   UPDATE easyuser SET state = #{state} WHERE id = #{id}
</update>
```

#### controller层编写

```java
@RequestMapping("/userState")
public String updateUserState(@RequestParam("id") Integer  id,
                                  @RequestParam("state") Boolean state){
	int i = userDao.updateState(id, state);
	String str = i >0?"success":"error";
	return str;
}
```

## 10、添加功能实现

### 10.1、mapper接口方法

```java
public User findUserNameAndPaw(String username,String password);
    public List<User> findAll();
    public User findUserName(String username);
    public User findById(Integer id);
    public int addUser(User user);
    public int editUser(User user);
    public int deleteUser(Integer id);
    public int updateState(Integer id, Boolean state);
```

### 10.2、mapper接口sql语句实现

```xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.xyp.mapper.UserMapper">
    <select id="findUserNameAndPaw" resultType="User">
           SELECT * FROM easyUser
           WHERE username=#{username} AND  password =#{password}
    </select>

    <select id="findAll" resultType="User">
           SELECT * FROM easyUser
        <if test="username !=null ">
            WHERE username like #{username}
        </if>
    </select>

    <select id="findUserName" resultType="User">
           SELECT count(*) FROM `easyuser`
        <if test="username !=null ">
            WHERE username like #{username}
        </if>
    </select>

    <select id="findById" resultType="User">
        SELECT * FROM easyuser WHERE id = #{id}
    </select>

    <update id="updateState">
        UPDATE easyuser SET state = #{state} WHERE id = #{id}
    </update>

    <insert id="addUser">
        INSERT INTO easyuser
        (username,password,email,role,state)
        VALUE
        (#{username},#{password},#{email},#{role},1)
    </insert>

    <update id="editUser">
        UPDATE easyuser SET username = #{username} , password = #{password} ,
        email = #{email} WHERE id = #{id}
    </update>

    <delete id="deleteUser">
        DELETE FROM easyuser WHERE id = #{id}
    </delete>

</mapper>
```

### 10.3service接口实现

```java
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;
    @Override
    public User findUserNameAndPaw(String username, String password) {
        return userMapper.findUserNameAndPaw(username,password);
    }

    @Override
    public List<User> findAll() {
        return userMapper.findAll();
    }
    public Map<String, Object> queryAll(Integer pageNum, Integer pageSize) {
        PageHelper.startPage(pageNum,pageSize);
        List<User> list = userMapper.findAll();
        PageInfo pageInfo = new PageInfo(list);
        Map<String ,Object> map = new HashMap<>();
        //查询数据
        map.put("userList",pageInfo.getList());
        //查询总条数
        map.put("total",pageInfo.getTotal());
        return map;
    }
    @Override
    public User findUserName(String username) {
        return userMapper.findUserName(username);
    }

    @Override
    public User findById(Integer id) {
        return userMapper.findById(id);
    }

    @Override
    public int addUser(User user) {
        return userMapper.addUser(user);
    }

    @Override
    public int editUser(User user) {
        return userMapper.editUser(user);
    }

    @Override
    public int deleteUser(Integer id) {
        return userMapper.deleteUser(id);
    }

    @Override
    public int updateState(Integer id, Boolean state) {
        return userMapper.updateState(id,state);
    }
}
```

### 10.4controller控制层

```java
@Controller
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;
    @RequestMapping("/findAll")
    @ResponseBody
    public List<User> findAll(){
        return userService.findAll();
    }
    @RequestMapping("/queryAll")
    @ResponseBody
    public Map<String,Object> queryAll(@RequestParam("pageNum") Integer pageNum, @RequestParam("pageSize") Integer pageSize){
        return userService.queryAll(pageNum,pageSize);
    }

    @RequestMapping("/updateState")
    @ResponseBody
    public String updateState(@RequestParam("id") Integer id,@RequestParam("state") boolean state){
        int n = userService.updateState(id,state);
        if(n>0){
            return "success";
        }
        return "error";
    }
    @RequestMapping("/addUser")
    @ResponseBody
    public String addUser(@RequestBody User user){
        int n = userService.addUser(user);
        if(n>0){
            return "success";
        }
        return "error";
    }
}
```

### 10.5前端代码修改

(1)添加

```vue
 // 添加用户表单项
      addForm: {
        username: "",
        password: "",
        email: "",
        role: ""
      },
      <!-- 创建新用户对话框 -->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      width="50%"
      @close="addDialogClosed"
    >
      <!-- 内容主体区域 -->
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
      >
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <!-- 角色 -->
        <el-form-item label="角色" prop="role">
          <el-radio-group v-model="addForm.role">
            <el-radio label="超级管理员"></el-radio>
            <el-radio label="普通管理员"></el-radio>
            <el-radio label="普通用户"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <!-- 内容底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>
```

```js
 // 添加用户
    addUser() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        // 发起请求
        const { data: res } = await this.$http.post(
          "user/addUser",
          this.addForm
        );
        if (res != "success") {
          return this.$message.error("添加失败！！！");
        }
        this.$message.success("添加成功！！！");
        //隐藏
        this.addDialogVisible = false;
        this.pageNum = 1; // 将返回数据赋值
        this.getUserList();
      });
    },
```

(2)删除

```vue
<el-table-column label="操作">
          <template slot-scope="scope" class="cz">
            <!-- 修改 -->
            <el-button
              type="primary"
              style="width: 37px"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog()"
              >修改</el-button
            >
            <!-- 删除 -->
            <el-button
              type="danger"
              style="width: 37px"
              icon="el-icon-delete"
              size="mini"
              @click="deleteUser(scope.row.id)" <!-- 通过scope.row.id拿到该行的id  -->
              >删除</el-button
            >
            <!-- 权限 -->
            <el-tooltip
              effect="dark"
              content="分配权限"
              placement="top-start"
              :enterable="false"
            >
              <el-button
                type="warning"
                style="width: 37px"
                icon="el-icon-setting"
                size="mini"
                >权限</el-button
              >
            </el-tooltip>
          </template>
        </el-table-column>
```

```js
   // 删除按钮
    async deleteUser(id) {
      // 弹框
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      // 成功删除为confirm 取消为 cancel
      if (confirmResult != "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await this.$http.delete("user/deleteUser?id=" + id);
      if (res != "success") {
        return this.$message.error("删除失败！！！");
      }
      this.$message.success("删除成功！！！");
      this.getUserList();
    },
```

(3)修改

第一步：

数据回显：

```java
@RequestMapping("/getUpdate")
@ResponseBody
public User getUpdate(@RequestParam("id") Integer id){
    return userService.findById(id);
}
```

```vue
 <!-- 修改 -->
            <el-button
              type="primary"
              style="width: 37px"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.id)"
              >修改</el-button
            >
```

提交修改数据：

```java
@RequestMapping("/editUser")
@ResponseBody
public String editUser(@RequestBody User user){
    int n = userService.editUser(user);
    if(n>0){
        return "success";
    }
    return "error";
}
```

```js
// 确认修改
    editUserInfo() {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return;
        // 发起请求
        const { data: res } = await this.$http.put("user/editUser", this.editForm);
        if (res != "success") return this.$message.error("修改失败！！！");
        this.$message.success("修改成功！！！");
        //隐藏
        this.editDialogVisible = false;
        this.getUserList();
      });
    },
```