学习目标
- 搭建后台管理界面
- 商品管理
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/
课程中采用的是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("查无结果");
}
2.1.5.测试
修改vue.config.js
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yBUTf94l-1615949993547)(assets\1586857270055.png)]
测试结果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qqM1rPIf-1615949993548)(assets\1586837918910.png)]
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);
for (int i = 0; i < tbItemList.size(); i++) {
TbItem tbItem = tbItemList.get(i);
tbItem.setPrice(tbItem.getPrice()/100);
}
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.测试
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("查无结果");
}