day02后台管理页面

最新推荐文章于 2023-09-18 16:45:41 发布

归暔山

最新推荐文章于 2023-09-18 16:45:41 发布

阅读量621

点赞数

分类专栏：电商项目文章标签： java

本文链接：https://blog.csdn.net/H197736/article/details/115053854

版权

电商项目专栏收录该内容

3 篇文章 0 订阅

订阅专栏

学习目标

搭建后台管理界面
商品管理

1.搭建后台管理界面

1.1.认识Vue

1.1.1.Vue介绍

Vue (读音 /vjuː/，类似于 view) 是是一套用于构建用户界面的前端框架，使用Vue可以快速搭建一个在运行在node上的Vue项目。

1.1.2.Node介绍

Node.js是一个在浏览器外执行JavaScript语言的环境，就好比JRE是Java的运行环境。

1.1.3.NPM介绍

使用node开发还可以使用配套的npm包管理工具，npm是Node.js的包管理工具，能解决Node.js代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

1.2.安装Node

前面说过，NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。

1.2.1.安装Node.js

下载地址：https://nodejs.org/en/
在这里插入图片描述

推荐下载LTS版本。

课程中采用的是8.11.3版本。大家自行下载或者使用课前资料中提供的安装包。然后下一步安装即可。

完成以后，在控制台输入：

node -v

看到版本信息：

在这里插入图片描述

1.2.2.安装NPM

Node自带了NPM了，在控制台输入npm -v查看：
在这里插入图片描述

npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm

我们首先安装nrm，这里-g代表全局安装。可能需要一点儿时间

npm install nrm -g

在这里插入图片描述

然后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：
在这里插入图片描述

通过nrm use taobao来指定要使用的镜像源：
在这里插入图片描述

然后通过nrm test npm来测试速度：
在这里插入图片描述
注意：

有教程推荐大家使用cnpm命令，但是使用发现cnpm有时会有bug，不推荐。
安装完成请一定要重启下电脑！！！
安装完成请一定要重启下电脑！！！
安装完成请一定要重启下电脑！！！

1.3.搭建后台管理界面

1.3.1.导入已有资源

在这里插入图片描述

我们解压缩，放到工作目录中：
在这里插入图片描述

然后在Intellij idea中导入新的工程：
在这里插入图片描述

选中我们的工程：
在这里插入图片描述
选择在新窗口打开：

1.3.2.安装依赖

你应该注意到，这里并没有node_modules文件夹，方便给大家下发，已经把依赖都删除了。不过package.json中依然定义了我们所需的一切依赖：
在这里插入图片描述

我们只需要打开终端，进入项目目录，输入：npm install命令，即可安装这些依赖。

大概需要几分钟。

如果安装过程出现以下问题：

在这里插入图片描述

建议删除node_modules目录重新安装，或者copy其他人的node_modules使用

1.3.3.安装concurrently

项目基于vue（前端）+node（后台），需要启动两个服务，使用 concurrently 并行地运行多个命令（同时跑前端和后端的服务），输入：npm install concurrently命令即可

在这里插入图片描述

1.3.3.测试

在这里插入图片描述

在package.json文件中有scripts启动脚本配置，可以输入命令：npm run dev或者npm start

在这里插入图片描述

发现默认的端口是8080。访问：http://localhost:8080

会自动进行跳转：

在这里插入图片描述

1.3.4.修改路径和地址

修改ip和端口：重启后台系统:vue.config.js

修改路径：不需要重启(自主热更新):src/api/base.js

2.商品管理

参考接口文档完成商品管理：

在这里插入图片描述

2.1.商品列表查询

2.1.1.common_utils

在 common_utils 项目中添加 PageResult 模型

package com.usian.utils;

import java.io.Serializable;
import java.util.List;

/**
* 分页模型
*/
public class PageResult implements Serializable {
    private Integer pageIndex; //当前页
    private Integer totalPage; //总页数
    private List result; //结果集

    public Integer getPageIndex() {
        return pageIndex;
    }

    public void setPageIndex(Integer pageIndex) {
        this.pageIndex = pageIndex;
    }

    public Integer getTotalPage() {
        return totalPage;
    }

    public void setTotalPage(Integer totalPage) {
        this.totalPage = totalPage;
    }

    public List getResult() {
        return result;
    }

    public void setResult(List result) {
        this.result = result;
    }
}

2.1.2.usian_item_service

2.1.2.1service

	/**
	 * 查询所有商品，并分页。
	 * @param page
	 * @param rows
	 * @return
	 */
	@Override
	public PageResult selectTbItemAllByPage(Integer page, Integer rows) {
		PageHelper.startPage (page,rows);
		TbItemExample example = new TbItemExample();
		TbItemExample.Criteria criteria = example.createCriteria();
		criteria.andStatusEqualTo((byte)1);
		List<TbItem> list = this.tbItemMapper.selectByExample(example);
		PageInfo<TbItem> pageInfo = new PageInfo<TbItem>(list);
		PageResult result = new PageResult();
        PageResult pageResult = new PageResult();
        pageResult.setPageIndex(pageInfo.getPageNum());
        pageResult.setTotalPage(Long.valueOf(pageInfo.getPages()));
        pageResult.setResult(pageInfo.getList());
        return pageResult;
	}

2.1.2.1controller

    /**
     * 商品列表查询
     * @param page
     * @param rows
     * @return
     */
    @RequestMapping(value="/selectTbItemAllByPage")
    public PageResult selectTbItemAllByPage(Integer page,Integer rows){
        return this.itemService.selectTbItemAllByPage(page,rows);
    }

2.1.3.usian_item_feign

2.1.3.1.feign

    @GetMapping("/service/item/selectTbItemAllByPage")
    PageResult selectTbItemAllByPage(@RequestParam Integer page,
                                     @RequestParam Integer rows);

2.1.4.usian_item_web

2.1.4.1.controller

    /**
     * 查询商品并分页处理
     *
     * @return
     */
    @RequestMapping("/selectTbItemAllByPage")
    public Result selectTbItemAllByPage(@RequestParam(defaultValue = "1")
                        Integer page, @RequestParam(defaultValue = "2") Integer rows) {

   	    PageResult pageResult = itemServiceFeign.selectTbItemAllByPage(
        																page, rows);
        if (pageResult.getResult() != null &&
            							pageResult.getResult().size() > 0) {
            return Result.ok(pageResult);
        }
        return Result.error("查无结果");
    }

错误：

Caused by: java.lang.IllegalStateException: Method has too many Body parameters: public abstract com.usian.utils.PageResult com.usian.feign.ItemFeign.selectTbItemAllByPage(java.lang.Integer,java.lang.Integer)
at feign.Util.checkState(Util.java:130)
at feign.Contract $B a s e C o n t r a c t . p a r s e A n d V a l i d a t e M e t a d a t a (C o n t r a c t . j a v a : 117) a t o r g . s p r i n g f r a m e w o r k . c l o u d . o p e n f e i g n . s u p p o r t . S p r i n g M v c C o n t r a c t . p a r s e A n d V a l i d a t e M e t a d a t a (S p r i n g M v c C o n t r a c t . j a v a : 188) a t f e i g n . C o n t r a c t$ BaseContract.parseAndValidatateMetadata(Contract.java:66)
at feign.ReflectiveFeign $P a r s e H a n d l e r s B y N a m e . a p p l y (R e f l e c t i v e F e i g n . j a v a : 154) a t f e i g n . R e f l e c t i v e F e i g n . n e w I n s t a n c e (R e f l e c t i v e F e i g n . j a v a : 52) a t f e i g n . F e i g n$ Builder.target(Feign.java:251)
at org.springframework.cloud.openfeign.HystrixTargeter.target(HystrixTargeter.java:36)
at org.springframework.cloud.openfeign.FeignClientFactoryBean.loadBalance(FeignClientFactoryBean.java:238)
at org.springframework.cloud.openfeign.FeignClientFactoryBean.getTarget(FeignClientFactoryBean.java:267)
at org.springframework.cloud.openfeign.FeignClientFactoryBean.getObject(FeignClientFactoryBean.java:247)
at org.springframework.beans.factory.support.FactoryBeanRegistrySupport.doGetObjectFromFactoryBean(FactoryBeanRegistrySupport.java:171)
… 35 common frames omitted

解决方案：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eEkK9yk6-1616323074065)(assets\image-20210316100657314.png)]

2.1.5.测试

修改vue.config.js

在这里插入图片描述

测试结果：

在这里插入图片描述

2.2.商品类目查询

需求分析：

功能：

在这里插入图片描述

表结构：

在这里插入图片描述

2.2.2.usian_item_service

2.2.2.1service

package com.usian.service;

import com.usian.mapper.TbItemCatMapper;
import com.usian.pojo.TbItemCat;
import com.usian.pojo.TbItemCatExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ItemCategoryServiceImpl implements ItemCategoryService {
    @Autowired
    private TbItemCatMapper tbItemCatMapper;

    /**
     * 根据分类 ID 查询子节点
     *
     * @param id
     * @return
     */
    @Override
    public List<TbItemCat> selectItemCategoryByParentId(Long id) {
        TbItemCatExample example = new TbItemCatExample();
        TbItemCatExample.Criteria criteria = example.createCriteria();
        criteria.andParentIdEqualTo(id);
        criteria.andStatusEqualTo(1);
        List<TbItemCat> list = this.tbItemCatMapper.selectByExample(example);
        return list;
    }
}

2.2.2.1controller

package com.usian.controller;

import com.usian.pojo.TbItemCat;
import com.usian.service.ItemCategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/service/itemCategory")
public class ItemCategoryController {

    @Autowired
    private ItemCategoryService itemCategoryService;

    /**
     * 根据父节点查询子节点
     */
    @RequestMapping("/selectItemCategoryByParentId")
    public List<TbItemCat> selectItemCategoryByParentId(@RequestParam Long
                                                                id) {
        return itemCategoryService.selectItemCategoryByParentId(id);
    }
}

2.2.3.usian_item_feign

2.3.3.1.feign

    @RequestMapping("/service/itemCategory/selectItemCategoryByParentId")
    List<TbItemCat> selectItemCategoryByParentId(@RequestParam Long id);

2.2.4.usian_item_web

2.2.4.1.controller

package com.usian.controller;

import com.usian.feign.itemServiceFeign;
import com.usian.pojo.TbItemCat;
import com.usian.utils.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/backend/itemCategory")
public class ItemCategoryController {
    @Autowired
    private itemServiceFeign itemServiceFeign;

    /**
     * 根据类目 ID 查询当前类目的子节点
     */
    @RequestMapping("/selectItemCategoryByParentId")
    public Result selectItemCategoryByParentId(@RequestParam(
                				defaultValue = "0") Long id) {
        List<TbItemCat> list = itemServiceFeign.selectItemCategoryByParentId(id);
        if (list != null && list.size() > 0) {
            return Result.ok(list);
        }
        return Result.error("查无结果");
    }
}

2.2.5.测试

测试结果：

2.3.商品规格模板查询

需求分析：

功能：选择商品类目后展示商品规格模板

表结构：

在这里插入图片描述

2.3.1.usian_item_service

2.3.1.1.service

package com.usian.service;

import com.usian.mapper.TbItemParamMapper;
import com.usian.pojo.TbItemParam;
import com.usian.pojo.TbItemParamExample;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class ItemParamServiceImpl implements ItemParamService {

    @Autowired
    private TbItemParamMapper tbItemParamMapper;

    @Override
    public TbItemParam selectItemParamByItemCatId(Long itemCatId) {
        TbItemParamExample example = new TbItemParamExample();
        TbItemParamExample.Criteria criteria = example.createCriteria();
        criteria.andItemCatIdEqualTo(itemCatId);
        List<TbItemParam> list = tbItemParamMapper.selectByExampleWithBLOBs(example);

        if (list != null && list.size() > 0) {
            return list.get(0);
        }
        return null;
    }
}

2.3.1.1.controller

package com.usian.controller;

import com.usian.pojo.TbItemParam;
import com.usian.service.ItemParamService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/service/itemParam")
public class ItemParamController {
    @Autowired
    private ItemParamService itemParamService;

    /**
     * 根据商品分类 ID 查询规格参数模板
     */
    @RequestMapping("/selectItemParamByItemCatId")
    public TbItemParam selectItemParamByItemCatId(Long itemCatId) {
        return this.itemParamService.selectItemParamByItemCatId(itemCatId);
    }
}

2.3.2.usian_item_feign

2.3.2.1.feign

   @PostMapping("/service/itemParam/selectItemParamByItemCatId")
    TbItemParam selectItemParamByItemCatId(@RequestParam("itemCatId") Long itemCatId);

2.3.3.usian_item_web

2.3.3.1.controller

package com.usian.controller;

import com.usian.feign.itemServiceFeign;
import com.usian.pojo.TbItemParam;
import com.usian.utils.Result;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/backend/itemParam")
public class ItemParamController {

    @Autowired
    private itemServiceFeign itemServiceFeign;

    /**
     * 根据商品分类 ID 查询规格参数模板
     */
    @RequestMapping("/selectItemParamByItemCatId/{itemCatId}")
    public Result selectItemParamByItemCatId(@PathVariable("itemCatId") Long itemCatId) {

        TbItemParam tbItemParam = 
            this.itemServiceFeign.selectItemParamByItemCatId(itemCatId);
        if(tbItemParam != null){
            return Result.ok(tbItemParam);
        }
        return Result.error("查无结果");
    }
}

2.3.4.测试

测试结果：

1、选择商品类目：电子书

在这里插入图片描述

2、在新增商品表单底部显示电子书类别的商品规格模板

在这里插入图片描述

2.4.商品添加

商品描述表：商品描述是大字段，会影响查询效率，所以要把商品描述单独拆分成一张子表

在这里插入图片描述

2.4.2.usian_item_service

2.4.2.1.service

	@Override
	public Integer insertTbItem(TbItem tbItem, String desc, String itemParams) {
		//补齐 Tbitem 数据
		Long itemId = IDUtils.genItemId();
		Date date = new Date();
		tbItem.setId(itemId);
		tbItem.setStatus((byte)1);
		tbItem.setUpdated(date);
		tbItem.setCreated(date);
        tbItem.setPrice(tbItem.getPrice()*100);
		Integer tbItemNum = tbItemMapper.insertSelective(tbItem);

		//补齐商品描述对象
		TbItemDesc tbItemDesc = new TbItemDesc();
		tbItemDesc.setItemId(itemId);
		tbItemDesc.setItemDesc(desc);
		tbItemDesc.setCreated(date);
		tbItemDesc.setUpdated(date);
		Integer tbitemDescNum = tbItemDescMapper.insertSelective(tbItemDesc);

		//补齐商品规格参数
		TbItemParamItem tbItemParamItem = new TbItemParamItem();
		tbItemParamItem.setItemId(itemId);
		tbItemParamItem.setParamData(itemParams);
		tbItemParamItem.setUpdated(date);
		tbItemParamItem.setCreated(date);
		Integer itemParamItmeNum = 
                             tbItemParamItemMapper.insertSelective(tbItemParamItem);

		return tbItemNum + tbitemDescNum + itemParamItmeNum;
	}

2.3.2.1.controller

    /**
     * 商品的添加
     */
    @RequestMapping("/insertTbItem")
    public Integer insertTbItem(@RequestBody TbItem tbItem,String desc,
                                String itemParams){
        return this.itemService.insertTbItem(tbItem,desc,itemParams);
    }

2.3.3.usian_item_feign

2.3.3.1.feign

@GetMapping("/service/item/insertTbItem")
public Integer insertTbItem(@RequestBody TbItem tbItem, @RequestParam String desc, 
                                					@RequestParam String itemParams);

2.3.4.usian_item_web

2.3.4.1.controller

    /**
     * 添加商品
     */
    @RequestMapping("/insertTbItem")
    public Result insertTbItem(TbItem tbItem,String desc,String itemParams){
        Integer insertTbItemNum = itemServiceFeign.insertTbItem(tbItem, desc,itemParams);
        if(insertTbItemNum==3){
            return Result.ok();
        }
        return Result.error("添加失败");
    }

2.3.5.测试

1.选择商品类目：

在这里插入图片描述

2.填写商品信息

在这里插入图片描述

3.测试结果：

在这里插入图片描述

2.5.商品修改

2.5.1.商品信息回显

2.5.1.1.usian_item_service

2.5.1.1.1.service

	/**
     * 根据商品 ID 查询商品，商品分类，商品描述，商品规格参数
     * @param itemId
     * @return
     */
    @Override
    public Map<String, Object> preUpdateItem(Long itemId) {
        Map<String, Object> map = new HashMap<>();
        //根据商品 ID 查询商品
        TbItem item = this.tbItemMapper.selectByPrimaryKey(itemId);
        map.put("item", item);
        //根据商品 ID 查询商品描述
        TbItemDesc itemDesc = this.tbItemDescMapper.selectByPrimaryKey(itemId);
        map.put("itemDesc", itemDesc.getItemDesc());
        //根据商品 ID 查询商品类目
        TbItemCat itemCat = this.tbItemCatMapper.selectByPrimaryKey(item.getCid());
        map.put("itemCat", itemCat.getName());
        //根据商品 ID 查询商品规格信息
        TbItemParamItemExample example = new TbItemParamItemExample();
        TbItemParamItemExample.Criteria criteria = example.createCriteria();
        criteria.andItemIdEqualTo(itemId);
        List<TbItemParamItem> list = 
            this.tbItemParamItemMapper.selectByExampleWithBLOBs(example);
        if (list != null && list.size() > 0) {
            map.put("itemParamItem", list.get(0).getParamData());
        }
        return map;
    }

2.5.1.1.2.controller

    /**
     * 根据商品 ID 查询商品，商品分类，商品描述，商品规格参数
     * @param itemId
     * @return
     */
    @RequestMapping("/preUpdateItem")
    public Map<String,Object> preUpdateItem(Long itemId){
        return this.itemService.preUpdateItem(itemId);
    }

2.5.1.2.usian_item_feign

2.5.1.2.1.feign

    @RequestMapping("/service/item/preUpdateItem")
    Map<String,Object> preUpdateItem(@RequestParam("itemId") Long itemId);

2.5.1.3.usian_item_web

2.5.1.3.1.controller

    /**
     * 根据itemId回显商品信息
     * @param itemId
     * @return
     */
    @RequestMapping("/preUpdateItem")
    public Result preUpdateItem(Long itemId){
        Map<String,Object> map = itemServiceFeign.preUpdateItem(itemId);
        if(map.size()>0){
            return Result.ok(map);
        }
        return Result.error("查无结果");
    }

2.5.1.4.测试

在这里插入图片描述

2.5.2.商品修改

作业

2.6.商品删除

作业

归暔山

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
day02后台管理页面

学习目标搭建后台管理界面商品管理1.搭建后台管理界面1.1.认识Vue1.1.1.Vue介绍 Vue (读音 /vjuː/，类似于 view) 是是一套用于构建用户界面的前端框架，使用Vue可以快速搭建一个在运行在node上的Vue项目。1.1.2.Node介绍 Node.js是一个在浏览器外执行JavaScript语言的环境，就好比JRE是Java的运行环境。1.1.3.NPM介绍使用node开发还可以使用配套的npm包管理工具，npm是Node.js的包管理工具，能解决N
复制链接

扫一扫