SPA项目开发之动态树+数据表格+分页

1.准备

1.1.改dev.env.js的配置

在config/dev.env.js将MOCK的值修改为false

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MOCK: 'false'
})

1.2.启动后台服务

1.3.修改Login.vue中的doSubmit()方法

doSubmit: function () {
    let params = {
        username: this.username,
        password: this.password
    };
    console.log(params);
    let url = this.axios.urls.SYSTEM_USER_DOLOGIN;
    this.axios.post(url, params).then(response => {
        console.log(response);
        if (response.data.success) {
            this.$message({
                message: response.data.msg,
                type: 'success'
            })
            this.$router.push({path:'/appMain'});
        } else {
            this.$message({
                message: response.data.msg,
                type: 'error'
            })
        }
    }).catch(error => {
        console.log(error);
});

1.4.测试是否正常

能否正确跳转到主页面

202307261856

1.5.测试接口能否正常返回数据

2.动态菜单的实现

2.2.修改api/action.js的内容

/**
 * 对后台请求的地址的封装，URL格式如下：
 * 模块名_实体名_操作
 */
export default {
	'SERVER': 'http://localhost:8080/ssm', //服务器
	'SYSTEM_USER_DOLOGIN': '/user/userLogin', //用户登陆
  'SYSTEM_MENU': '/module/queryRootNode', //系统菜单
  'BOOK_LIST': '/book/queryBookPager', //数据查询
	'getFullPath': k => { //获得请求的完整地址，用于mockjs测试时使用
		return this.SERVER + this[k];
	}
}

2.1.修改LeftNav.vue的内容

<template>
  <el-menu
    router :default-active="$route.path"
    default-active="2" class="el-menu-vertical-demo" background-color="#334157"
           text-color="#fff" active-text-color="#ffd04b" :collapse="collapsed">
    <!-- <el-menu default-active="2" :collapse="collapsed" collapse-transition router :default-active="$route.path" unique-opened class="el-menu-vertical-demo" background-color="#334157" text-color="#fff" active-text-color="#ffd04b"> -->
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>
    <el-submenu v-for="m in menus"
                :index="'index_'+m.id"
                :key="'key_'+m.id">
      <template slot="title">
        <i :class="m.icon"></i>
        <span>{{ m.text }}</span>
      </template>
      <el-menu-item
        v-for="m2 in m.modules"
        :index="m2.url"
        :key="'key_' + m2.id">
        <i :class="m2.icon"></i>
        <span>{{m2.text}}</span>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  data() {
    return {
      collapsed: false,
      menus: []
    }
  },
  created() {
    this.$root.Bus.$on('doCollapsed', v => {
      //v指的是topNav传递过来的this.collapsed
      this.collapsed = v;
    });
    //往后台发送请求,获取菜单数据
    let url = this.axios.urls.SYSTEM_MENU;
    this.axios.get(url,{}).then(resp=>{
      this.menus = resp.data.rows;
    }).catch(error=>{

    });
  }
}
</script>
<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 240px;
  min-height: 400px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
  text-align: left;
}

.el-menu-item-group__title {
  padding: 0px;
}

.el-menu-bg {
  background-color: #1f2d3d !important;
}

.el-menu {
  border: none;
}

.logobox {
  height: 40px;
  line-height: 40px;
  color: #9d9d9d;
  font-size: 20px;
  text-align: center;
  padding: 20px 0px;
}

.logoimg {
  height: 40px;
}
</style>

2.2.在views中新建book目录

2.3.新建BookList.vue和AddBook.vue

BookList.vue

<template>
  <div>书籍管理</div>
</template>

<script>
export default {
  name: "BookList"
}
</script>

<style scoped>

</style>

AddBook.vue

<template>
  <div>书籍新增</div>
</template>

<script>
export default {
  name: "addBook"
}
</script>

<style scoped>

</style>

2.4.修改router/index.js中的内容

#添加
import BookList from '@/views/book/BookList'
import AddBook from '@/views/book/AddBook'

#在appMain的children中添加
{
    path: '/book/BookList',
	name: 'BookList',
	component: BookList
}, {
    path: '/book/AddBook',
	name: 'AddBook',
	component: AddBook
},

2.5.修改AppMain中的内容

#<el-main></el-main>原来的Main替换成 
<router-view></router-view>

2.6.效果

202307262020

3.书籍管理数据表格

3.1.修改BookList.vue中的内容

<template>
  <div style="padding: 20px">
    <!--搜索框-->
    <el-form :inline="true" class="form-search">
      <el-form-item label="书本名称">
        <el-input v-model="bookname" placeholder="请输入书本名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit()">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 数据表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="书籍编号" width="180"></el-table-column>
      <el-table-column prop="bookname" label="书籍名称" width="180"></el-table-column>
      <el-table-column prop="price" label="价格" width="180"></el-table-column>
      <el-table-column prop="booktype" label="书籍类别"></el-table-column>
    </el-table>
    <!-- 分页条 -->
    <el-pagination background
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="page"
                   :page-sizes="[10, 20, 30, 40]"
                   :page-size="rows"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "BookList",
  data() {
    return {
      bookname: '',
      tableData: [],
      page: 1,
      rows: 10,
      total: 0
    }
  },
  created() {
    let params = {
      bookname: this.bookname
    }
    this.query(params);
  },
  methods: {
    query(params){
      //搜索方法
      let url = this.axios.urls.BOOK_LIST;

      this.axios.get(url, {params: params}).then(resp => {
        this.tableData = resp.data.rows;
        this.total = resp.data.total;
      }).catch(err=>{

      });
    },
    onSubmit() {
      let params = {
        bookname: this.bookname
      }
      this.query(params);
    },
    handleSizeChange(r) {
      let params = {
        bookname: this.bookname,
        rows: r
      }
      this.query(params)
    },
    handleCurrentChange(p) {
      let params = {
        bookname: this.bookname,
        page: p
      }
      this.query(params)
    }
  }
}
</script>

<style scoped>

</style>

效果

202307262100

4.用户注册功能和登录功能

4.1.UserMapper.java添加内容

/**
     * 根据用户名查询用户
     * @param username 要查询的用户名
     * @return 查询到的用户
     */
    User selectByUsername(String username);

    /**
     * 根据用户名和密码查询用户
     * @param username 用户名
     * @param password 用户密码
     * @return 查询到的用户
     */
    User selectByUsernameAndPassword(@Param("username") String username, @Param("password") String password);
    
    /**
     * 添加用户
     * @param user 要添加的用户实体
     * @return 影响的行数
     */
    int addUser(User user);

4.2.UserMapper.xml中添加新的内容

<select id="selectByUsername" resultType="com.zking.ssm.model.User">
    select *
    from t_user_vue
    where username = #{username}
</select>

<select id="selectByUsernameAndPassword" 	          resultType="com.zking.ssm.model.User">
    select *
    from t_user_vue
    where username = #{username}
    and password = #{password}
</select>
<insert id="addUser">
    insert into t_user_vue(username, password, createdate)
    values (#{username}, #{password}, sysdate())
</insert>

4.3.IUserService.java中添加内容

/**
* 添加用户
* @param user 要添加的用户实体
* @return 影响的行数
*/
int addUser(User user);

/**
* 根据用户名查询用户
* @param username 要查询的用户名
* @return 查询到的用户
*/
User selectByUsername(String username);

/**
* 根据用户名和密码查询用户
* @param username 用户名
* @param password 用户密码
* @return 查询到的用户
*/
User selectByUsernameAndPassword(@Param("username") String username, @Param("password") String password);

4.4.UserServiceImpl.java中添加内容

/**
* 添加用户
*
* @param user 要添加的用户实体
* @return 影响的行数
*/
@Override
public int addUser(User user) {
    return userMapper.addUser(user);
}

/**
* 根据用户名查询用户
*
* @param username 要查询的用户名
* @return 查询到的用户
*/
@Override
public User selectByUsername(String username) {
    return userMapper.selectByUsername(username);
}

/**
* 根据用户名和密码查询用户
*
* @param username 用户名
* @param password 用户密码
* @return 查询到的用户
*/
@Override
public User selectByUsernameAndPassword(String username, String password) {
    return userMapper.selectByUsernameAndPassword(username, password);
}

4.5.修改UserController.java

package com.zking.ssm.controller;

import com.zking.ssm.model.User;
import com.zking.ssm.service.IUserService;
import com.zking.ssm.util.JsonResponseBody;
import com.zking.ssm.util.PageBean;
import com.zking.ssm.vo.UserVo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.zking.ssm.jwt.*;

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    private IUserService userService;

    @RequestMapping("/userLogin")
    @ResponseBody
    public JsonResponseBody<?> userLogin(UserVo userVo, HttpServletResponse response) {
        //判空处理
        if ("".equals(userVo.getUsername()) || "".equals(userVo.getPassword())) {
            return new JsonResponseBody<>("用户名或密码不能为空！", false, 0, null);
        }
        //查询数据库
        User user = userService.selectByUsernameAndPassword(userVo.getUsername(), userVo.getPassword());
        if (user!=null) {
            //私有要求claim
//            Map<String,Object> json=new HashMap<String,Object>();
//            json.put("username", userVo.getUsername());
            //生成JWT，并设置到response响应头中
//            String jwt=JwtUtils.createJwt(json, JwtUtils.JWT_WEB_TTL);
//            response.setHeader(JwtUtils.JWT_HEADER_KEY, jwt);
            return new JsonResponseBody<>("用户登陆成功！", true, 0, null);
        } else {
            return new JsonResponseBody<>("用户名或密码错误！", false, 0, null);
        }
    }

    @RequestMapping("/userRegister")
    @ResponseBody
    public JsonResponseBody<?> userRegister(UserVo userVo, HttpServletResponse response) {
        //判空处理
        if ("".equals(userVo.getUsername()) || "".equals(userVo.getPassword())) {
            return new JsonResponseBody<>("用户名或密码不能为空！", false, 0, null);
        }
        //查询当前用户名是否存在
        if (userService.selectByUsername(userVo.getUsername()) != null) {
            return new JsonResponseBody<>("当前用户名已被注册！", false, 0, null);
        }
        //插入数据库
        int insert = userService.addUser(userVo);
        //判断是否新增成功
        if (insert > 0) {
            return new JsonResponseBody<>("用户注册成功！", true, 0, null);
        } else {
            return new JsonResponseBody<>("用户注册失败！", false, 0, null);
        }
    }

    @RequestMapping("/queryUserPager")
    @ResponseBody
    public JsonResponseBody<List<Map<String, Object>>>
    queryUserPager(UserVo userVo, HttpServletRequest request) {
        try {
            PageBean pageBean = new PageBean();
            pageBean.setRequest(request);
            List<Map<String, Object>> users = userService.queryUserPager(userVo, pageBean);
            return new JsonResponseBody<>("OK", true, pageBean.getTotal(), users);
        } catch (Exception e) {
            e.printStackTrace();
            return new JsonResponseBody<>("分页查询用户信息失败！", false, 0, null);
        }

    }
}

4.6.修改Register.vue

<template>
  <div class="login-wrap">
    <el-form class="login-container">
      <h1 class="title">用户注册</h1>
      <el-form-item label="">
        <el-input type="text" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;" @click="doSubmit()">提交</el-button>
      </el-form-item>
      <el-row style="text-align: center;margin-top:-10px">
        <el-link type="primary">忘记密码</el-link>
        <el-link type="primary" @click="gotoLogin()">用户登录</el-link>
      </el-row>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'Login',
  data: function () {
    return {
      username: "",
      password: ""
    }
  },
  methods: {
    doSubmit: function () {
      let params = {
        username: this.username,
        password: this.password
      };
      let url = this.axios.urls.SYSTEM_USER_REGISTER;
      this.axios.post(url, params).then(response => {
        console.log(response);
        if (response.data.success) {
          this.$message({
            message: response.data.msg,
            type: 'success'
          })
          this.$router.push({path:'/login'});
        } else {
          this.$message({
            message: response.data.msg,
            type: 'error'
          })
        }
      }).catch(error => {
        console.log(error);
      });
    },
    gotoLogin(){
      this.$router.push({path: '/login'})
    }
  }
}
</script>

<style scoped>
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  /* background-color: #112346; */
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>

效果

202307262153

5.接口文档

请看另一篇博客: https://blog.csdn.net/qq_50477101/article/details/131948813