web/vue-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增商品编辑

Browse Source
This commit is contained in:
zhuyijun 2022-02-20 18:57:29 +08:00
parent 5d78db5efb
commit cfc6241383
13 changed files with 656 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
babel.config.js
View File

@ -1,14 +1,27 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
]
]
/*
* @Description:
* @Version: 1.0
* @Autor: zhuyijun
* @Date: 2021-11-21 14:34:40
* @LastEditTime: 2022-02-17 14:29:22
*/
//项目发布阶段需要用到的babel 插件
const prodPlugins = []
if (process.env.NODE_ENV === 'production') {
prodPlugins.push('transform-remove-console')
}
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'component',
{
libraryName: 'element-ui',
styleLibraryName: 'theme-chalk'
}
],
...prodPlugins
]
}

24
package-lock.json generated
View File

@ -12,6 +12,7 @@
"echarts": "^5.3.0",
"element-ui": "^2.15.7",
"mime": "^2.6.0",
"nprogress": "^0.2.0",
"quill": "^1.3.7",
"quill-image-drop-module": "^1.0.3",
"quill-image-resize-module": "^3.0.0",
@ -28,6 +29,7 @@
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"babel-plugin-component": "^1.1.1",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
@ -3581,6 +3583,12 @@
"@babel/core": "^7.0.0-0"
}
},
"node_modules/babel-plugin-transform-remove-console": {
"version": "6.9.4",
"resolved": "https://registry.npmmirror.com/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz",
"integrity": "sha512-88blrUrMX3SPiGkT1GnvVY8E/7A+k6oj3MNvUtTIxJflFzXTw1bHkuJ/y039ouhFMp2prRn5cQGzokViYi1dsg==",
"dev": true
},
"node_modules/babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.nlark.com/babel-runtime/download/babel-runtime-6.26.0.tgz",
@ -10926,6 +10934,11 @@
"node": ">=4"
}
},
"node_modules/nprogress": {
"version": "0.2.0",
"resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz",
"integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
},
"node_modules/nth-check": {
"version": "2.0.1",
"resolved": "https://registry.nlark.com/nth-check/download/nth-check-2.0.1.tgz",
@ -19913,6 +19926,12 @@
"@babel/helper-define-polyfill-provider": "^0.3.0"
}
},
"babel-plugin-transform-remove-console": {
"version": "6.9.4",
"resolved": "https://registry.npmmirror.com/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz",
"integrity": "sha512-88blrUrMX3SPiGkT1GnvVY8E/7A+k6oj3MNvUtTIxJflFzXTw1bHkuJ/y039ouhFMp2prRn5cQGzokViYi1dsg==",
"dev": true
},
"babel-runtime": {
"version": "6.26.0",
"resolved": "https://registry.nlark.com/babel-runtime/download/babel-runtime-6.26.0.tgz",
@ -25295,6 +25314,11 @@
"path-key": "^2.0.0"
}
},
"nprogress": {
"version": "0.2.0",
"resolved": "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz",
"integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
},
"nth-check": {
"version": "2.0.1",
"resolved": "https://registry.nlark.com/nth-check/download/nth-check-2.0.1.tgz",

2
package.json
View File

@ -13,6 +13,7 @@
"echarts": "^5.3.0",
"element-ui": "^2.15.7",
"mime": "^2.6.0",
"nprogress": "^0.2.0",
"quill": "^1.3.7",
"quill-image-drop-module": "^1.0.3",
"quill-image-resize-module": "^3.0.0",
@ -29,6 +30,7 @@
"@vue/eslint-config-standard": "^5.1.2",
"babel-eslint": "^10.1.0",
"babel-plugin-component": "^1.1.1",
"babel-plugin-transform-remove-console": "^6.9.4",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",

47
public/index.html
View File

@ -1,17 +1,50 @@
<!--
* @Description:
* @Version: 1.0
* @Autor: zhuyijun
* @Date: 2021-11-21 14:34:40
* @LastEditTime: 2022-02-20 16:46:50
-->
<!DOCTYPE html>
<html lang="">
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<title><%= htmlWebpackPlugin.options.isProd ? '' :'dev - ' %> <%= htmlWebpackPlugin.options.title %></title>
<!-- nprogress 的样式表 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />
<!-- element-ui 的 js 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.7/theme-chalk/index.css">
</link>
<!-- 富文本编辑器 -->
<link href="https://cdn.quilljs.com/1.3.7/quill.core.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.7/quill.bubble.css" rel="stylesheet">
<!-- 富文本编辑器的 js 文件 -->
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
<!-- 其他 -->
<script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/3.2.0/vue-router.min.js"></script>
<script src="https://cdn.staticfile.org/axios/0.24.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
<script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>
<!-- element-ui 的 js 文件 -->
<script src="https://cdn.staticfile.org/element-ui/2.15.7/index.js"></script>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
</body>
</html>

369
src/components/goods/Edit.vue Normal file
View File

@ -0,0 +1,369 @@
<!--
* @Description:
* @Version: 1.0
* @Autor: zhuyijun
* @Date: 2021-11-29 22:13:51
* @LastEditTime: 2022-02-20 18:54:19
-->
<template>
<div>
<!-- 面包屑导航区 -->
<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 :to="{path:'/goods'}">商品列表</el-breadcrumb-item>
<el-breadcrumb-item>编辑商品</el-breadcrumb-item>
</el-breadcrumb>
<!-- 卡片区 -->
<el-card>
<!-- 提示区域 -->
<el-alert title="添加商品信息"
center
show-icon
:closable="false"
type="info">
</el-alert>
<!-- 步骤条 -->
<el-steps :space="200"
:active="activeIndex - 0"
finish-status="success"
align-center>
<el-step title="基本信息"></el-step>
<el-step title="商品参数"></el-step>
<el-step title="商品属性"></el-step>
<el-step title="商品图片"></el-step>
<el-step title="商品内容"></el-step>
<el-step title="完成"></el-step>
</el-steps>
<el-form :model="editForm"
:rules="editFormRules"
ref="editFormRef"
label-width="100px"
label-position="top">
<!-- tab栏区域 -->
<el-tabs v-model="activeIndex"
:tab-position="tabPosition"
:before-leave="beforeTabLeave"
@tab-click="tabClicked">
<el-tab-pane label="基本信息"
name="0">
<el-form-item label="商品名称"
prop="goods_name">
<el-input v-model="editForm.goods_name"></el-input>
</el-form-item>
<el-form-item label="商品价格"
prop="goods_price">
<el-input v-model="editForm.goods_price"></el-input>
</el-form-item>
<el-form-item label="商品重量"
prop="goods_weight">
<el-input v-model="editForm.goods_weight"></el-input>
</el-form-item>
<el-form-item label="商品数量"
prop="goods_number">
<el-input v-model="editForm.goods_number"></el-input>
</el-form-item>
<el-form-item label="商品分类"
prop="goods_cat">
<el-cascader v-model="editForm.goods_cat"
:options="cateList"
:props="cateProps"
@change="handleChange"></el-cascader>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="商品参数"
name="1">
<!-- 渲染表单的Item项 -->
<el-form-item v-for="item in manyTableData"
:key="item.attr_id+''"
:label="item.attr_name">
<el-checkbox-group v-model="item.attr_vals">
<el-checkbox :label="cb"
v-for="(cb, i) in item.attr_vals"
:key="i+''"></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="商品属性"
name="2">
<!-- 渲染表单的Item项 -->
<el-form-item v-for="item in onlyTableData"
:key="item.attr_id +''"
:label="item.attr_name">
<el-input v-model="item.attr_vals"></el-input>
</el-form-item>
</el-tab-pane>
<el-tab-pane label="商品图片"
name="3">
<!-- 上传图片
action： 表示上传api地址
list-type: 指定预览组件呈现方式
-->
<el-upload :action="uploadURL"
:on-preview="handlePreview"
:on-remove="handleRemove"
list-type="picture"
:headers="headerObj"
:on-success="handleSuccess"
v-model="editForm.pics">
<el-button size="small"
type="primary">点击上传</el-button>
</el-upload>
</el-tab-pane>
<el-tab-pane label="商品内容"
name="4">
<!-- 富文本编辑器 -->
<quill-editor v-model="editForm.goods_introduce">
</quill-editor>
<!-- <editor v-model="editForm.goods_introduce"
:upload-url='uploadURL'></editor> -->
</el-tab-pane>
<el-tab-pane label="完成"
name="5">
<!-- 添加商品按钮 -->
<el-button type="primary"
class="btnedit"
@click="edit">编辑商品</el-button>
</el-tab-pane>
</el-tabs>
</el-form>
</el-card>
<el-dialog title="图片预览"
:visible.sync="previewVisible"
width="75%"
@close="previewClosed">
<img :src="previewPath"
class="previewImg">
</el-dialog>
</div>
</template>
<script>
// import editor from '../markdown/markdown.vue'
export default {
components: {
// editor
},
data () {
return {
activeIndex: 0,
tabPosition: 'left',
editForm: {
goods_id: '',
goods_name: '',
goods_price: 0,
goods_weight: 0,
goods_number: 0,
//商品所属分类数组
goods_cat: [],
// 图片数组
pics: [],
//商品详情描述
goods_introduce: '',
attrs: []
},
editFormRules: {
goods_name: [
{ required: true, message: '请输入商品名称', trigger: 'blur' }
],
goods_price: [
{ required: true, message: '请输入商品价格', trigger: 'blur' }
],
goods_weight: [
{ required: true, message: '请输入商品重量', trigger: 'blur' }
],
goods_number: [
{ required: true, message: '请输入商品数量', trigger: 'blur' }
],
goods_cat: [
{ required: true, message: '请选择商品分类', trigger: 'blur' }
]
},
cateList: [],
cateProps: {
expandTrigger: 'hover',
label: 'cat_name',
value: 'cat_id',
children: 'children'
},
manyTableData: [],
onlyTableData: [],
// 上传图片的url地址
uploadURL: 'http://localhost:8888/api/private/v1/upload',
headerObj: {
Authorization: window.localStorage.getItem('token')
},
previewPath: '',
previewVisible: false,
quillOption: {
}
}
},
created () {
const id = this.$route.query.id
if (id) {
this.editForm.goods_id = id
}
this.getCateList()
this.getGoodById(id)
},
methods: {
async getCateList () {
const { data: res } = await this.$http.get('categories')
if (res.meta.status !== 200) {
this.$message.error(res.meta.msg)
}
this.cateList = res.data
// console.log(res.data)
},
//TODO 商品分类回显代写
//递归设置分类
handlerCate (list, id) {
}
,
async getGoodById (id) {
const { data: res } = await this.$http.get(`goods/${id}`)
if (res.meta.status !== 200) {
this.$message.error(res.meta.msg)
}
// console.log(res.data)
this.editForm = res.data
},
handleChange () {
if (this.editForm.goods_cat.length !== 3) {
this.editForm.goods_cat.length = []
this.$message.info('请选择三级分类')
}
},
// 监听标签切换
beforeTabLeave (activeName, oldActiveName) {
if (oldActiveName === '0' && this.editForm.goods_cat.length !== 3) {
this.$message.error('请选择商品分类')
return false
}
return true
},
async getManyAttribute () {
const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
params: { sel: 'many' }
})
if (res.meta.status !== 200) {
this.$message.error(res.meta.msg)
}
res.data.forEach(item => {
let vals = item.attr_vals
item.attr_vals = vals.length === 0 ? [] : vals.split(' ')
})
this.manyTableData = res.data
},
async getOnlyAttribute () {
const { data: res } = await this.$http.get(`categories/${this.cateId}/attributes`, {
params: { sel: 'only' }
})
if (res.meta.status !== 200) {
this.$message.error(res.meta.msg)
}
// res.data.forEach(item => {
// let vals = item.attr_vals
// item.attr_vals = vals.length === 0 ? [] : vals.split(' ')
// })
this.onlyTableData = res.data
// console.log(res.data)
},
tabClicked () {
switch (this.activeIndex) {
case '1':
this.getManyAttribute()
break
case '2':
this.getOnlyAttribute()
break
case '3': break
case '4': break
default:
}
},
// 处理图片预览效果
handlePreview (file) {
this.previewPath = file.response.data.url
this.previewVisible = true
},
// 处理已出图片操作
handleRemove (file) {
// 1、获取将要删除的图片的临时路径
const filePath = file.response.data.tmp_path
// 2、从pics素组中，找到这个图片的索引值
const i = this.editForm.pics.findIndex(item => item.pic === filePath)
// 3、调用数组的splice方法，把图片信息对象，从pics数组中移除
this.editForm.pics.splice(i, 1)
},
// 监听上传成功的事件
handleSuccess (response) {
//1、拼接得到一个图片信息对象
const picInfo = { pic: response.data.tmp_path }
// 2、将图片信息对象 push到pics数组中
this.editForm.pics.push(picInfo)
},
previewClosed () {
this.previewPath = ''
},
// 编辑商品函数
edit () {
this.$refs.editFormRef.validate(async (valid) => {
if (!valid) return this.$message.error('请填写必要的表单项！')
// 深拷贝
let form = JSON.parse(JSON.stringify(this.editForm))
form.goods_cat = form.goods_cat.join(',')
// 处理动态参数
this.manyTableData.forEach(item => {
const attrInfo = {
attr_id: item.attr_id,
attr_value: item.attr_vals.join(' ')
}
form.attrs.push(attrInfo)
})
// 处理静态属性
this.onlyTableData.forEach(item => {
const attrInfo = {
attr_id: item.attr_id,
attr_value: item.attr_vals
}
form.attrs.push(attrInfo)
})
// 商品名称唯一
// 执行添加逻辑
const { data: res } = await this.$http.put(`goods/${form.goods_id}`, form)
if (res.meta.status !== 201) {
this.$message.error(res.meta.msg)
}
this.$message.success(res.meta.msg)
})
}
},
computed: {
cateId () {
if (this.editForm.goods_cat.length === 3) {
return this.editForm.goods_cat[2]
}
return null
}
}
}
</script>
<style lang="less" scoped>
.el-checkbox {
margin: 0 10px 0 0 !important;
}
.previewImg {
width: 100%;
}
.btnedit {
margin-top: 15px;
}
</style>

9
src/components/goods/GoodsList.vue
View File

@ -3,7 +3,7 @@
* @Version: 1.0
* @Autor: zhuyijun
* @Date: 2021-11-28 15:48:07
* @LastEditTime: 2021-11-29 22:13:11
* @LastEditTime: 2022-02-20 17:14:17
-->
<template>
<div>
@ -73,7 +73,8 @@
<template slot-scope="scope">
<el-button type="primary"
icon="el-icon-edit"
size="mini">编辑</el-button>
size="mini"
@click="goEditPage(scope.row.goods_id)">编辑</el-button>
<el-button type="danger"
icon="el-icon-delete"
size="mini"
@ -146,6 +147,10 @@ export default {
// 路由转跳
goAddPage () {
this.$router.push('/goods/add')
},
// 路由转跳
goEditPage (goods_id) {
this.$router.push({ path: '/goods/edit', query: { id: goods_id } })
}
},
computed: {

6
src/components/order/Order.vue
View File

@ -3,7 +3,7 @@
* @Version: 1.0
* @Autor: zhuyijun
* @Date: 2021-12-04 16:09:03
* @LastEditTime: 2022-02-11 14:57:46
* @LastEditTime: 2022-02-20 18:56:47
-->
<template>
<div>
@ -64,7 +64,7 @@
<el-button type="primary"
size="mini"
icon="el-icon-edit"
@click="showBox"></el-button>
@click="showBox(scope.row)"></el-button>
<el-button type="success"
size="mini"
icon="el-icon-location"
@ -199,7 +199,7 @@ export default {
this.getOrderList()
},
//展示修改地址的对话框
showBox () {
showBox (row) {
this.addressVisible = true
},
addressDialogClosed () {

63
src/components/report/Report.vue
View File

@ -3,7 +3,7 @@
* @Version: 1.0
* @Autor: zhuyijun
* @Date: 2022-02-11 15:01:12
* @LastEditTime: 2022-02-11 18:19:50
* @LastEditTime: 2022-02-17 13:38:10
-->
<template>
<div>
@ -15,7 +15,8 @@
</el-breadcrumb>
<el-card>
<div id="main">
<div id="main"
style="width: 750px;height:400px;">
</div>
</el-card>
@ -24,37 +25,55 @@
<script>
// 导入echarts
import * as echarts from 'echarts'
import _ from 'lodash'
export default {
data () {
return {
options: {
title: {
text: '用户来源'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#E9EEF3'
}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
boundaryGap: false
}
],
yAxis: [
{
type: 'value'
}
]
}
}
},
//执行到mounted函数，此时页面上的元素已经渲染好了
mounted () {
async mounted () {
//3. 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'))
//4. 准备数据和配置项
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
const { data: res } = await this.$http.get('reports/type/1')
if (res.meta.status !== 200) {
return this.$message.error(res.meta.msg)
}
//4. 准备数据和配置项
const result = _.merge(this.options, res.data)
//5. 绘制图表
myChart.setOption(option)
myChart.setOption(result)
}
}
</script>

67
src/main-dev.js Normal file
View File

@ -0,0 +1,67 @@
/*
* @Description:
* @Version: 1.0
* @Autor: zhuyijun
* @Date: 2021-11-21 23:56:19
* @LastEditTime: 2022-02-17 15:39:27
*/
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// import './plugins/element.js'
// 导入全局样式表
import './assets/css/global.css'
// 导入字体图标
// import './assets/fonts/iconfont.css'
// 插件
import TreeTable from 'vue-table-with-tree-grid'
// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// 导入富文本编辑器对应的样式
// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
import axios from 'axios'
//导入NProgress
import NProgress from 'nprogress'
// import 'nprogress/nprogress.css'
//在request 拦截器中 展示进度条 NProgress.start()
// 拦截器 设置请求头中的token
axios.interceptors.request.use(config => {
// console.log(config)
NProgress.start()
// 预处理将session中的token放入 请求头中
config.headers.Authorization = window.localStorage.getItem('token')
return config
})
axios.interceptors.response.use(config => {
NProgress.done()
return config
})
//在request 拦截器中 隐藏进度条 NProgress.done()
// 配置请求根路径
axios.defaults.baseURL = 'http://localhost:8888/api/private/v1'
Vue.prototype.$http = axios
Vue.config.productionTip = false
Vue.component('tree-table', TreeTable)
// 全局过滤器
Vue.filter('dateFormat', function (originVal) {
const dt = new Date(originVal)
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0')
const d = (dt.getDate() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})
// 将富文本编辑器注册为全局可用的编辑器
Vue.use(VueQuillEditor)
new Vue({
router,
render: h => h(App)
}).$mount('#app')

15
src/main.js → src/main-prod.js
View File

@ -3,12 +3,12 @@
* @Version: 1.0
* @Autor: zhuyijun
* @Date: 2021-11-21 23:56:19
* @LastEditTime: 2021-12-06 18:20:07
* @LastEditTime: 2022-02-17 15:40:34
*/
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
// import './plugins/element.js'
// 导入全局样式表
import './assets/css/global.css'
// 导入字体图标
@ -23,13 +23,24 @@ import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import axios from 'axios'
//导入NProgress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
//在request 拦截器中 展示进度条 NProgress.start()
// 拦截器 设置请求头中的token
axios.interceptors.request.use(config => {
// console.log(config)
NProgress.start()
// 预处理将session中的token放入 请求头中
config.headers.Authorization = window.localStorage.getItem('token')
return config
})
axios.interceptors.response.use(config => {
NProgress.done()
return config
})
//在request 拦截器中 隐藏进度条 NProgress.done()
// 配置请求根路径
axios.defaults.baseURL = 'http://localhost:8888/api/private/v1'
Vue.prototype.$http = axios

7
src/router/index.js
View File

@ -3,7 +3,7 @@
* @Version: 1.0
* @Autor: zhuyijun
* @Date: 2021-11-21 23:56:19
* @LastEditTime: 2022-02-11 15:03:09
* @LastEditTime: 2022-02-20 16:58:20
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
@ -17,6 +17,7 @@ import Cate from '../components/goods/Cate.vue'
import Params from '../components/goods/Params.vue'
import GoodsList from '../components/goods/GoodsList.vue'
import Add from '../components/goods/Add.vue'
import Edit from '../components/goods/Edit.vue'
import Order from '../components/order/Order.vue'
import Report from '../components/report/Report.vue'
@ -73,6 +74,10 @@ const routes = [
path: '/goods/add',
component: Add
},
{
path: '/goods/edit',
component: Edit
},
{
path: '/orders',
component: Order

50
vue.config.js
View File

@ -1,3 +1,49 @@
/*
* @Description:
* @Version: 1.0
* @Autor: zhuyijun
* @Date: 2022-02-17 14:34:36
* @LastEditTime: 2022-02-20 16:43:39
*/
module.exports = {
lintOnSave: false
}
chainWebpack: config => {
//发布模式
config.when(process.env.NODE_ENV === 'production', config => {
config.entry('app').clear().add('./src/main-prod.js')
//通过 externals 加载外部cdn资源
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
config.plugin('html').tap(args => {
args[0].isProd = true
return args
})
})
//开发模式
config.when(process.env.NODE_ENV === 'development', config => {
config.entry('app').clear().add('./src/main-dev.js')
//通过 externals 加载外部cdn资源
config.set('externals', {
vue: 'Vue',
'vue-router': 'VueRouter',
axios: 'axios',
lodash: '_',
echarts: 'echarts',
nprogress: 'NProgress',
'vue-quill-editor': 'VueQuillEditor'
})
config.plugin('html').tap(args => {
args[0].isProd = false
return args
})
})
},
lintOnSave: false
}

10
yarn.lock
View File

@ -1986,6 +1986,11 @@
dependencies:
"@babel/helper-define-polyfill-provider" "^0.3.0"
"babel-plugin-transform-remove-console@^6.9.4":
"integrity" "sha512-88blrUrMX3SPiGkT1GnvVY8E/7A+k6oj3MNvUtTIxJflFzXTw1bHkuJ/y039ouhFMp2prRn5cQGzokViYi1dsg=="
"resolved" "https://registry.npmmirror.com/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz"
"version" "6.9.4"
"babel-runtime@6.x":
"integrity" "sha1-llxwWGaOgrVde/4E/yM3vItWR/4="
"resolved" "https://registry.nlark.com/babel-runtime/download/babel-runtime-6.26.0.tgz"
@ -6122,6 +6127,11 @@
dependencies:
"path-key" "^3.0.0"
"nprogress@^0.2.0":
"integrity" "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
"resolved" "https://registry.npmmirror.com/nprogress/-/nprogress-0.2.0.tgz"
"version" "0.2.0"
"nth-check@^1.0.2":
"integrity" "sha1-sr0pXDfj3VijvwcAN2Zjuk2c8Fw="
"resolved" "https://registry.nlark.com/nth-check/download/nth-check-1.0.2.tgz"