【HAPPY项目总结】

最新推荐文章于 2024-07-19 10:30:06 发布

m0_63902151

最新推荐文章于 2024-07-19 10:30:06 发布

阅读量156

点赞数

文章标签： vue.js elementui vue

本文链接：https://blog.csdn.net/m0_63902151/article/details/125105980

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
1、element-ui全局引入和按需引入
2、axios的二次封装
3、设置代理跨域
4、栅格布局
5、商品管理页面的一些功能（上架下架、查看、编辑、添加）
6、其他

前言

提示：以下是本篇文章正文内容，下面案例可供参考

项目总结：

1、element-ui全局引入和按需引入

一般我们在写项目的时候先搭建搭建项目，然后下载一些插件比如axios、element-ui、
也需要在mine.js中引入一些东西
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);
这是全局引入，同样也有按需引入
首先，安装插件：

cnpm install babel-plugin-component -D

将 .babelrc 修改为：
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
	[
	"component",
	{
		"libraryName": "element-ui",
		"styleLibraryName": "theme-chalk"
	}
	]
]
}

页面中引入、
import { Button, Select } from ‘element-ui’;
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
或写为
Vue.use(Button)
Vue.use(Select)

但我没用，我用的是全局引入。

2、axios的二次封装

创建一个utils的文件夹在里面再创建一个request.js文件和一个http.js文件，在request.js文件中引入axios然后写基本路径和延迟时间如果需要的话，
再配置请求拦截器和响应拦截器，在对axios进行二次封装
封装成一个公共的函数公布出来函数返回一个promise对象在promise对象resolve返回接口数据
utils目录下 request.js 中引入 import axios from “axios”

axios的二次封装封装成一个公共的函数公布出来函数返回一个promise对象
const service = axios.create({
baseURL:‘/api’,
timeout:3000
})

// axios拦截器请求拦截响应拦截
service.interceptors.request.use((config) =>{
// // 判断登录成功请求头中添加token
if (store.getters.token) {
// // 让每个请求携带token-- [‘Token’]为自定义key 请根据实际情况自行修改
config.headers[‘token’]
}
return config
})
service.interceptors.response.use((config) =>{
//响应拦截的具体逻辑

return config

})

// 封装成一个公共的函数公布出来函数返回一个promise对象
// params 是形参对象接收的是实参-对象
let Request = (params) =>{
// console.log(params)
return new Promise((resolve,reject) =>{

	// axios({
	//     url: baseURL+url,
	//     method: "get" || "post" ,
	//     // get传参
	//     params:{
	//         username:"admin",
	//         passwrod:"admin"
	//     },
	//     //post传参
	//     data:{
	//         username:"admin",
	//         passwrod:"admin"
	//     }
	// })

	service({
		...params //es6中对象解构赋值   
	}).then((res) =>{
		// console.log(res)
		resolve(res)
	}).catch((err) =>{
		reject(err)
	})

})

}

export { Request}
，然后导出。在http.Js文件中引入request.js文件用然后用
export const login=(obj)=>Request({
url:“/api/user/login.do”,
method:“post”,
params:obj
})
来请求数据。

3、设置代理跨域

如果想拿到数据登录页面的数据，需要在config里面的index.js文件里设置跨域，用代理来写
proxyTable: {
“/api”:{
target:“http://admintest.happymmall.com/manage”,
changeOrigin:true,
pathRewrite: {
‘^/api’: ‘’
}
}
},
然后再请求数据并会自动存储一个token数据，然后才能请求其他数据，继续写页面

4、栅格布局

我们在写首页的时候可以用栅格布局来写，从而实现自适应它设置了五个响应尺寸，xs、sm、md、lg、和xl来实现，用接口获取到数据然后渲染到首页，三个方块通过：hover再加上transform:scale(1.1,1.1)来实现鼠标放上去缩小和放大。

5、商品管理页面的一些功能（上架下架、查看、编辑、添加）

先布局然后通过接口来获取数据，然后导出、导入，接着渲染页面，

1）写上架下架的功能时

使用telepment标签结合slot-scope使用；当点击上下架按钮时触发一个方法传递scope.row参数,在scope.row参数里面拿到商品的id和状态,然后调用商品上下架接口,在将scope.row中拿到的数据的参数,在传递状态参数时
根据体上要求进行操作,调用成功返回数据重新渲染页面并进行提示。

2）写查看功能时：（路由跳转传参）

在页面通过this.$router.push()跳转页面并传参，将id传过去并拿到数据渲染上去，传参的时候params
可以和name搭配使用也可以和path搭配使用但query传参只能和path搭配使用

3）写编辑的时候（图片上传）

主要还是获取数据找到对应的id进行修改，我写的时候就是id的问题，不过后来找到错误了，再者就是图片上传了，这个图片需要拼接接口在上传图片时要用:element ui上Upload 上传传图片功能,:action绑定要传输图片的地址,然后有一个成功之后的钩子函数,从中获取到图片的url地址赋值给提交图片的参数,点击提交按钮,调用修改商品的接口传递修改后的数据，查看返回的状态,并进行提示;

4）写添加接口时（富文本编辑器）

，就是把要添加的东西参数获取到然后添加，然后就是图片要拼接，富文本编辑器要先下载插件 cnpm install vue-quill-editor --save 然后引入在mine.js中引入全局引入：
// 文件：main.js
import VueQuillEditor from ‘vue-quill-editor’
// require styles 引入样式
// 下面三行必须要写
import ‘quill/dist/quill.core.css’
import ‘quill/dist/quill.snow.css’
import ‘quill/dist/quill.bubble.css’

Vue.use(VueQuillEditor)

在项目中引入：<quill-editor
v-model=“form.detail”
:options=“editorOption”
@change=“onEditorChange($event)”>