尚硅谷-后台管理系统

最新推荐文章于 2024-07-08 23:38:51 发布

菲阿菲

最新推荐文章于 2024-07-08 23:38:51 发布

阅读量1.6k

点赞数 2

分类专栏：尚硅谷文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_49575831/article/details/127794776

版权

尚硅谷专栏收录该内容

2 篇文章 2 订阅

订阅专栏

以下是我遇到的问题，已经一些新了解

一、后台模板

简洁版模板： https://github.com/PanJiaChen/vue-admin-template
加强版模板: https://github.com/PanJiaChen/vue-element-admin

老师用的是简洁版模板

二、登录功能

接口地址：http://39.98.123.211:8170/swagger-ui.html#/

老师把mock数据改成了真实接口数据，按老师说的进行更改即可，我会把我进的坑进行整理

 //配置代理跨域
 proxy: {
   '/dev-api': {
     // 老师这个位置没有加上端口号，我们需要加上###:8170###，要不然会提示没有权限
     target: 'http://39.98.123.211:8170',
     pathRewrite: { '^/dev-api': '' },
   },
 },
},

三、商品管理

接口地址：http://39.98.123.211:8510/swagger-ui.html

注意：商品管理和登录接口地址不一样，因此需要再配置一套地址，相关操作如下

注意：我是2022.11.12开始学习的，如果之后接口改成一样的了就不需要这么配置，如果不一样则需要怎么配置，如果接口用不了，请注意最新接口，并进行相对应的修改即可。

.env.development 文件中增加配置

# base api
VUE_APP_TRADE_API = '/trade-api'

在utils文件下，新建 request-trade.js

复制request.js中的代码，把 baseURL: process.env.VUE_APP_BASE_API, 换成 baseURL: process.env.VUE_APP_TRADE_API,
request-trade.js 完整代码如下：

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'BASE
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
   baseURL: process.env.VUE_APP_TRADE_API, 
   timeout: 5000 
})

// 请求拦截器：携带token字段
service.interceptors.request.use(
config => {
 if (store.getters.token) {
   config.headers['token'] = getToken()
 }
 return config
},
error => {
 console.log(error) // for debug
 return Promise.reject(error)
 }
)
// 响应拦截器
service.interceptors.response.use(
response => {
 const res = response.data
 // 服务器响应失败
 if (res.code !== 20000 && res.code !== 200) {
   Message({
     message: res.message || 'Error',
     type: 'error',
     duration: 5 * 1000
   })
   if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
     MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
       confirmButtonText: 'Re-Login',
       cancelButtonText: 'Cancel',
       type: 'warning'
     }).then(() => {
       store.dispatch('user/resetToken').then(() => {
         location.reload()
       })
     })
   }
   return Promise.reject(new Error(res.message || 'Error'))
 } else {
   // 成功
   return res
 }
},
error => {
 console.log('err' + error) // for debug
 Message({
   message: error.message,
   type: 'error',
   duration: 5 * 1000
 })
 return Promise.reject(error)
 }
)
export default service

api 文件下tradeMark.js，引入的文件修改成
```
import request from '@/utils/request-trade'
```
注意：凡是是用到接口端口号为:8510的引入文件都写成'@/utils/request-trade'

vue.config.js 文件中增加一项代理跨域

'/trade-api': {
    target: 'http://39.98.123.211:8510',
    pathRewrite: { '^/trade-api': '' },
    changeOrigin: true
  }

品牌管理

添加品牌功能

收集LOGO图片这里需要注意action的写法，写法如下

// 老师写的是 "dev-api" ，但是我们这里用到的是另一个接口，所有需要进行更改
// "dev-api" 具体换成什么，取决你自己怎么改的，如果按照我写的，就换成 "trade-api"
action="/trade-api/admin/product/fileUpload"

四、深度选择器

scope作用

加上scoped属性，相当于当前子组件的结构中都加上了一个data-v-xxx自定义属性【因此，vue是通过属性选择器，给元素添加样式】

作用：样式只对于当前组件有用
子组件的根节点：拥有与父组件一样的自定义属性

如果子组件的根节点和父组件书写的样式相同，也会添加相应的样式

// 父组件
<template>
	<div>
		<h3>父组件</h3>
   		 // 引入子组件
   		 <child1/>
   		 <child2/>
   	</div>
</template>
<style scoped>
	// 此时加上了scoped，我们当他生成了自定义属性 'data-v-111'
	h3 { color : red }
<style>
// 子组件<child1>代码，此时子组件的根节点为<div> 
// 他的身上自定义属性有两个 1.‘data-v-111’  2.'data-v-222'
// 但是<h3>身上只有一个自定义属性 'data-v-222'，所以父组件的样式不会附加给child1中的<h3>
<template>
	<div>
		<h3>子组件</h3>
   </div>
</template>
     <style scoped>
	// 此时加上了scoped，我们当他生成了自定义属性 'data-v-222'
<style>
// 子组件<child2>代码，此时子组件的根节点为<h3> 
// 他的身上自定义属性有两个 1.‘data-v-111’  2.'data-v-333'
// 所以父组件的样式会附加给child1中的<h3>
<template>
	<h3>子组件</h3>
</template>
     <style scoped>
	// 此时加上了scoped，我们当他生成了自定义属性 'data-v-333'
<style>

深度选择器

如果父组件的样式（scoped），也可以影响子组件的样式。可以实现样式穿透
- 原生css=> >>>
- less=> /deep/
- scss=> ::v-deep

五、数据可视化

1、canvas

canvas画布:是HTML5中新增的一个特性，双闭合标签
canvas标签默认宽度与高度 300 * 150
浏览器认为canvas标签是一张图片
给canvas画布添加文本内容没有任何意义
给canvas标签添加子节点没有任何意义的
你想操作canvas画布：画布当中绘制图形、显示一个文字，都必须通过JS完成
canvas标签的w|h务必通过canvas标签属性width|height设置
```
 <canvas width="600" height="400"></canvas>
```
切记不能通过样式去设置画布的宽度与高度

canvas标签任何操作务必通过JS完成

基本使用

// 通过JS当中"笔"去完成
let canvas = document.querySelector('canvas');
// 获取画布的笔【上下文】
let ctx = canvas.getContext('2d');
// 绘制线段:绘制线段的起点的设置
ctx.moveTo(100,100);
// 其他点的设置：可以有多个
ctx.lineTo(100,200);
ctx.lineTo(200,100);
// 设置图形的填充的颜色
ctx.fillStyle = "red";
ctx.fill();
// 设置线段的颜色与宽度
ctx.strokeStyle = "purple";
ctx.lineWidth="20"
// 可以设置起点与最终的结束点连接在一起
ctx.closePath();
// stroke方法绘制线段
ctx.stroke();

绘制矩形

//绘制矩形第一种方式:参数为x、y、w、h
//这种的矩形没有办法设置填充颜色
ctx.strokeRect(100,200,100,200);
//第二种方式绘制矩形
//填充颜色可以替换
//绘制图形之前设置填充颜色
ctx.fillStyle = 'skyblue';
ctx.fill();
ctx.fillRect(300,200,100,200);

绘制圆形

ctx.beginPath();
//绘制圆形的方法：x、y,r,起始弧度、结束的弧度,是否逆时针绘制
ctx.arc(100,100,50,0,2 * Math.PI,true);
//设置填充颜色
ctx.fillStyle = 'red';
ctx.fill();
//绘制圆形
ctx.stroke();

//绘制一个弧
ctx.beginPath();
ctx.arc(200,200,50,0,1,true);
ctx.stroke();

清除画布与绘制文字

 //获取节点
let canvas = document.querySelector('canvas');
//获取上下文-笔
let ctx = canvas.getContext('2d');
//绘制矩形
ctx.fillRect(100,200,100,200);
//清除画布-整个画布被清除
//ctx.clearRect(0,0,600,400);
//清除部分画布
ctx.clearRect(100,200,50,100);
//设置文字大小
ctx.font="20px 微软雅黑";
ctx.fillStyle ='red';
//绘制文字
ctx.fillText("数据可视化",50,20);

绘制柱状图

//获取节点
let canvas = document.querySelector('canvas');
//获取上下文
let ctx = canvas.getContext('2d');
//绘制文本--左上角的文本
ctx.font="16px 微软雅黑";
ctx.fillText('数据可视化',50,80);
//绘制线段
ctx.moveTo(100,100);
ctx.lineTo(100,400);
ctx.lineTo(700,400);
ctx.stroke();

//绘制其他的线段
ctx.moveTo(100,100);
ctx.lineTo(700,100);
ctx.fillText('150',70,110);

ctx.moveTo(100,160);
ctx.lineTo(700,160);
ctx.fillText('120',70,170);

ctx.moveTo(100,220);
ctx.lineTo(700,220);
ctx.fillText('90',70,230);

ctx.moveTo(100,280);
ctx.lineTo(700,280);
ctx.fillText('60',70,290);

ctx.moveTo(100,340);
ctx.lineTo(700,340);
ctx.fillText('30',70,350);
ctx.fillText('0',70,400);
ctx.stroke();
//绘制水平轴底部的线段
ctx.moveTo(250,400);
ctx.lineTo(250,410);
//底部的文字
ctx.fillText('食品',170,415);

ctx.moveTo(400,400);
ctx.lineTo(400,410);
ctx.fillText('数码',310,415);
ctx.moveTo(550,400);
ctx.lineTo(550,410);
ctx.fillText('服饰',450,415);
ctx.fillText('箱包',600,415);
ctx.stroke();

//绘制矩形
ctx.fillStyle = 'red';
ctx.fillRect(120,200,100,200)

2、SVG

<svg>包裹并定义整个矢量图。
<svg> 标签之于矢量图就如同标签之于一个 web 页面。
<svg> 双闭合标签：默认宽度与高度300 * 150
<svg> 绘制图形务必在svg标签内部使用绘制图形

<line> 创建一条直线。

 <svg class="box">
      <!-- x1 y1第一个点的坐标  x2 y2 第二个点的坐标 -->
      <line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
 </svg>

<polyline> 创建折线。

 <svg class="box">
     <!-- 绘制折线:可以多个点，多个点的时候，最好带有逗号 -->
     <polyline points="300 300, 50 100, 120 400,20,20" fill-opacity="0" stroke="cyan"></polyline>
 </svg>

<rect> 创建矩形。

<svg class="box">
    <!-- fill属性：设置填充颜色的  fill-opacity设置填充颜色的透明度  stroke：线的颜色 -->
    <rect x="400" y="400" width="150" height="50" fill="pink"></rect>
</svg>

<circle> 创建圆。

<svg class="box">
     <!-- 绘制圆形 -->
	 <circle cx='370' cy='95' r='50' style='stroke:cyan; fill:none'></circle>
</svg>

<ellipse> 创建圆和椭圆。

<svg class="box">
    <!-- 绘制圆形|椭圆 -->
    <ellipse cx="500" cy="500" rx="100" ry="50" style="fill:black;"></ellipse>
</svg>

<polygon> 创建多边形。

<svg class="box">
     <!-- 多边行 -->
     <polygon points="600 100, 300 400, 750 100" stroke="red" fill-opacity="0" />
</svg>

<path> 通过指定点以及点和点之间的线来创建任意形状。

<svg class="box">
     <!-- 绘制任意图形 -->
     <path fill-opacity="0" stroke="skyblue" d="
       M 10  10
   	   L 20 400
       L 30 120
 	   L 40 66
       L 50 99
       L 60 120
       L 70 99
       Z
    "></path>
</svg>

3、ECharts

一个基于 JavaScript 的开源可视化图表库

项目引入ECharts

老师引入方法 import echarts from 'echarts'
可是是之前的用法，我这么引入是引入不了的，像我一样的小伙伴，可以用下的的方法引入
```
import * as echarts from 'echarts'
```

六、mock数据

问题一

 跟着老师操作完，我发现登录报错，显示 `timeout of 5000ms exceeded`。
 于是我去扒了源码，不知道是我遗漏了，还是老师改了没发。
 他把 vue.config.js 文件中开启mock数据的代码注释掉了。
 如下代码，去掉就可以正常登陆了

   // mock 数据
   // before: require('./mock/mock-server.js')

问题二

报错404，显示找不到地址

=>>> 解决办法:
在main.js 中加上下面代码

if (process.env.NODE_ENV === 'development') {
   const { mockXHR } = require('../mock')
   mockXHR()
}

菲阿菲

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
6
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录