文章目录

  • 1 后端项目创建
    • 1.1 结构如图所示
    • 1.2 项目demo测试
  • 2. 前端环境搭建
    • 2.1 VUE项目运行测试
      • 2.1.1 运行项目
      • 2.1.2 启动APP展现项目
      • 2.1.3 关闭编码格式校验
      • 2.1.4 删除默认样式
      • 2.1.5 删除默认路由
      • 2.1.6 删除默认Hello组件
  • 3. 用户登陆模块创建
    • 3.1 登陆准备
      • 3.1.1 创建文件
      • 3.1.2 编辑路由文件
      • 3.1.3 设定默认路径跳转
      • 3.1.4 导入静态资源文件
      • 3.1.5 用户访问测试
    • 3.2 用户数据验证
    • 3.3 表单数据重置
      • 3.3.1 业务需求说明
      • 3.3.2 实现重置
    • 3.4 登录预校验
      • 3.4.1 elementUI API
      • 3.4.2 编辑登录按钮的JS
    • 3.5 导入Axios组件
      • 3.5.1 导入axios组件
    • 3.6 用户登录
      • 3.6.1 发送Ajax请求
      • 3.6.2 编辑UserController
      • 3.6.3 编辑UserService
      • 3.6.4 返回值类型
    • 3.7 保存用户信息
      • 3.7.1 业务说明
      • 3.7.2 编辑页面JS
      • 3.7.3 浏览器效果展现
    • 3.8 跳转Home页面
      • 3.8.1 编辑路由
      • 3.8.2 页面效果展现
    • 3.9 路由导航守卫
      • 3.9.1 业务说明
      • 3.9.2路由守卫语法
    • 3.10 用户退出操作
      • 3.10.1 业务说明
      • 3.10.2 用户退出操作
  • 4. 用户首页布局
    • 4.1 ElementUI 页面布局介绍
      • 4.1.1 页面HTML
    • 4.2 实现左侧菜单获取
      • 4.2.1编辑Home.vue
      • 4.2.2 编辑RightsController
      • 4.2.3 编辑RightsService
      • 4.2.4 页面效果展现
    • 4.3 菜单栏介绍
      • 4.3.1 导航菜单样式
      • 4.3.2 菜单属性介绍
      • 4.3.3 子菜单跳转
      • 4.3.4 欢迎页面展现
  • 5 用户模块实现
    • 5.1 实现用户页面跳转
      • 5.1.1 创建user模块
      • 5.1.2 定义用户路由
    • 5.2 面包屑导航
      • 5.2.1 官网Demo
      • 5.2.2 定义面包屑
    • 5.3 定义卡片视图
      • 5.3.1 官网API
      • 5.3.2 定义卡片视图
    • 5.4 定义输入框
      • 5.4.1 官网API
      • 5.4.2 定义栅格
      • 5.4.2 编辑页面
      • 5.4.3 页面效果
    • 5.5 实现用户列表查询
      • 5.5.1 业务接口
      • 5.5.2 定义PageResult对象
      • 5.5.3 编辑UserController
      • 5.5.4 编辑UserService
      • 5.5.5 编辑MybatisPlus 配置类
    • 5.6 实现用户列表显示VUE页面
      • 5.6.1 获取用户数据
      • 5.6.2 表格数据API
      • 5.6.2 编辑页面
      • 5.6.3 页面效果
      • 5.6.4 状态信息
      • 5.6.5 编辑按钮
      • 5.6.6 效果展现
    • 5.7 实现用户列表分页
      • 5.7.1 官方API
      • 5.7.2 复制分页JS
      • 5.7.3 编辑分页操作
  • 5.8 用户状态修改
    • 5.8.1 修改事件触发
    • 5.8.2 编辑Vue页面
    • 5.8.3 编辑页面JS
    • 5.8.4 编辑UserController
    • 5.8.5 编辑UserService
  • 5.9 用户搜索按钮实现
      • 5.9.1 业务说明
      • 5.9.2 编辑Vue页面
      • 5.9.3 Input输入框清空操作
    • 5.10 添加用户功能实现
      • 5.9.1 绘制新增表单对话框
      • 5.9.2 编辑页面HTML
      • 5.9.3 校验邮箱/手机正则/密码校验
    • 5.11 重置表单数据
      • 5.11.1 重置事件 close
      • 5.11.2 编辑页面VUE
    • 5.12 实现用户新增
      • 5.12.1 编辑页面html
      • 5.12.2 编辑UserController
      • 5.12.3 编辑UserService
      • 5.12.4 自动填充API说明
      • 5.12.5 配置自动填充配置类
    • 5.13 用户修改数据回显
      • 5.13.1 绘制修改Dialog页面
      • 5.13.2 根据ID获取数据
      • 5.13.3 编辑UserController
      • 5.13.4 编辑UserService
    • 5.14 重置修改页面
      • 5.14.1 官网API
      • 5.14.2 编辑JS
    • 5.15 用户修改提交
      • 5.15.1 表单数据预校验
      • 5.15.2 编辑UserController
      • 5.15.3 编辑UserService
    • 5.16 用户删除
      • 5.16.1 消息提示框
      • 5.16.2 编辑页面JS
      • 5.16.3 编辑UserController
      • 5.16.4 编辑UserService
      • 5.16.5 页面效果展现
  • 6. 商品分类功能实现
    • 6.1 商品分类列表展现
      • 6.1.1 编辑页面JS
      • 6.1.2 编辑后台Controller
      • 6.1.3 编辑后台Service
      • 6.1.4 页面效果展现
    • 6.2 商品分类状态实现
      • 6.2.1 编辑页面VUE
      • 6.2.2 编辑ItemCatController
      • 6.2.3 编辑ItemCatService
    • 6.3 商品分类新增
      • 6.3.1 编辑页面JS
      • 6.3.2 编辑ItemCatController
      • 6.3.3 编辑ItemCatService
    • 6.4 商品分类修改
      • 6.4.1 页面JS展现
      • 6.4.2 编辑ItemCatController
      • 6.4.3 编辑ItemCatService
    • 6.5 商品分类删除
      • 6.5.1 编辑页面JS
      • 6.5.2 编辑ItemCatController
      • 6.5.3 编辑ItemCatService
  • 7 商品分类参数列表实现
    • 7.1 商品分类参数列表
      • 7.1.1 编辑ItemCatParam
      • 7.1.2 编辑itemCatParamController
      • 7.1.3 编辑itemCatParamService
      • 7.1.4 页面效果展现
    • 7.2 新增分类参数
      • 7.2.1 编辑VUE页面
      • 7.2.2 编辑ItemCatParamController
      • 7.2.3 编辑ItemCatParamService
    • 7.3 商品分类参数删除
      • 7.3.1 编辑页面VUE
      • 7.3.2 编辑ItemCatParamController
      • 7.3.2 编辑ItemCatParamService
    • 7.4 商品分类参数修改
      • 7.4.1 编辑页面JS
      • 7.4.2 编辑Controller
      • 7.4.3 编辑Service
  • 8.商品模块实现
    • 8.1 商品列表展现
      • 8.1.1 编辑页面VUE
      • 8.1.2 编辑ItemController
      • 8.1.3 编辑ItemService
    • 8.2 修改商品状态
      • 8.2.1 编辑页面VUE
      • 8.2.2 编辑ItemController
      • 8.2.3 编辑ItemService
    • 8.3 删除商品
      • 8.3.1 编辑页面VUE
      • 8.3.2 编辑ItemController
      • 8.3.3 编辑ItemService
    • 8.4 文件上传操作
      • 8.4.1 文件上传页面
      • 8.4.2 编辑FileController
      • 8.4.2 编辑properties配置文件
      • 8.4.3 编辑FileService
      • 8.4.4 成功之后的回调
    • 8.5 商品新增
      • 8.5.1 编辑vue 页面
      • 8.5.2 编辑ItemController
      • 8.5.3 编辑ItemService

1 后端项目创建

1.1 结构如图所示

1.2 项目demo测试

2. 前端环境搭建

2.1 VUE项目运行测试

2.1.1 运行项目

2.1.2 启动APP展现项目

2.1.3 关闭编码格式校验

2.1.4 删除默认样式

2.1.5 删除默认路由

2.1.6 删除默认Hello组件

3. 用户登陆模块创建

3.1 登陆准备

3.1.1 创建文件

3.1.2 编辑路由文件

1).编辑路由文件

2).指定路由占位符

3).路由测试

3.1.3 设定默认路径跳转

当用户访问 根目录时,要求重定向到登陆组件

3.1.4 导入静态资源文件

将课前资料中的文件导入项目中

3.1.5 用户访问测试

3.2 用户数据验证

1).定义表单校验规则

2).定义校验规则JS

3).效果展现

3.3 表单数据重置

3.3.1 业务需求说明

当点击重置表单按钮时 应该清空数据

3.3.2 实现重置

3.4 登录预校验

3.4.1 elementUI API

当用户输入数据之后,需要对数据进行校验.当数据有效时 才能提交数据.

3.4.2 编辑登录按钮的JS

3.5 导入Axios组件

3.5.1 导入axios组件

说明:在main.js中添加如下代码

/* 导入axios包 */
import axios from 'axios'
/* 设定axios的请求根目录 */
axios.defaults.baseURL = 'http://localhost:8091/'
/* 向vue对象中添加全局对象 以后发送ajax请求使用$http对象 */
Vue.prototype.$http = axios

3.6 用户登录

3.6.1 发送Ajax请求

3.6.2 编辑UserController

3.6.3 编辑UserService

3.6.4 返回值类型

   {"status":200,"msg":"服务器调用成功!","data":"1e893a97634847b3a8b499b173bea620"}

3.7 保存用户信息

3.7.1 业务说明

说明: 当用户登陆成功之后,将token保存到客户端中的sessionStorage中. 因为用户的其他操作都必须保证用户已经登录之后才能操作. 所以通过SessionStorage保存用户的token记录 表示已经登陆.

3.7.2 编辑页面JS

3.7.3 浏览器效果展现

3.8 跳转Home页面

3.8.1 编辑路由

3.8.2 页面效果展现

3.9 路由导航守卫

3.9.1 业务说明

当用户没有登录时,不可以访问其他页面 如果sessionStorage中没有token数据,则表示没有登录 用该拦截,跳转到登录页面.

3.9.2路由守卫语法

编辑router的index.js

//设置路由导航守卫
//关于参数说明://1. to 将要访问的路径//2. from 从哪个路径跳转来的//3. next 是一个函数   next() 表示放行  next("/login") 强制跳转
router.beforeEach((to,from,next) => {//1.当用户访问登录页面,则直接放行 如果不需要执行后续操作 执行returnif(to.path === '/login') return next()//2.当用户访问其他页面 需要校验是否有tokenlet token = window.sessionStorage.getItem('token')//如果数据为null  则访问登录页面if(!token)  return next('/login')//如果数据不为null 则放行next()
})

3.10 用户退出操作

3.10.1 业务说明

当用户点击退出按钮时,应该删除sessionStorage中的token信息. 并且访问登录页面

3.10.2 用户退出操作

4. 用户首页布局

4.1 ElementUI 页面布局介绍

4.1.1 页面HTML


页面效果:

4.2 实现左侧菜单获取

4.2.1编辑Home.vue

4.2.2 编辑RightsController

4.2.3 编辑RightsService

package com.jt.service;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.RightsMapper;
import com.jt.pojo.Rights;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.web.embedded.tomcat.TomcatWebServer;
import org.springframework.stereotype.Service;import java.util.List;/*** @author 刘昱江* 时间 2021/5/12*/
@Service
public class RightsServiceImpl implements RightsService{@Autowiredprivate RightsMapper rightsMapper;@Overridepublic List<Rights> getRightsList() {//1.查询所有的一级菜单QueryWrapper<Rights> queryWrapper = new QueryWrapper<>();queryWrapper.eq("parent_id", 0);List<Rights> oneList = rightsMapper.selectList(queryWrapper);//2.根据一级查询二级菜单for (Rights oneRights : oneList){//查询二级菜单QueryWrapper<Rights> queryWrapper2 = new QueryWrapper<>();queryWrapper2.eq("parent_id", oneRights.getId());List<Rights> twoList = rightsMapper.selectList(queryWrapper2);oneRights.setChildren(twoList);}return oneList;
}
}

4.2.4 页面效果展现

4.3 菜单栏介绍

4.3.1 导航菜单样式

4.3.2 菜单属性介绍

4.3.3 子菜单跳转

属性介绍:是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转

定义子组件请求路径

4.3.4 欢迎页面展现

说明: 添加welcome页面

定义路由组件: 实现默认跳转

5 用户模块实现

5.1 实现用户页面跳转

5.1.1 创建user模块

5.1.2 定义用户路由

5.2 面包屑导航

5.2.1 官网Demo

5.2.2 定义面包屑

 <!-- 1.定义面包屑导航 --><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>

5.3 定义卡片视图

5.3.1 官网API

5.3.2 定义卡片视图

    <!-- 2.定义卡片视图 --><el-card class="box-card"><h1>我是一个卡片视图</h1></el-card>

5.4 定义输入框

5.4.1 官网API

5.4.2 定义栅格

使用栅格是为了固定内容的大小 el-row 表示一行 :span=24 一行最多24个 代表宽度

5.4.2 编辑页面

<!-- 2.定义卡片视图 --><el-card class="box-card"><!-- 3.定义栅格的一行 :gutter="20"定义行间距   :span="9" 占位符  --><el-row :gutter="20"><el-col :span="9"><!-- 3.定义搜索框 --><el-input placeholder="请输入内容"><el-button slot="append" icon="el-icon-search"></el-button></el-input></el-col><el-col :span="4"><!-- 定义添加按钮--><el-button type="primary">添加用户</el-button></el-col></el-row></el-card>

5.4.3 页面效果

5.5 实现用户列表查询

5.5.1 业务接口

5.5.2 定义PageResult对象

5.5.3 编辑UserController

5.5.4 编辑UserService

5.5.5 编辑MybatisPlus 配置类

官网API:

package com.jt.config;import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;/*** @author 刘昱江* 时间 2021/5/13*/
@Configuration
public class MybatisPlusConfig {// 最新版@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MARIADB));return interceptor;}
}

5.6 实现用户列表显示VUE页面

5.6.1 获取用户数据

<script>export default {data(){return {queryInfo: {query: '',pageNum: 1,pageSize: 5},//为了后续操作 定义数据在外边userList: [],total: 0}},methods: {async getUserList(){const {data: result} = await this.$http.get('/user/list',{params: this.queryInfo})if(result.status !== 200) return this.$message.error("用户列表查询失败")this.userList = result.data.rowsthis.total = result.data.total}},//利用钩子函数实现数据查询mounted(){this.getUserList()}}
</script>

5.6.2 表格数据API

5.6.2 编辑页面

5.6.3 页面效果

5.6.4 状态信息


作用域插槽: slot-scope=“scope”

5.6.5 编辑按钮

5.6.6 效果展现

5.7 实现用户列表分页

5.7.1 官方API

5.7.2 复制分页JS

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

5.7.3 编辑分页操作


编辑页面JS

效果展现

5.8 用户状态修改

5.8.1 修改事件触发

在switch中 通过change事件可以实现数据的修改

5.8.2 编辑Vue页面

通过回调函数和作用域插槽 实现数据传递

5.8.3 编辑页面JS

5.8.4 编辑UserController

5.8.5 编辑UserService

5.9 用户搜索按钮实现

5.9.1 业务说明

当用户点击按钮之后,将数据绑定到查询对象中,重新获取列表数据即可.

5.9.2 编辑Vue页面

5.9.3 Input输入框清空操作

说明: 当用户输入成功之后,可以通过清空属性 已写数据 实现查询全部的功能

清空事件: 当用户调用clearable之后,调用clear事件

触发页面JS

5.10 添加用户功能实现

5.9.1 绘制新增表单对话框

1).绘制Dialog对话框

5.9.2 编辑页面HTML

<!-- 编辑用户新增对话框 visible.sync 控制对话框的显示--><el-dialog title="添加用户" :visible.sync="dialogVisible" width="50%"><!-- 定义用户提交表单数据--><el-form :model="addUserModel" :rules="rules" ref="addUserRef" label-width="100px" class="demo-ruleForm"><el-form-item label="用户名" prop="username"><el-input v-model="addUserModel.username"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input v-model="addUserModel.password" type="password"></el-input></el-form-item><el-form-item label="密码确认" prop="password2"><el-input v-model="addUserModel.password2" type="password"></el-input></el-form-item><el-form-item label="电话" prop="phone"><el-input v-model="addUserModel.phone"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="addUserModel.email"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog>

5.9.3 校验邮箱/手机正则/密码校验

//校验邮箱规则 rule校验规则   value校验的数据   callback回调函数const checkEmail = (rule, value, callback) => {//定义邮箱的正则表达式  JS中用/来表示正则表达式的开始和结束const emailRege = /^[a-zA-Z0-9-_]+@[a-zA-Z0-9-_]+\.[a-zA-Z0-9-_]+$///正则表达式语法校验  test(xx) 校验成功 返回true  校验失败返回falseif (emailRege.test(value)) {//表示邮箱合法 正确返回return callback()}callback(new Error('请填写正确的邮箱地址'))}//校验手机号的邮箱规则const checkPhone = (rule, value, callback) => {//定义校验手机号的正则语法const phoneRege = /^1[34578][0-9]{9}$/if (phoneRege.test(value)) {return callback()}callback(new Error('请填写正确的手机号'))}const checkPassword = (rule, value, callback) => {if(this.addUserModel.password !== value) return callback(new Error('2次密码输入不一致'))//否则校验成功callback()}

使用校验规则

5.11 重置表单数据

5.11.1 重置事件 close

5.11.2 编辑页面VUE


5.12 实现用户新增

5.12.1 编辑页面html

5.12.2 编辑UserController

5.12.3 编辑UserService

5.12.4 自动填充API说明


5.12.5 配置自动填充配置类


页面效果:

5.13 用户修改数据回显

5.13.1 绘制修改Dialog页面

<!-- 定义修改页面 --><el-dialog title="修改用户" :visible.sync="updateDialogVisible" width="50%"><!-- 定义用户提交表单数据--><el-form :model="updateUserModel" :rules="rules" ref="updateUserRef" label-width="100px"><el-form-item label="用户名" prop="username"><el-input v-model="updateUserModel.username"  disabled ></el-input></el-form-item><el-form-item label="电话" prop="phone"><el-input v-model="updateUserModel.phone"></el-input></el-form-item><el-form-item label="邮箱" prop="email"><el-input v-model="updateUserModel.email"></el-input></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="updateDialogVisible = false">取 消</el-button><el-button type="primary" @click="updateDialogVisible = false">确 定</el-button></span></el-dialog>

5.13.2 根据ID获取数据

   async updateUserBtn(user){this.updateDialogVisible = trueconst {data: result} = await this.$http.get("/user/"+user.id)if(result.status !== 200) return this.$message.error("用户查询失败")this.updateUserModel = result.data}

5.13.3 编辑UserController

5.13.4 编辑UserService

5.14 重置修改页面

5.14.1 官网API

5.14.2 编辑JS


5.15 用户修改提交

5.15.1 表单数据预校验

5.15.2 编辑UserController

5.15.3 编辑UserService

5.16 用户删除

5.16.1 消息提示框

5.16.2 编辑页面JS

5.16.3 编辑UserController

5.16.4 编辑UserService

5.16.5 页面效果展现

6. 商品分类功能实现

6.1 商品分类列表展现

6.1.1 编辑页面JS

6.1.2 编辑后台Controller

6.1.3 编辑后台Service

 @Overridepublic List<ItemCat> findItemCatList(Integer type) {//获取数据Map<Integer,List<ItemCat>> map = getItemCatMap();return findChildrenList(null,type,map);}public List<ItemCat> findChildrenList(Integer id,Integer type, Map<Integer,List<ItemCat>> map){if(id==null) id = 0;List<ItemCat> itemCatList = map.get(id);if(type == 1){return itemCatList;}if(itemCatList == null){return null;}for (ItemCat itemCat: itemCatList){if(itemCat.getLevel()<type){List<ItemCat> childrenList = findChildrenList(itemCat.getId(),type,map);itemCat.setChildren(childrenList);}}return itemCatList;}public Map<Integer,List<ItemCat>> getItemCatMap(){List<ItemCat> itemCatList = itemCatMapper.selectList(null);Map<Integer,List<ItemCat>> map = new HashMap<>();for(ItemCat itemCat : itemCatList){Integer parentId = itemCat.getParentId();if(map.containsKey(parentId)){map.get(parentId).add(itemCat);}else{List<ItemCat> list = new ArrayList<>();list.add(itemCat);map.put(parentId, list);}}return map;}方式2:@Overridepublic List<ItemCat> findItemCatList(Integer type) {Map<Integer,List<ItemCat>> map = getItemCatMap();if(type == 1) return map.get(0);if(type == 2) return findTwoItemCatList(map);return findThreeItemCatList(map);}public List<ItemCat> findTwoItemCatList(Map<Integer,List<ItemCat>> map){//1.获取一级商品分类List<ItemCat> oneList = map.get(0);//2.根据一级查询二级for(ItemCat itemCat : oneList){List<ItemCat> twoList = map.get(itemCat.getId());itemCat.setChildren(twoList);}return oneList;}private List<ItemCat> findThreeItemCatList(Map<Integer,List<ItemCat>> map) {List<ItemCat> twoList = findTwoItemCatList(map);for (ItemCat itemCat : twoList){    //1级菜单if(itemCat.getChildren() !=null){for(ItemCat itemCat2 :itemCat.getChildren()){List<ItemCat> threeList = map.get(itemCat2.getId());itemCat2.setChildren(threeList);}}}return twoList;}public Map<Integer,List<ItemCat>> getItemCatMap(){List<ItemCat> itemCatList = itemCatMapper.selectList(null);Map<Integer,List<ItemCat>> map = new HashMap<>();for(ItemCat itemCat : itemCatList){Integer parentId = itemCat.getParentId();if(map.containsKey(parentId)){map.get(parentId).add(itemCat);}else{List<ItemCat> list = new ArrayList<>();list.add(itemCat);map.put(parentId, list);}}return map;}

6.1.4 页面效果展现

6.2 商品分类状态实现

6.2.1 编辑页面VUE

6.2.2 编辑ItemCatController

6.2.3 编辑ItemCatService

6.3 商品分类新增

6.3.1 编辑页面JS

6.3.2 编辑ItemCatController

6.3.3 编辑ItemCatService

6.4 商品分类修改

6.4.1 页面JS展现

6.4.2 编辑ItemCatController

6.4.3 编辑ItemCatService

6.5 商品分类删除

6.5.1 编辑页面JS

6.5.2 编辑ItemCatController

6.5.3 编辑ItemCatService

 @Overridepublic void deleteItemCat(ItemCat itemCat) {if(itemCat.getLevel() == 3){itemCatMapper.deleteById(itemCat.getId());return;}if(itemCat.getLevel() == 2){itemCatMapper.delete(new QueryWrapper<>(itemCat).eq("parent_id", itemCat.getId()));itemCatMapper.deleteById(itemCat.getId());}if(itemCat.getLevel() == 1){QueryWrapper queryWrapper = new QueryWrapper();queryWrapper.eq("parent_id", itemCat.getId());List<ItemCat> list2 = itemCatMapper.selectList(queryWrapper);for (ItemCat itemCat2 : list2){QueryWrapper<ItemCat> queryWrapperTemp = new QueryWrapper<>();queryWrapperTemp.eq("parent_id", itemCat2.getId());itemCatMapper.delete(queryWrapperTemp);itemCatMapper.deleteById(itemCat2.getId());}itemCatMapper.deleteById(itemCat.getId());}}

7 商品分类参数列表实现

7.1 商品分类参数列表

7.1.1 编辑ItemCatParam

7.1.2 编辑itemCatParamController

7.1.3 编辑itemCatParamService

7.1.4 页面效果展现

7.2 新增分类参数

7.2.1 编辑VUE页面

1).商品分类参数新增页面

2).新增商品分类参数

7.2.2 编辑ItemCatParamController

7.2.3 编辑ItemCatParamService

7.3 商品分类参数删除

7.3.1 编辑页面VUE

1).编辑页面JS

2).删除JS

7.3.2 编辑ItemCatParamController

7.3.2 编辑ItemCatParamService

7.4 商品分类参数修改

7.4.1 编辑页面JS

7.4.2 编辑Controller

7.4.3 编辑Service

8.商品模块实现

8.1 商品列表展现

8.1.1 编辑页面VUE

8.1.2 编辑ItemController

8.1.3 编辑ItemService

8.2 修改商品状态

8.2.1 编辑页面VUE

8.2.2 编辑ItemController

8.2.3 编辑ItemService

8.3 删除商品

8.3.1 编辑页面VUE

8.3.2 编辑ItemController

8.3.3 编辑ItemService

8.4 文件上传操作

8.4.1 文件上传页面

1).文件上传操作

8.4.2 编辑FileController

8.4.2 编辑properties配置文件

#配置windows服务器路径
image.localPathDir=D:/JT_IMAGE
#配置Linux服务器路径
#image.localPathDir=/usr/local/src/images
image.localUrlPath=http://image.jt.com

8.4.3 编辑FileService

@Service
@PropertySource("classpath:/properties/image.properties")
public class FileServiceImpl implements FileService{//为属性动态赋值 注解@Value@Value("${image.localPathDir}")private String localPathDir;        // = "D:/JT_IMAGE";@Value("${image.localUrlPath}")private String localUrlPath;        // = "http://image.jt.com";//1.参数  ~~~已知条件//2.干什么 ~~~ 实现文件上传//3.返回值: void ImageVO 有效返回/*** 文件上传案例实现* 1.如何保证前端是上传的数据是有效的!!*      1.1 校验文件的名称检查是否为图片*      1.2 校验是否为恶意程序.* @param file* @return*/@Overridepublic ImageVO upload(MultipartFile file) throws IOException {//1.1校验是否为图片类型  abc.jpg ABC.JPG 文件大小写String fileName = file.getOriginalFilename();//将所有的文件名称转化为小写fileName = fileName.toLowerCase();if(!fileName.matches("^.+\\.(jpg|png|gif)$")){return null;}//1.2 校验图片类型是否为木马try {BufferedImage bufferedImage = ImageIO.read(file.getInputStream());int width = bufferedImage.getWidth();int height = bufferedImage.getHeight();if(width == 0 || height == 0 ){return null;}}catch (Exception e){return null;}//2. 目录结构//2.1 实现分目录存储...  可以以时间维度进行分隔 /yyyy/MM/dd/String datePath =new SimpleDateFormat("/yyyy/MM/dd/").format(new Date());//2.2 进行目录的拼接  "D:/JT_IMAGE/2021/11/11";String localDir = localPathDir + datePath;//2.3 需要创建目录File dirFile = new File(localDir);if(!dirFile.exists()){dirFile.mkdirs();}//3.文件名称重复  采用UUID防止文件重名 uuid.jpgString uuid = UUID.randomUUID().toString().replace("-", "");//fileName = abc.jpgString fileType =fileName.substring(fileName.lastIndexOf("."));String realFileName = uuid + fileType;//c:jt_image/2021/11/11/uuid.jpgString filePathAll = localDir + realFileName;//实现文件上传File realFile = new File(filePathAll);file.transferTo(realFile);//封装ImageVO对象  //2021/11/11/uuid.jpg 图片路径String virtualPath = datePath + realFileName;//封装虚拟URl地址  http://image.jt.com/2021/11/11/uuid.jpgString urlPath = localUrlPath + virtualPath;return new ImageVO(virtualPath,urlPath,realFileName);}}

8.4.4 成功之后的回调

8.5 商品新增

8.5.1 编辑vue 页面

8.5.2 编辑ItemController

8.5.3 编辑ItemService

 /*** 实现三张表入库 商品表/商品详情表/商品参数表* @param itemVO*/@Transactional@Overridepublic void saveItem(ItemVO itemVO){//1.入库商品表Item item = itemVO.getItem();item.setStatus(true);    //默认启用状态//要求入库之后返回主键//MP如果设定了主键自增则会自动的实现数据回显itemMapper.insert(item);//2.入库商品详情ItemDesc itemDesc = itemVO.getItemDesc();itemDesc.setId(item.getId());itemDescMapper.insert(itemDesc);//3.入库商品参数//1.一个商品应该有自己的单独的参数. 动态参数/静态属性 KYE-VLAUE [key:value,key2:value2]ItemParam itemParam = itemVO.getItemParam();ItemParamVO[] dynamic = itemParam.getDynamicArray();ItemParamVO[] staticParam  = itemParam.getStaticArray();try {//将页面传递的数据转化为JSON,之后数据库保存String dynamicJSON = MAPPER.writeValueAsString(dynamic);String staticJSON = MAPPER.writeValueAsString(staticParam);//封装商品参数信息itemParam.setDynamicArgs(dynamicJSON).setStaticArgs(staticJSON).setId(item.getId());//实现入库操作itemParamMapper.insert(itemParam);} catch (JsonProcessingException e) {e.printStackTrace();//如果程序执行报错 则抛出异常throw new RuntimeException(e);}}

京淘后台管理开发文档相关推荐

  1. php列表显示教程,Dedecms后台管理文档列表显示自定义字段方法教程

    有客户提出要求,在DEDECMS后台管理文档列表中,需要在列表中显示自定义的字段内容,在默认状态下,这些字段是不会再列表中显示的,下面就是解决方法: 找到dede/content_list.php文件 ...

  2. 商城前后端prd文档/经销商门户/瓶箱回收系统/组织管理平台/系统管理后台/商城文档/司机管理移动端原型/电商前后端原型/电商前后端需求文档//运输公司管理/产品库管理/资金管理/移动端电商原型文档

    商城前后端prd文档/经销商门户/瓶箱回收系统/组织管理平台/系统管理后台/商城文档/司机管理移动端原型/电商前后端原型/电商前后端prd文档/后台管理系统原型/运输公司管理/产品库管理/资金管理/移 ...

  3. SPA 项目 之 后台接口文档

    SPA 项目 之 后台接口文档 SPA 项目 之 后台接口文档 用户注册 用户登录 数据增加 数据删除 数据修改 数据查询 SPA 项目 之 后台接口文档 用户注册 用户注册接口调用: http请求方 ...

  4. 2003京淘项目Day-03京淘后台项目搭建

    1.SpringBoot 整合JSP 1.1 创建项目 1.1.1 创建项目 1.1.2 编辑POM.xml文件 添加继承/依赖/插件 <!--parent标签作用:管理所有被springBoo ...

  5. 关于ntko从后台传输文档时发生文件存取错误,暨关于response使用的注意点

    实现目的,主要是将 ntko editoffice.jsp intializePage(url) 下的url改成从本地地址,改成可以返回二进制文档流的后台接口地址. 令人奇怪的是不管怎么弄,ntko总 ...

  6. php后台架构,架构 · FastAdmin - 基于ThinkPHP5的极速后台开发框架文档 · 看云

    ## 架构总览 FastAdmin基于MVC的设计模式,将我们的应用分为三层(模型M.视图V.控制器C). ## 目录结构 FastAdmin目录结构遵循ThinkPHP5官方建议的模块设计: ~~~ ...

  7. CRMEB后台前端文档说明

    命名 页面目录 文件夹命名格式骆驼式命名法,例如:用户列表 userList 例如:商品模块 product 商品 ├─ product 商品管理 ├─productList 商品管理目录 ├- in ...

  8. php5 数据库框架,数据库 · FastAdmin - 基于ThinkPHP5的极速后台开发框架文档 · 看云...

    这里提供的是数据库表字段规则在你创建表时使用,当按如下的规则进行字段命名.类型设置和备注时 使用`php think crud -t 表名`生成CRUD时会自动生成对应的HTML元素和组件 ## 根据 ...

  9. 京淘商城后台管理系统

    京淘商城 京淘商城后台管理系统 登录.注册界面 商品管理 新增商品 查询商品 规格参数 网站内容管理 内容分类管理 内容管理 账户管理 管理员账户管理 普通用户账户管理 个人信息 习得总结 实习总结 ...

最新文章

  1. Linux文件权限符号含义
  2. 初识压缩感知 compressive sensing
  3. 练习:要对字符串进行长度(由短到长)排序。
  4. 聚合搜索V2.0泛目录站群二开源码 可做指定关键词
  5. 葡萄城 SpreadJS 表格控件 V11 产品白皮书
  6. iPhone 13系列相机有大升级:全系支持光学防抖功能
  7. win10 Docker Toolbox 默认路径不能写问题
  8. 蔚蓝网上书店项目js/jQuery部分
  9. 初识OFDM(七):OFDM中的信道估计
  10. python用函数判断一个数是否为素数,python分享是否为素数 python输入并判断一个数是否为素数...
  11. Linux远程访问的方法
  12. 童星养成系统的文推荐_戏骨、童星、实力派,《隐秘的角落》全员数据图鉴
  13. Win7 EFS 加密文件图解
  14. RCNN算法思想简单讲解概述————(究极简单的讲述和理解)
  15. Gravatar头像简单介绍与使用教程
  16. 姿态估计1-02:HR-Net(人体姿态估算)-官方模型训练测试-报错解决
  17. 【综述专栏】马毅沈向洋曹颖最新AI综述火了!
  18. python二级公共基础知识
  19. ComponentOne C1ReportDesigner 设计报表
  20. Python + Requests 模拟登陆(含验证码)

热门文章

  1. c# openCV图片传递-尝试读取或写入受保护的内存。这通常指示其他内存已损坏。解决方法
  2. Linux 作业第五周
  3. Gyp语法规则参考 工具的使用
  4. SNL语言词法分析与语法分析程序-java
  5. 学习系统编程No.15【深入动静态库】
  6. 关于 RenderControl 的问题
  7. UpdatePanel的使用方法[转]
  8. python安装0x80072ee7_电脑错误0x80072EE7 - 卡饭网
  9. 1一1剖面图方向_方向在哪里?(阶段性总结1)
  10. pip3 install pandas